使用 Hexo + GitHub 搭建博客

这篇文章是从我的个人博客站点中搬过来的，后面不打算继续维护站点了，所以将之前的文章搬过来。 原文写于2017年3月12号。

---

很久以来，都想搭建属于自己的一个博客。折腾了几天，对比了 Jekyll 和 Hexo ，由于自己稍微有那么一点 Node.js 的基础，而对于 Ruby 比较陌生，于是就选择了 Hexo + GitHub 来搭建自己的博客小站。

Hexo简介

Hexo 是一个快速、简洁且高效的博客框架，支持Markdown书写文章。

前提环境

• 安装 Node.js
  Hexo 是基于 Node.js 的，所以需要先安装 Node.js。
  到Node.js官网下载相应平台的最新版本，一路Next安装即可。我安装的Node.js版本是: v6.9.1 。
• 安装git
  Windows平台下推荐安装最新版的Git for Windows，同样也是一路Next安装。我安装的Git for Windows 版本是: 2.12.0.windows.1 。
• 申请GitHub账户
  托管自己的博客站点，并作为站点服务器。
  到GitHub官网申请就行
• 配置ssh
  可以使用https来链接GitHub，但每次都要输入用户名和密码，且安全性较差。推荐使用ssh方式来与GitHub链接。具体的配置可以参考我的另一篇博客。

开启Hexo之旅

注意： 涉及到Hexo的命令最好在Git Bash中操作，否则可能无法正确使用Hexo。

安装Hexo

前提环境配置好后，就可以安装 Hexo 了。

$ npm install -g hexo-cli

或者

$ npm install -g hexo

输入 hexo 若出现 Usage: hexo <command> 表示已经安装成功。

建立自己的博客站点

博客站点对应一个文件夹，也就是你的站点根目录。

$ cd <你的站点根目录>      #最好是一个空的文件夹，这样有助于你查看和分析一个Hexo站点的目录结构
$ hexo init         #此句必须在Git Bash中输入，否则没有效果，仍然会跳转到Git Bash下，需再次cd到<你的站点根目录>来执行 `hexo init`

看到 INFO start blogging with Hexo! ，则表明已经在你的本地新建了一个博客站点。

顺便提一下，此时可以执行 hexo --version 可以查看 Hexo 版本。我的 Hexo 的版本是：3.2.2 。

站点目录中几个重要的文件和文件夹：

• _config.yml: 网站的 配置 信息，您可以在此配置大部分的参数。
• scaffolds: 模版文件夹.当你新建文章时，Hexo 会根据你指定的模板来建立文章。新建文章时，若不指定模板，则使用 post.md 模板来新建文章。你可以打开具体的模板文件，根据自己的需要进行修改。
• source：站点的资源文件夹。其中 _posts 文件夹存放的时你的所有博客，你也可以在 source 文件夹下增加站点需要用到的其他资源，如图片文件夹或者其他 html 文件.
• themes：主题文件夹。默认已经下载了 landscape 主题,并配置为当前使用的主题。

本地浏览

现在你可以在本地启动站点进行浏览了。

$ hexo server       #也可以简写为 `hexo s`,并且可以加上参数 `--debug`,这样在调试状态下启动站点，你可以看到启动站点所处理的文件以及后台处理请求的详细信息

看到 INFO Start processing ，表明已经成功启动站点。接下来，我们按照提示，打开浏览器，在浏览器地址栏中输入 http://localhost:4000，你将会看到属于自己的博客小站了，看着熟悉的 Hello World,是不是很激动啊。不过，此时的兴奋还有点早，因为现在的博客只有你自己看得到，还无法在互联网上浏览，也就是说你想要让广大博友看到你的博客，你还需要将你的站点部署到网络服务器中。最简便的方法还是将其托管到GitHub。

注意： hexo server 是会监视文件的变化的，也就是你的博客内容更改后，只需要在浏览器页面中刷新即可看到最新的内容。 带参数 -s 则不会监视文件的变化，一般用于生成环境。本篇博客默认这一步是以 hexo server 来启动站点的。若你发现浏览器页面刷新后看到的结果不是期望中的，则可尝试重启站点。

部署到GitHub

在你的GitHub中新建一个Repository，注意名称为 <你的GitHub用户名>.github.io (当然，也可以为其他名称，只不过这样的话，GitHub将会将改Repository当作普通的仓库来处理，需要你新建一个名为 gh-pages的Branch, 或者在Repository的 Settings 中将 GitHub Pages 下面的 Source 设置为 master branch; 同样后面的 _config.yml 的配置也需要更改)

回到本地配置你的站点根目录下的 _config.yml 文件。

配置 deploy 项为：

deploy:
    type: git
    repository: git@github.com:<你的GitHub用户名>/<你的GitHub用户名>.github.io.git
    branch: master

注意，如果你没有配置ssh连接GitHub的话，repository 配置为https方式。

配置好后，还需要安装 hexo-deployer-git 包。

$ npm install hexo-deployer-git --save

之后即可执行以下命令，将站点部署到GitHub:

$ hexo deploy       #也可以简写为 `hexo d`

