剪藏#W不懂安全#剪藏

使用Hexo+GitHub+Cloudflare实现0成本搭建个人博客网站,无需服务器和域名

2025 年 5 月 9 日1 分钟
分享Twitter / XTelegram微博
使用Hexo+GitHub+Cloudflare实现0成本搭建个人博客网站,无需服务器和域名 封面

欢迎大家阅读这篇文章。今天,我们将介绍如何利用 Hexo、GitHub 和 Cloudflare 三大工具,无需服务器和域名,实现零成本搭建个人博客。文章将带你从环境搭建、博客部署到全球加速一步步操作,适合各位初学者和进阶用户。让我们一起开启这段简单高效的博客之旅吧!

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

Notion image

前期所需要的工具:

1、Git:Git 是一个开源的分布式版本控制系统,主要用于跟踪和管理文件的变化,尤其适用于软件开发。

JAVASCRIPT
https://git-scm.com/

Notion image

2、Node.js:Node.js是一个开源的、跨平台的 JavaScript 运行环境,基于 Chrome 的 V8 引擎。它使得开发者可以在服务器端运行 JavaScript 代码,构建高效、可扩展的网络应用程序。

JAVASCRIPT
https://nodejs.org/zh-cn

Notion image

3、Visual Studio Code(简称“VSCode”):Visual Studio Code是由微软开发的一款免费、开源的跨平台代码编辑器。

JAVASCRIPT
https://code.visualstudio.com/

Notion image

前期所需要注册的账户:

1、GitHub:GitHub 是一个基于 Git 的代码托管平台,为开发者提供在线存储、管理和协作编写代码的工具。用户可以创建公共或私有仓库,进行版本控制、代码审查、问题跟踪等,非常适合团队协作和开源项目。

JAVASCRIPT
https://github.com/

Notion image

2、Cloudfiare:Cloudflare 是一家提供网站加速和安全服务的公司。它通过全球分布的 CDN(内容分发网络)提高网站访问速度,同时提供防御 DDoS 攻击、SSL 加密和 DNS 服务,帮助保护和优化网站性能。

JAVASCRIPT
https://www.cloudflare.com/zh-cn/

Notion image

OK,前期工作准备好之后,就可以开始搭建了。

打开Git Bash

Notion image

输入"git config -l"列出当前Git配置的所有设置。

JAVASCRIPT
git config -l

Notion image

默认的user.name和user.email是你的电脑用户的名称和邮箱。

设置你的Git的用户名和邮箱

JAVASCRIPT
git config --global user.name "GitHub的用户名" //不带双引号
JAVASCRIPT
git config --global user.email "登录GitHub的邮箱" //不带双引号

在执行"git config -l"查看你的user.name和user.email,如果是你设置的用户名和邮箱,那就证明设置成功了。

执行以下命令,生成SSH公钥

JAVASCRIPT
ssh-keygen -t rsa -C "登录GitHub的邮箱" //不带双引号

执行之后会让你做一些配置,直接一路回车就行了。

生成完成之后的公钥一般会在C盘的用户目录的.ssh目录底下,以id开头的文件就是。

JAVASCRIPT
C:\Users\用户名\.ssh

Notion image

id_rsa是私钥,id_rsa.pub是公钥,用记事本打开公钥文件,复制下来。

在GitHub网站中找到Settings设置。

Notion image

点击"SSH and GPG Keys",点击右上角"New SSH Key"新建一个SSH密钥

Notion image

标题自定义即可,密钥类型不变,Key就粘贴刚刚复制的公钥。

Notion image

输入以下命令测试是否连接成功:

JAVASCRIPT
ssh -T git@github.com

它会出现一个让你输入yes/no的选项,输入yes即可,下方出现你的GitHub的用户名的时候,证明连接成功了。

Notion image

在GitHub主页,右上方有个加号,点击"New repository"新建一个仓库。

Notion image

Owner这里的格式必须是“用户名.github.io”,Description这里就随便输入,然后创建一个公开的的仓库,选择Public。

