一个计算机技术爱好者与学习者

0%

好好学Hexo:Hexo环境搭建2021年8月版

1. 前言

15年的时候,写了一篇《Hexo环境搭建》,记录了hexo的详细安装部署步骤。18年的时候,写了一篇《Hexo环境搭建2018年5月版》,对安装方法和步骤进行了更新。转眼又过了三年,今天再整理一版hexo环境搭建的流程,与时俱进。

2. 环境准备

系统环境:MACOS

安装brew、git、nvm、node,具体安装方法可以参考《MacOS上软件配置》

其中,node版本选择 v12.22.5

3. 安装hexo

1、切换国内源
npm config set registry="https://registry.npm.taobao.org"

2、安装hexo

1
2
npm install -g hexo
which hexo

3、初始化
新建hexo目录,并安装依赖包。

1
2
3
hexo init hexo
cd hexo
npm install --force

4、测试
hexo ghexo s,然后查看 http://localhost:4000

4. 安装依赖

4.1. 添加RSS

npm install hexo-generator-feed --save

注意,后面的参数--save绝对不能省,否则该插件信息不会写入package.json。
hexo cleanhexo g,查看public文件夹,可以看到atom.xml文件。

4.2. 添加sitemap

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

如果报错:gyp: No Xcode or CLT version detected!
可以忽略它,也可以通过重装xcode-select解决

1
2
3
4
5
xcode-select --print-path
sudo rm -r -f /Library/Developer/CommandLineTools
sudo xcode-select --install
xcode-select --install
sudo xcode-select --reset

hexo cleanhexo g,查看public文件夹,可以看到sitemap.xml和baidusitemap.xml文件。
sitemap的初衷是给搜索引擎看的,为了提高搜索引擎对自己站点的收录效果,我们最好手动到google和百度等搜索引擎提交sitemap.xml。具体参考《hexo生成sitemap》

4.3. 支持本地搜索

1
npm install hexo-generator-searchdb --save

需要配合_config.yml配置和主题配置,详情参考《Hexo更换主题为Next》

4.4. 支持git部署

1
npm install hexo-deployer-git --save

5. 安装主题

进入hexo/themes目录,下载自己维护的next主题
git clone https://github.com/voidking/hexo-theme-next.git next

该主题的更多个性化设置,可以参考《Hexo更换主题为Next》

6. config.yml配置

hexo目录中的_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
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
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 好好学习的郝
subtitle: 好好学习,天天向上!
description: 学而不思则罔,思而不学则殆!
author: 好好学习的郝
language: zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.voidking.com
root: /
permalink: :title/

permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
- '*.html'

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# 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

# Pagination
## Set per_page to 0 to disable pagination
per_page: 5
pagination_dir: page

index_generator:
per_page: 5

archive_generator:
per_page: 100
yearly: true
monthly: true

tag_generator:
per_page: 100

category_generator:
per_page: 100

# local search
search:
path: search.xml
field: post
format: striptags
limit: 10000

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: next

# Deployment
## Docs: http://hexo.io/docs/deployment.html
# github and gitee
deploy:
- type: git
repo: https://voidking.com/voidking/voidking.github.io.git
branch: master

7. 发布

7.1. github

1、在github上注册一个帐号。

2、新建一个项目,和帐号名相同。

3、项目启动Pages服务。

7.2. 本地操作

1、生成本地代码
hexo g

2、本地测试
hexo s,然后访问 http://localhost:4000

3、发布到github
hexo d

4、线上测试
http://voidking.github.io

7.3. 域名

1、申请域名。

2、域名解析添加CNAME记录指向voidking.github.io

3、voidking.github.io项目中添加CNAME文件,绑定域名。

4、测试访问。

8. 后记

以上,hexo安装部署完成。有些步骤写的比较简单,不理解的可以自行谷歌百度。