基于Hexo和Github搭建博客

发表于 分类于 阅读次数： 本文字数： 10k 预计阅读时长 ≈ 17 分钟

前言

本人的博客采用Hexo+Github的方式完成，采用这两者相结合的方式的原因在于：一方面，虽然Hexo是一个静态博客框架，但是本人觉得个人博客只在于记录一些学习过程中的心得和学习笔记，所以静态博客框架完全可以满足这种需求；另一方面，Github提供了Github Pages这种免费的静态站点托管服务，这对于我这种学生党来说无疑是一种福音。

Hexo版本信息

鉴于Hexo框架更新迭代较快，当版本不同时很多配置文件都不相同，因此建议选择对应版本的教程进行阅读。以下是本人的Hexo版本具体信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
hp@LAPTOP-RB9QDBHV MINGW64 /f/My-Blog
$ hexo v
NexT version 8.12.2
Documentation: https://theme-next.js.org
========================================
hexo: 6.2.0
hexo-cli: 4.3.0
os: win32 10.0.19043
node: 14.15.1
v8: 8.4.371.19-node.17
uv: 1.40.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.16.1
modules: 83
nghttp2: 1.41.0
napi: 7
llhttp: 2.1.3
openssl: 1.1.1g
cldr: 37.0
icu: 67.1
tz: 2020a
unicode: 13.0

1.环境准备

Hexo博客的搭建已于Node.js，博客搭建过程中需要使用Git进行博客版本控制，因此首先需要安装这两个工具：

（1）Node.js: http://nodejs.cn/download/

（2）Git: https://git-scm.com/downloads

安装完成之后，Win+R输入cmd打开命令行窗口，输入node -v, npm -v, git --version检查是否安装成功（ps：Node.js中安装了npm命令安装模块，因此不需要额外安装）。若cmd窗口如下图所示，说明安装成功，如下图所示：

2.创建Github仓库

首先需要使用Git命令行连接到自己的Github账号（这个网上教程很多，这里不再赘述）；因为需要使用Github Pages服务，所以需要在Github中先创建一个仓库，：Repository name中填入Github用户名.github.io，并勾选Add a README file，如下图所示：

3.安装Hexo

首先需要在本地新建一个文件夹用于存放博客程序所有文件，例如My-Blog。然后进入My-Blog文件夹，右键选择Git Bash Here打开Git命令窗口，然后依次输入以下命令：

1
2
3
4
5
npm install -g hexo-cli		# 安装Hexo博客程序
hexo init					# 初始化
npm install					# 安装组件
hexo g						# 生成页面
hexo s						# 启动预览

访问http://localhost:4000，若出现Hexo默认界面，则说明安装成功。

4.部署Hexo至Github

首先安装hexo-deployer-git插件：

1
npm install hexo-deployer-git --save

然后修改站点配置文件（My-Blog/_config.yml）：

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

然后在Git命令窗口中输入hexo d命令将博客上传部署到Github Pages中。

注意到我们这里是将Hexo博客上传到了master分支，因此需要在中将默认分支改为master，如下图所示：

至此所有安装部署操作均已完成，这时访问https://用户名.github.io就可以看到我们自己的网站了！

5.创建并发布文章

首先打开本地博客程序根目录（My-Blog），右键选择Git Bash Here，输入以下命令创建文章：

1
hexo new "文章名称"

此时会发现在My-Blog/source/_posts文件夹中出现了“文章名称.md”文件，然后便可在本地打开该文件进行文章的内容编辑（建议使用Typora）。

文章写完之后需要执行hexo g命令渲染成前端界面，然后执行hexo d命令部署到Github上，这样就完成了一篇文章的发布：

1
2
3
hexo clean	# 清除缓存文件（可以不执行该命令）
hexo g		# 生成页面
hexo d		# 部署页面

6.站点配置文件

站点配置文件位于My-Blog/_config.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
# Site
title: 					# 博客标题
subtitle: 				# 博客子标题
description: 			# 博客描述
keywords: 				# 关键词，用于SEO优化
author: 				# 作者名称
language: zh-CN			# 语言	
timezone: 				# 时区

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://用户名.github.io/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Writing
new_post_name: :title.md 	# 新文章命名方式
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10		# 每页文章数量
  order_by: -date	# 文章排序方法

# 时间格式
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'


# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next			# 主题设置（选择My-Blog/themes文件夹下对应的主题目录名称）

# 部署配置
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: master

7.主题配置文件（Next）

主题配置文件位于My-Blog/themes/主题名称/_config.yml鉴于Next主题集成了丰富的插件，且网上对于其优化的解决办法也相当充足，因此采用了Next主题，其主题配置文件如下所示（这里只展示部分配置，具体的美化配置请见后面的Next美化配置）：

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
# 自定义文件（设置这些文件时，需要在My-Blog/source文件下新建对应的文件，并将对应的注释符号去除）
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

# 主题格式设置（设置哪一种格式，就将哪一种格式前面的注释符合去除）
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

# 网站图标设置（自定义网站图标时，需要将图标放置在My-Blog/themes/next/source/images文件夹下，并在下面设置相应的图标名称）
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

