官方文档链接:https://hexo.io/zh-cn/docs/

1. 介绍

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

2. 安装

docsify的安装非常方便,只需要终端执行以下代码:

1
npm install -g hexo-cli

3. 使用

使用起来也非常简单,先执行下初始化命令:

1
hexo init testhexo

完成后可以看到docs子目录下的文件列表。

1
2
3
4
5
6
7
├── _config.yml     // 配置文件
├── package.json // 运行依赖文件
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes // 主题文件

然后使用本地服务器运行,执行命令如下:

1
2
hexo clean & hexo g
hexo s

返回如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
yunke@yunkedeMacBook-Pro testhexo % hexo clean & hexo g
[1] 3860
INFO INFO Validating config
Validating config
INFO Start processing
[1] + done hexo clean
INFO Files loaded in 57 ms
INFO Generated: archives/index.html
INFO Generated: index.html
INFO Generated: fancybox/jquery.fancybox.min.css
INFO Generated: css/style.css
INFO Generated: archives/2023/07/index.html
INFO Generated: js/script.js
INFO Generated: js/jquery-3.6.4.min.js
INFO Generated: fancybox/jquery.fancybox.min.js
INFO Generated: css/../config/images/banner.jpg
INFO Generated: archives/2023/index.html
INFO Generated: 2023/07/09/hello-world/index.html
INFO 11 files generated in 112 ms
yunke@yunkedeMacBook-Pro testhexo %
yunke@yunkedeMacBook-Pro testhexo % hexo s
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

然后可以在浏览器中输入本地地址http://localhost:4000/预览您的网站如下所示:

然后我们可以简单修改下_config.yml文件的内容如下:

1
2
3
4
5
6
7
8
# Site
title: 云&珂
subtitle: ''
description: ''
keywords:
author: yunke
language: en
timezone: ''

在浏览器中再次输入本地地址http://localhost:4000/预览网站页面显示如下:

剩下的就是可以在目录下面参考hexo官方给的主题和文档自由发挥,这里就不详细展开了。

4. 部署方式选择

一般情况下比较常用的可能是通过GitHub pages进行部署,这个我自己也尝试过,但是我发现这样部署之后不用梯子的话网络访问速度会很慢,还有一个更主要的问题是通过GitHub pages进行部署的话仓库的权限必须是public,所以就决定放弃寻找其他方式,最后决定通过一些托管网站来进行部署。

搜索对比之后,选定的托管网站主要有两个:Vercel:https://vercel.com/ 和Cloudflare:https://dash.cloudflare.com/

但是不知道是什么原因,Vercel我这边GitHub用户注册一直失败,如下所示:

所以也没办法做对比了,最后直接选择了Cloudflare,如果有可以成功注册Vercel的小伙伴感兴趣的话可以对两个在访问速度上做下对比。

5. 注册Cloudflare账号

点击注册链接https://dash.cloudflare.com/sign-up进入:

输入邮箱和密码,点击注册,注册成功之后,点击登陆链接https://dash.cloudflare.com/login进入,输入邮箱和密码登陆就可以登陆了。

6. GitHub仓库

新建一个GitHub仓库,名字可以随便起按照自己喜好来就好,权限也是,公有私有都可以,这里创建一个名字为testhexo的私有仓库来进行演示

这里仓库创建好之后来本地拉取一下这个空仓库,执行命令如下:

1
git clone git@github.com:Yun-ke/testhexo.git

然后将本地跟hexo相关的文件放到此仓库,然后上传到GitHub仓库:

7. 部署

点击Cloudflare登陆链接https://dash.cloudflare.com/login登陆进入,然后选择Workers和Pages中的Pages,选择连接到git:

点击连接到git之后,可以选择使用GitHub或者Gitlib,这里我们选择GitHub,选择好之后选择对应的仓库:

然后点击开始设置:

最后点击保存并部署,部署的过程日志信息会进行显示:

提示部署完成之后就可以通过生成的域名进行直接访问:

浏览器输入域名https://testhexo.pages.dev网页显示如下所示:

部署成功!!!