使用Hexo在GitHub上快速搭建静态博客

发表于 | 分类于

在Github上搭建静态博客

Hexo和jekyll都可以在Github上搭建静态博客。二者都是基于GitHub Pages实现的。他们都可以快速的搭建一个静态博客，并且在部署到GitHub上之后，你可以通过特定的域名进行访问。

今天我们主要看看如何使用Hexo来在GitHub上快速地搭建一个我们自己的静态博客。

生成的博客大概长这样

什么是Hexo

Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装Hexo

在安装Hexo之前，首先需要安装Node.js和Git两个工具。

Mac用户

用户可以使用下面的命令全局安装Hexo脚手架

# 全局安装hexo-cli脚手架
$ npm install -g hexo-cli

创建博客目录

# 在你想要创建博客目录的路径下执行下面的命令
$ hexo init <folder>
$ cd <folder>
$ npm install

等待npm安装好所有依赖包之后，博客就算建立好了。博客的文件结构如下：

.
├── _config.yml         # 博客项目的全局配置文件
├── package.json
├── scaffolds           # 布局模板文件夹
├── source              # 资源文件夹
|   ├── _drafts         # 草稿文件夹
|   └── _posts          # 文章文件夹
└── themes              # 主题文件夹

在项目外层文件夹中有一个_config.yml文件，这是博客项目的全局配置文件，在这里可以进行一些博客的全局配置。例如博客主标题、子标题、描述、作者、语言、时区、博客地址和根地址等等。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

Hexo 会根据主题生成文件。博客的主题可以在 Hexo的主题仓库 选择。主题一般都可以自定义很多配置，可以实现一定程度的个性化设置。

Hexo的常用命令

以下命令中，[]包含的部分为可选项目，<>包含的部分属于必选项

  1. 新建一篇文章

    $ hexo new [layout] <title>

这个命令可以创建一个空白<title>.md文件，其中的layout选项用于选择文章模板，如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。title为文章标题，如果标题包含空格的话，需要使用引号将标题整个括起来。

运行这个命令之后，会在 source/_posts/ 目录下创建一个对应名称的markdown文件，我们只需要去对应目录找到这个文件，然后编写这个markdown文件即可。

  1. 生成静态文件

    当你完成了你的博客文章之后，你可以在项目根目录下运行下面的命令生成博客的静态页面文件。生成的文件会被放到 public 文件夹下。

    $ hexo generate
    # 可简写为 hexo g
    # 选项  -d, --deploy    文件生成后立即部署网站
    # 选项  -w, --watch     监视文件变动
    # 选项  -f, --force     强制重新生成文件，等价于 hexo clean && hexo generate

    当静态文件生成完毕之后，可以通过在本地启服务器的方式进行博客内容的预览。

  2. 启动服务器

    $ hexo server
    # 可简写为 hexo s
    # 选项  -p, --port    重设端口

启动服务器。默认情况下，访问网址为：http://localhost:4000/，也可以使用 -p 或 --port参数指定你想启动的端口。启动之后，你就可以通过访问http://localhost:<你指定的端口>/在本地预览你的博客。

  1. 部署网站

    $ hexo deploy
    # 可简写为 hexo d
    # 选项  -g, --generate    部署之前预先生成静态文件

    如果你有配置好全局的git信息，并且配置好了GitHub的SSH key，那么你可以使用这个命令将博客部署到GitHub上的仓库。

  2. 清除缓存文件

    $ hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令

  1. 添加新页面

    默认情况下，Hexo 会使用文章的标题来决定文章文件的路径。对于独立页面来说，Hexo 会创建一个以标题为名字的目录，并在目录中放置一个 index.md 文件。你可以使用 –path 参数来覆盖上述行为、自行决定文件的目录。title是必须指定的

    $ hexo new page <title>
    # 选项 -p,  --path   自定义新文章的路径
    # 选项 -r,  --replace   如果有重名文章，将其替换

将博客部署到GitHub上

  1. 首先，确保你有一个Github账号

  2. 创建一个Github仓库

    这个仓库的名字可以和你的GitHub账号名完全对应，格式为 <账号名>.github.io，如果你新建的仓库是这样的，那么最终部署完成后你可以直接通过 https://<账号名>.github.io 来访问你的博客；如果仓库命名为其他名称，则需要通过 https://<账号名>.github.io/<仓库名称> 来访问你的博客。

  3. 在Hexo博客中配置好Git仓库地址

    在_config.yml文件中配置一下GitHub相关设置

    deploy:
      type: git
      repository: git@github.com:jiangding1990/jiangding1990.github.io.git
      branch: master

    配置完之后，如果你的电脑已经配置过GitHub私钥可以正常向GitHub提交代码的话，直接运行hexo d命令，就可以把内容推送到GitHub了，推送完成后你的博客就更新完成了。

    如果部署的时候提示没有仓库提交权限，请检查下GitHub的SSHkey的配置情况后再试。

    执行发布命令

    $ hexo d

    如果执行部署命令报下面的错误的话

    Deployer not found: github 或者 Deployer not found: git

    是因为你少安装了hexo-deployer-git这个包，博客文件夹下安装一下就好。

    $ npm install hexo-deployer-git --save

    安装完成后，再试一下发布就好了。

  4. 关于博客访问地址

    如果你在GitHub上的博客仓库名称满足 {你的GitHub用户名}.github.io 这种格式，那么部署完之后你就可以直接通过 https://{你的GitHub用户名}.github.io 直接访问你的博客，如果你是用的是其他名称，那么你需要使用 https://{你的GitHub用户名}.github.io/{你的博客仓库名称} 访问到你的博客。

Hexo的其他功能

Hexo本身还有一些其他的功能，感兴趣的话可以查阅官方文档，这里就不再详细介绍了。