博客搭建hexo+github

Posted on   |   In , , ,   |   views

1. 环境准备

1.1 安装Node.js

去 官网下载 Node.js , 注意安装 Node.js 会包含环境变量及 npm 的安装。
安装后，检测 Node.js 是否安装成功：

1
node -v

检测 npm 是否安装成功：

1
npm -v

1.2 安装Hexo

使用 npm 命令安装 Hexo ，注意这里必须要加上 sudo

1
sudo npm install -g hexo-cli

2. 利用Hexo搭建博客

2.1 创建本地博客

创建博客目录，以后的博客都会写在这里 ~/Blog

1
2
3
4
cd ~
hexo init Blog
cd Blog
npm install

生成一个测试静态页面并运行

1
2
3
4
hexo new test_my_site
hexo clean
hexo g	# 生成静态页面
hexo s  # 运行

打开浏览器，输入地址 localhost:4000 即可看到效果

2.2 推送网站

我们先从 github 上创建一个个人仓库，仓库命名为 smilelingyong.github.io ，你则需要把 smilelingyong改成你自己的名字即可。这里默认你已经配置好 github账号，以及系统环境，没有的同学请看 这篇博客 。接下来要做的就是就是推送网站，也就是发布网站，让我们的网站可以被更多的人访问。在设置之前，需要解释一个概念，在 Blog 根目录里的 _config.yml 文件称为站点配置文件。进入根目录里的 themes 文件夹，里面也有个 _config.yml 文件，这个称为主题配置文件。我们通过修改站点配置文件_config.yml，将 Hexo 与 GitHub 关联起来，主要做如下修改。

1
2
3
4
deploy:
  type: git
  repo: https://github.com/SmileLingyong/smilelingyong.github.io.git
  branch: master

这里的 repo: 后面必须有一个空格，然后再填上面你 github 创建的博客仓库地址。注意type前面的缩进也不能更改。修改后保存即可。

以上步骤其实就是给 hexo d 这个命令做相应的配置，让 hexo 知道你要把 blog 部署在哪个位置，很显然，我们部署在我们 GitHub 的仓库里。最后安装Git部署插件，输入命令：

1
sudo npm install hexo-deployer-git --save

2.3 部署

1
hexo d

浏览器输入我们的博客地址：https://smilelingyong.github.io
配置成功的话即可正常访问。

2.4 配置我们的博客

网站的设置大部分都在 _config.yml 文件中，详细配置可以查看官方文档

下面只列出简单常用配置

  • title -> 网站标题
  • subtitle -> 网站副标题
  • description -> 网站描述
  • author -> 您的名字
  • language -> 网站使用的语言

坑：进行配置时，需要在冒号:后加一个英文空格

1
title: SmileLingyong

2.5 换一个好看的主题

Hexo 中有很多主题，可以在官网查看。
这里我推荐hexo-theme-next，自己使用的另一位博主的修改版 FreeSky

下载主题资源

1
2
cd ~/Blog/theme
git clone https://github.com/csuldw/FreeSky.git

应用下载的主题，在 网站配置 文件**_config.yml 中，配置theme**

1
theme: FreSky  # 主题的名字

主题其他配置，可在/theme/{theme}/_config.yml 主题的配置文件下进行主题的配置。接下来，可以执行万能的调试命令看看效果

1
2
3
hexo clean
hexo g
hexo s

2.6 贴标签，方便搜索

两个确认

  • 确认站点配置文件有

    1
    tag_dir: tags

  • 确认主题配置文件有

    1
    tags: tags

新建tags页面

1
hexo new page tags

此时会在source/下生成tags/index.md文件

修改source/tags/index.md

1
2
3
4
title: tags
date: 2019-03-22 23:51:07
type: "tags"
comments: false

date 可保持系统生成的时间

1
2
type: "tags"
comments: false

很重要

在文章中添加tags

在文章xx.md中添加：

1
2
3
4
tags: 
	- [Tag1]
	- [Tag2]
	- [Tag3]

多个Tag可按上面的格式添加。
其文件头部类似：

1
2
3
4
5
6
title: TagEditText
date: 2019-03-22 23:51:56
tags: 
	- [Tag1]
	- [Tag2]
	- [Tag3]

