Peter_Matthew的博客

Hexo博客使用教程

2019-03-02

本文共3.4k字,大约需要阅读13分钟。
  • 为什么使用Hexo?
  • 其实你想使用哪个使用哪个,只不过我个人觉得Hexo比较方便。
  • 优点:灵活度高、主题丰富、插件丰富、资瓷Markdown和LaTeX。
  • 缺点:要求有一定的计算机初阶知识水平,源码包含大量外文注释。

建站

软件

必不可少的有

  • Node.js(可以使用命令node -v查看版本)
  • Node.js
  • Git(可以使用命令’git version’查看版本)
  • Git
    这些是生成博客的必要软件

可选的有

  • Notepad++
  • Notepad++
    这个是为了编写方便使用的软件,不推荐使用Windows自带的记事本和写字板编写文件。如果你手上有其他多功能文本编辑器,当然也可以使用。

注意:如果你选择使用Notepad++,应该在安装Git时将编辑器选择Use Notepad++ as Git's default editor
DefaultEditor

安装Hexo

新建一个博客目录文件夹,然后右键文件夹中的空白处,选择Git Bash Here

等到出现以 $ 开头的提示表示可以键入命令后,输入

1
$ npm i -g hexo

即可安装Hexo。

请注意:所有输入命令前的$ ,只是为了表示是在Git Bash下执行的命令,实际输入时并不需要输入。

安装完后,输入

1
$ hexo init

等待初始化文件夹。初始化成功后,你会看到很多文件和文件夹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
└Hexo                <-博客目录
├.deploy_git <-上传博客的文件
│└...
├node_modules <-插件目录(依赖包)
│└...
├public <-博客生成后的文件
├scaffolds <-博客模板文件
│├draft.md
│├page.md
│└post.md
├source <-生成博客时的根目录
│└_posts <-博客目录
│ └hello-world.md <-初始示例博客文件
├themes <-主题文件夹
│└landscape <-默认主题
│ └...
├.gitignore <-gitignore文件,用于git上传时使用
├_config.yml <-博客主配置文件
├db.json <-source解析文件
├package.json <-项目所需模块项目的配置信息
└package-lock.json <-项目所需模块项目的配置信息

预览

输入

1
$ hexo server

如果提示不存在此指令,请输入以下指令安装

1
$ npm i hexo-server

然后打开浏览器,输入http://localhost:4000,即可预览博客的样子。

如果要关闭,按 Ctrl+C 即可关闭。

如果你打开此地址看不到你的博客,存在一种情况是你安装的软件(例如福昕PDF阅读器)占用了你的4000端口,此时应该切换端口,例如5000。此时应该输入下方指令切换。

1
$ hexo server -p 5000

部署

安装插件

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

传到平台

下面推荐几个平台

  • GitHub(强力推荐)
    • 优点:平台成立较早,设施完善,有微软收购的支持,全球的开发者均在此
    • 缺点:主语言为英文,且国内访问较慢。
  • Gitee
    • 优点:与GitHub类似,但国内访问速度快,而且支持GitHub项目直接导入
    • 缺点:设施不太完善。

提前说明

在下文中:

  • yourname指你注册网站的用户名
  • youremail指你注册网站的邮箱

GitHub

注册账号,然后创建一个repo,名字为yourname.github.io
_config.yml里,编辑末尾的配置

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

在文件夹下键入命令

1
$ ssh-keygen -t rsa -C "youremail"

然后连敲几下回车,然后打开C:\Users\你电脑的用户名,找到.ssh文件夹,用编辑器打开id_rsa.pub文件,然后复制里面的所有文本。

在GitHub的Settings里,找到SSH keys,右上角新建一个SSH key,然后在Key那个大框中粘贴你复制的东西,随便起一个名字然后点下方的添加。

Gitee

注册账号,然后创建一个repo,名字为yourname
_config.yml里,编辑末尾的配置

1
2
3
4
deploy:
type: git
repo: git@gitee.com:yourname/yourname.git
branch: master

在文件夹下键入命令

1
$ ssh-keygen -t rsa -C "youremail"

然后连敲几下回车,然后打开C:\Users\你电脑的用户名,找到.ssh文件夹,用编辑器打开id_rsa.pub文件,然后复制里面的所有文本。

在Gitee的设置里,找到SSH keys,新建一个SSH key,然后在Key那个大框中粘贴你复制的东西,随便起一个名字然后点下方的添加。

