个人博客建站实录1：Hexo的安装与配置

个人博客站与Hexo

为什么选择个人博客站

个人建站确实有一些缺点，比如要花一些不必要的时间在站点的建设上，以及功能上会有一定的限制等。但是最终还是选择了尝试个人建站，是因为有一些不可忽视的优点：一是资源管理形式上的自由和统一，所有的博文都自然地以文件形式保存，不用担心以后的迁移问题；二是版权问题，如果在博客平台上写，无法保证平台不会滥用，与其发生版权纠纷后再去扯皮，还不如从一开始就避免这种可能；最后一点也算是强行优点，作为技术人员，花时间在这种“技术周边”上应该不亏吧。

如何将博文转换为网页

博客大部分的功能其实都是静态网页，能够做到把我们写的文章在浏览器上显示就可以了，交互上的需求还是比较弱的，所以从理论上来说，我们可以自己写前端代码，把每一篇博文的内容排好版，再做一些链接，然后把这一堆静态的HTML文件放在服务器上就能够实现个人建站的需求了。

但是！重复造轮子是不可取的，除非专职前端方向，否则手撸一个个人博客的框架是很不明智也很浪费时间的，所以我们就需要一个这样的框架，能够让我们专注于写博文本身，至于把文章转换为静态的网页文件，甚至是部署到服务器上这些工作，就让框架去完成吧。Hexo就是这样一个框架：

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

也就是说，我们只要把文章写成Markdown格式的文件，Hexo就能够生成我们的博客站网页。如果把这些网页放到服务器上，就能实现从互联网访问我们的博客的功能了。当然除此之外，Hexo也有其他功能，如部署、插件等，但是one step at a time，先尝试一下Hexo的基本功能吧。

Hexo的安装与基本使用

Hexo是基于Node.js的，所以要先安装Node.js。这个过程比较简单（Windows系统下可以在官网下载安装包，MacOS推荐使用Homebrew安装，Linux下也可以使用相应的包管理器安装）。安装好Node.js后，Hexo的安装只需要一条命令就可以了：

1	$ npm install hexo-cli -g

等待进度走完后，在终端上执行以下命令：

1	$ hexo version

如果能正确显示版本信息，就说明安装成功了。

生成Hexo项目

Hexo安装完成后，就可以生成一个Hexo项目了，首先执行命令：

1	$ hexo init <folder>

把其中\替换成项目的名称，Hexo就会在当前目录下生成一个文件夹，名为\，这就是Hexo项目目录。然后执行以下命令进入项目目录并安装依赖：

1 2	$ cd <folder> $ npm install

等待进度走完后执行以下命令：

1	$ hexo server

Hexo就将生成的静态网页文件部署到本地并启动服务器，在浏览器上访问http://localhost:4000就可以查看，站内已经生成了一个默认的第一篇博文Hello World，其中包含了一些指向官方文档的教程。此时生成的网页还是没有经过任何设置的，所有的配置项都还是默认值。其实Hexo还是提供了很多个性化配置，可以按照喜好进行选择。关闭终端（命令提示符窗口）可以关闭本地服务器。

Hexo的配置

Hexo项目结构

在配置Hexo之前，首先要了解Hexo项目的结构，初始的项目结构如图所示：

node_modules: 是Node.js的一些模块，还有安装的插件也在该目录下
scaffolds: 模版文件夹，当新建文章时，会根据该目录下的模版来建立文件。
source: 存放用户资源的文件夹。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes: 主题文件夹。Hexo 会根据主题来生成静态页面。
_config.yml: 网站的配置信息，可以在此配置大部分的参数。
package.json: 应用程序的信息。EJS, Stylus 和 Markdown renderer等模块已默认安装，可以自由移除。

打开source/_posts文件夹可以看到有一个hello-world.md文件，这就是生成项目时的初始文章的原始文件。未来我们自己写的文章的原始Markdown文件也都会储存在该目录下。

站点基础信息配置：作者、标题等

项目结构已经表明，Hexo项目最基础的配置信息都在_config.yml这个文件中，一些简单的配置在这个文件中就可以完成。用文本编辑器打开这个文件就可以看到一些显而易见的配置项。最基本地，只要修改站点名称和作者这两项就可以向来访者表明自己的身份，即在title和author两项后分别填上相应信息。除此以外，如果想要把站点的主要显示语言修改为简体中文，只需要在language后填写zh-CN就可以实现。

这样就实现了站点最基本的信息配置，不过这个配置文件还提供了很多其它的配置项，都有相应的说明，可以不断探索其功能。

选择一个酷炫的主题

项目建立时默认的主题名为landscape，在themes文件夹下可以找到该主题。虽然这个主题已经是不错的了，但是有别的选择当然更好。官网上提供了许多优秀的主题，这里用一个我比较喜欢的主题NexT作为示例。

安装并启用NexT

首先在我们的Hexo项目中下载该主题，在项目目录下执行以下命令：

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

主题资源就下载到themes文件夹下了，下一步就是要在项目中启用该主题，只需在项目配置文件（即前文提到的_config.yml）中找到theme这一项，将默认值landscape改为next。再次启动Hexo的本地服务器就可以看到已经应用了新的主题。

NexT主题的配置

NexT主题也支持一些配置项，它的配置文件在该主题的目录下。这里可以设置的项包括作者头像、社交网络地址、邮箱地址等，除此以外还有侧边栏的目录设置等都可以进行个性化配置。