基于Hexo搭建blog网站

Node.js

介绍

下载

官网

安装

CSDN

只需要完成第一步即可，第二步修改全局模块路径和缓存路径可以不做，npm包一般不会很大。

Git

下载

官网

使用

安装完成后右键菜单会有这个 Git-Bash

Git-Bash1

常用命令

cd "路径"
打开路径
git clone 链接
克隆仓库，链接为仓库链接。克隆下来的位置是上面那个命令打开的路径。

新建GitHub仓库

https://github.com/new 填写仓库名blog，其他默认。

安装Hexo

1
npm install -g hexo-cli

如果之后打开项目后不能用hexo命令可以再重新安装hexo

新建站点

1
2
3
hexo init <folder>
cd <folder>
npm install

要把<folder>改为自己的文件夹名，<>也要去掉

新建完成后指定文件夹的目录：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml中的一些参数

参数	描述
title	网站标题
subtitle	网站副标题
description	网站描述
keywords	网站的关键词。支持多个关键词。
author	您的名字
language	网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone	网站时区。Hexo 默认使用您电脑的时区。请参考时区列表进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

更多详细说明移步官方文档
⭐最主要的是url和root，如果不自定义域名的话，url为https://<username>.github.io/<repositories>/，root为/<repositories>/。如果设置不正确的话可能会导致网页没有css样式。
参数名后的冒号后面要有一个空格

安装主题

一般主题都会有使用教程，这里只展示了使用主题文件安装的过程。

从主题站找到自己喜欢的主题，点击标题进入对应GitHub仓库下载
将主题文件放到一个单独文件夹<ThemeFolder>，并将改文件夹放在themes文件夹里
在站点的_config.yml文件中theme的内容更改为<ThemeFolder>即可

一个主题可能会有以下的结构：

1
2
3
4
5
6
.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

_config.yml 主题的配置文件。和 Hexo 配置文件不是同一个文件，要注意区分。

如需更换主题，只需要将新主题的文件夹放到正确位置，再将站点的_config.yml文件中theme的内容更改为新的主题名即可

生成静态文件

1
hexo g   #hexo generate的缩写

网页需要的文件都在public文件夹下，将该文件夹下文件上传到GitHub仓库即可。

启动服务

1
hexo s   #hexo server的缩写

用这个可以先在本地预览你的网页
如果不能用的话先安装，--save是把npm包安装在这个项目中并记录在package.json中

1
npm install hexo-server --save

新建文章

1
hexo new [layout] <title>

同样[]和<>也要去掉

布局（Layout）	路径	描述
post	source/_posts	文章
page	source	页面
draft	source/_drafts	草稿

部署到GitHub

打开网站的_config.yml 在文件底部找到以下内容并补全：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/Trrrrw/blog ## 你的仓库链接
  branch: main

然后在blog文件夹中打开终端输入命令npm install hexo-deployer-git --save安装部署插件。之后输入命令：

1
2
3
hexo clean  #清除已生成的静态文件
hexo g      #hexo generate 生成静态文件
hexo d      #hexo deploy 生成静态文件并部署到仓库

如果在部署的时候出现 Failed to connect to github.com port之类的错误，在终端中执行git config --global --unset http.proxy和git config --global --unset https.proxy应该就行了。完成之后要去GitHub仓库里找到Settings -> Pages -> Build and deployment -> Branch，设置成main分支，路径为/(root)。点save保存之后就能在https://username.github.io/repo/ 里看到你的网页。

自定义域名

购买域名

例：example.com

域名解析

在电脑上执行

1
ping username.github.io

得到

1
2
正在 Ping username.github.io [IP地址] 具有 32 字节的数据:
...

记住上面的IP地址

在购买的域名控制台找到域名列表-域名解析
添加解析

主机记录	记录类型	解析路线	记录值	TTL
@	AAAA	默认	IPV6地址	10 分钟
@	A	默认	IPV4地址	10 分钟
@	CNAME	默认	username.github.io	10 分钟
www	CNAME	默认	username.github.io	10 分钟

前两个行用有一个即可，但好像都没什么用。还会和第三行冲突。可以只有后面两行，第四行的www可以换成自己喜欢的、符合规范的前缀，可以设成blog来说明这个网站是一个blog网站。也可以只有第三行，这样就是一个裸域名比较好记忆。如果修改了的话下面两项设置要把www改成对应的前缀或者删除。

绑定GitHub Page

在GitHub仓库中点击Settings->Pages
在Custom domain下填写www.example.com
点Save保存
等待GitHub检查完DNS勾选下面的Enforce HTTPS

修改Hexo的_config.yml

在Hexo的_config.yml中修改url和root

1
2
url: https://www.example.com
root: /

再重新部署一次即可

参考文章：官方文档 Markdown教程