环境准备

  1. 安装Node.js
  2. 安装Git
  3. 通过npm安装Hexo命令行工具:npm install -g hexo-cli

初始化Hexo项目

  1. 创建项目文件夹:

    1
    2
    hexo init myblog   # myblog为项目名称
    cd myblog
  2. 安装依赖包:npm install

  3. 本地运行和预览,服务启动完毕后,访问http://localhost:4000查看效果。

    1
    2
    3
    4
    # 1.生成静态文件
    hexo g # 或 hexo generate
    # 2.启动本地服务
    hexo s # 或 hexo server

配置GitHub仓库

  1. 创建GitHub仓库:在GitHub上新建一个仓库,名称为 用户名.github.io(例如 username.github.io)。
  2. 获取仓库地址:复制仓库的HTTPS或SSH地址(如 https://github.com/username/username.github.io.git)。

使用Archer主题

参考Archer说明:https://github.com/fi3ework/hexo-theme-archer

  1. 拉取 Archer 主题文件到 themes/archer 目录:

    git clone https://github.com/fi3ework/hexo-theme-archer.git themes/archer

  2. 安装必要依赖:npm install hexo-generator-json-content

  3. 在 _config.yml 中添加以下配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    jsonContent:
    meta: true
    pages: false
    posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: true
    excerpt: false
    categories: true
    tags: true
  4. 配置archer主题:修改 _config.yml 主题配置:theme: archer

主题个性化配置

当前目录结构如下

1
2
3
4
5
. # 「Hexo 根目录」
├── themes
│ └── archer # 「Archer 主题目录」
│ └── _config.yml # Archer 主题配置文件
└── _config.yml # Hexo 配置文件
  1. 将Hexo根目录下的配置文件重命名为:_config.yml.template
  2. 复制Archer的配置文件到Hexo的根目录下。
  3. 再次从Archer中复制一个配置文件,重命名为:_config.archer.yml。以后archer相关的个性化配置,都在这个配置文件中修改。

_config.archer.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
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
# ========== Profile ========== #
language: en
# avatar
avatar: /avatar/Sakuragi.jpg
# author name
author: Noodles
# signature
signature: 会当击水三千里
# SNS (you can custom the order)
social:
email: #xxx@qq.com
github: //github.com/rice-noodles
# wechat should be a path of qr-code image path
wechat: #/assets/example_qr.png
# qq should be a path of qr-code image path
qq:
telegram:
weibo:
zhihu:
douban:
facebook:
twitter:
instagram:
stack-overflow:
segmentFault:
juejin:
v2ex:
bilibili:
linkedin:
steam:
others:
rss:
# friends
friends:
# friendA: //www.baidu.com
# friendB: //www.google.com
about:
enable: false
image: /intro/about-bg.jpg
# Search for website
search:
enable: false
# Seach URL, must be set. For example: 'fi3ework.github.io'
url:
# Search engine: 'bing' (default), 'google' or 'baidu'
engine: bing
# Display icons of friends, about and search
# You can only use free icons started with 'fab' and 'fas' by default
# https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=brands,solid&m=free
profile_icons:
enable: false
friends: 'fas fa-heart'
about: 'fas fa-id-card'
search: 'fas fa-search'
# Additional profile links
profile_links:
# - name: GOOGLE
# url: //www.google.com
# icon: 'fab fa-google'
# - name: GALLERY
# url: //www.unsplash.com
# icon: 'fas fa-images'

# ========== Site ========== #
# title of the site (good for SEO)
SEO_title: Noodels
# keywords for site (good for SEO)
SEO_keywords:
- hexo
- 'hexo-theme'
- 'hexo-blog'
# main title shown in header image
main_title: Noodels的个人网站
# subtitle
subtitle:
# site haeder image
site_header_image: /intro/index-bg.jpg
# post haeder image
post_header_image: /intro/post-bg.jpg
# 404 image
_404_image: /intro/404-bg.jpg

# ========== Theme ========== #
# Truncate length of abstracts in index page (the default is 300, there will be no abstruct if you input 0)
truncate_length: 300
# Show read more button if using excerpt or abstract to display abstracts in index page
read_more_button: false
# Enable toc
toc: true
# Word count & Reading time
reading_info: false
# Intro height (the default is 50 percents of the screen, you can input other number)
index_intro_height: 50
post_intro_height: 50
about_intro_height: 50
# Blog float button theme ('default' or 'rounded')
float_button_theme: default
# Blog read progress color ('default' for black or 'feature' for feature-color)
read_progress_color: default
# Blog post banner theme ('default' or 'clean')
post_banner_theme: default
# Display profile avatar's border
avatar_border: true
# Stick profile info
# Keep false if you have too many profile links
profile_sticky: false
# Show categories info in index and post page
show_categories: false

# ========== Search ========== #
algolia_search:
enable: false
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "We did not find any results for the search: ${query}"
hits_stats: "${hits} results found in ${time} ms"

# ========== Donate ========== #
donate:
enable: false
title: Buy Me A Coffee
description: If this post helped you, please consider buying the author a cup of sugar-free coffee ☕️.
qr_code:
- url: /assets/donate-wechat.png
alt: Wechat
- url: /assets/donate-alipay.png
alt: Alipay

# ========== Comment ========== #
# Fill in the field to enable the corresponding comment plugin
# If you want to add other comment plugin, edit in "custom.ejs"
comment:
# Livere site: https://livere.com/
livere_uid:
# Disqus site: https://disqus.com/
disqus_shortname:
# Gitment site: https://github.com/imsun/gitment
gitment_owner:
gitment_repo:
gitment_client_id:
gitment_client_secret:
# Youyan site: http://www.uyan.cc/
youyan_uid:
# Valine site: https://valine.js.org/
valine_appId:
valine_appKey:
valine_placeHolder:
# Waline site: https://waline.js.org/
# https://waline.js.org/reference/client/props.html#serverurl
waline_serverURL:
# https://waline.js.org/cookbook/customize/locale.html locale.placeholder
waline_placeHolder:
# https://waline.js.org/reference/client/props.html#login
waline_login:
# gitalk site: https://github.com/gitalk/gitalk/
# Value 'true' is recommended for gitalk_pathname_id setting
gitalk_client_id:
gitalk_client_secret:
gitalk_admin:
gitalk_owner:
gitalk_repo:
gitalk_pathname_id: false
gitalk_create_issue_manually: true
# utteranc site: https://utteranc.es/
utteranc_repo:
utteranc_label:
utteranc_theme:
utteranc_issue_term:

# ========== Analytics ========== #
# enable Busuanzi analytics
busuanzi: true
# fill in pv or uv
busuanzi_pv_or_uv: 'pv'
# custom analytic slogan, '${count}' is the analytic number, DO NOT modify it.
busuanzi_slug: 'PV: ${count} :)'
# Baidu analytics
baidu_analytics:
# Google analytics
google_analytics:
# CNZZ analytics
CNZZ_analytics:

# ========== Others ========== #
# Favicon
favicon: /assets/favicon.ico
# Post copyright
copyright:
enable: true
# https://creativecommons.org/
license: '本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可'
# Website Approve
website_approve:
enable: false
icp_approve:
beian_approve:
beian_img: /assets/beian.png
# Blog page article timeliness note
outdated_threshold:
enable: false
days: 180
# By default, timeliness reminder will be displayed for each article. That's not necessarily what you want.
# If true, you can set `timeliness: true` for specified article to enable the reminder.
specify_article: false
# Mermaid Chart: https://github.com/knsv/mermaid
mermaid:
enable: false
# Version number '8' is for the latest '8.x' version of Mermaid.
version: 8.11.0
theme: dark
# find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
options:
# LaTeX Math Equations Support
math:
mathjax:
enable: false
# Specified version number no less than '3.0.0', or you need to modify the CDN link manually.
# Version number '3' is for the latest '3.x' version of MathJax.
version: 3.2.0

# ========== Experimental Options ========== #
# NOTE: The options below are experimental options.
# They may have browser compatibility issues or may cause a functional breakdown of the web page.

# Custom font [browser compatibility issue]
# Based on https://github.com/typekit/webfontloader
# Please read README.md to enable this option correctly.
custom_font:
enable: false
# Font name, use ':' to select font weight and font style
name: 'Noto Sans SC:n3,n4,n5,n7'
# Font CDN url
url: 'https://fonts.googleapis.cnpmjs.org/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap'

theme: archer

jsonContent:
meta: true
pages: false
posts:
title: true
date: true
path: true
text: false
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: true
excerpt: false
categories: true
tags: true

侧边栏菜单修改成中文

  1. 在Hexo的根目录下,找到这个目录:\themes\archer\layout\_partial\sidebar
  2. 使用编辑器打开 base-sidebar.ejs,修改成以下内容。
1
2
3
4
5
6
7
8
9
10
11
12
<div class="sidebar sidebar-hide">
<ul class="sidebar-tabs sidebar-tabs-active-0">
<li class="sidebar-tab-archives"><span class="iconfont-archer">&#xe67d;</span><span class="tab-name">归档</span></li>
<li class="sidebar-tab-tags"><span class="iconfont-archer">&#xe61b;</span><span class="tab-name">标签</span></li>
<li class="sidebar-tab-categories"><span class="iconfont-archer">&#xe666;</span><span class="tab-name">分类</span></li>
</ul>
<div class="sidebar-content sidebar-content-show-archive">
<%- partial('./sidebar-archives') %>
<%- partial('./sidebar-tags') %>
<%- partial('./sidebar-categories') %>
</div>
</div>

部署到GitHub Pages

  1. 安装 hexo-deployer-gitnpm install hexo-deployer-git --save
  2. _config.yml 中添加以下配置
1
2
3
4
5
deploy:
type: git
repo: <repository url> # GitHub Pages 项目的url
branch: [branch] # 作为个人网站展示的分支
message: [message] # 提交备注
  1. hexo-deployer-git 并不会存储GitHub的用户名和密码。 需要使用 git-credential-cache 来临时存储它们。

    1
    git config credential.helper cache
  2. 生成静态文件并部署:

    1
    2
    3
    hexo clean   # 清除缓存
    hexo g -d # 生成文件
    hexo deploy # 部署到GitHub Pages
  3. 验证部署:访问 https://username.github.io,查看网站是否生效。

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 初始化本地文件夹为网站的根目录,简写:i
hexo init

# 生成静态文件,简写:g
hexo generate

# 新建文章,简写:n
hexo new

# 启动本地服务器,简写:s
hexo server

# 部署,简写:d
hexo deploy

# 清除缓存
hexo clean