利用hexo和github搭建个人blog

发表于 | 分类于

最开始时使用emacs的org-mod写博客，但使用atom之后就很少使用emacs，blog也没有坚持写下去。现在想用markdown代替org-mod重新开始写blog，所以又开始了折腾。
现在的主要流程是使用atom编辑markdown文档，然后使用hexo生成和发布blog，发布平台使用 github-page，下面对整个流程进行简单说明。

hexo

是一款基于node 的静态博客网站生成器，官网hexo，按照官网说明一步步完成 hexo 安装。

常用命令

1
2
3
4
5
6
7
8
# 新建post
hexo n post
# 生成静态页面
hexo g
# 开启服务
hexo s
# 发布
hexo d

配置

站点配置文件_config.yml在项目根目录下, 主要包含站点的一些配置，例如

1
2
3
4
5
6
7
# Site
title:
subtitle:
description:
author:
language:
timezone:

主题

hexo 包含很多 主题 可以下载，直接clone到themes文件夹中，并在站点配置文件_config.yml中作简单配置就可以使用，next 主题是一款很干净简介的主题，以下主要对next主题进行配置。

next主题安装

下载主题

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

下载之后在 /themes/next/README.md中有next的使用说明和在线文档，仔细阅读后进行相关配置。

启用主题

在站点配置文件_config.yml中找到 theme 字段，并将其值更改为 next

1
2
## Themes: https://hexo.io/themes/
theme: next

next主题配置

主题配置文件为 /themes/next/_config.yml.

设置 scheme

1
2
3
4
5
## Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

设置菜单

1
2
3
4
5
6
7
8
9
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  categories: /categories/
  #about: /about/
  archives: /archives/
  tags: /tags/
  #sitemap: /sitemap.xml
  #commonweal: /404/

某些页面默认没有，需要新建

1
hexo new page categories

并在新建页面中添加

1
type: "categories"

设置头像

1
avatar: /images/bio.png

修改themes\next\source\css_common\components\sidebar\sidebar-author.styl，设置头像为圆形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: site-author-image-border-color;
  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}
/* start */
.site-author-image:hover {
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

设置分享

1
2
# Share
jiathis: true

设置评论

使用第三方社交评论系统友言，注册友言之后得到一个用户id，填入配置文件中就行。

1
2
3
# Support for youyan comments system.
# You can get your uid from http://www.uyan.cc
youyan_uid: xxxx

设置站内搜索

使用local search, 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令

1
npm install hexo-generator-searchdb --save

编辑站点配置文件，新增

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，启用local search

1
2
3
# Local search
local_search:
  enable: true

设置社交

1
2
3
social:
  #LinkLabel: Link
  GitHub: https://github.com/fccf

设置链接

1
2
3
4
5
6
7
# Blog rolls
links_title: Links
#links_layout: block
links_layout: inline
links:
  #Title: http://example.com/
  ITER: http://www.iter.org/

文章加密

打开themes/next/layout/_partials/head/custom-head.swig文件,插入以下代码：

1
2
3
4
5
6
7
8
9
10
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

然后在文章开头添加 password

1
2
3
4
title:
date:
tags:
password: xxxx

写作

使用atom编辑器编辑markdown文件，因为atom编辑器有些markdown插件很好用，比如 markdown-preview-enhanced 可以在线预览，可以直接编辑图片和公式等，用起来比emacs的org-mod爽，所以彻底抛弃了emacs。

markdown 语法

markdown语法很简单，上手很快，但功能很强大。markdown可以使用很多编辑器进行编辑，还可以在线编辑以及预览 stackedit.

readmore

1
<!-- more -->

设置MathJax

公式显示需要设置 MathJax

1
2
3
4
5
# MathJax Support
mathjax:
  enable: true
  per_page: false
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

MathJax与Markdown兼容问题

Hexo默认使用”hexo-renderer-marked”引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签，比如在markdown语法中，下划线’_‘代表斜体，会被渲染引擎处理为标签。
修改代码解决该问题 参考

  • 去掉\的额外转义
  • 将em标签对应的符号中，去掉_,因为markdown中有*可以表示斜体

打开marked.js（在./node_modules/marked/lib/中）
取消对\\,\{,\}的转义(escape),作以下替换

1
2
//  escape: /^\\([\\`*{}\[\]()#+\-.!_>])/,
  escape: /^\\([`*\[\]()# +\-.!_>])/,

取消对_的转义(escape),作以下替换

1
2
//em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em:/^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

图片

使用七牛云作为图床，将所有图片都上传到七牛云上。

配置七牛云

七牛云配置文件conf_qiniu.json可以直接放在blog目录下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "src_dir"            :   "xxx",
  "access_key"         :   "xxx",
  "secret_key"         :   "xxx",
  "up_host"            :   "xxx",
  "zone"               :   "hn",
  "bucket"             :   "images",
  "ignore_dir"         :   false,
  "overwrite"          :   false,
  "check_exists"       :   false,
  "check_hash"         :   false,
  "check_size"         :   false,
  "rescan_local"       :   true
}

上传图片

1
qshell qupload conf_qiniu.json

发布

github

在github上新建项目： fccf.github.io

配置

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

发布

发布前先生成

1
hexo d -g

如果出现错误：ERROR Deployer not found: git，执行命令 npm install hexo-deployer-git –save

绑定域名

  1. 在阿里云上申请一个域名
  2. 在根目录下新建文件CNAME,文件内容为域名，不含https和www
  3. 在阿里云控制台中添加域名解析
1
2
@          A             151.101.77.147
www      CNAME           username.github.io.

[1] http://ookamiantd.top/2017/build-blog-hexo-advanced/