想拥有属于自己的极简、快速、高颜值静态博客?
跟着这篇「一条龙」教程,30 分钟搞定从安装到部署的完整流程!

1. 安装前置依赖

工具 版本要求 下载地址
Node.js ≥ 14.0 官网
Git 任意新版本 官网

安装完后终端执行验证:

1
2
node -v      # 显示 v14 以上即 OK
git --version

2. 创建博客

1
2
3
4
5
6
7
8
9
10
11
12
① 初始化博客脚手架(自动生成目录)
hexo init blog

② 进入博客根目录
cd blog

③ 安装核心依赖
npm install

④ 启动本地服务器,实时预览
hexo server
# 简写:hexo s

3. 站点基础配置

打开站点配置文件 _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
98
# Site
title: Camelio's Blog
subtitle: 极简极速高颜值
description: 分享技术、记录生活
keywords: Hexo, Blog, Node.js
author: Camelio
language: zh-CN
timezone: Asia/Shanghai

# URL
url: https://yourname.github.io
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
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name for new posts
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: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''

# 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

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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

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

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: ''

4.一键切换高颜值主题(以 NexT 为例)

1
2
3
4
5
6
7
8
9
10
11
# 进入博客根目录
cd blog

# 克隆 NexT 最新版
git clone https://github.com/next-theme/hexo-theme-next themes/next

# 启用主题(命令行一键替换)
sed -i 's/theme: landscape/theme: next/g' _config.yml

# 安装增强插件( feed / sitemap / 搜索 )
npm install hexo-generator-feed hexo-generator-sitemap hexo-generator-searchdb --save

5. 启动博客