安装nodejs并用hexo部署博客

最近写了好多js，对专门运行js的Node.js产生了兴趣。阿里的虚拟主机快要到期了，就打算把pages服务用起来，简简单单搭建个站点。早就想直接用markdown写写文章，然后用轻巧的工具生成页面了。我用过一个叫做PMBlog的系统，不过这个需要服务器php的支持。后来看到Jekyll，觉得这个工具真的是为懒人而生的。然而Jekyll官方文档都注明，不建议在windows平台安装Jekyll。Jekyll的文档界面不够优美，对Ruby也没有很大的兴趣。Hexo跟Jekyll可以说是完全一样的工具，但它是基于Node.js的。另外，Hexo是宝岛台湾的程序员开发的，原生态支持中文。Node.js、Hexo，一个因为js而产生兴趣，一个因为是同胞的作品而倍感亲切。这自然是个挺好的选择。

注意

首先说明一下，Node.js、Git、Hexo的使用都是命令行中的命令，本文介绍的配置方法也主要是命令。当然，Git有图形界面，但是我觉得命令行更高效一些。

安装Node.js

下载安装包

Node.js官网本身是提供windows下的安装包的。但是我不喜欢安装程序给我创建快捷方式，添加乱七八糟的环境变量以及注册表信息。我喜欢让这一切都变得可控，因此我安装软件大多都是安装“绿色”版本的。

从下载|Node.js下载最新的zip包，并解压到相应的程序目录。建议路径中不要包含空格或者其他特殊字符，防止出现莫名其妙的错误。

配置环境变量

假设解压后的文件路径为D:\App\node，也就是node.exe所在的目录。在用户环境变量Path中加入D:\App\node这个路径。注意用英文;将该路径与原有的路径分隔开来。

win10设置环境变量的方法，右键桌面上的此电脑，选择属性。在属性窗口中，点击左侧的高级系统设置。然后点击系统属性高级标签下侧的环境变量按钮。然后选中用户环境变量中的Path，点击编辑按钮。win7，win8设置方法类似。

打开一个新的CMD窗口，执行npm命令，如果没有提示找不到命令，则说明Node.js已经安装成功了。

配置国内镜像

国内镜像推荐淘宝NPM镜像，运行以下命令安装淘宝NPM镜像工具，并用该工具替代npm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后执行cnpm命令，以确认cnpm是否已经安装好。

以后使用到的npm命令，只要把npm替换成cnpm即可，命令的其他参数保持一致即可。

安装Git

本来没有计划写这一部分，但是后来看到Hexo有这个依赖，就在这里简单说明一下吧。实际上也不复杂，跟Node.js的安装差不多。

下载安装包

windows下安装Git SCM，也就是git for windows，即可使用git的相关功能。同样的，官方也提供安装包，但我还是手动安装的。从Releases · git-for-windows/git下载最新的绿色包，文件名以PortableGit开头的自解压文件。

配置环境变量

假设解压后的文件路径为D:\App\PortableGit，也就是git-bash.exe所在的目录。在用户环境变量Path中加入D:\App\PortableGit\usr\bin这个路径。可能添加D:\App\PortableGit\cmd这个路径更妥当一些，但是前者可以一并使用git环境组件中的ssh等命令。而且，我在使用前者的时候，也尚未发现什么问题。

安装Hexo

Hexo的两大依赖Node.js以及Git安装好了，接下来就可以很方便的安装Hexo了。文档|Hexo已经够详细了，而且全中文，用起来毫无压力。简单来说，执行以下命令即可安装了。

npm install -g hexo-cli

既然已经下载了淘宝NPM镜像的工具，把以上命令替换成这一句，使用国内的镜像安装Hexo。

cnpm install -g hexo-cli

然后执行hexo命令，以确认Hexo是否已经安装好。

使用Hexo生成站点

Hexo的建站原理

为了让大家更好的理解建站的一些操作，简单介绍一下Hexo建站的原理。
整套系统分为三个部分：

	说明
文章数据	文章内容，主要表现为后缀名为md的文件。位于source及其子目录中
建站配置	配合数据生成静态页面的规则，包括系统配置，模板，主题
静态文件	生成的静态网页

如果把网站比作一道菜：文章数据就相当于食材，是构成这道菜的原料；建站配置相当于菜谱，规定了做成网站这道菜的做法。当然这个比喻不够恰当，建站的话，文章的数据是最最重要的，换个建站配置依然能建站。而菜肴的话，菜谱可能是最终要的，因为往往稀缺的并不是食材吧。

