剪藏#W不懂安全#剪藏

第二期 使用Hexo+GitHub+Cloudflare实现0成本搭建个人博客网站,无需服务器。

2025 年 5 月 9 日1 分钟
分享Twitter / XTelegram微博

好,接着上期文章继续做一个完善和扩展。

如果有小伙伴不想自己搭建,可以在后台私信或者✈上联系我代搭建,不过得收点技术费。

Notion image

✅任务一:新建并上传一篇新博文。

命令都在Git Bash中执行,cd到Hexo源文件目录中。

使用以下命令创建一个md格式的文件,这个md文件就是要编写博客的内容,页面整体是使用Markdown的格式来书写的。

JAVASCRIPT
hexo new 新文章.md

之后在你的Hexo源码目录中的source_posts目录底下会看到你刚刚创建的md文件。

Notion image

title是文章的标题,可自行修改。tags就是标签,后期要进行分类的时候需要用到。

如果博客中需要插入图片,不是说像写网页一样加入个标签,在Markdown中需要特定的格式插入图片。这里需要在一个网站中弄个图床。

JAVASCRIPT
https://img.131213.xyz/

上传一张图片,然后选择Markdown,复制下来链接。

Notion image

然后直接粘贴到博客文件中。

Notion image

然后执行以下命令,在我们本地查看一下效果。

JAVASCRIPT
hexo cl && hexo s

打开之后你的页面就是这个样子的。

Notion image

图片也能正常显示出来。

当你页面做好之后,你可以把你的博客推送到GitHub项目仓库中。

JAVASCRIPT
hexo cl && hexo g && hexo d

之后你的Cloudflare中Workers和Pages的所有部署中会出现新的部署。

Notion image

每次把项目推送到GitHub仓库中,Cloudflare会自动进行部署。

访问你的网站,你会看到你刚刚做的博客页面。

Notion image

✅任务二:美化博客网站,设置主题。

在Hexo根目录底下打开Git Bash,然后执行以下命令下载主题文件。

JAVASCRIPT
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

或者直接访问GitHub项目地址,查看有没有发布最新版。

JAVASCRIPT
https://github.com/anzhiyu-c/hexo-theme-anzhiyu

然后执行以下命令安装Pug渲染器:

JAVASCRIPT
npm install hexo-renderer-pug hexo-renderer-stylus --save

如果你没有安装Pug渲染器,你在运行博客的时候会出现下方图片中的错误。

Notion image

下载完成之后,在Hexo根目录找到themes目录,然后找到anzhiyu目录,复制一份_config.yml,名称改为_config.anzhiyu.yml,然后粘贴到Hexo根目录中。

JAVASCRIPT
_config.anzhiyu.yml

Notion image

现在Hexo根目录有三个yml配置文件。

使用VSCode打开_config.yml,Ctrl+F查找theme,将冒号后边内容改成anzhiyu。

Notion image

之后在本地查看效果。

JAVASCRIPT
hexo cl; hexo s

Notion image

确认好之后,将配置推送到GitHub中。

JAVASCRIPT
hexo cl; hexo g; hexo d

之后我们在打开网站链接进行访问,正常打开并且是更换主题之后的页面,证明成功了。

Notion image

执行以下命令,生成标签页和分类页:

JAVASCRIPT
hexo new page tags

然后将_config.anzhiyu.yml配置文件中的标题的注释去掉。

Notion image

这时候页面就会出现标题。

Notion image

在Hexo根目录中,找到source/tags,编辑index.md,修改里面的内容:

JAVASCRIPT
---
title: tags
date2025-04-11 15:45:19
type: "tags"
commentsfalse
top_imgfalse
---

Notion image

执行以下命令生成分类页:

JAVASCRIPT
hexo new page categories

找到source/categories目录下的index.md文件,修改里面的内容:

JAVASCRIPT
---
title: 分类
date2025-04-11 15:54:50
asidefalse
type: "categories"
top_imgfalse
---

Notion image

配置好之后,在本地预览一下效果。

Notion image

Notion image

能出现这两个页面,证明成功了。

更多的功能,我这边就不过多演示了,可自行去互联网搜索。

可访问安知鱼官方网站进行学习和配置:

JAVASCRIPT
https://docs.anheyu.com/

✅任务三:配置自定义域。

找一个平台购买域名,这里我使用的是Spaceship这个平台。

JAVASCRIPT
https://www.spaceship.com/

Notion image

注册账号和购买流程就不展示了,支持支付宝支付。

我购买了一个.top的域名。

Notion image

选中域名,选择右侧的“名称服务器和DNS”。

Notion image

点击更改名称服务器

Notion image

选择自定义名称服务器,让Cloudflare托管。

Notion image

打开Cloudflare,在账户主页添加域名,在现有域输入框中输入你购买的域名,然后点击继续。

Notion image

计划就选择免费的。

Notion image

查看DNS记录这个页面不用管,直接点击继续前往激活。

然后复制两个Cloudflare名称服务器,粘贴到Spaceship中购买的域名的自定义名称服务器。然后保存DNS设置。

回到Cloudflare页面,点击继续,然后滑到底部,点击立即检查名称服务器按钮,需要等待一段时间生效。回到账户主页,查看域状态,当前状态是无效的,等状态显示活动证明完成了。

Notion image

大概等了3、4分钟吧,状态就变成活动了。

Notion image

找到Workers和Pages,找到GitHub部署的项目,找到自定义域,输入刚刚添加的域名。

Notion image

确认信息无误,然后点击“激活域”

Notion image

单击复制名称和目标。

Notion image

在域Spaceship中添加类型为“CNAME”的DNS记录。

Notion image

主机填写@或者域名名称,值填写目标。

Notion image

然后点击保存。

接着你需要回到Cloudflare中配置域名的DNS,为域名添加以下DNS配置:

类型 名称 内容 代理状态 TTL
CNAME www 用户名-github-io.dev 开启 自动

之后你再查看自定义域的状态,状态就是处于活动。

Notion image

访问你的域名,就能访问到你的博客网站了。

这是我搭建好的网站,功能有待完善。

Notion image

本篇内容到此结束。

写作不易,多多支持。

三连加关注,追文不迷路。

Notion image

Notion image

原文地址: https://mp.weixin.qq.com/s?__biz=MzkyNzYzNTQ2Nw==&mid=2247484508&idx=1&sn=19a4fd01046488f6d5e00603cfe6eeed&chksm=c329410a95b836d58b3af5888d61483c0125a3d093c5e1bab479dcc3ecf657f031646efe2851&mpshare=1&scene=1&srcid=0509XLGo06vP3sTbJFuzhZnM&sharer_shareinfo=9522ca469fd476bda1920e42a0078f75&sharer_shareinfo_first=9522ca469fd476bda1920e42a0078f75#rd

相关文章