看到提示 INFO Deploy done: git, 表明已将你的博客站点成功部署到GitHub。登录你的GitHub，进入相应的Repository，可以看到已经提交了很多的目录和文件。

是不是迫不及待了！在浏览器地址栏中输入 <你的GitHub用户名>.github.io ,正如意料中的一样，你将会看到自己的博客页面。此时的博客就是部署在互联网上的了，有网络的地方均能浏览你的文章。

站点配置

为了使博客更加个性化，你需要做一些配置。

在进行配置之前，先明确两个概念。

Hexo 通过两套配置文件来控制你的站点的样式、内容等，文件名均为 _congif.yml。其中一个位于站点根目录下，包含的是Hexo本身的配置，我们将其称为 站点配置文件；另一个位于主题目录下（<站点根目录>/themes/<主题名>/, 默认使用的主题是 landscape）,用来控制与主题相关的配置，我们将其称为 主题配置文件。

语言配置

你可能发现你的博客除了博文外到处都是看起来似乎很高端的英文，而你的博客主要是面对国内用户的，那么你可以设置博客所使用的语言。打开站点配置文件（路径为：<站点根目录>/_config.yml）

language: zh-CN

设置完成后，浏览器中刷新页面，查看效果。 注意看首页右边部分的 ARCHIVES 已经改为了 归档, ARTICLES RÉCENTS 已经改为了 最新文章。

细心的你可能会发现，页面最顶部左边的菜单仍然还是英文。将其改为中文的方法是: 打开主题配置文件，更改以下参数的名字：

menu:
  Home: /
  Archives: /archives

更改后为：（当然，你可以改为任何你喜欢的名字）

menu:
  首页: /
  归档: /archives

你也可以增加其他的菜单，指向的地址可以是站点的某个文件或者其他任何可访问的网址。如增加一个跳转到 百度 的菜单：

menu:
    ...
    百度: http://www.baidu.com

再次刷新页面，即可看到修改后的效果。

标题、作者等配置

现在打开你的博客站点，首页你会看到一个很明显的 Hexo, 将网页拖到最下脚会看到左边有作者的名字，你可以修改站点配置文件中的以下参数：

title: <网站标题>
subtitle: <网站副标题>
description: <网站描述>
author: <你的名字>  

刷新页面，看看你的设置吧！

开始撰写你的博客

此时你的站点下就只有一篇 Hello World 的博文，你肯定希望将自己的经验、想法和心得与别人分享，那么我们开始撰写自己的博客吧。

$ hexo new "我的文章标题"

执行以上命令后，会在 站点根目录/source/_post/下新建一篇以你输入的标题命名的博客，为 *.md 格式的文件。使用任意文本编辑器或者专业的 Markdown 编辑器打开该文件，之后你就可以使用 Markdown 语法书写博客了。 （如果你还不熟悉Markdown语法，建议你先花一点时间学习一下，常用的标签就几个，比较简单。Markdown入门可以看我的另一篇博客

博客撰写完成后，重启站点（hexo s），即可在首页中看到你的博客，对自己的作品满意了就可以部署（hexo d）到GitHub。这就是每一篇博客从无到有再到发布的全过程。

到此，你的博客小站基本搭建完毕了。剩下的工作就是专心撰写博客，生产高质量的文字内容。

赶快把网址广播给你的小伙伴，分享你的喜悦吧！！

要说明的几个问题

hexo deploy

执行 hexo deploy 时，包含了两个步骤，一个时在本地生成静态文件，另外一个步骤时将生成的静态文件提交到你配置的GitHub中。
查看站点根目录，可以看到多了两个文件夹：

• public: 生成的静态文件。该文件夹已经是静态的，不依赖于 Hexo，也就是说你可以将该文件夹拷贝部署到任何服务器中。
• .deploy_git: 为 public 文件夹的一个副本，只是该文件夹为一个连接到GitHub的Git版本库。

若你只想在本地生成静态文件，而不同步到GitHub，可以执行：

$ hexo generate   #可以简写为 hexo g

参数配置

配置配置文件中，所有的参数 : 后面均需要有一个空格，否则启动站点时将不能读取配置文件，从而无法浏览配置效果。

一定要注意参数是区分大小写的。

语言配置

语言配置中，给出的参数值 zh-CN 为 中文简体的意思。 为什么是这个值呢？你可以打开 <你的站点根目录>/themes/landscape/languages 文件夹，可是看到有许多个 *.yml 文件，这些文件的名字就可以作为 language 参数的值 （后缀名.yml不需填写）， 换句话说，你可以设置 zh-CN 外的其他值，只不过这样的话，你的博客站点使用的将是其他国家或地区的语言。

站点重启

在Git Bash 中，按下 ctrl+c 停止之前启动的站点，再次执行 hexo s 重启站点。

新建博客

可以直接在 站点根目录/source/_post 文件夹下新建 *.md 文件来新建博客，但推荐使用 hexo new [博客使用的模板] <博客的标题> 命令 来新建博客。这样做的好处是，一方面你可以使用默认或者自定义的模板，自动为新建的博客增加说明信息；另一方面是，若你开启了资源文件管理功能，新建博客后会在与 *.md 文件同级的目录下新建一个与博客标题同名的文件夹，用于存放该博客用到的资源，如图片等。

