Content Table

Hexo 环境搭建

使用 Hexo 来搭建自己的个人静态博客:

  1. Markdown 写博客
  2. Hexo 生成 HTML
  3. Hexo 发布 HTML 到 Github Pages

既然是静态博客,那么就没有后台了,留言功能可以使用第三方的服务,例如畅言。

Install Node

Hexo 需要 Node

  • Mac 安装 Node,可以使用 Homebrew 安装: brew install node
  • Windows 安装 Node,进入 https://nodejs.org/en/ 下载安装

Node 就是 Node.js

使用 Node 的淘宝镜像

由于网络的问题,访问 Node 的默认仓库有可能会很慢,很多东西都下载不下来,可以使用淘宝的 Node 的镜像,命令行里执行

1
npm install -g cnpm --registry=https://registry.npm.taobao.org

即可,具体可参考 http://npm.taobao.org

Install Github Client

Hexo 和 Github 一起使用就可以搭建一个免费的博客网站

Install Hexo and initialize Pages

1
2
3
4
5
$ npm install hexo-cli -g
$ hexo init Blog
$ cd Blog
$ npm install
$ hexo server

Create a new post

1
$ hexo new "My New Post"

Run server

写好文章后,先在本地看一下效果,如果满意再发布。进入博客目录,运行 hexo server 后浏览器里访问 http://127.0.0.1:4000 就可以了。

Generate static files

1
$ hexo generate

Deploy to git

  • 如你在 Github 的名字为 xtuer,在 Github 创建一个名字为 xtuer.github.io 的仓库 (xtuer 修改为你的 Github 名字)

  • 我们博客的网站地址自动为 http://xtuer.github.io

  • 安装 hexo 的 git 插件

    1
    $ npm install hexo-deployer-git --save
  • Blog/_config.yml 中配置 git

    1
    2
    3
    deploy:
    type: git
    repo: git@github.com:xtuer/xtuer.github.io.git
  • 发布时需要执行下面三条命令

    1
    2
    3
    $ hexo clean
    $ hexo generate
    $ hexo deploy

    注意,有时候发布时会提示你没有权限访问 Github 的仓库,那是因为 ssh 访问需要的验证文件无效了,需要更新一下,最简单的就是用 Github 的客户端先访问一下,然后再发布就可以了

  • 使用上面的命令发布好博客后,访问 http://xtuer.github.io,可以看到我们创建的博客能从网络上访问了

More info: Deployment

Use tag

Tag 是用来对文章进行分类的:

  • One tag: tags: Programming
  • Multi tags: tags: [Programming, Java, Spring]
1
2
3
4
5
---
title: Hexo 环境搭建
date: 2016-04-03 17:49:00
tags: Programming
---

Use image

配置 Blog/_config.yml

1
2
permalink: :title/
post_asset_folder: true

Blog/source 下创建图片的目录,如 img,md 中引用图片

1
![](../img/post-asset.png)

主页显示摘要

在 md 中,摘要内容的后面跟上 <!--more-->,否则主页会显示文章的全部内容

用别名简化命令

1
2
alias hd='hexo clean; hexo generate; hexo deploy'
alias hs='hexo server -g'
  • 本地预览用 hs
  • 发布时使用 hd

自定义域名

博客发布到 Github 后访问的地址如上面的 http://xtuer.github.io 不是很好记忆,如果你买了一个新的域名如 qmake.win,可以把这个域名指向这个博客,以在万网买的域名为例:

  1. 在万网的域名解析中把 qmake.win CNAME 解析到 xtuer.github.io,参考

  2. 在 Hexo 博客的 source 目录下创建文件 CNAME,其内容为 qmake.win

  3. 发布博客到 Github

提示:

  • 在 Github 上博客仓库的 Settings 中也可以设置自定义的域名,但是每次发布后会被重置,所以使用上面 CNAME 来保存域名就不用担心被重置了。

发布到 Gitee

  1. 配置中的 repo 修改为 repo: git@gitee.com:xtuer/xtuer.git (xtuer是你的仓库名)
  2. 需要购买 99元/年的 Gitee Pages Pro 版才支持自定义域名,请参考 码云 Gitee Pages Pro
  3. 按照自定义域名中把 CNAME 的记录解析到 gitee.gitee.io

支持 .nojekyll 文件

因为 docsify 使用的是 markdown 文件,在上传到服务器时由于 markdown 文件中可能可能有 { { 导致 Git Pages 部署失败,解决方法如下:

  1. 在 source 文件夹下增加一个空白文件,命名为 .nojekyll

  2. 在根目录的 _config.yml 中增加:

    1
    2
    3
    4
    5
    6
    7
    8
    include:
    - "**/.nojekyll"

    deploy:
    type: git
    repo: git@gitee.com:qtdebug/qtdebug.git # your git repo
    branch: master
    ignore_hidden: false

参考: https://github.com/hexojs/hexo-deployer-git

使用 PlantUML

项目中使用插件:

1
npm install hexo-filter-plantuml --save 

代码块的语法选择 plantuml:

1
2
3
4
5
` ` `plantuml
@startuml
Alice->Bob: hello
@enduml
` ` `
1
2
3
4
5
6
7
8
9
10
11
12
` ` `plantuml
@startuml
start
if (Graphviz installed?) then (yes)
:process all\ndiagrams;
else (no)
:process only
__sequence__ and __activity__ diagrams;
endif
stop
@enduml
` ` `

参考