抱歉,截图不小心被我删了,本文图片已删除


本站就是使用 Coding Pages 搭建的现在已经换成 Vercel

本教程系统环境为 Windows 10,Mac 搭建过程是基本相同的

如果我的步骤不行,大家可以查看官方文档或百度 Google

Hexo官网

Hexo介绍(官网介绍)

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。


准备工作

搭建博客前的准备工作

安装 Git

Mac 系统一般已经预装了 Git,可以跳过此步骤

  • Windows:看下文

  • Mac:使用 Homebrew, MacPorts 或者下载 安装程序

  • Linux (Ubuntu, Debian):sudo apt-get install git-core

  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

    Mac 用户

    如果在编译时可能会遇到问题,请先到 App Store 安装 Xcode,Xcode 完成后,启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

下载

Git官网

等待下载完成(漫长的等待…)

安装

直接点击 Install 就可以了

安装完成之后桌面右键,出现 Git Bash Here 就说明安装成功了

安装 Node.js

Node.js官网

目前Node稳定版本为12.16.2

点击下载,安装一路默认就可以了

Windows 用户

使用 Node.js 官方安装程序时,请确保勾选 Add to PATH 选项(默认已勾选)

For Mac / Linux 用户

如果在尝试安装 Hexo 的过程中出现 EACCES 权限错误,请遵循 由 npmjs 发布的指导 修复该问题。强烈建议 不要 使用 root、sudo 等方法覆盖权限

安装 Hexo

打开命令行

输入:

1
npm install hexo-cli -g

这样就安装好Hexo了

创建博客

打开命令行,输入:

1
hexo init <your-blog-name>

<your-blog-name> 是你的博客名称

文件夹、文件用处(官网介绍

_config.yml

网站的 配置 信息,您可以在此配置大部分的参数。

package.json

应用程序的信息。EJS, StylusMarkdown renderer 已默认安装,您可以自由移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": ""
},
"dependencies": {
"hexo": "^3.8.0",
"hexo-generator-archive": "^0.1.5",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.1",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.1",
"hexo-renderer-stylus": "^0.3.3",
"hexo-renderer-marked": "^0.3.2",
"hexo-server": "^0.3.3"
}
}

scaffolds

模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

然后打开生成好的博客文件夹,开始配置。

配置 _config.yml

配置 Hexo 根目录 _config.yml

_config.yml采用Yaml格式配置

目前_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
# Hexo Configuration Hexo配置
## Docs 文档: https://hexo.io/docs/configuration.html
## Source 源代码: https://github.com/hexojs/hexo/

# Site 网站
title: Hexo # 标题
subtitle: '' # 副标题
description: '' # 介绍(很多主题会解析成个人介绍)
keywords: # 搜索关键词
author: John Doe # 作者(你的名称)
language: en # 语言(查看你使用的主题有哪些语言)
timezone: '' # 时区(非必要不用配置,默认为电脑时区)

# URL 网址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
## 如果你的站点位于子目录中,请将 url 设置为 'http://yoursite.com/child',将 root 设置为 '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/ # 文章永久链接(举个栗子:你创建了一篇文章post1.md,创建时间为 2020-04-27,那么这篇文章的网址为 '2020/04/27/post1/')
permalink_defaults: # 永久链接中各部分的默认值
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks # 去掉 index.html
# 比如有一个页面网址为 http://yoursite.com/foo/bar/index.html,把这一项设置成 false 之后这个页面的网址变成 http://yoursite.com/foo/bar/
trailing_html: true # Set to false to remove trailing '.html' from permalinks
# 去掉 .html
# 有一个页面网址为:http://yoursite.com/foo/bar.html 设置成 false 之后:http://yoursite.com/foo/bar/

# Directory 目录
source_dir: source # 资源文件夹,这个文件夹用来存放内容
public_dir: public # 公共文件夹,这个文件夹用于存放生成的站点文件
tag_dir: tags # 标签文件夹
archive_dir: archives # 归档文件夹
category_dir: categories # 分类文件夹
code_dir: downloads/code # Include code 文件夹,source_dir 下的子目录
i18n_dir: :lang # 国际化(i18n)文件夹
skip_render: # 跳过渲染
# 匹配到的文件将会被不做改动地复制到 public 目录中。可已使用 glob 表达式来匹配路径(如果需要站点验证,可以设置这个)

# Writing 写作
new_post_name: :title.md # File name of 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


# 从这里到下面,这一段不用配置 |
# \/
# 如果要配置,参考官方文档
# (https://hexo.io/zh-cn/docs/configuration/#分类-amp-标签)

# 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
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# 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: # Hexo 默认会忽略隐藏文件和文件夹
#(包括名称以下划线(_)和 . 开头的文件和文件夹,Hexo 的 _posts 和 _data 等目录除外)
# 通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下。
exclude: # Hexo 会忽略这些文件和目录
ignore: # Hexo 会忽略这些文件和目录

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape # 设置主题(默认安装landscape,更多主题查看官网:https://hexo.io/themes)

# Deployment 部署(参考下篇)
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: ''

本地调试

在命令行输入

1
hexo server

或者

1
hexo s

可以开启本地调试,默认端口为4000,可以使用 -p--port 重设端口

在浏览器输入 localhost:4000 就可以看到你的网站啦!

以后如果想在本地看看效果就可以使用 hexo s

PS:404页面会替换成 cannot found 你访问的页面,如果要查看404页面的话,输入localhost:4000/404.html 就可以啦

评论