Flexiston's Blog
 时间轴
 标签
 分类
 友链
 实验室
 关于

 

 Dev  Hexo  1.8k words in 8 min


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

本站就是使用 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, Stylus 和 Markdown 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 就可以啦

（￣‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‍‌‌‌​‌‌‍‍‍​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‌‌‌‌‌​‍‍‍‌‌​‍‍‌‌‌​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‍‌‌‌​‍‌‌‌‌​‌‌‌‌‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‌‍‍‍‍​‌​‌‍​‌‌‍‌​‌‍‌‌​‌​‍‌‌‍​‌‌​‌‌‌​‍​‍‍‍​‍‌​‌‍‍‌‍​‍‌‍‌​‍‍‍​‍‍​‍‌‌‌‍​‌‍‍‌‍​‌‌‍​‌‌‌‌‍​‌‌‍‌​‌‌‌‌‌​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‍‍‍‍‍​‍‍‍‍‍​‌‌‌‌‌​‌‌‍‌​‌‍‌‌​‌​‍‌‌‍​‌‌​‌‌‌​‍​‍‍‍​‍‌​‍‌‌‌‍​‌‍‍‌‍​‌‌‍​‍‍‌‌‌​‌​‍‌‍‌​‌‌‍‌​‌‍‍‌‍​‌‌‍​‌‌‌‌‍​‌‌‍‌​‌‌‌‌‌​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‍‍‍‍‍​‍‍‍‍‍​‌‌‌‌‌​‌‍‍‌‍​‌‌‍​‌‌‌‌‌​‌‌‌‌‍​‍‍‍‍‍​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‌‍‍‍‍​‍‍‍‍‍​‌‌‍‌​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‌‌‌‌‌​‍‌‌‌​‍‍‍‍‌​‌‍‍‌‍​‌‌‍​‌‌‌‌‌​‌‌‌‍‍​‌​‌‌‍‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‌‌‍‌​‍‌‌‌‌​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‌‌‍‌​‍‍‌‌‌​‍‌‌​‍‌‌‌‍​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‍‌‌‌​‌‌‍‍‍​‌‍​‌‍‍‌‍​‌‌‍​‌‌‌‌‌​‌‌‌‍‍​‍‌‌‌​‍‌‌‌​‌‍‍‌‍​‌‌‍​‍‍‍‍‌​‍‌‌‌‌​‍‌‌‌‌​‌‌‌‌‍​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‌‌‌​‍‌‌‌‌​‌‌‌‌‍​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‌‌‌​‍‌‌‌​‌‌‌‌‌​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‌‌‌‌‌​‍‍‍‌‌​‍‍‌‌‌​‌‍‍‌‍​‌‌‍​‌‌‌‌‌​‍‌‌‌​‌‌‌‌‌​‍‍‌‌‌​‌‍‍‌‍​‌‌‍​‌‌‌‌‍​‌​‌‌‌‍‍​‌‍​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‍‌‌‌​‌‌‍‍‍​‌‍​‌‍‍‌‍​‌‌‍​‌‌‌‌‌​‌‍‍‍‍​‌‌‌‌‍​‌‍‍‍‍​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‍‌‌‌​‍‌‌‌​‍‍‍‌‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‌‌‍‌​‍‌‌‌‌​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‌‌‍‌​‍‍‌‌‌​‍‌‌︶￣）↗

本文作者：Flexiston

本文链接：https://blog.flesx.cn/posts/22938.html

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 ( BY-NC-SA 4.0) 协议

Dev Hexo Dev Hexo Coding-Pages
Comment

评论如无特殊原因均不会被删除，请对自己的言论负责。

立即行动吧，未来要自己争取

✨ Flexiston 的快递已送达 🚀 点击签收