2.7 分类，给文章归档

两个确认

  • 确认站点配置文件打开了

    1
    category_dir: categories

  • 确认主题配置文件打开了

    1
    categories: /categories

新建categories文件

1
hexo new page categories

此时会在source目录下生成categories/index.md文件

修改categories/index.md

1
2
3
4
title: categories
date: 2019-03-22 23:51:56
type: "categories"
comments: false

date 可保持系统生成的时间

1
2
type: "categories"
comments: false

很重要

在文章中添加categories

在文章xx.md中添加：

1
2
categories: 
	- [cate]

其文件头部类似：

1
2
3
4
title: TagEditText
date: 2019-03-22 23:51:56
categories: 
	- [cate]

2.8 添加评论功能

评论功能在国内一般使用多说。

注册多说账号

创建站点

需要注意的是，填写的多说域名不能更改，会在后面使用，在这里我配置成droidlover

配置

在hexo主题配置文件中搜索：

1
duoshuo_shortname

然后打开开关，配置成前面设置的多说域名，如下：

1
duoshuo_shortname: droidlover

有时，可能需要一段js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"droidlover"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
<!-- 多说公共JS代码 end -->

现在，你可以运行看下效果了:)

2.9 加介绍页面about

1
hexo new page tags

两个确认

  • 确认站点配置文件打开了

    1
    about_dir: categories

  • 确认主题配置文件打开了

    1
    about: /categories

修改 about/index.md

修改该文件，属于你的天地

2.10 公式无法正常显示

改使用 hexo-renderer-pandoc 渲染公式，首先需要安装 Pandoc

1
sudo apt-get install pandoc

然后卸载 Hexo 自带的 renderer，安装 Pandoc renderer ：

1
2
sudo npm uninstall hexo-renderer-marked --save
sudo npm install hexo-renderer-pandoc --save

然后我们来测试公式渲染效果：

1
2
hexo clean
hexo g

发现报错：

1
2
3
4
$ hexo g
INFO  Start processing
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: pandoc exited with code 9: pandoc: Unknown extension: smart

Google 找到原因，pandoc从2.0版本之后, 取消了smart这个扩展，我可以修改相应的配置文件：

1
gedit node_modules/hexo-renderer-pandoc/index.js

将这一行

1
var args = [ '-f', 'markdown-smart'+extensions, '-t', 'html-smart', math]

修改为：

1
var args = [ '-f', 'markdown'+extensions, '-t', 'html', math]

修改站点配置 _config_yaml 添加 pandoc 的 配置信息

1
2
3
4
5
6
7
8
9
10
11
12
13
# Configure pandoc to use all github markdown format extensions
# extensions as of 2018 is an undocumented feature of hexo-renderer-pandoc
# Adding all extensions for github so we don't have to change index.js of
# hexo-renderer-pandoc.
pandoc:
  # Not available in pandoc 1.16: +gfm_auto_identifiers+angle_brackets_escapable
  extensions:
    - +pipe_tables+raw_html+fenced_code_blocks
    - -ascii_identifiers+backtick_code_blocks+autolink_bare_uris
    - +intraword_underscores+strikeout+hard_line_breaks+emoji
    - +shortcut_reference_links
  extra:
    - css: https://cdn.jsdelivr.net/npm/pygments-css@1.0.0/github.min.css

修改主题配置 _config_yaml 添加配置信息

1
2
3
4
5
6
math:
  enable: true
  per_page: false
  engine: mathjax
  mathjax:
    cdn: //cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML

然后就可以验证公式是否渲染成功。

2.11 显示摘要

一下是一篇博客在主页显示摘要内容的方法：

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 开心的一天，终于有自己的博客啦!
date: 2019-03-22 17:38:02
tags: 
 - 随笔
categories: 
 - 随笔
---

<img src="开心的一天，终于有自己的博客啦/my_love.png" width = "900" height = "600" alt="git" align=center />
你自己要显示的摘要内容
<!-- more -->

2.12 常用 Hexo命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
sudo npm install hexo -g               # 安装Hexo
sudo npm update hexo -g                # 升级 
hexo init                              # 初始化博客

