Hexo博客搭建

发表于 | 分类于 | 阅读次数:

1. 环境准备

安装 Node.js

官网下载：https://nodejs.org/en/download/

安装 Hexo

打开 Node.js command prompt，在控制台中输入命令：

1
npm install -g hexo-cli

2. 设置Hexo

继续在控制台窗口中定位到放置博客的文件夹，输入初始化命令：

1
hexo init [folder]

进入目录，然后输入启动本地服务器的命令：

1
hexo s

接下来就可以使用浏览器在下面的地址中看到博客页面了：http://localhost:4000

3. 安装主题

接下来安装使用Next主题。
继续在控制台窗口的博客目录下输入命令：

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

此命令安装的是Next v5.1.4版本，本文的以下内容均以此版本为讨论环境。需要注意的是，此版本目前已经停止更新维护。如果希望安装更新的7.x版本，可以使用命令：

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

在博客目录下找到_config.yml文件，使用编辑器修改以下内容：

1
2
theme: next
language: zh-Hans

其他可以修改的设置包括：

1
2
title: 
author:

4. 主题设置

修改配置文件

在博客目录下找到主题所在目录（\themes\next），在其中找到_config.yml文件，使用编辑器打开后看到以下内容：

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

将其中||符号前的空格删除，这样处理后，点击网站页面顶部菜单中的首页和归档就能正常显示了，否则会出现404错误。

创建新页面

如果还需要在页面顶部菜单中添加分类、标签、关于等分类页面的话，除了在上述_config.yml配置文件中打开相应的菜单项之外，还需要在控制台窗口中使用以下命令来创建新页面：

1
2
3
hexo new page "categories"
hexo new page "tags"
hexo new page "about"

也可以在Hexo Admin插件中使用Pages功能来创建新页面，关于Hexo Admin插件的使用方法可以参见下方的安装插件部分。

设置页面类型

在创建上述页面之后，还需要设置他们的页面类型属性，具体做法如下：
在创建页面后，博客目录的source文件夹下方会有categories、tags等文件夹自动生成，使用编辑器打开其中的index.md文件，会显示如下内容：

1
2
3
4
---
title: categories
date: 2020-02-03 18:04:07
---

可以在其中增加一项type属性，来标识页面的类型，例如：

1
2
3
4
5
---
title: categories
date: 2020-02-03 18:04:07
type: "categories"
---

这样处理后，点击网页顶部菜单中的分类页面就可以显示文章类别了。
如果希望在这些页面中禁止用户评论，还可以加上代码：

1
comments: false

修复侧边栏代码错误

v5.1.4版本在侧边栏中点击日志，会出现404错误，修复这个问题需要修改侧边栏的代码。
在博客目录下找到主题所在目录（\themes\next），然后在\layout_macro路径下找到sidebar.swig文件，使用编辑器打开后找到以下内容：

1
2
{% if theme.menu.archives %}
                <a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">

将上述代码修改为下方的内容（修改一个括号的位置）：

1
2
{% if theme.menu.archives %}
                <a href="{{ url_for(theme.menu.archives.split('||')[0]) | trim }}">

这样处理以后，侧边栏中的日志菜单点击以后就可以正常显示页面了。

其他个性化设置

  • 去除图片的边框线
    在博客目录下找到主题所在目录（\themes\next），然后在source\css_common\components\post路径下找到post-expand.styl文件，使用编辑器打开后找到以下内容：
1
2
3
4
5
6
img {
    box-sizing: border-box;
    margin: auto;
    padding: 3px;
    border: 1px solid $gray-lighter;
  }

修改其中的border设置：

1
border: none
  • 侧边栏中显示联系方式
    在博客目录下找到主题所在目录（\themes\next），在其中找到_config.yml文件，使用编辑器打开后看到以下内容：
1
2
3
4
5
6
7
8
9
10
11
#social:
  #GitHub: https://github.com/yourname || github
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook

social_icons:
  enable: true
  icons_only: false
  transition: false

在其中设置需要显示的社交媒体或链接，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
social:
  #GitHub: https://github.com/yourname || github
  E-Mail: mailto:fangji@excel365.net || envelope
  Weibo: https://weibo.com/excelbible || weibo
  Homepage: http://excel365.net || home
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook

