全网最全最实用的 Hexo 博客搭建教程

现在越来越多的人喜欢利用Github搭建静态网站,原因不外乎简单省钱。本人也利用hexo+github搭建了本博客,用于分享一些心得。在此过程中,折腾博客的各种配置以及功能占具了我一部分时间,在此详细记录下我是如何利用hexo+github搭建静态博客以及一些配置相关问题,以免过后遗忘,且当备份之用。

一、创建博客项目

1.1 准备工作

  • 下载node.js并安装(官网下载安装),默认会安装npm。
  • 下载安装git(官网下载安装)
  • 下载安装hexo。方法:打开终端 运行npm install -g hexo(要翻墙)

1.2 初始化项目

  • 新创建一个目录,比如叫做 iswbm-blog
  • 使用终端进入该文件夹内,执行hexo init (初始化项目)

  • 运行你的博客项目(用于调试),查看生成的文章是否符合自己的预期。
1
2
$ hexo g  # 生成静态文件
$ hexo s # 运行本地web服务器

运行完 hexo s 会有一个本地web地址(localhost:4000)出现在你的屏幕,打开它即可看到。

1.3 部署上线

要让我们在 localhost:4000 看到的那些内容能够在公网能够访问。我们需要将其部署上线。

按照下面的步骤来

  • 在Github上创建名字为XXX.github.io的项目,XXX为自己的github用户名。然后 clone 到你的本地电脑上。

  • 打开该文件夹内的_config.yml配置文件,将其中的type设置为git,其他配置如下

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/iswbm/iswbm.github.io.git
branch: master
  • 安装Git部署插件
1
$ npm install hexo-deployer-git --save
  • 重新生成静态文件,部署上线。
1
2
3
$ hexo clean
$ hexo g
$ hexo d

在第一次部署后,请到 github 后台,补充你的 网站信息,否则无法访问。

一切完成之后,你就可以通过上面的网址来访问我的博客了。

1.4 绑定域名

做为一个个人博客,使用 github的域名,明显不够个性化。

我们可以自己去阿里云购买一个域名(我的是 iswbm.com),然后将其 CNAME 到你的博客地址上。

  • 去阿里云 域名云解析

  • 然后到对应的GitHub仓库,绑定我的个性域名

  • 然后再在你本地的项目里的 source 目录下新建 CNAME文件,内容就是我的域名

    1
    iswbm.com
  • 然后重新部署,使配置生效。这样就可以使用域名访问。

    1
    2
    3
    $ hexo clean
    $ hexo g
    $ hexo d

二、丰富博客页面

2.1 标签页

具体请参考下官方教程:创建标签云页面

2.2 分类页面

具体请参考下官方教程:创建分类页面

2.3 关于页面

具体请参考下官方教程:创建关于页面

三、博文书写技巧


3.1 引用块

更多设置,查看官方文档

1
2
3
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

效果如下

3.2 一键生成md头格式

首先在/scaffolds/post.md文件中添加:

1
2
3
4
5
6
7
8
9
10
---
title: {{ title }}
date: {{ date }}
tags:
categories:
copyright: true
permalink: 01
top: 0
password:
---

然后使用 hexo new就可以一键生成新文章的头格式了,不用手动去搬运或者书写。相当方便。

image-20200321201555321

四、美化博客


4.1 更换主题

在 hexo 部署目录下,使用如下命令下载主题

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

打开站点配置文件(部署代码根目录下的 _config.yml)选择刚刚下载的next主题

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

然后再编辑 themes/next/_config.yml 选择主题样式

1
scheme: Pisces

4.2 ico缩略图

1
2
3
4
5
6
7
8
1. 制作icon图标,最好是32x32,可以在这里制作:https://tool.lu/favicon/

2. 将制作的ico文件,放到next主题source/images目录下

3. 配置ico文件路径。配置文件在 themes/next/_config.yml
favicon:
small: /images/favicon-16x16-next.ico
medium: /images/favicon-32x32-next.ico

4.3 菜单栏和图标

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
home: / || home
about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
schedule: /schedule/ || calendar
# sitemap: /sitemap.xml || sitemap
# commonweal: /404/ || heartbeat

# Enable/Disable menu icons.
menu_icons:
enable: true

4.4 社交网络和图标

1
2
3
4
5
6
7
8
9
10
11
12
social:
GitHub: https://github.com/iswbm || github
E-Mail: mailto:wongbingming@163.com || envelope-o
微博: http://weibo.com/942663728 || weibo
WeChat: http://image.python-online.cn/17-9-9/58657236.jpg || weixin
知乎: https://www.zhihu.com/people/wongbingming/activities || chain-broken
CnBlog: http://www.cnblogs.com/wongbingming/ || file-text-o

social_icons:
enable: true
icons_only: false
transition: false

4.5 背景动画

next下的_config.yml找到canvas_nest设置为True

4.6 添加热度

next主题集成leanCloud,我只需稍微配置下(在主题配置文件)
其中的id和key要去LeanCloud注册登录然后创建应用后,新建Class,名字一定要是Counter,然后查看id和key填入

