Hexo 安装步骤记录

Hexo-安装步骤记录

博客关闭很长时间了,发现没有博客记录有时候很不方便,重新选择了 Hexo 搭建静态博客,这里记录一下自己的安装步骤,方便日后安装。

使用 Homebrew 安装 Node.js

1、更新 Homebrew

brew update

2、如果之前使用brew install node安装过

brew unlink node

或直接编辑配置文件,删除链接

vim ~/.bash_profile

3、执行安装

brew install node@10

4、创建链接(加到配置文件~/.bash_profile)

brew link --overwrite --force node@10

5、检查是否安装成功

node -v

6、安装淘宝镜像 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 Hexo

1
2
3
4
5
cnpm install hexo-cli -g
hexo init blog
cd blog
cnpm install
hexo server

安装 OSS 插件

1、安装插件

npm install hexo-deployer-oss --save

2、配置站点根目录下的 _config.xml 文件

1
2
3
4
5
6
deploy:
type: oss
bucket: amdyxu-com
region: oss-cn-shenzhen
accessKeyId: **************
accessKeySecret: **************

安装 Next 主题

1、下载主题

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

2、配置主题

修改站点根目录下的 _config.xml 文件,把 theme: landscape 改为 theme: next,让主题生效。

其他修改请参考Next主题配置文档

新版英文 https://theme-next.org/docs/

旧版中文 http://theme-next.iissnan.com/

优化主题

1、优化文章URL

1.1 修改站点 _config.xml 文件

1
把 permalink: :year/:month/:day/:title/ 改为 permalink: :category/:title.html

1.2 修改 scaffolds/post.md 文件

1
2
3
4
5
6
---
title: {{ title }}
permalink: {{ permalink }}
categories: {{ categories }}
tags: {{ tags }}
---

1.3 链接添加 index.html 让 hexo 支持 OSS

1
2
3
4
5
6
7
8
9
10
11
12
修改 /themes/next/layout/_macro/post.swig
第 128 行,href="{{ url_for(cat.path) }}index.html"
第 366 行,href="{{ url_for(tag.path) }}index.html"

修改 /node_modules/hexo/lib/plugins/helper/paginator.js
所有 a 链接地址添加 index.html

修改 Hexo/node_modules/hexo/lib/plugins/helper/tagcloud.js
第 225 行,在链接地址后面添加 index.html

修改 Hexo/node_modules/hexo/lib/plugins/helper/list_categories.js
第 72、96 行,在链接地址后面添加 index.html

2、修改文章存放路径

1
2
3
当通过命令 hexo new “title.md” 新建文章时,按”年/月”文件夹分类,方便查找。
修改站点 _config.xml 文件,把 new_post_name: :title.md
改为 new_post_name: :year/:month/:title.md

3、自定义 CSS

在“themes/next/source/css/_custom/custom.styl”文件中加入以下 CSS。

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
// Custom styles.

body {
font-family: -apple-system,BlinkMacSystemFont,PingFang-SC-Regular,Hiragino Sans GB,Microsoft Yahei,Arial,sans-serif;
}

@media (min-width: 1200px) {
body {
font-size: 13px;
}
.header {
width: 960px;
}
.container .main-inner {
width: 960px;
}
}

.pagination {
margin: 50px 0 25px;
border-top: 0;
}

.headband {
height: 0;
}

.custom-logo-image {
min-height: 44px;
}

@media (min-width: 992px) {
.custom-logo-site-title {
display: none;
}
.custom-logo-image {
margin-top: 0;
}
.headband {
height: 10px;
background: #f5f7f9;
}
.posts-expand h1.post-title:first-child {
margin: 0 0 15px;
}
.pagination {
margin: 50px 0 0;
border-top: 0;
}
}

.site-author-image {
padding: 0;
border: 0;
}

.btn {
font-size: 12px;
border: 1px solid #555;
border-radius: 0;
}

.site-description {
font-size: 12px;
padding: 0 12px;
}

.posts-expand {
padding-top: 0;
}

.posts-expand .post-meta {
margin: 3px 0 30px 0;
}

code {
padding: 2px 4px;
background: #f7f7f7;
border-radius: 0;
font-size: 11px;
}

pre, .highlight {
font-size: 11px;
}

.post-nav-item a {
font-size: 12px;
}

.pagination .prev, .pagination .next, .pagination .page-number {
border: 1px solid #eee;
}

.page-number-basic, .pagination .prev, .pagination .next, .pagination .page-number, .pagination .space {
margin: 0 5px;
}

@media (min-width: 1200px) {
.posts-collapse {
margin-left: 20px;
padding-right: 20px;
}
}

.posts-collapse .collection-title {
margin: 30px 0;
}

.posts-collapse .post-header {
border-bottom: 0;
}

.posts-collapse .post-title {
font-size: 13px;
line-height: 2.5;
}

.posts-collapse .post {
margin: 0;
}

.sidebar-nav li {
font-size: 13px;
}

.post-toc ol {
font-size: 12px;
}

.posts-expand .post-body img {
padding: 0;
border: 0;
}

.posts-expand .post-tags a {
font-size: 12px;
}

.posts-expand .post-eof {
margin: 40px auto 40px;
width: 100%;
height: 1px;
background: #fff;
text-align: center;
}

.pagination .prev, .pagination .next, .pagination .page-number {
border: 0;
background: #ddd;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

.pagination .prev:hover, .pagination .next:hover, .pagination .page-number:hover, .pagination .page-number.current {
color: #fff;
background: #222;
}

.page-number-basic, .pagination .prev, .pagination .next, .pagination .page-number, .pagination .space {
padding: 0;
}

.local-search-popup ul.search-result-list li {
list-style-type: none;
line-height: 1.6;
}

.local-search-popup a.search-result-title {
border-bottom: 0;
}

.local-search-popup p.search-result {
padding: 10px 0 15px 0;
margin-bottom: 15px;
}

.footer {
font-size: 12px;
}

.footer a, span.exturl {
border-bottom: 0;
color: #999;
}

4、安装 RSS 插件

npm install hexo-generator-feed --save

配置主题 _config.yml 第 48 行

1
2
3
4
5
6
7
8
9
10
11
rss: /atom.xml
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png

通过分组映射实现URL中文转英文

修改站点 _config.yml 第 56 行

1
2
3
4
category_map:
操作系统: operating system
tag_map:
阿里云: aliyun

实现 www 301跳转

发现阿里云的CDN和OSS中都没有301跳转功能,于是用了自己的香港VPS中的IIS实现了带 www 域名向不带 www 域名的跳转。

具体操作请查阅Windows 2008 IIS7 下导入阿里云 SSL 证书配置 HTTPS