一、为什么用Hexo

咱已经在自己注册的网站上用WordPress搭建了一个博客（虽然一篇博文都还没写），它有完善的后台，安装也挺简单的，评论会也有邮件提醒。但考虑到之前注册的域名和购买的主机都只有一年时间，后面终究要迁移的，用Hexo可以在GitHub上托管，支持Markdown，咱就本地用Typora写写日志，然后上传到网上记录下，也是可以的。

二、搭建过程

网上的教程挺多的，稍微搜索下基本都能实现，官方的文档挺详细的，也有中文翻译。

Hexo对Node.js的版本有要求，在安装相应版本的Node.js后，命令行就那么几条就能建站了

全局安装Hexo-cli

1
npm install -g hexo-cli

使用Hexo-cli初始化项目

1
hexo init <folder>

然后cd到目录

常用的命令(直接命令行hexo就出来了)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Commands:
  clean     Remove generated files and cache.
  config    Get or set configurations.
  deploy    Deploy your website.
  generate  Generate static files.
  help      Get help on a command.
  init      Create a new Hexo folder.
  list      List the information of the site
  migrate   Migrate your site from other system to Hexo.
  new       Create a new post.
  publish   Moves a draft post from _drafts to _posts folder.
  render    Render files with renderer plugins.
  server    Start the server.
  version   Display version information.

有对应的缩写

1
2
3
4
hexo server —> hexo s
hexo deploy -> hexo d
hexo generate -> hexo g
...

发布文章的过程应该是这样的：

  1. 生成相应的md文件，包含Front-matter 用来配置发布文章时显示的一些信息，列如标题、发布日期、类别、标签

    1
    hexo new '文章名'

  2. 在md上写文章

  3. 生成静态文件并在本地服务器上预览 

    1
    heox g && hexo s

  4. 发布到Github仓库上

    1
    hexo d

此外Hexo也支持草稿，写在草稿的内容不会在生成的网页上显示，需要publish后才能行。

三、个性化配置

1.主题

其实官方提供的landscape主题也挺不错的，咱只是觉得没有夜间皮肤，所以换了一个Butterfly。

初始化的适合没有顶部的菜单栏，以为咱配置错了，在观看了别人的配置视频安心了，原来默认的都配置（主题目录下的_config.yml） 文件中都是被注释的,取消注释就行了。并且官方的安装教程也很详细，还是支持中文。

1
2
3
4
#在项目路径下安装主题
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly 
#报错就执行
npm install hexo-renderer-pug hexo-renderer-stylus --save

文档都挺详细的，照配置文件，关闭了首页的大图，以及一些不必要的图片以提升加载速度，替换了链接、文字、头像。然后就是这个颜色，在项目路径\themes\butterfly\source\css\var.styl 这个文件开头几行

1
2
3
4
$bright-blue = #ff7700
$strong-cyan = #ff7700
$light-orange = #49B1F5
$light-red = #F47466

改成这样，主体界面的颜色就是橙色了

2.扩展功能

rss订阅功能，需要安装插件，主要参考这篇博文

1
npm install hexo-generator-feed --save

在项目路径的配置文件_config.yml中添加以下代码：

1
2
3
4
5
6
7
plugin:
  - hexo-generator-feed
# Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

在主题的配置文件_config.yml中的social属性下添加rss的icon配置：

1
2
social:
  fa fa-rss: /atom.xml

最后直接复制，手打的话要注意”:”后要加一个空格（可能是yaml的语法），不然会报错

四、遇到的一些问题

1.插入图片

咱写博文的目的就是记录，主要是给自己看的（估计也没有什么访客），前面提到的写作流程是现在本地写好，然后再发布。咱有些内容不太想公开，那本地也要存档，只有文本的Markdown挺好办的，就单个文件，直接复制走就行。但是对于有图片的需要配置下项目的配置文件_config.yml和Typora。

对于_config.yml

1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

这样就能在new 文章的时候生成相应的目录

在偏好设置->图像->插入图片时，选择复制到制定路径,如下图所示，勾选优先使用相对路径，然后就能保存在hexo new ‘文章名’ 自动生成的相应文件夹下了。

对于Typora

但是在generate之后，图片在文章的html同级目录下，不是在同级目录下的 /文章名/ 文件夹中，和Markdown的路径并不一样，Stackoverflow能找到类似的问题，官方给出的解决方法是用另一种写法

1
{% asset_img example.jpg This is an example image %}

可是咱用Typora直接把截图的图片扔进来，它可不长这样，然道咱还要一个个改吗？

幸好有插件可以解决

1
npm install hexo-image-link --save

2.部署

官方文档给的

私有 Repository

  1. 安装 hexo-deployer-git。
    1
    $ npm install hexo-deployer-git --save
  2. 修改配置。
    1
    2
    3
    4
    5
    deploy:
      type: git
      repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
      branch: [branch]
      message: [message]
  3. 运行 hexo clean && hexo deploy 。
  4. 查看 username.github.io 上的网页是否部署成功。

为什么是私有？因为字少，公开的有足足11条咱懒得看了，但是最初还是吃了亏。

首先是git连接仓库，怎么都连不上，不是网络的问题，一层层使尝，发现window的ssh-agent是默认没有在运行的

unable to start ssh-agent service, error :1058

需要以管理员身份运行PowerShell

1
Set-Service -Name ssh-agent -StartupType automatic

自动运行ssh-agent

可是在成功部署之后GitHub仓库上也有相应文件上传，访问GitHub Pages，依旧404

在查看仓库的设置界面

原来私有仓库的GitHub Pages 是要会员的，需要弄成公开参考才能访问。

五、其他的一些事项

1.公式

需要显示Markdown公式的时候要在Front-matter 加上 mathjax: true，Markdown公式转换成HTML界面显示似乎要加载额外的js，需要给hexo说明是否加载，这个在主题的配置文件有提示。

2.页面（page）

生成新的界面可以使用

1
hexo new page “界面名称”

但是对于像标签、类别等界面，在没写文章是都是空的，访问会显示404，需要hexo new 文章有对应标签、类别之后才会显示内容，如果在没提交就new一个page，会生成一个md，之后只会显示这个md文件上的内容 。至于其他界面比如友链、关于界面咱还没试过。在md文件的Front-Matter 加上type: tags 就是标签页了，About好像就是一个静态的自定界面。

3.代码块

代码块的段落最好要换行，不然会这样