最近写了好多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

1
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已经够详细了,而且全中文,用起来毫无压力。简单来说,执行以下命令即可安装了。

1
npm install -g hexo-cli

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

1
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可以替换成任何你想要的目录名称,但是这个目录一定是个不存在的目录。

1
hexo init blog

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

1
hexo generate

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

自动化部署页面

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

1
cnpm install hexo-deployer-git --save

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

1
2
3
4
deploy:
- type: git
  repo: git@gitee.com:maoxuner/maoxuner.git
  branch: gitee-pages

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

1
hexo deploy

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

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

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

blog目录中执行以下命令:

1
2
3
4
5
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分支了。初步建站的过程已经完成了。

添加新的文章

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

1
hexo n 文章标题

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

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

1
hexo g -d

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

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

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

参考文章