Hexo 搭建 GitHub 静态博客

Hexo 是一款静态博客框架，它允许你使用 Markdown 语法来写博客。静态博客对应的就是动态博客，或者说动态网站。动态网站，博主登录网站写博客，然后将博客内容保存到数据库中。读者通过 HTTP 请求博客地址，服务器从数据库中读取相关数据，动态渲染生成 HTML 页面，响应给读者。静态博客，博主在本地的编辑器里写博客文档，通过生成命令，会在本地生成博客的 HTML 页面，再通过部署命令，会将本地的 HTML 页面同步到远程服务器上。读者通过 HTTP 请求博客地址，服务器直接找到相关 HTML 页面，响应给读者。

准备

1. 注册 Github 账号

2. GitHub-服务器上配置-SSH-公钥

3. 安装 Node.js

4. 安装 Git

安装

执行以下命令，安装 Hexo。

$ npm install -g hexo-cli

建站

执行以下命令，创建项目目录。

$ hexo init blog # blog 是项目目录名

创建完毕，可以看到项目目录如下。

目录.png

node_modules       # npm 包目录scaffolds          # 模板目录，新建文章时，会根据 scaffolds 创建文章的初始内容source             # 资源目录，创建的文章会保存在该目录下，博主在该目录下编辑文章theme              # 主题目录，下载的主题会保存在该目录下_config.yml        # 网站配置文件.gitignore         # 配置 Git 忽略的文件类型db.json            # 网站数据缓存文件package-lock.json  # npm 包的依赖文件 (npm 5.0 以上的版本才有该文件)package.json       # npm 包依赖文件

执行以下命令，启动本地服务器。

$ hexo server

通过 localhost:4000 访问博客。

默认主题.png

主题

在项目目录下输入以下命令来下载主题，我的项目目录为 blog 目录，我选择的主题为 NexT。

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

打开网站配置文件 _config.yml，找到 theme 字段，并将其值更改为 next。

theme: next

next 主题有几种布局方式，我选择了 Gemini，打开主题配置文件 themes/next/_config.yml，找到 # Schemes，想选择哪个选项，就将该选项前的注释符 # 去掉。

# Schemes#scheme: Muse#scheme: Mist#scheme: Piscesscheme: Gemini

在终端输入以下命令清除缓存，并重新启动本地服务器。每次修改网站配置文件 _config.yml 的时候，都需要重新启动本地服务器才能使配置生效。

$ hexo clean
$ hexo server

通过 localhost:4000 访问博客。

next主题.png

写作

在写作之前，先修改一下网站配置文件 _config.yml，找到 post_asset_folder 字段，并将其值更改为 true，打开资源文件管理功能。

post_asset_folder: true

打开资源文件管理功能之后，每次新建文章，都会自动创建一个与文章的 Markdown 文件名相同的目录，用来存放该篇文章用到的资源：图片、CSS文件、JS文件等。

执行以下命令，生成一篇新的文章。

$ hexo new '文章标题'

新生成的文章保存在 source/posts 下，以 .md 结尾，表明这是一个 Markdown 文件，并且在 source/posts 下生成了一个与 Markdown 文件同名的资源目录。

文章目录结构.png

如果文章中需要引用图片，先将图片放到该篇文章的资源目录下，然后在文章中使用标签插件引用图片。

{% asset_img 图片名称 图片标题 %}

如果文章中需要引用其他文章，使用标签插件来引用其他文章。注意需要使用文章的文件名，而不是文章的标题，文件名不需要加后缀。

{% post_link 文章的文件名 %}

生成

如果只是在本地服务器访问博客，那么不需要执行生成命令，只需要通过 hexo server 启动本地服务器，然后通过浏览器访问 localhost:4000，就可以访问博客了。如果想要将博客部署到服务器上，则需要先在本地执行生成命令。所谓的生成，就是将本地的 Markdown 文件生成 HTML 文件，保存到本地项目目录下的 public 目录。如果没有 public 目录，执行生成命令的时候会自动创建 public 目录。

执行以下命令生成 HTML 文件。

$ hexo generate

生成目录结构.png

部署

所谓部署，就是将本地的 public 目录下的所有文件上传到服务器上，本文将会上传到 GitHub Pages 上。

首先需要在 GitHub 上新建一个仓库。

新建仓库.png

仓库名的格式必须为：GitHub账号.github.io。

新建仓库-2.png

复制仓库地址，注意我复制的是 SSH 协议的地址，而不是 HTTPS 协议的地址。因为我已经配置好了 SSH 公钥信息，所以以后本地和远程仓库进行同步的时候，不需要输入用户名和密码。如果使用 HTTPS 协议，每次进行 push fetch 操作的时候，还需要输入用户名和密码。

仓库地址.png

修改本地的博客配置文件 _config.yml，找到 deploy 选项，其中 type 选项的值设置为 git，repo 选项的值为刚才复制的仓库地址。

deploy:  type: git
  repo: git@github.com:feixueliantian/feixueliantian.github.io.git

第一次部署之前，需要安装 hexo-deployer-git 插件。

$ npm install hexo-deployer-git --save

执行部署命令。

$ hexo deploy

请耐心等待一会，部署结束之后，会将本地的 public 目录的内容上传到 GitHub 上的仓库中，你通过 用户名.github.io 来访问 GitHub 上的博客页面。

以后每次你在本地新建、修改、删除一篇博客的时候，都可以通过执行 hexo g -d 命令，来将本地博客的变化同步到 GitHub 的仓库中。该命令是生成和部署两个命令的简写形式，先执行生成命令，然后再执行部署命令。

命令

总结一下使用到的 Hexo 的常用命令：

$ hexo i blog                 # 创建项目目录，i 是 init 的简写$ hexo new 'article_title'    # 新建文章$ hexo s                      # 启动本地服务器，s 是 server 的简写$ hexo g                      # 生成 HTML 文件，g 是 generate 的简写$ hexo d                      # 部署到服务器，d 是 deploy 的简写$ hexo clean                  # 清除缓存文件 (db.json) 和已生成的静态文件 (public)，在某些情况（尤其是更换主题后），如

作者：Karmack
链接：https://www.jianshu.com/p/fc02106f9b62