hexo+github搭建博客心历路程

前言

今天突然回想起来以前在GitHub上创建的一个仓库,本来是想着以后写博客的时候都把数据同步上去,但是,今天尝试了一次,发现步骤稍显复杂,

  1. 我先把项目clone到了本地
  2. 创建了一个新的文件夹,在新的文件夹中,我新建了一个HTML文件
  3. 修改了项目中的index.html文件,新建一个a标签,地址链接到该目录下新建文件夹中的html文件上。
  4. 运行,发现一堆乱码(原来,我使用的是markdown语法,然后写在了html文件中。。实力脑残了一波。。)
  5. 因此,我就修改了index.html中a标签链接的地址(本来为xxx.html,然后改成了xxx.md)
  6. 然后,还是一堆乱码(等我测试了解了一圈之后,重新刷新,其实已经可以看见markdown语法已经有点效果了,但是,还是显示的不太好。)


    这里写图片描述

对策
然后,我在网上找了一些方法,可以直接在同一时间上传内容,然后修改首页index上的索引。也就是那种用户可以专注于写博客,不用再费心于首页的样式,GitHub上传同步上的问题了
想想是不是很开心呢?

这么以来,

大致来说,就有两种方法实现:

jekyll+Github
Hexo+Github

那么这两种都有什么特点呢?

  1. Jekyll
    采用ruby实现,所以速度上没有JS快
    可以直接使用markdown来编辑文本,
    但是据说不支持本地预览(据说,是据说各位。。放下手中的西瓜刀)
  1. Hexo
    采用Javascript实现,
    可以直接使用markdown来编辑文本,
    配置到GitHub之前,可以先在本地预览

安装方面来说:其实我感觉对于Mac用户来说,几乎都是一样的,
Mac自带的有ruby,所以jekyll可以直接安装。
而Hexo的话,用户需要先自己安装Node.js, 对用我这个安装的有brew的人来说,一行代码的事情:brew install node

另外一点,hexo对多平台多设备支持的没有jekyll好,至于解决方法,我后文再说吧

网上很多人纠结于这两个的选择,我感觉,还是仁者见仁智者见智吧!
这里有一个各种静态网页生成器的比较

本文采用的是Hexo来配置的。

安装步骤

前提:

  1. Hexo官网Github
  2. Git -> 电脑安装xcode
  3. Github客户端 -> brew cask install github-desktop
  4. Node.js -> brew install node
  5. 如果以上都做过了,燃石在执行安装hexo过程中会报错:Failed at the hexo-util@0.6.1 build:highlight script,那么还是老老实实去Node.js官网手动下载安装node.js吧

然后,开始!!

安装Hexo
  1. 首先安装hexo sudo npm install -g hexo
  2. 然后新建一个文件夹,用来存放以后的博客,当做博客的根目录。这里默认为桌面Blog文件夹-> mkdir Blog
  3. cdBlog文件夹,然后使用hexo init来初始化
  4. 初始化完成之后,这个时候其实就已经创建好index.html文件了,此时我们hexo g (hexo generate)来生成静态页面。
  5. hexo s (hexo server)来本地查看页面。
    如果成功你会看到一个静态的你的主页。
    当然,也会失败,我看别人的,是会有失败的情况的, 那么,hexo clean来清理下缓存,重新试下。
新建Github页面

这个应该不用多说:

  1. 登录Github网址,然后登陆,new repository新建仓库
  2. 项目命名为你github昵称+balabala.github.io(最好以.io结尾)
  3. 然后创建,点击当前仓库的setting选项,拉到倒数第二栏Github Pages,修改source栏为master branch, 生成网页
    然后你会在倒数第二栏的上端看到你的博客的地址,记下来!!后面要用到的!!!
关联GitHub,基础Hexo配置

此时我们在~/UserMacName/Desktop/Blog/目录下,然后我们打开该目录下的_config.yml文件进行编辑
翻到最下边,然后改成如下

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/WooNoah/woodi.github.io.git  ###这里填写上面看到的网址.git
  branch: master

注意:
hexo在以前的2.x的版本的时候,type栏写的是github, 升级成3.0版本之后,如果继续写type为github,那么会报错找不到github,因此需要先安装hexo-deployer-git(vim指令为:npm install hexo-deployer-git --save),然后将github修改为git

然后配置博客相关的信息:
_config.yml上面:

# Site
title: Woooodi's Private Zone  ##这个是博客的title
subtitle:
description:
author:  D                 ##你的名字
language: zh-Hans              ##语言
timezone:                      ##时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://woonoah.github.io/woodi.github.io/        ###这里!!!非!常!重!要!! 写上你博客的地址,也就是上面setting栏中,让你记住的那个地址
root: /woodi.github.io                               ###像上面说的,如果你的地址是在子文件夹中,那么root设置下
permalink: :year/:month/:day/:title/
permalink_defaults:

当然,更详细的参数配置都可以在hexo官网上找到

当然,肯定有人是奔着Hexo好看的主题来的,所以,肯定会有人来问,哪里换主题?
首先,给大家一个hexo主题选择的网址,大家各选其好,选一个出来,我使用的是一个名叫next的主题
下载之:
还是cd到Blog根目录,
git clone https://github.com/iissnan/hexo-theme-next themes/next
//新版NextT地址
git clone https://github.com/theme-next/hexo-theme-next themes/next
然后,你就会看到一个theme文件夹,里边放着一个next主题文件

仍然是_config.yml中,拉到最下边:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next    ###这里,可以选择你想要换的主题名称。

当然, 在next文件夹中,也有一个_config.yml文件,我们叫他主题配置文件,而根目录的那个,我们可以叫hexo配置文件
大家不要搞混了

然后,大家就可以按照上面的步骤,修改完毕,

    hexo clean  #先清理,防止有缓存
    hexo g
    hexo s

我们应该就能看到理想的主题了。

如果没有问题,我们就可以使用新的指令
hexo deploy来把本地配置部署到GitHub上了。

笔者,因为没有配置上面url部分,导致多调试了1天
PS,如果不配置上面的URL
则会显示如下

这里写图片描述

另外,
Next模板,存在3中主题组合,

Muse        默认就是这个 
Mist    
Pisces      

只有Pisces支持
sideBar在左边

一些基本路径

文章在 source/_posts,编辑器可以用 Sublime,支持 markdown 语法。如果想修改头像可以直接在主题的 _config.yml 文件里面修改,友情链接,之类的都在这里,修改名字在 public/index.html 里修改,开始打理你的博客吧,有什么问题或者建议,都可以提出来,我会继续完善。

另外加一步美化操作:

hexo next主题下,自动更换背景图片

打开文档下themes\next\source\css\ _custom\custom.styl文件,这个是Next故意留给用户自己个性化定制一些样式的文件,添加以下代码:

/**
   url可更换为自己喜欢的图片的地址。
   repeat:是否重复出现
   attachment:定义背景图片随滚动轴的移动方式
   position:设置背景图像的起始位置。
*/
//https://source.unsplash.com     此网址能获取到随机的图片
body {
    background:url(https://source.unsplash.com/random/1600x900);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    //这一行是设置图片位置的,宽度等宽,高度占整屏的35%
    //background-size:100% 35%;
}

常用的指令

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help  #查看帮助
hexo version  #查看Hexo的版本

附录

这里在补一个Hexo主题站

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容