使用Coding Pages搭建免费Hexo博客(1)

2020-04-26 Dev Hexo
Cover Image

本文最后更新于 天前,文中部分描述可能已经过时。


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


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

( ̄‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‍‌‌‌​‌‌‍‍‍​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‌‌‌‌‌​‍‍‍‌‌​‍‍‌‌‌​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‍‌‌‌​‍‌‌‌‌​‌‌‌‌‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‌‍‍‍‍​‌​‌‍​‌‌‍‌​‌‍‌‌​‌​‍‌‌‍​‌‌​‌‌‌​‍​‍‍‍​‍‌​‌‍‍‌‍​‍‌‍‌​‍‍‍​‍‍​‍‌‌‌‍​‌‍‍‌‍​‌‌‍​‌‌‌‌‍​‌‌‍‌​‌‌‌‌‌​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‍‍‍‍‍​‍‍‍‍‍​‌‌‌‌‌​‌‌‍‌​‌‍‌‌​‌​‍‌‌‍​‌‌​‌‌‌​‍​‍‍‍​‍‌​‍‌‌‌‍​‌‍‍‌‍​‌‌‍​‍‍‌‌‌​‌​‍‌‍‌​‌‌‍‌​‌‍‍‌‍​‌‌‍​‌‌‌‌‍​‌‌‍‌​‌‌‌‌‌​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‍‍‍‍‍​‍‍‍‍‍​‌‌‌‌‌​‌‍‍‌‍​‌‌‍​‌‌‌‌‌​‌‌‌‌‍​‍‍‍‍‍​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‌‍‍‍‍​‍‍‍‍‍​‌‌‍‌​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‌‌‌‌‌​‍‌‌‌​‍‍‍‍‌​‌‍‍‌‍​‌‌‍​‌‌‌‌‌​‌‌‌‍‍​‌​‌‌‍‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‌‌‍‌​‍‌‌‌‌​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‌‌‍‌​‍‍‌‌‌​‍‌‌​‍‌‌‌‍​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‍‌‌‌​‌‌‍‍‍​‌‍​‌‍‍‌‍​‌‌‍​‌‌‌‌‌​‌‌‌‍‍​‍‌‌‌​‍‌‌‌​‌‍‍‌‍​‌‌‍​‍‍‍‍‌​‍‌‌‌‌​‍‌‌‌‌​‌‌‌‌‍​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‌‌‌​‍‌‌‌‌​‌‌‌‌‍​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‌‌‌​‍‌‌‌​‌‌‌‌‌​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‌‌‌‌‌​‍‍‍‌‌​‍‍‌‌‌​‌‍‍‌‍​‌‌‍​‌‌‌‌‌​‍‌‌‌​‌‌‌‌‌​‍‍‌‌‌​‌‍‍‌‍​‌‌‍​‌‌‌‌‍​‌​‌‌‌‍‍​‌‍​‌‍‍‌‍​‌‌‍​‍‌‌‌‌​‍‍‌‌‌​‌‌‍‍‍​‌‍​‌‍‍‌‍​‌‌‍​‌‌‌‌‌​‌‍‍‍‍​‌‌‌‌‍​‌‍‍‍‍​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‍‌‌‌​‍‌‌‌​‍‍‍‌‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‌‌‍‌​‍‌‌‌‌​‍‌‍‌​‌‍‍‌‍​‌‌‍​‍‍‍‌‌​‌‌‍‌​‍‍‌‌‌​‍‌‌︶ ̄)↗

本文作者:Flexiston

本文链接: https://flexiston.com/posts/22938.html

Dev Hexo

评论

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