# 命令简写
hexo n "我的博客" == hexo new "我的博客"  # 新建文章
hexo g == hexo generate                # 生成
hexo s == hexo server                  # 启动服务预览
hexo d == hexo deploy                  # 部署

hexo server                # Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s             # 静态模式
hexo server -p 5000        # 更改端口
hexo server -i 192.168.1.1 # 自定义 IP
hexo clean                 # 清除缓存，若是网页正常情况下可以忽略这条命令

2.13 解决Next主题加载慢的问题

概述

由于Hexo的Next主题使用的Google字体，所以会加载比较慢。解决的方法可以是修改主题，在没有合适CDN的情况下，从服务器直接加载对应字体也是一种选择。

实现

(1) 准备字体
首先，通过Chrome开发者工具，会发现难以加载的是这一css文件以及相关联的字体：

1
https://fonts.googleapis.com/css?family=Lato:300

当前使用的Next主题使用的是Lato这一个字体，那么应该如何得到这一字体呢？
这时候就需要 Google WebFont Downloader 了。如果有Node环境，那么直接执行一下命令即可：

1
npm install -g goog-webfont-dl

使用上，可以通过-h查看参数定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$ goog-webfont-dl -h

  Usage: goog-webfont-dl [options] <fontname>

  Options:

    -h, --help                     output usage information
    -V, --version                  output the version number
    -t, --ttf                      Download TTF format
    -e, --eot                      Download EOT format
    -w, --woff                     Download WOFF format
    -W, --woff2                    Download WOFF2 format
    -s, --svg                      Download SVG format
    -a, --all                      Download all formats
    -f, --font [name]              Name of font
    -d, --destination [directory]  Save font in directory
    -o, --out [name]               CSS output file [use - for stdout]
    -p, --prefix [prefix]          Prefix to use in CSS output
    -u, --subset [string]          Subset string [e.g. latin,cyrillic]
    -y, --styles [string]          Style string [e.g. 300,400,300italic,400italic]
    -P, --proxy [string]           Proxy url [e.g. http://www.myproxy.com/]
    -q, --quiet                    Do not print status information

通过上面的url，可以确定使用的的字体为Lato，那么下载相同的字体需要指定的参数为：

1
goog-webfont-dl -f "Lato" -y "300,400,700,400italic" -u "latin,latin-ext" -a

这里-a参数保证下载了所有字体。如果可以顺利的访问对应的资源，那么成功之后将会在当前目录出现字体名为名字的css以及字体目录。

(2) 修改主题
对应的域名是 googleapis，可以考虑在Next主题的 vendors目录下新增一个同名的目录，将css以及字体组织。目录层级会变为：

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
30
31
32
33
34
$ tree themes/next/source/vendors

themes/next/source/vendors
├── fancybox
    ...
├── fastclick
    ...
├── font-awesome
    ...
├── googleapis
│   ├── css
│   │   └── Lato.css
│   └── fonts
│       └── Lato
│           ├── Lato-Bold.ttf
│           ├── Lato-Bold.woff
│           ├── Lato-Bold.woff2
│           ├── Lato-Italic.ttf
│           ├── Lato-Italic.woff
│           ├── Lato-Italic.woff2
│           ├── Lato-Light.ttf
│           ├── Lato-Light.woff
│           ├── Lato-Light.woff2
│           ├── Lato-Regular.eot
│           ├── Lato-Regular.svg
│           ├── Lato-Regular.ttf
│           ├── Lato-Regular.woff
│           └── Lato-Regular.woff2
├── jquery
    ...
├── jquery_lazyload
    ...
└── velocity
    ...

剩下的工作是，在加载原先的css的partials中将url改成加载verdors中对应的地址即可。自己通过以下命令，定位到要修改的文件，以及第几行

1
grep -n -H -R "{% if theme.use_font_lato %}"

然后做了如下修改：

1
2
3
4
{% if theme.use_font_lato %}
  <!--<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">-->
  <link href="{{ url_for(theme.vendors) }}/googleapis/css/Lato.css" rel="stylesheet" type="text/css">
{% endif %}

当然，如果不想这么麻烦，直接在主题设置中关闭 Lato 字体即可。

3. Reference