Re:从零开始的Hexo搭建个人博客(一)

前言

搭建个人博客一般有两种选择，一个是使用WordPress，但是需要将博客搭建在服务器上，不过搭建好后写文章方便，适合没有程序基础的人使用。另一个是使用Hexo，相对简洁高效，不需要服务器，既可以部署在本地，也可以将博客部署到GitHub Pages上，支持Markdown语法，缺点是需要有Git基础，写文章比WordPress麻烦点。

初次使用Hexo来搭建个人博客，确实比较手忙脚乱，这里记录一下流程，希望对大家能有所帮助。

（注：本文是只针对Windows平台的搭建教程）

可以点击这里查看该Hexo博客Demo的样子；有兴趣的也可以戳下这里看看我的个人博客。

How to play

本教程一共分为3章：

第一章是安装环境和本地搭建
第二章是博客的个性化配置
第三章是将博客部署到 GitHub Pages

请根据自身需要选择章节，以节省时间：

想要自己从零开始搭建个人博客的，可以从第一章开始看起；
懒得自己搭建的，请将本项目clone到本地，本项目是一个全新的Hexo博客Demo，并且已经安装配置好了 Next 主题。此外，还请：
- 根据第一章安装好相应的环境
- 根据第二章修改个人博客配置
- 根据第三章将博客部署到 GitHub Pages
已在本地搭建好个人博客，想要了解怎么将博客部署到 GitHub Pages 的，可以从第三章看起

另外，由于Hexo及其主题的配置文件都是英文的，所以本项目对部分配置文件添加了中文注释，有兴趣的可以另行拷贝。

1. 安装环境

安装Node.js
安装Git
安装Hexo

1.1 安装Node.js

Hexo是一个基于Node.js的快速、简洁且高效的静态站点生成框架，想要安装Hexo，需要先安装Node.js，官网的安装包有两种，一种是安装程序.msi文件，一种是.zip压缩包，这里选择.msi文件，安装后会自动配置好环境变量。

下载链接

扫描二维码关注公众号，回复： 73912 查看本文章

1.2 安装Git

Git就不多说了，作为开发者或多或少都会接触过吧，直接前往官网下载安装包即可。操作教程网上也是一堆，这里就不赘述了。

下载链接

如果Git和Node.js的环境变量都配置好了，可以通过在cmd中确认安装结果。

git --version
node -v

1.3 安装Hexo

安装好Node.js，就可以使用npm来安装Hexo

npm install -g hexo-cli

安装完毕后，可以通过hexo version来确认是否安装成功。

2. 开始搭建个人博客

千里之行，始于足下，在安装好所有的环境之后，我们终于可以开始搭建博客的第一步了。

2.1 初始化Hexo项目

首先是选择一个文件夹，用来给我们我们的个人博客的存放各种文件。接着进入该文件夹的路径，打开cmd命令窗口，这里有两种打开方式：

按住Shift，同时点击鼠标右键，选择在此处打开命令窗口。
在上方的地址栏里输入cmd，接着回车即可快速打开命令窗口。

当然，你也可以直接Win+R然后输入cmd来打开命令窗口，不过需要再通过cd命令将路径切换到你指定的文件夹。

接着输入指令来初始化你的博客

hexo init

初始化成功后，你会看到

Start blogging with Hexo!

2.2 生成静态页面文件

接下来，执行命令

hexo g

该命令用来生成静态页面文件到public目录，Hexo会将 source 文件夹中除 posts 文件夹之外，以下划线(_)开头命名的文件或文件夹、以及隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件夹会被拷贝过去。

最后，我们只要启动Hexo服务器就行了。

2.3 本地启动Hexo服务器

hexo s --debug

Hexo启动服务器的速度非常快，很快你就可以看到

Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

恭喜你，你的个人博客已经搭建成功了，接下来只要在浏览器输入http://localhost:4000/就可以在本地访问你的博客了。

这里使用hexo s也可以启动服务器，只不过加上--debug参数，如果运行中出错可以看到错误信息。

2.4 关闭Hexo服务器

要想关闭服务器，只需要在命令窗口按下Ctrl+C就可以了，这个组合键不仅仅用于关闭服务器，事实上你在cmd窗口中任何执行中的命令都可以用这个组合键来结束命令，只要连按两次该组合键就可以连输入Y或者N都不用。

3. 常用的命令

hexo new "postName"  #新建文章
hexo new page "pageName" # 新建页面
hexo generate # 生成静态页面至public目录
hexo server # 启动服务器(默认端口4000，'ctrl+c'关闭server)
hexo deploy # 项目部署
hexo help # 查看帮助
hexo version # 查看Hexo的版本
hexo clean # 清除Hexo的缓存

上边的一些命令可以使用简写

hexo n
hexo g
hexo d
hexo s

3.1 本地调试三连

hexo clean
hexo g
hexo s --debug

3.2 远程部署三连

hexo clean
hexo g
hexo d

注：在使用部署命令时，需要先用npm安装 hexo-deployer-git 插件：

npm install hexo-deployer-git --save

4. 撰写第一篇博文

Hexo撰写博文也不难，分为 post 和 draft 两种，其中 post 存放在 source/_posts 目录下，draft 存放在 source/_drafts 目录下。

post 和 draft 的区别在于前者会被发布到博客，而后者不会被发布。

4.1 第一篇文章

hexo n post "my-first-post"

Hexo会自动在 source/_posts 目录下新建一个名为 my-first-post 的 .md 文件；打开该文件，可以看到：

---
title: my-first-post
date: 2018-04-21 23:11:30
tags:
---

这是 post 模板自动生成的 YAML 文件头，title 是这篇 post 的标题，可以将其改为 My First Post；date 是创建的日期；tags 是该 post 的标签，可以添加自定义的标签：

---
title: My First Post
date: 2018-04-21 23:11:30
tags:
    - demo
    - first-post
---

接着再进行本地调试三连，就可以看到刚刚写好的博文了。

hexo clean
hexo g
hexo s --debug

4.1 第一篇草稿

创建命令和前边类似：

hexo n draft "my-first-draft"

另外草稿的头文件是没有日期的：

---
title: my-first-draft
tags:
---

草稿文件是不会被 hexo g 命令生成到public目录下的。