需要注意，使用 hexo new 来创建新博客时，若博客的标题中含有空格，需要使用双引号 " 将其包起来，而新建的 *.md 文件名称则将空格使用 - 进行代替，资源文件夹同样如此（若开启的话），但打开 *.md 文件，其说明参数 title 则保持原样。

博客的说明信息

刚打开你新建的博客时，你会看到如下的内容：

---
title: 我的第一篇博客
date: 2017-03-10 14:50:31
tags:
---

这写内容是根据你的模板生成的（默认的模板为 站点根目录/scaffolds/post.md），你可以根据自己的需要进行修改。

生成静态文件后，这些内容不会出现在你的博客上，但他们是你的本篇博客的元数据（如果你不知道这个词的意思，请自行百度），说明了该篇博客的基本信息。你可以为博客添加如下一些说明：

- title: [博客的标题]
- date: [创作时间]
- categories：[分类] 
- tags: [标签]

categories 和 tags 都是以Markdown列表的形式列出，二者的区别是：categories是你的博客的分类，默认给出的列表其含义从上到下范围逐渐变小，如

categories:
- 编程
- C++
- 泛型

表示的是，该篇博客属于的类别为 编程 > C++ > 泛型。
而tags是你的博客的关键字，没有顺序之分。

博客的这些说明信息，虽然不会出现在你的博客内容上，但他们会出现在你的页面中，如分类和标签均会出现在页面的右边，便于你对博客进行管理。

博客中图片的引用。

若你的博文中需要用到图片，则在 站点根目录/source 下新建一个 images 文件夹，用于存放你的图片，然后在博客中通过 [图片上传失败...(image-cb9512-1527432544395)] 的方式引用图片。

当然，将图片统一放在 iamges 文件夹，可能不是最好的方法，因为你的博客增加，用到的图片会越来越多，将所有图片都放在同一个文件夹，无论是图片命名还是对图片的管理，都非常不方便。针对这个问题，Hexo为我们提供了另外一个简单可行的方法：开启资源文件管理功能。

配置站点文件，将参数 post_asset_folder 设置为 true ：

post_asset_folder: true

这样设置以后，每一次通过 hexo new 新建博客时都会在与 *.md 文件同级的目录下自动创建一个与博客标题同名的文件夹，用于存放该博客用到的图片等资源文件。 要注意的是博客中引用图片的时候，其相对路径直接为图片的名称即可，不需包含图片所在的文件夹名。如，通过

hexo new "firstblog"

来新建博客，则 _post 文件夹目录如下：

.
|—— firstblog
|—— firstblog.md
|.

若你想在博客中加入一个 test.jpg 的图片，则先将 test.jpg 放入 firstblog 文件夹中，然后在 firstblog.md 文件中这样引用：

[图片上传失败...(image-784769-1527432544396)]

而不是：

[图片上传失败...(image-7231bc-1527432544396)]    #这真是一个坑，不过如果你看一下Hexo生成的静态文件的目录结构，你就会明白为什么要这样引用了。

如果你足够细心，那么你可能会发现，使用这种方式引用图片，仅能在博客正文中正常显示，而在博客站点的首页中无法加载图片。我会在另一篇博客中谈这个问题。

设置文章在首页显示的长度

如果你不想在首页显示你的整篇博客，可以在你的博客文件中加入 `` 标识，该标识之前的内容将会作为文章的摘要在首页中显示，并且点击摘要下方的 Read More （你也可以在主题配置文件中将其改写为 阅读全文） 会跳转到博客全文。

碰到问题怎么办

搭建博客的过程中肯定会遇到很多问题，不要着急，去 Hexo 官网和 GitHub中 Hexo 的 Issues 看看，说不定那里就有你碰到的问题的解决方法。并且很多 Issues 中，都有一些博友安利自己的博客，你可以点进去看看，学习一下别人的经验，取长补短。

关于主题（theme）

新建的站点默认使用的主题 landscape,风格极简，你不一定喜欢。你可以到官网的主题中淘自己喜欢的主题，下载下来，放到 themes 文件夹中，并在 站点配置文件 中进行配置即可。

一种方法是：

• 在官网的主题页面中，定位自己喜欢的主题，记住名字

• 到 Hexo 官网的GitHub中，进入页面 /source/_data/themes.yml 点击进入, 根据主题名搜索到你需要的主题，复制其 link 值

• 在 Git Bash 中：

  $ cd 站点根目录
  $ git clone <主题的link值> themes/<主题名>

更改站点配置文件：

theme: <主题名>

重启站点，即可看到新更换的主题了。

站点的进一步改进

按照本文一步一步构建的站点，还属于比较简陋的小屋，还有许多地方需要改进，或者调整配置文件。包括但不限于：

• 页面的样式、布局
• 网站的访问量统计
• 文章评论
• 站内搜索
• 社交平台分享
• RSS 订阅
• 音乐播放
• 文章打赏
• ...

---

参考：
Hexo官方网站

---