基于GitHub+Hexo搭建个人博客

这是我的首次尝试，基于GitHub+Hexo 搭建个人博客网站。Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Heroku上。

搭建步骤：

获得个人网站域名

这里推荐：阿里云-为了无法计算的价值 申请入口：域名注册

GitHub创建个人仓库

点击GitHub中的New repository创建新仓库，仓库名应该为：用户名.github.io

安装Hexo

Hexo 的安装和使用都非常便捷。但是，你的计算机环境中必须有这两个东西：

  • Node.js。从官网下载Node.js ，注意安装Node.js会包含环境变量及npm的安装，安装后，在命令行中输入 node -v 及npm -v检测Node.js是否安装成功

  • Git。参考廖雪峰的Git教程，从官网下载Git。安装成功后，将你的Git与GitHub帐号绑定

    其中 Node.js 是 Hexo 的构建引擎，Git 是版本控制工具：

    如果你的环境没有问题的话，那么我们就可以安装 Hexo 了：

    1
    $ npm install hexo-cli -g

    安装完成后，新建一个文件夹作为博客资源的目录，然后：

    1
    2
    3
    4
    $ hexo init blog
    $ cd blog
    $ npm install
    $ hexo server

    不出意外的话，终端中输出这样的结果

    1
    2
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

    那么恭喜，你的博客已经构建成功了！你可以到输出结果指定的地址去访问你的博客了。

推送网站

打开blog根目录的站点配置文件_config.yml，翻到最后修改为：

1
2
3
4
5
deploy:
  type: git
  repo: git@github.com:Zera7ul/Zera7ul.github.io.git
  branch: master
  message:

安装Git部署插件：

1
$ npm install hexo-deployer-git --save

Git部署

1
2
3
$ hexo clean 
$ hexo g 
$ hexo d

部署成功后即可访问https://zera7ul.github.io/

绑定域名

施工中

更换主题

如果你不喜欢Hexo默认的主题，可以更换不同的主题：Themes

发布文章
1
hexo new <title>
其他
部署时保证README.md不被渲染

在Hexo目录下的source根目录下添加一个,README.md。
修改Hexo目录下的_config.yml。
设置skip_render参数的值：skip_render: README.md
保存退出即可。
使用hexo d 命令就不会在渲染 README.md 这个文件了

常用Hexo 命令：
1
2
3
$ npm install hexo -g #安装Hexo
$ npm update hexo -g #升级
$ hexo init #初始化博客
1
2
3
4
5
$ hexo server #Hexo会监视文件变动并自动更新，无须重启服务器
$ hexo server -s #静态模式
$ hexo server -p 5000 #更改端口
$ hexo server -i 192.168.1.1 #自定义 IP
$ hexo clean #清除缓存，若是网页正常情况下可以忽略这条命令

命令简写：

1
2
3
4
$ hexo n <title> == $ hexo new <title> #新建文章
$ hexo g == $ hexo generate #生成博客
$ hexo s == $ hexo server #启动本地服务预览
$ hexo d == $ hexo deploy #部署
个性化设置

施工中

使用图床：

当博文中有图片时，若是少量图片，可以直接把图片存放在source文件夹中，但这显然不合理的，因为图片会占据大量的存储的空间，加载的时候相对缓慢 ，这时考虑把博文里的图片上传到某一网站，然后获得外部链接，使用Markdown语法，![图片信息](外部链接)完成图片的插入，这种网站就被称为图床。常见的简易的图床网站有：贴图库 、新浪微博和 七牛云 ，使用方法可以参看其他文章。

Hexo七牛同步插件

在你的hexo主目录下运行以下命令进行安装：

1
npm install hexo-qiniu-sync --save

