使用Hexo构建web应用

使用Hexo主要考虑到如下几点：

• 主题选择灵活美观；
• 可将博客托管在GitHub；
• 正在尝新Atom，相关插件方便推送文章；
• Geek风格(见仁见智)；

具体的步骤可以参考Hexo官方文档，Hexo的中文文档还是比较完善的，不过在实际安装过程中，还是遇到了一些具体的问题，后面进行说明。

安装Hexo

$ npm install -g hexo-cli

运行以上命令后，务必用hexo -v查看一下hexo版本，起初本人得到的结果是这样的：

接着使用如下命令：

$ npm install hexo --save

再查看文件的版本，就会出现如下图所示：

接着按照官方文档给出的操作：

$ hexo init <folder>
$ cd <folder>
$ npm install

这样Hexo就安装成功了，根据目录的文件生成静态网页：

$ hexo generate

运行本地服务：

$ hexo server

然后就可以打开 http://localhost:4000/ 进行查看。需要停止服务器可以按control+c.由于Hexo3.0以后，不少功能都独立出来了，所以在运行server之前，先在终端输入：

$ npm install hexo-server --save

以上便是我在安装Hexo时的具体步骤，记录了遇到的实际问题。

基本操作

1.新建一篇文章：

$ hexo new [layout] <title>

可以单独指定layout，默认采用的是Hexo项目根目录（非主题）下的_config.yml参数，标题含有空格要使用引号括起来。

2.生成静态文件

$ generate

也可以使用hexo g

3.部署网站
在根目录的_config.yml中设置：

deploy:
  type: git
  repository: git@github.com:gitbeiyong/gitbeiyong.github.io.git
  branch: master

然后在命令行中运行如下：

$ npm install hexo-deployer-git --save
$ hexo deploy

也可以使用hexo d

4.清除缓存文件

$ hexo clean

这里清除的是db.json和public文件。

以上只列举了本人常用的操作指令，详情请见官方文档指令。

添加功能

1.给文章添加目录

在所选主题的文件下找到_partical文件夹，修改该文件夹下article.ejs文件，在<!-- Table of Contents -->后面添加：

<% if (!index && post.toc){ %>
  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录</strong>
    <%- toc(post.content) %>
  </div>
<% } %>

这样就可以根据标题添加目录。

2.给博客添加“关于”

使用命令：

$ hexo new page about

3.一些杂项

有的时候Mac自动生成的.DS_Store文件很烦人，可以使用rm -fr .DS_Store命令删除之。

CNAME文件放在博客根目录下的source文件夹下。

测试SSH key是否设置正确可以使用命令：

ssh -T git@github.com

在执行 hexo deploy 后,出现 error deployer not found:github 的错误:

$ npm install hexo-deployer-git --save

gitalk相关链接：

https://newdee.cf/posts/4da30c7/

https://lefer.cn/posts/46934/

样式修改：

这个帖子里的实例会出现横线问题，可以通过修改gitalk.css来解决。 https://ryanluoxu.github.io/2017/11/27/Hexo-Next-添加-Gitment-评论系统/

https://www.libinx.com/2017/2017-03-12-hexo-next-beautify/

https://blog.csdn.net/kxp9545/article/details/75194232

修改\themes\next\source\css\ _variables\base.styl文件的$code-foreground和$code-background，可以改变``围出的代码块颜色。

4.相关参考链接

Hexo-NexT配置

MarkDown括号如果出现嵌套怎么办？(可以用%28代替，)可以用%29代替。

站内引用

引用站内文章：{% post_link markdown文件名（不要后缀） 文章标题（可选） %}
引用YouTube：{% youtube video_id %}

Hexo草稿

生成草稿：

$ hexo new draft <title>

发布草稿：

$ hexo publish [layout] <title>

layout指布局，比如draft就是Hexo的一种特殊布局。

修改端口

使用命令：

hexo server -p 5000

参考

https://hexo.io/zh-cn/docs/writing.html