从零开始的Hexo博客搭建教程(一):开始

从零开始的Hexo博客搭建教程(一):开始

🎂 开始你的 Hexo 之旅

Why Hexo?

基础搭配:Git + Github Pages + Hexo

优点

  • 免费 - GitHub
  • 快速 - Node 运行环境、前端个人站点首选
  • 简洁 - MarkDown
  • 轻量 - 全部静态文件
  • 支持导入 WordPress 等博客

不足

  • 更换电脑不变 - 需重新安装环境
  • 静态博客 - 后期不便于维护
  • 多媒体管理较难

Get Started

安装

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

1
$ npm install -g hexo-cli

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init 
$ cd
$ npm install

配置

您可以在 _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
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
# Hexo Configuration Hexo配置文件
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# 网站信息
#标题
title: 博客标题
#副标题
subtitle: 博客副标题
#网站描述
description: 博客简介,涉及SEO
#作者昵称
author: gylidian
#网站语言,默认英语,设置简体汉语
language: zh-Hans

#时区,默认电脑时区
#timezone:
timezone: Asia/Shanghai

# 网址设置
#如果网站是放在子目录中,将url设置成'http://yoursite.com/child',将root设置成'/child/'
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
#网址
url: http://www.nuist.today
#网站根目录。如果网站是放在子目录中,将root设置成'子目录名'
root: /
#文章链接地址格式 。即文章存放的目录。
permalink: :title/
permalink_defaults:

# 目录设置
#资源文件夹,放在里面的文件会上传到github中
source_dir: source
#公共文件夹,存放生成的静态文件
public_dir: public
#标签文件夹,默认是tags。实际存放在source/tags中。
tag_dir: tags
rss_dir: rss
#档案文件夹,默认是archives。
archive_dir: archives
#分类文件夹,默认是categories。实际存放在source/categories中。
category_dir: categories
#代码文件夹,默认是downloads/code
code_dir: downloads/code
#国际化文件夹,默认跟language相同
i18n_dir: :lang
#不需要渲染的文件夹或文件夹,放在[]中
# 这两个文件是百度和google的站长验证文件,不能渲染,否则会改变内容,不能验证过
skip_render: [baidu_verify_R9MZjdMkXT.html, google0f8fac7da2b48ef8.html, README.md, 模板.md]

# 写作选项
# 新建博文(帖子)的默认名称
# File name of new posts
new_post_name: :title.md
#默认布局模板是post,而不是draft和page
default_layout: post
#是否将标题转换成标题形式(首字母大写)
titlecase: false # Transform title into titlecase
#在新标签页面中打开网页
external_link: true # Open external links in new tab
filename_case: 0
#是否渲染草稿
render_drafts: false
#启动 Asset 文件夹
post_asset_folder: false
#把链接改为与根目录的相对位址
relative_link: false
#显示未来的文章
future: true
#代码块的设置
highlight:
enable: true # 使用代码高亮
line_number: true # 显示行号
auto_detect: true # 自动检测语言
tab_replace:

# 分类和标签
# 默认分类
default_category: uncategorized
#分类别名
category_map:
#标签别名
tag_map:

# 日期和时间格式
#Hexo 使用 Moment.js 来解析和显示时间。
## 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

# 分页配置
# ---------------下面选项需要对应插件的支持---------------
# npm install hexo-generator-index --save
# npm install hexo-generator-archive --save
# npm install hexo-generator-category --save
# npm install hexo-generator-tag --save
## Set per_page to 0 to disable pagination
#每页显示的文章量
#per_page: 20
#首页的分页设置
index_generator:
per_page: 5
#归档页的分页设置
archive_generator:
per_page: 30
yearly: true
monthly: true
#标签页的分页设置
tag_generator:
per_page: 20

#分页路径,在public中可以看到
#pagination_dir: page

# Extensions 拓展插件配置
## Plugins: https://hexo.io/plugins/
plugins:
baidusitemap:
path: baidusitemap.xml

# 配置RSS
feed:
#feed 类型 (atom/rss2)
type: atom
#rss 路径
path: atom.xml
#在 rss 中最多生成的文章数(0显示所有)
limit: 0

# 自定义站点内容搜索
# 需要先安装插件:
# npm install hexo-generator-search --save
search:
path: search.xml
# 如只想索引文章,可设置为post
field: all

# 主题配置
## Themes: https://hexo.io/themes/
#theme: false #禁用主题
#theme: landscape
theme: next

# 部署配置
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/gylidian/gylidian.github.io.git
#type: baidu_url_submitter

查看效果

您可以通过 hexo server 查看效果

命令行工具

hexo clean

hexo ghexo generate

hexo shexo server

hexo dhexo deploy

部署

创建 github/coding 项目

安装 hexo-deployer-git 插件

1
$ npm install hexo-deployer-git --save

hexo 部署命令

1
$ hexo deploy

在开始之前,您必须先在 _config.yml 中修改参数,一个正确的部署配置中至少要有 type 参数,例如:

1
2
deploy:
type: git

您可同时使用多个 deployer,Hexo 会依照顺序执行每个 deployer。

1
2
3
4
5
deploy:
- type: git
repo:
- type: heroku
repo:

域名

Coding Page 绑定域名

绑定新域名

强制 HTTPS 访问

SSL/TLS 安全证书

域名解析

绑定前请在域名 DNS 设置中添加一条 CNAME 记录指向 gylidian.coding.me



📘《从零开始的Hexo博客搭建教程》系列文章:

  1. 从零开始的Hexo博客搭建教程(一):开始
  2. 从零开始的Hexo博客搭建教程(二):主题
  3. 从零开始的Hexo博客搭建教程(三):SEO优化
  4. 从零开始的Hexo博客搭建教程(四):图床
  5. 从零开始的Hexo博客搭建教程(五):文章发布
  6. 从零开始的Hexo博客搭建教程(六):插件
  7. 从零开始的Hexo博客搭建教程(七):遇到的坑

评论

Blog tasks

1 / 4 tasks

  • About 页面大修

    • Mark done
    • Edit
    • Delete
  • TOC 滚动更新位置
  • 设计 Logo SVG

    • Mark done
    • Edit
    • Delete
  • todo 小组件大小单位用 rem

    • Mark done
    • Edit
    • Delete
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×