添加插件配置信息到 _config.yml 文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#七牛云存储设置
##offline       是否离线. 离线状态将使用本地地址渲染
##sync          是否同步
##bucket        空间名称.
##access_key    上传密钥AccessKey
##secret_key    上传密钥SecretKey
##secret_file   秘钥文件路径，可以将上述两个属性配置到文件内，防止泄露，json格式。绝对路径相对路径均可
##dirPrefix     上传的资源子目录前缀.如设置，需与urlPrefix同步 
##urlPrefix     外链前缀.
##up_host      上传服务器路径,如选择华北区域的话配置为http://up-z1.qiniu.com
##local_dir     本地目录.
##update_exist  是否更新已经上传过的文件(仅文件大小不同或在上次上传后进行更新的才会重新上传)
##image/js/css  子参数folder为不同静态资源种类的目录名称，一般不需要改动
##image.extend  这是个特殊参数，用于生成缩略图或加水印等操作。具体请参考http://developer.qiniu.com/docs/v6/api/reference/fop/image/ 
##              可使用基本图片处理、高级图片处理、图片水印处理这3个接口。例如 ?imageView2/2/w/500 即生成宽度最多500px的缩略图
qiniu:
  offline: false
  sync: true
  bucket: bucket_name
  secret_file: sec/qn.json or C:
  access_key: AccessKey
  secret_key: SecretKey
  dirPrefix: static
  urlPrefix: http://bucket_name.qiniudn.com/static
  up_host: http://upload.qiniu.com
  local_dir: static
  update_exist: true
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css

注意，不要在plugins下面添加hexo-qiniu-sync的配置项，否则会导致错误，详见 https://github.com/gyk001/hexo-qiniu-sync/issues/41#issuecomment-279229378

这里对配置中的几个需要注意的参数进行说明：

  • offline 参数：

如果要使用同步到七牛空间的静态资源，请设置为 false。如果只想浏览在本地的静态资源文件，则设置为 true。

  • sync 参数：

如果你想关掉七牛同步，将此参数设置为false即可，不过一般用不到修改这个参数。

  • dirPrefix 参数：

将资源上传到七牛空间内这个目录下(说是目录会容易理解点)，默认为 static 目录。

  • urlPrefix 参数：

七牛空间地址的前缀，会按默认格式自动生成地址，所以此参数可省略。
默认格式为 http://bucket_name.qiniudn.com/static ，如果你的七牛空间使用自定义域名或域名不是此格式的，请配置此参数。
当你设置了 dirPrefix 参数后，如static。则此url地址必须加上目录后缀 /static ， 即http://bucket_name.qiniudn.com/static，否则静态资源将无法访问。

  • local_dir 参数：

只填写一个目录名称即可，建立在hexo博客的主目录，不需要使用子目录。
当你在配置中填写好文件夹后，运行hexo时，会自动建立对应的目录。
如果你了解hexo文件夹的关系，担心这样会导致离线模式不能查看到图片，我可以告诉你你不需要担心这个问题。
在你以离线模式运行时，会自动使用软连接/联接方式帮你建立文件夹的引用，可以让你的离线浏览节省一倍的空间。

  • update_exist 参数：

如果你的静态文件会进行修改或替换，并需要更新七牛空间上原先上传的文件，则设置为 true 。
是否更新空间上已上传的文件，是按照对比文件大小是否相同或者本地文件在上传到七牛空间之后进行过修改的规则进行判断的。

  • image : extend 参数：

这是个特殊参数，是文章内使用 qnimg 标签引用图片的默认图片处理操作。请参考 七牛开发者中心-图片处理。
可以使用 基本图片处理（imageView2）、高级图片处理（imageMogr2）、图片水印处理（watermark） 这三个图片处理接口，多个接口内容之间用 | 间隔。
例如 ?imageView2/2/w/500 即生成宽度最多500px的缩略图。

Demo

1
{% qnimg test/demo.png title:图片标题 alt:图片说明 'class:class1 class2' extend:?imageView2/2/w/600 %}

将会被渲染成：

1
<img title="图片标题" alt="图片说明" class="class1 class2" src="http://gyk001.u.qiniudn.com/images/test/demo.png?imageView2/2/w/600">

更多使用说明可查看原作者Github：Hexo七牛同步插件

由于使用该插件必须在本地存储图片，且.md引用方式须进行调整，更推荐使用Mpic工具进行上传

Markdown使用
附录

本文主要内容参考https://zhuanlan.zhihu.com/p/26625249