既然根据文章数据以及建站配置就能生成静态文件了，因此我们只要管理好这两部分就行了，剩余的都交给Hexo处理。实际上Hexo的核心功能就是根据前两者来生成静态文件的。只不过，随着功能的完善，Hexo可以实现一键部署。以Git的pages为例，Hexo生成静态文件后，会自动给这些文件纳入一个git仓库，并它们提交到开启了pages服务的分支中去，从而完成站点的部署。

开启pages服务

或许是GitHub上聚集了世界各地的开发者吧，因此很多人都在使用github的pages服务建站。但是我还是推荐使用国内的码云或者Coding以获得更好的访问速度。我比较喜欢开源中国社区，因此对码云也分外有好感。但是码云的pages服务不支持绑定自己的域名（CNAME），而Coding是支持的。首先要创建一个项目，才能开启pages服务。开启pages服务后，都会给你提供一个以你的id开头的二级域名用来访问pages页面。以我的码云pages为例，该域名为maoxuner.gitee.io。如果想以根目录的形式访问你的网站，一般都是创建一个跟你的ID同名的项目。然后在项目中开启pages服务。开启pages服务的方法不详细介绍了，可参码云pages。码云项目的界面最近做了更新，与文档中略有不同。Pages的入口在项目主页，“服务”标签中的“Pages”。其他代码托管平台的开启方法大同小异。

创建站点

找一个方便的目录，执行以下命令，生成博客的基本文件（测试文章数据以及基础的建站配置）。其中blog可以替换成任何你想要的目录名称，但是这个目录一定是个不存在的目录。

hexo init blog

然后切换到blog目录，执行以下命令即可生成静态文件。（已有演示用的文章数据以及默认的建站配置）

hexo generate

此时，blog目录中会多出一个public目录，其中就是网站的静态文件。可以选择手动把这些静态文件纳入git仓库并推送到开启pages服务的分支、或者发布到Web服务器。当然，更推荐使用Hexo来自动化部署。

自动化部署页面

Hexo自动git部署需要安装组件hexo-deployer-git，执行以下命令：

cnpm install hexo-deployer-git --save

然后修改系统配置文件_config.yml（不是themes子目录下的主题配置文件）。修改deploy这一项的值，按照以下格式配置。如果没有这一项，直接在文件末尾添加即可。注意缩进，yml中使用缩进表示从属关系，用-表示一个序列（可以同时部署到多个仓库）。这里减号后有一个空格。以我的项目为例，配置内容如下：

deploy:
- type: git
  repo: git@gitee.com:maoxuner/maoxuner.git
  branch: gitee-pages

type值不用修改，因为这里使用的是git的pages服务，类型就是git。
repo为仓库地址，为了方便部署（免输账号密码），使用的是ssh协议的仓库地址。这需要配置ssh秘钥，具体参考生成并部署SSH key。
branch为开启pages服务的分支名称。一般的，码云为gitee-pages，Coding为coding-pages，GitHub为gh-pages。
配置好部署信息后，即可用Hexo把静态页面部署到git上了。

hexo deploy

部署完成后，通过域名如maoxuner.gitee.io，应该就能访问到这些页面了。

管理文章数据以及建站配置

既然上面已经说到，整个系统最重要的是文章数据以及建站配置，因此可以用git管理这些文件，并推送到网络上的仓库中去。网络仓库以我的仓库git@git.gitee.com:maoxuner/maoxuner.git为例。

在blog目录中执行以下命令：

git init
git add *
git commit -m "站点初始化"
git remote add origin git@git.gitee.com:maoxuner/maoxuner.git
git push --set-upstream origin master

至此，已经能够把网站的文章数据、站点配置同步到仓库的master分支，把静态文件发布到osc-pages分支了。初步建站的过程已经完成了。

添加新的文章

站点已经建成，剩下的就是添砖加瓦写文章了。执行以下命令：

hexo n 文章标题

以上命令即可在source/_posts/目录中生成一个文件名为文章标题，后缀名为md的文件。文件的头信息已经填好，剩下的就是用markdown语法写文章就好了。markdown语法参见Markdown 语法说明 (简体中文版)

然后执行以下命令即可生成新的页面，部署到git。

hexo g -d

同样的，把新添加的文件纳入git仓库，并推送到网上的仓库。

git add *
git commit -m "新的文章"
git push

至此，该系统已经能很好的运行了。更多的使用以及设置方法参考文档|Hexo即可。

参考文章

• 淘宝NPM镜像
• 文档|Hexo
• Hexo+NexT主题配置备忘（强烈推荐这篇文章，总结很全面）