1
2
3
4
5
6
7
post_meta:
item_text: true

leancloud_visitors:
enable: true
app_id: 你的id
app_key: 你的key

打开themes/next/layout/_macro/post.swig
”leancloud-visitors-count”>标签后面添加℃。
然后打开,themes/next/languages/zh-Hans.yml,将visitors内容改为热度即可。

为什么不直接用不蒜子,因为首页的时候,无法显示。
如果也开了不蒜子的计数功能的话,可以直接把下面代码删掉

1
2
3
4
5
6
{% if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.page_pv %}
<span class="post-meta-divider">|</span>
<span class="page-pv">{{ theme.busuanzi_count.page_pv_header }}
<span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>{{ theme.busuanzi_count.page_pv_footer }}
</span>
{% endif %}

4.7 分享插件JiaThis

默认有好多分享平台,可以在jiathis.swig里删除不需要的

1
2
3
jiathis:
uid: 2135144 #Get this uid from http://www.jiathis.com/
# add_this_id:

隐藏页脚的hexo强力驱动,在footer.swig里注释这段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--
{% if theme.copyright %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" href="https://hexo.io">Hexo</a>') }}{#
#}</div>

<span class="post-meta-divider">|</span>
<div class="theme-info">{#
#}{{ __('footer.theme') }} &mdash; {#
#}<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">{#
#}NexT.{{ theme.scheme }}{#
#}</a> v{{ theme.version }}{#
#}</div>
{% endif %}
-->

4.8 Fork me on Github

点击这里挑选自己喜欢的样式,并复制代码
然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面),并把href改为你的github地址

4.9 设置阅读全文

在md博文里添加

1
2
3
以上首页显示
<!--more-->
以下首页不显示

4.10 添加版权

修改themes/next/layout/_macro/post-copyright.swig如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ul class="post-copyright">
<li class="my_post-copyright-author">
<strong>{{ __('post.copyright.author') + __('symbol.colon') }}</strong>
{{ config.author }}
</li>
<li class="my_post-copyright-link">
<strong>本文链接:</strong>
<a href="{{ post.permalink }}" title="{{ post.title }}">{{ post.permalink }}</a>
</li>
<li class="my_post-copyright-link">
<strong>发布时间:</strong>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}
</li>
<li class="my_post-copyright-link">
<strong>最后更新:</strong>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}
</li>

<li class="my_post-copyright-license">
<strong>{{ __('post.copyright.license_title') + __('symbol.colon') }} </strong>
{{ __('post.copyright.license_content', theme.post_copyright.license_url, theme.post_copyright.license) }}
</li>
</ul>

到主题配置文件,改enableTrue

1
2
3
4
post_copyright:
enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

4.11 文章结尾页眉

在路径themes/next/layout/_macro中新建 passage-end-tag.swig 文件,并添加以下内容:

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------Page's over<i class="fa fa-paw"></i>Thanks for reading-------------</div>
{% endif %}
</div>

接着打开themes/next/layout/_macro/post.swig文件,添加如下下代码,注意位置

代码如下:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

然后再主题文件增加如下配置,以便可以方便开关这个功能

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

4.12 更改标签的图标

修改模板/themes/next/layout/_macro/post.swig,搜索 rel=”tag”>#,将 # 换成

1
<i class="fa fa-tag"></i>

4.13 添加访问量和访客数

\themes\next\layout_partials\footer.swig最前面添加如下代码

1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

4.14 更改容器宽度

更改NexT容器宽度可以参考这个常见问题
Pisces Scheme比较特殊。
themes/next/source/css/_schemes/Pisces/_layout.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
.header{
width: 80%;
+tablet() {
width: 100%;
}
+mobile() {
width: 100%;
}
}
.container .main-inner {
width: 80%;
+tablet() {
width: 100%;
}
+mobile() {
width: 100%;
}
}
.content-wrap {
width: calc(100% - 260px);
+tablet() {
width: 100%;
}
+mobile() {
width: 100%;
}
}

4.15 自定义CSS

默认的博客文章,是按照你选定的主题来显示。其中可能有些并不那么尽如你意。

但是没有关系,你可以自己定义自己满意的css样式,以下是我自己定义的。在这里做个记录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 设置图片不居中
themes/next/source/css/_common/components/post/post-expand.styl

.post-gallery-row .fancybox img { margin: 0 auto !important;}


# 标题格式
themes/next/source/css/_common/scaffolding/base.styl

h1 {
font-size: 27px;
position: relative;
padding: 15px;
margin-bottom: 20px;
border: 1px solid #eee;
border-radius: 3px;
border-left-color: red;
border-left-width: 5px;
background-color: #406CA4;
color: #ffffff;
font-family: cursive;
border-radius: 15px 15px 15px 15px !important;
}

4.16 添加头像

将你的头像放置到 themes/next/source/images/avatar.png

themes/next/_config.yml 设置路径

1
avatar: /images/avatar.png

五、其他实用功能

5.1 给文章加密

打开themes->next->layout->_partials->head.swig文件,搜索pace,在这个代码块后面插入这样一段代码:

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

