基于Hexo搭建blog网站
推荐在git bash
中执行
可以去看官方文档
Markdown教程
Node.js
介绍
下载
安装
只需要完成第一步即可,第二步
修改全局模块路径和缓存路径
可以不做,npm包一般不会很大。
Git
下载
使用
安装完成后右键菜单会有这个
常用命令
cd "路径"
打开路径
git clone 链接
克隆仓库,链接为仓库链接。克隆下来的位置是上面那个命令打开的路径。
新建GitHub仓库
https://github.com/new
填写仓库名blog
,其他默认。
安装Hexo
1 | npm install -g hexo-cli |
如果之后打开项目后不能用hexo命令可以再重新安装hexo
新建站点
1 | hexo init <folder> |
要把
<folder>
改为自己的文件夹名,<>
也要去掉
新建完成后指定文件夹的目录:
1 | . |
_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>
即可
- 一个主题可能会有以下的结构:_config.yml
1
2
3
4
5
6.
├── _config.yml
├── languages
├── layout
├── scripts
└── source
主题的配置文件。和 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 | deploy: |
然后在blog文件夹中打开终端输入命令npm install hexo-deployer-git --save
安装部署插件。
之后输入命令:
1 | hexo clean #清除已生成的静态文件 |
如果在部署的时候出现
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 | url: https://www.example.com |
再重新部署一次即可