首先写一点口水话，如果你面临类似的技术选项可能会有一定的参考作用。

最开始写长期坚持写博客是在ITEye(原JavaEye)，后来发现简书的写作体验不错，但心中一直有个独立博客的梦想，从我的博客中也可以发现蛛丝马迹，折腾过GAE，PHP，现在手上还有三个域名能（天工开物, 模友一家亲, 哎嗨哟,），只是从来没有找到一个适合自己或是自己喜欢的系统，从流派来说我是一个Java流，现在基本没有Java空间，虚拟机又比较贵，GAE墙了，Openshift慢，还有各种政策原因。

这次选择尝试git blog是受到现在很多独立博客的影响，用的人越来越多。对应的系统也比较多，主流的是jekyll、hexo、gitblog等。jekyll使用的是ruby；gitblog使用的是php。ruby现在热度减了很多，热的时候也没学过；php的构架一直不太喜欢感觉是上个世纪的东西，唯一的优势就是虚拟机便宜了；机器里面装的是node.js,所以自然选择了hexo，好了，进入正题，我们先来学习一下hexo。

初识hexo#

了解一个东西最权威的还是官方信息，所以看看官网： https://hexo.io/

首页也不含糊，也不吹嘘，看看下面截图就好了：

hexo.io 首页截图

开始#

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

根据首页指示，顺序执行上面的代码。

1
npm install hexo-cli -g

首先，npm是node的包管理工具，现在都这么玩的，要安装的东西在远程（云啊），通过工具安装，这里安装一个hexo-cli，-g 表示这个工具包是全局使用的。

1
hexo init blog

上面安装了hexo-cli，也就是hexo的客户端工具，运行此语句会新建一个名为blog的目录，你也可以根据自己的情况修改为其他名称，在新建的目录下会初始化hexo系统，嗯，大概就是这个意思了。

1
cd blog

此关键语句不解释，需要解释的同学请下面打赏、打赏、打赏（重要的事情说三遍哈）。

1
npm install

又是现在流行的玩法，刚才init是把hexo的系统下载了，但是依赖的包没有下载，npm install就是干这个的，(貌似hexo init 时已经 npm install了，不过这个命令多运行几次也没关系)，不必深究，如果你一定要就研究研究webpack什么的。

好吧，这几个命令就把本地环境搭好了，其实还要安装node.js，gis什么的掠过不说了，也许以后会补充，请关注哦。

本地试运行#

1
hexo server

hexo 本地服务启动

按照提示浏览器却打不开主页。

windows 查看占用端口

任务管理器一看，坑爹，原来是端口被占用了。
任务管理器看进程

指定端口重新运行：

1
hexo server -p 4001

指定端口运行

好吧输入新的地址端口，正常进入主页：

默认首页

准备服务器#

我们发布BS系统当然要有一个服务器，而现在的做法应该是用hexo之类的系统编辑文章，生成静态内容，发布到git仓库，所谓服务器就是github的仓库。
我们注册一个github，然后界面上添加：

gihub 添加仓库

填写仓库名称的相关信息，点击Create：

这个过程可以参考http://page.github.com，注意下面的仓库名称格式为yourname.github.io

填写仓库信息

准备上传工具#

本节参考官方文档（https://hexo.io/docs/deployment.html）；

如果你用过虚拟机，就知道需要通过Ftp等把系统上传到服务器，hexo除了git还支持好多不同的服务器，这里是通过git上传，因此先安装一个git上传的工具：

1
npm install hexo-deployer-git --save

在上传之前，先配置上传地址，只需一次即可：

修改_config.yml如下：

1
2
3
4
5
deploy:
  type: git
  repo: <repository url>
  branch: [branch]
  message: [message]

上面说过，hexo支持多种服务器，这里我们使用git（github）,repo就是github你建的仓库地址，分支一般是master，git提交时会需要编写提交消息，message这里hexo会有缺省的内容，so可以不填。

好了，测试一下：

1
$ hexo deploy

Paste_Image.png

上传过程中弹出了对话框，输入相应的帐号。

Paste_Image.png

命令行提示deploy done，但貌似有个错误。

Paste_Image.png

这是没有认真看首页，还是用户名问题：

Paste_Image.png

你的仓库名 username.github.io 中的username必须是你github的用户名或组织名。

好了，重新删除新建仓库，修改配置，上传。

再次访问，正常了。

先告一段落#

我先把此篇发表出去。地址：https://tedeum.github.io/2017/07/28/%E4%BD%BF%E7%94%A8Hexo%E6%90%AD%E5%BB%BAGitPage/
后续请等待。

发表文章#

好了说说怎么新建和发表文章，这个真是反人类的设计，因为我们又要使用命令行了：

参考这里：https://hexo.io/docs/writing.html

1
hexo new [layout] <title>

hexo new 命令就是新建文章，layout是文章布局，应该就是，可以不填，缺省有三种布局（post、page、draft）， title就是文章标题，由于文章将被保存为文件，默认这也是文件名。

知识点：我使用vs code来操作hexo，首先通过打开文件夹菜单打开hexo blog的目录：

Paste_Image.png

然后，可以看见整个工程就在界面中了：

Paste_Image.png

然后选择，查看=》集成终端菜单：

Paste_Image.png

这时打开了命令行窗口：

Paste_Image.png

在这个窗口中，我们可以输入hexo的命令，现在我们先新建一篇文章：

Paste_Image.png

接下来，我们在source/_posts目录下打开 使用Hexo搭建GitPage.md 文件，点击侧边预览，就可以边编辑边预览了。

编辑预览窗口

和传统的博客系统不一样，我们编辑的内容是保存在本地的，需要用部署命令更新一下：

1
hexo deploy

到Github一看，马丹，没有，需要生成一下静态文件，第一次分明是自动生成的，后面为什么不呢？反人类到底了：

1
hexo generate

好了，继续部署提交，这是github有了，但是访问网页没有，我的经验是要等一会，具体什么机理没有研究，现在不想写了，暂时到此为止吧。

主题#

网上找了一番，发现主题很多，都在这里：https://github.com/hexojs/hexo/wiki/Themes，但是中意的没有几个，选中了两个：

整体来说，我更喜欢maupassant的样子，但NexT功能更多一些，说明文档也详细一点，我打算先搞NexT，然后再改Maupassant。

安装主题，就是把主题放到项目的theme目录下，具体安装方法有两种，参考：http://theme-next.iissnan.com/getting-started.html。我选择其中一种：

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

安装完成后，在配置文件中_config.yml中修改启用主题：

···
theme: next
···

启动，即可看见生效，当然还有主题设置，请参考主题官方文档：http://theme-next.iissnan.com/theme-settings.html，至此，全剧终！