然后文章中设置

1
password: 你的密码

5.2 博文压缩

在站点的根目录下执行以下命令:

1
2
$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

在根目录下新建gulpfile.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
29
30
31
32
33
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);

生成博文是执行hexo g && gulp就会根据gulpfile.js中的配置,对public目录中的静态资源文件进行压缩。

5.3 设定置顶/顺序

F:\MyBlog\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 值,数值越大文章越靠前(默认是0,按时间排序),如

1
2
3
4
5
6
7
8
---
title: 解决Charles乱码问题
date: 2017-05-22 22:45:48
tags: 技巧
categories: 技巧
copyright: true
top: 100
---

5.5 搜索功能

参照这篇博客,搜索搜索功能

5.7 文章内链接文本样式

F:\MyBlog\themes\next\source\css\_common\components\post\post.styl

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

其中选择.post-body 是为了不影响标题,选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

5.8 归档设置分页数量

在根目录的 _config.yml

1
2
3
4
5
6
7
8
9
10
index_generator:
per_page: 5

archive_generator:
per_page: 20
yearly: true
monthly: true

tag_generator:
per_page: 10

5.9 设置永久链接

在根目录的 _config.yml

1
permalink: :year/:i_month/:i_day/:title.html

博文里设置一下,举个例子

1
permalink: Database-MySQL-Basic_usage

六、多台电脑协同更新博客


上班后,工作都会给配置了一台电脑,而自己家里也有电脑,有时候我想使用家里电脑更新博客,而有时候我也想使用公司电脑更新博客。

这就很蛋疼了,因为Markdown的原文只有一份,如何将两台电脑的原文保持一致呢。当然,容易想到的是代管在Github上。

6.1 Github上操作

将博客项目分成两个分支

  • master为博客界面前端文件
  • hexo 为博文markdown原文

在web界面新建分支,命名为hexo

在web界面设置 hexo 为默认分支,因为我们只会在这个分支上进行操作。

6.2 本地PC操作

clone项目到本地:

1
git clone git@github.com:iswbm/iswbm.github.io.git

使用 git branch 确认此时的分支是否为hexo,如果不是则上面设置默认分支有误,要重新设置。

6.3 处理hexo分支

第一步我们创建hexo分支时,hexo的内容和master的内容是完全一致的,存放的是博客前端文件,这并不是我们想要的,所以我们要先将其清空,再放入我们的文件。

清空hexo分支

1
2
3
4
git checkout --orphan hexo
git rm -rf .
git commit -m "clear hexo branch"
git push origin hexo

将博客原始文件添加进来,但是有一些是没必要放的,具体要放哪些文件,看图片。

1
2
git add -A
git commit -m "add blog markdown raw files"

添加node_modules/文件夹
本来这个文件夹,不需要拷过来的,但是怕安装 hexo-deployer-git 失败,所以之前要拷贝的。

可以从下面这个链接里获取:

下载链接;https://pan.baidu.com/s/1-DHgTuxb0mCj_7wdaKqAwQ
获取密码:pckc

然后检查是否正常渲染

1
2
hexo g
hexo s

如果一切正常,那么再确认下 _config.yml 文件的deploy参数的分支是master,我们可不能将其发布到 hexo 分支。

确认过后,我们就可以发布博客了。

1
hexo d

如果发布出现问题,可能是 hexo-deployer-git 这个插件安装有误,就要想办法装上了。这里就不讲了。

七、更换电脑后如何迁移博客


在真实场景里,我们会有可能会换电脑或者将系统进行重装操作,而这个时候如何将之前的电脑上项目(主要是 Markdown原文)迁移过来呢?

七、多台电脑协同更新博客 这一节里,我们已经讲过,如何将md原文进行管理。

那就好办了呀。只要将之前的项目 clone 下来就可以了呀。

首先肯定是要在新电脑上安装GitNode.JsHexo

7.1 工具安装

安装Git:百度自行下载

安装npm:到 官网 下载exe文件安装

安装hexo:执行以下命令安装(注意需要新开一个git bash窗口,不然会提示找不到npm命令)

1
npm install -g hexo

7.2 clone最新分支

1
git clone git@github.com:iswbm/iswbm.github.io.git

添加node_modules/文件夹
本来这个文件夹,不需要拷过来的,但是怕安装 hexo-deployer-git 失败,所以这里我直接备份一份,可以拷贝覆盖上即可。

下载链接;https://pan.baidu.com/s/1-DHgTuxb0mCj_7wdaKqAwQ
获取密码:pckc

完成之后,应该就可以正常更新博客了。

在写完文章后,一定要注意操作顺序。

  1. 先将hexo分支push要远端

  2. 再执行部署到master分支。

不然哪天这个电脑又出现故障,那就麻烦了。

附录:参考文档



关注公众号,获取最新干货!

-------------Page's overThanks for reading-------------
  • 本文作者: 王炳明
  • 本文链接: http://python.iswbm.com/2020/03/21/1/
  • 发布时间:2020年03月21日 - 20:03
  • 最后更新:2020年03月21日 - 21:03
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!