social_icons:
  enable: true
  icons_only: true
  transition: false
  • 显示部分内容和Read More
    在博客目录下找到主题所在目录（\themes\next），在其中找到_config.yml文件，使用编辑器打开后看到以下内容：
1
2
3
4
5
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150

将其中的enable设置为True，网站首页中的文章就会自动在150个字符后显示Read More按钮，如果希望手动控制显示的位置，可以在文章中使用<!-- more -->标签来进行控制。

5. 安装插件

安装Hexo Admin插件：

1
npm install --save hexo-admin

安装完成后，可以通过下面的地址使用：
http://localhost:4000/admin

Hexo Admin当中可以创建和编辑文章（Post）和页面（Page），文章的Tags和Categories都可以在其中设置。

6. Github设置

创建Github项目

在Gitgub当中使用New Repository创建一个新项目，命名为：

1
<username>.github.io

项目属性设置为公开

完成后会创建出基于这个项目的Github pages，访问地址就是：

1
https://<username>.github.io

新增 SSH 密钥

方案一：

在git/cmd目录下打开 git-gui，Help -> Show SSH Key -> Generate Key，会在用户文件夹当中生成id_rsa.pub文件，同时在窗口中显示密钥内容。

方案二：

在git目录下打开git-bash，输入以下命令：

1
ssh-keygen -t rsa -b 4096 -C "<your_email@example.com>"

将密钥设置到GitHub

在Github中点击Settings -> SSH and GPG keys -> New SSH key，将id_rsa.pub中的密钥内容复制粘贴并保存。

7. Hexo发布设置

在Hexo中安装Git插件

在Hexo的命令窗口中输入以下命令：

1
npm install hexo-deployer-git --save

配置插件

编辑博客目录下的_config.yml文件：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:<username>/<username>.github.io.git
  branch: master

其中repo的地址也可以从git项目的Clone or download当中复制获取

发布内容

在hexo控制台中输入以下命令：

1
hexo d -g

8. 私有域名绑定

域名解析

在域名的DNS服务商，为希望绑定的域名添加CNAME记录，解析地址指向:

1
<username>.github.io

Github设置

在Github项目的Settings设置当中，找到GitHub Pages的Custom domain选项，填入私有域名

Hexo设置

在博客的文件夹下方找到source目录，在其内部新建一个名称为CNAME的文件，文件内容中填写私有域名

9. Hexo配置详解

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

# Site
title:						## 网站标题
subtitle:					## 网站副标题
description:					## 网站描述
author:						## 您的名字
language:					## 网站使用的语言
timezone:					## 网站时区。Hexo 预设使用您电脑的时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 						## 网址
root: /						## 网站根目录
permalink: :year/:month/:day/:title/		## 文章的 永久链接 格式
permalink_defaults:				## 永久链接中各部分的默认值 



# Directory
source_dir: source				## 资源文件夹，这个文件夹用来存放内容。
public_dir: public				## 公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags					## 标签文件夹
archive_dir: archives				## 归档文件夹
category_dir: categories			## 分类文件夹
code_dir: downloads/code			## Include code 文件夹
i18n_dir: :lang					## 国际化（i18n）文件夹
skip_render:					## 跳过指定文件的渲染，您可使用 glob 来配置路径。

# Writing
new_post_name: :title.md			## 新文章的命名
default_layout: post				## 预设布局
titlecase: false				## 标题转换为首字母大写
external_link: true				## 在新标签页中打开外部链接
filename_case: 0				## 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false				## 显示草稿
post_asset_folder: false			## 启动 Asset 文件夹
relative_link: false				## 把链接改为与根目录的相对位址
future: true					## 显示未来的文章
highlight:					## 代码块的设置
  enable: true					## 启用
  line_number: true				## 行号
  tab_replace: true				## tab 替换

# 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: 10					## 每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page				## 分页目录

# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme:						## 当前主题名称

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:						## 部署
  type:

9. 参考资料

uchuhimo’s blog: 如何使用 Hexo 和 GitHub Pages 搭建这个博客
官方说明文档: Hexo文档