使用hexo + github搭建blog

2018-11-15 本文已影响0人 Joe_WQ

date: 2018-1-14
最近使用jekyll烦了，经常出现博客编译出问题，打算试下hexo，结果很不错，所以直接换成了hexo，这里写个blog留作记录。

1. 安装环境

hexo是本地先编译成功后，再上传到github上，和jekyll不一样（github内部支持）。

这里只介绍linux环境，在windows直接下载软件包安装就行。

安装nodejs, hexo:

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n7" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="bash" contenteditable="false">sudo apt install nodejs-legacy
sudo npm install hexo -g

配置git方式部署

sudo npm install hexo-deployer-git --save</pre>

这里可以考虑使用USTC加速下载软件包：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n10" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="bash" contenteditable="false"># 编辑 ~/.npmrc
registry=http://npmreg.mirrors.ustc.edu.cn/</pre>

2. 配置环境

在github上新建项目，xxx.github.io或者blog，其中xxx是你的用户名。

开启hs-pages功能：在settings里有副标题：GitHub Pages，点击一下Automatic page generator即可。

新建一个文件夹，命名和项目名相同，然后：

修改_config.conf，可以参考这个网站。

分类可能看不到，解决办法：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n19" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="bash" contenteditable="false">> sudo hexo new page categories

在source/categories/index.md里date下添加：

type: "categories"
comments: false</pre>

3. 添加文章

在source/_post目录下放置文章，命名titleName.md,

里面的文章开头添加：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n23" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="markdown" contenteditable="false">---
title: titleName
date: xxxx-xx-xx
categories: xxxx
---</pre>

可能会需要配置用户信息，user.email和user.name

最后执行：

输入用户名和密码即可。

hexo对公式的支持有点问题，需要安装插件：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n30" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; word-wrap: normal; margin: 0.8rem 0px !important; padding: 0.3rem 0rem !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="markdown" contenteditable="false">sudo npm install hexo-math --save

在blog文件夹中执行：

sudo hexo math install

在_config.yml中添加：

mathjax: true</pre>

在相应文章的开头添加mathjax: true