搭建Hexo记录

Posted on | In

搭建个人Github Pages

参考的Blogs：

Mac+Hexo+GitHub搭建博客教程

超详细Hexo+Github博客搭建小白教程

hexo next主题优化，打造个人精致网站

从零开始搭建Github Page — 源码备份&双语网站

这应该是最全的hexo博客搭建以及next美化教程

如何在Hexo中对文章md文件分类

打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化

以下所有操作均在Mac上。

1. 搭建环境

1.1 安装Node.js和Git

1
2
brew install node
(google how to install git)

1.2 安装Hexo

“-g” 表示全局安装

1
sudo npm install -g hexo

2. 博客初始化

新建一个目录（如myblog），然后在此目录中进行操作。

1
2
3
4
5
6
mkdir myblog
cd myblog
hexo init
sudo npm install
hexo g
hexo s

执行以上操作，即可通过提示的地址（我的是http://localhost:4000），查看初始化后的本地博客。

3. 关联Github

在Github上新建一个username.github.io的repo。username为github的用户名。

然后修改myblog下的配置文件_config.yml，把deploy改为（注意空格）

1
2
3
4
deploy:
  type: git
  repository: git@github.com:JacobShi777/JacobShi777.github.io.git
  branch: master

因为是在使用git的，有ssh key，所以后续操作不需要密码。（网上其它教程都是配置的https）

最后执行

1
2
hexo g
hexo d

hexo g出错则执行npm install hexo --save，hexo d出错则执行npm install hexo-deployer-git --save。

之后便可以通过访问jacobshi777.github.io进行访问。

4. 备份文件

我是在5.1主题设置进行备份的。具体方法是：

  1. 先在github上新建一个的repo。（不想在username.github.io里备份的话）
  2. 在原来的myblog下git init，添加远程repo地址，直接push即可。
  3. 由于5.1的主题也是一个repo，无法push主题next文件夹里的东西，但又想保存自己的配置，就在theme文件夹下新建了一个config文件夹，用ln next_config.yml ../next/_config.yml进行硬链接，来保存备置。
  4. 在git status的时候，会看到commit or discard the untracked or modified content in submodules的问题，可以删掉.git或在相应主题的文件夹里commit最新的更改后，在myblog下git submodule update。

5. 视觉/功能

5.1 主题设置

Google Hexo的主题，选择自己喜欢的下载。这里，我选择了hexo-theme-next作为主题。方法如下：

  1. 在myblog下下载主题。
1
git clone https://github.com/iissnan/hexo-theme-next themes/next

其中，themes/next的意思是把下载的文件放在myblog下themes文件夹中，并命名为next。

  1. 修改myblog下的配置_config.yml，把theme: landscape改为theme: next即可。

  2. 最后执行

1
2
3
hexo clean
hexo g
hexo d

5.2 标签和分类

参考Hexo使用攻略-添加分类及标签)。

5.3 文章头设置

修改scaffolds/post.md文件，之后通过hexo new post "article name"命令即可自动生成。

1
2
3
4
5
6
7
8
9
10
11
12
---
title: {{ title }}
date: {{ date }}
top: false
cover: false
password:
toc: true
mathjax: true
summary:
tags:
categories:
---

5.4 主页展示部分文章

直接在文章中加入<!--more-->，在此之前的的内容都会在主页展示出来，并有Read more >>按钮。

5.5 去除toc的序号

修改主题配置文件，把number改为false。

1
2
3
4
5
toc:
  enable: true

  # Automatically add list number to toc.
  number: false

6. 一些问题

6.1 公式渲染

我就只是挑了google前几个答案，也没细看，乱改了一通，就好了，在此作个记录。

首先根据hexo博客markdown数学公式渲染错误解决方法)这篇文章，改了如下改动：

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

然后根据在 Hexo 中使用 MathJax 渲染数学公式这篇文章，先修改了node_modules/kramed/lib/rules/inline.js文件中的几行：

1
2
3
4
// escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/, 第 11 行, 将其修改为
escape: /^\\([`*\[\]()#$+\-.!_>])/,
// em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/, 第 20 行，将其修改为 
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

再在theme/next/_config.yml中，把mathjax修改为：

1
2
mathjax:
  enable: true

然后就好了。

另：我又试着把inline.js的两行改了回去，也没报错。