多Git账户

生成多个key,即在执行命令

1
$ ssh-keygen -t rsa -C "youremail"

后的第一步将名字改为id_rsa-github.pub,id_rsa-gitee.pub,然后在.ssh文件夹下新建一个config文件。在文件内粘贴并修改以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 配置github.com
Host github.com
HostName github.com
IdentityFile ~\\.ssh\\id_rsa-github
PreferredAuthentications publickey
User yourname-github

# 配置gitee.com
Host gitee.com
HostName gitee.com
IdentityFile ~\\.ssh\\id_rsa-gitee
PreferredAuthentications publickey
User yourname-gitee

即可

三步部署

按照上述配置好后,每次修改博客就只用执行下面三行指令就行了

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

第一次执行之前需要执行下方两行指令设置个人信息

1
2
$ git config --global user.name "yourname"
$ git config --global user.email "youremail"

第一次执行时会询问你是否使用ssh(此时在弹出的框中输入yes即可)之类的操作
从第二次起就真的只用这三行了。

访问你的博客

GitHub

在repo的Settings里向下翻到GitHub Pages,将 None 改为 master branch
然后就可以访问https://yourname.github.io/

Gitee

在repo的服务下拉菜单点Gitee Pages,部署分支选择master,然后点击启动
然后就可以访问https://yourname.gitee.io/

设置博客

博客基本配置

你可以参照Hexo官方文档配置,也可以参照以下信息配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Site
title: 标题
subtitle: 副标题
description: 描述
keywords: 关键词
author: 作者
language: zh-CN
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 访问你博客的地址
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

写博客

你需要使用Markdown格式编辑博客

你可以使用指令创建一篇写好基本信息的博客然后修改

1
$ hexo new 博客标题

也可以在_post文件夹下新建一个.md文件,并在开头写上

1
2
3
4
5
6
7
8
---
title: 文章标题
date: 20XX-XX-XX XX:XX:XX
tags:
- 标签
categories:
- 分类
---

然后在下面写正文部分。

当以上文字存在部分符号不合法时会出现错误,建议加上""号分割前后,例如:title: "标题[1]"
如果出现渲染错误,比如上面的内容出现在了文章开头而不是被隐藏,请检查文章的格式是否为Windows(CR LF);
如果出现中文乱码,比如出现了 ˖Ԗ}ёڷޯ鎵嬫寔涓ゆ妸妫嶆枻閾? 这种乱码,请检查文章的编码是否为UTF-8;

主题

有很多非常好的主题,由于主题数量庞大且编写风格不一,所以无法在这里为每位读者所喜爱的主题写建站教程。
这里只介绍Vexo即我使用的主题的相关配置。

安装

大部分主题可以在GitHub上找到,找到后通过

1
$ git clone https://github.com/作者/hexo-theme-主题.git themes/主题

这条指令下载到主题文件夹中,然后在博客目录下的_config.yml中写上

1
theme: 主题

Vexo

作者:yanm1ng
主题地址:hexo-theme-vexo

安装

可以通过