# 菜单设置（在需要的标签前面去除注释符号即可展示在主页中）
menu:
  #home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  #archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# 菜单图标设置
# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true


# 侧边栏设置
sidebar:
  # 位置
  # Sidebar Position.
  position: left
  #position: right

  # 宽度
  width: 300

  # 展示方式
  display: post

  # Sidebar padding in pixels.
  padding: 18
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12

# 侧边栏头像设置
avatar:
  # 自定义头像需要在My-Blog/themes/next/source/images文件夹下放置头像，并对下面的url进行相应的修改
  url: /images/avatar.png
  # 是否以圆形进行展示（圆形/方形）
  rounded: true
  # 是否旋转
  rotated: false

# 社交链接设置（需要展示哪些社交链接只需去除其前面的注释）
social:
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype
  
# 社交链接图标设置
social_icons:
  enable: true
  icons_only: false		# 是否只展示图标
  transition: false		# 是否需要过渡效果

# 页脚设置
footer:
  # 展示网站创立的年份
  since: 2022

  # 网站创立时间和版权信息之间的图标
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-user
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#999999"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright:

  # 是否需要在页脚展示"Powered by Hexo & NexT"
  powered: false

# 是否需要"回到顶部"功能
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true


# 是否需要点击图片放大功能
fancybox: true

8.Next美化配置

8.1摘要文字长度

摘要文字长度建议使用<!--more-->进行手动设置，很多插件虽然也能直接设置长度，但个人觉得插件实现的效果不是很好，具体实现方法如下：

首先在主题配置文件My-Blog/themes/主题名称/_config.yml中进行如下配置：

1
2
3
excerpt_description: true

read_more_btn: true

然后在需要发布的文章的md文件中添加<!--more-->，如下所示：

1
2
3
4
5
6
7
title: 文章标题
tags: Hexo
categories: 搭建博客

摘要文字
<!--more-->
其他内容

这样设置之后，在文章摘要页面就只能看到”摘要文字”，而看不到”其他内容”。

8.2文章末尾添加统一结束语

在Hexo博客程序根目录下的source文件夹中新建_data/post-body-end.njk文件，并进行如下设置：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px; padding-top: 10px;">--------------------------------------- <i class="fa fa-heart"></i> 本文结束，感谢您的阅读 <i class="fa fa-heart"></i> ---------------------------------------  </div>
    {% endif %}
</div>

之后，需要在主题配置文件中查找custom_file_path，并去除postBodyEnd: source/_data/post-body-end.njk前面的注释符号：

1
2
3
4
5
6
7
8
9
10
11
12
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

8.3代码块

进入主题配置文件My-Blog/themes/主题名称/_config.yml并进行如下设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
codeblock:
  # 代码块主题
  theme:
    light: default
    dark: stackoverflow-dark
  prism:
    light: prism
    dark: prism-dark
  # 是否支持一键复制
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: mac

8.4今日诗词

在Hexo博客程序根目录下的source文件夹中新建_data/post-body-end.njk文件，并进行如下设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="//sdk.jinrishici.com/v2/browser/jinrishici.js"></script>
<script>
  jinrishici.load((result) => {
    let jrsc = document.getElementById('jrsc');
    const data = result.data;
    let author = data.origin.author;
    let title = '《' + data.origin.title + '》';
    let content = data.content.substr(0, data.content.length - 1);
    let dynasty = data.origin.dynasty.substr(0, data.origin.dynasty.length - 1);
    jrsc.innerText = content + ' ' + '[' + dynasty + ']' + author + title;
  });
</script>
<div style="text-align: center"><span id="jrsc" >正在加载今日诗词....</span></div>

之后，需要在主题配置文件中查找custom_file_path，并去除postBodyEnd: source/_data/post-body-end.njk前面的注释符号：

1
2
3
4
5
6
7
8
9
10
11
12
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

8.5奖赏

进入主题配置文件My-Blog/themes/主题名称/_config.yml并进行如下设置：

1
2
3
4
5
6
7
8
9
10
11
12
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true				# 是否开启奖赏功能
  animation: true			# 动画
  #comment: Buy me a coffee

# 去粗话需要的支付方式前面的注释符号，并在My-Blog/themes/主题名称/source/images文件夹下放入对应的图片
reward:	
  #wechatpay: /images/wechatpay.png
  #alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

8.6页面加载效果

进入主题配置文件My-Blog/themes/主题名称/_config.yml并进行如下设置：

1
2
3
4
5
6
7
8
9
pace:
  enable: true
  # 所有可选颜色:
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: black
  # 所有可选主题:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: loading-bar

9.结束语

基于Hexo+Github搭建博客就讲到这，对于Next主题的美化其实还有很多内容，鉴于网上教程过多，这里就只列出一部分。总体来说，能够完成个人博客的搭建，我个人的所有需求基本满足，日后我会继续在这里更新我阅读的每一篇文献，希望有兴趣的朋友可以多多关注！

--------------------------------------- 本文结束，感谢您的阅读 ---------------------------------------
正在加载今日诗词....
HL 微信 微信
HL 支付宝 支付宝
欢迎关注我的其它发布渠道