JAVASCRIPT
GitHub用户名.github.io

Notion image

在电脑磁盘中,新建一个文件夹,用来存放Hexo的源码。

然后在该目录中鼠标右键,使用Git Bash打开。

输入以下命令来安装Hexo。

JAVASCRIPT
npm install -g hexo-cli && hexo -v

Notion image

没有报错和输出了安装的版本,证明安装成功了。

接着安装相关依赖:

JAVASCRIPT
hexo init blog-demo
cd blog-demo
npm i

执行完成之后,打开blog-demo文件夹,里面内容就是Hexo的源码。

Notion image

执行以下命令来启动Hexo:

JAVASCRIPT
hexo cl && hexo s

Notion image

访问它给出的地址,也就是本地的4000端口。

这时候你就能看到Hexo的最初的页面。

Notion image

Ctrl+C停止服务。现在开始将博客挂到GitHub上。

安装hexo-deployer-git

JAVASCRIPT
npm install hexo-deployer-git --save

修改config.yml文件,在Hexo源码文件中找到"_config.yml",使用VSCode打开。

然后滑到文件最底部。

Notion image

然后将deploy改成像我这样的格式:

JAVASCRIPT
deploy:
  type: git
  repository: git@github.com:GitHub用户名/GitHub用户名.github.io.git
  branch: main

Notion image

然后Ctrl+S保存。

返回到Git终端中,执行以下命令将Hexo部署到GitHub中:

JAVASCRIPT
hexo clean && hexo generate && hexo deploy

执行完成之后,提示这个就证明成功了。

Notion image

然后返回GitHub中,刷新以下页面,你会发现我们的项目已经部署到GitHub中了。

Notion image

然后访问

JAVASCRIPT
GitHub用户名.github.io

如果访问成功并且看到了Hexo的初始页面,证明部署成功。如果没有,那就等一会,部署需要点时间。

Notion image

接下来就要把静态页面的博客挂到Cloudflare中。

访问Cloudflare,左侧选项中找到"Workers和Pages",然后选择Pages。

Notion image

点击连接到Git,然后连接GitHub。

Notion image

然后选择“仅选择存储库”,选择部署的Hexo博客的仓库。

Notion image

然后点击安装并授权。

页面会被重定向到之前的页面,但是现在页面不一样了。页面现在有GitHub部署的仓库了,然后点击开始设置。

Notion image

到这里什么都不用管,直接点保存并部署。

Notion image

之后它会开始构建部署。

Notion image

等待几秒之后,显示部署成功,下方会有个蓝色的链接,这个就是你的网站链接,别人可以通过这个链接来访问你的博客网站。

Notion image

然后点击继续处理项目。等待一段时间,等待它域名生效,在这之前你访问这个域名是打不开的。

Notion image

Notion image

如果你有域名,你可以在"自定义域"中设置一个域名,以后你就可以使用你的域名来访问博客。

Notion image

返回GitHub页面,把仓库改成私有库,点击"settings",然后把页面滑到底部。

Notion image

找到更改存储库可见性,更改可见性,设置成私有的。

Notion image

OK,文章到这里就结束了。我的博客链接暂时不公布,等下期文章完善之后就发出来。

🚀下期预告🚀

🌍如何新建一篇博客。

🛡️为博客配置/绑定域名。

写作不易,多多支持。

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

Notion image

Notion image

原文地址: https://mp.weixin.qq.com/s?__biz=MzkyNzYzNTQ2Nw==&mid=2247484447&idx=1&sn=0267df968e98521d3add61ac7e3a88b6&chksm=c350da41b4b6a1d3c013697d3e1c701a5b474b18cb52a47be37cceaeeced3591b36cd2e44159&mpshare=1&scene=1&srcid=0509bkK26AefRRRUpS9WHzmW&sharer_shareinfo=ed7ae771e3978636ba643b763ddf3634&sharer_shareinfo_first=ed7ae771e3978636ba643b763ddf3634#rd

相关文章