1
2
$ git clone https://github.com/yanm1ng/hexo-theme-vexo.git themes/vexo
$ cp -R themes/vexo/_source/* source/

同时修改主目录下的_config.yml

1
theme: vexo

完成初步的安装

文章

事实上,在每篇文章开头的front-matter都这么写。

1
2
3
4
5
6
7
8
---
title: 标题
date: 20XX-XX-XX XX:XX:XX
banner: 图片.扩展名
tags:
- 标签1
- 标签2
---

配置

在主题的_config.yml里,有这些东西,可以看我的注释配置你的

1
2
3
4
5
6
7
8
9
10
11
12
13
author: 作者
description: 描述
keyword: 关键词
favicon: #图标,默认没有

excerpt_link: Read more #查看更多的提示文字

menu:
主页: /
标签: /tags/
归档: /archives/
项目: /project/
关于: /about/

然后翻到最下面

1
2
3
4
5
6
7
8
9
10
11
about: 
banner: 图片.扩展名
avatar: 头像地址
description: 描述
weibo_username: 微博用户名
twitter_username: Twitter用户名
github_username: GitHub用户名
zhihu_username: 知乎用户名
douban_username: 豆瓣用户名
linkedin_username: 领英用户名
# 没有的话不填就行了

自定义图片

打开主题下的/source/css/images文件夹,替换 logo.pngalipay.jpg 和 ‘wechat.jpg’ 。

插件

评论系统

有很多很优秀的评论插件,例如Gitment、Gitalk、Valine、Disqus、Uyan等。
由于本人使用的是Gitment,所以只会介绍Gitment。。。

建议直接使用主题所附带的评论系统,这样一般是兼容页面的既好用又好看。

Vexo下的Gitment

Gitment利用GitHub上repo中的Issues功能完成评论存储的功能。
注意,Gitment只支持GitHub上的repo,如果你要利用Coding或者Gitee的功能,可以尝试DIY。

点这里打开GitHub的OAuth应用创建页面,输入博客名字、主页地址、描述和调用地址。请注意:主页地址和调用地址都要填你的博客的地址。

创建完后,复制Client ID和Client Secret的信息。

请点开Vexo主题下的`_config.yml’,将下面对应的行修改成这样

1
comment: gitment

然后在下方对应的部分

1
2
3
4
5
# gitment config
gitment_owner: yourname
gitment_repo: 博客地址
gitment_oauth_id: 复制的Client ID
gitment_oauth_secret: 复制的Client Secret

即可完成配置

请注意,每篇博客都需要博主手动初始化,否则会显示Error。

置顶操作

打开博客目录下的.\node_modules\hexo-generator-index\lib文件夹,将generator.js文件内容替换为下面的代码

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
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};

在博客开头的部分定义top值

1
2
3
---
top: 数值
---

说明:top没填时默认为0,置顶顺序为top值降序排列,top相等时按日期排序。

自动部署

自动部署需要一个网站——Travis CI,这个网站分为 PublicRepo版PrivateRepo版,但是只支持GitHub上的项目。

对于自动部署博客,我的做法需要在上传到GitHub的文件里写上你Github的密码,因此强烈建议各位新建一个Private项目。

我们新一个项目(当然也可以在原repo上新建一个分支),然后点这里生成一个AccessToken(建议把除了delete_repo以外的权限全部开启),然后把出来的一串值复制。

打开Travis CI,点开你新建的项目,在Environment Variables里,在Value处粘贴那串值,名字随意,然后点击Add。

返回Hexo的文件目录,执行

1
2
$ git init
$ git remote add origin https://github.com/yourname/repo的名字.git

使用命令行新建一个.travis.yml文件

1
cd.>.travis.yml

粘贴如下内容并修改后保存

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
language: node_js
node_js: stable

# S: Build Lifecycle
install:
- npm install

#before_script:
# - npm install -g gulp

script:
- hexo g

after_script:
- cd ./public
- git init
- git config user.name "yourname"
- git config user.email "youremail"
- git add .
- git commit -m "Site Updated"
- git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:master
# E: Build LifeCycle

branches:
only:
- master
env:
global:
- GH_REF: github.com/yourname/repo的名字.git
- GH_TOKEN: yourname:GitHub密码

这样处理好后执行以下命令

1
2
3
$ git add .
$ git commit -m "Site Updated"
$ git push origin master

当显示完成时,打开Travis,如果显示build passing,则说明正常(如果网站还未更新、显示build failing等,可以检查下配置)。

状态:
passing
failing
error
unknown

这样就配置好了。

补充说明

在安装时如果没有选中notepad++,也可以在后来执行以下命令改为notepad++

1
$ git config --global core.editor notepad++

hexo的很多命令都可以简写
比如

  • hexo server -> hexo s
  • hexo generate -> hexo g
  • hexo deploy -> hexo d

但是由于c开头的指令不止一个,所以clean无法简写为c。

使用Gitment时如果想使用Coding、Gitee等地方的Pages,可以考虑只使用GitHub的repo当一个评论仓库,就可以利用其它平台的Pages了。

自动部署系统Travis CI虽然只支持GitHub,但是我们可以只利用GitHub作源码仓库,把Pages的仓库利用其它平台存储,做法是修改.travis.yml中的最后的git指令。

执行时如果出现错误:fatal: remote origin already exists,则执行以下语句:

1
$ git remote rm origin

再执行

1
$ git remote add origin https://github.com/yourname/repo的名字.git

如果出现错误failed to push som refs to…….,则执行以下语句,先把远程服务器github上面的文件拉先来,再push 上去:

1
$ git pull origin master

npm切换为淘宝源

1
2
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

知识共享许可协议

知识共享许可协议

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

标签: Hexo博客
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