【全网首发】Cloudflare+Github最稳定的方法搭建静态网站

前言

在当今信息化时代，拥有一个个人博客网站已成为许多人的梦想。无论是记录生活、分享技术，还是展示作品，一个独立的博客网站不仅能展示个人风采，还能与全球用户进行互动交流。随着科技的发展，搭建个人博客网站的工具和方法也在不断进步，简便性和稳定性成为大家关注的重点。

本文将详细介绍如何通过 Cloudflare 和 GitHub 搭建一个稳定的静态网站。通过结合这两个强大的平台，我们不仅可以免费托管静态页面，还能确保网站的高可用性和安全性。无论你是技术小白还是经验丰富的开发者，都可以通过这篇教程轻松搭建属于自己的个人博客网站，展示你的独特魅力。

希望本文能为大家提供清晰的指导，帮助每一位读者顺利实现搭建个人网站的梦想。让我们一起开始这段有趣的学习旅程吧！

一、准备工作

需要的准备的东西：一个Github账号、一个Cloudflare账号、网站所需的源码、域名一个（可选）、脑子

二、Github部分

1. 注册Github账号

在GitHub官网使用邮箱注册即可，无难度略过。
网址如下：https://github.com

2. 创建一个仓库

创建一个新的仓库，仓库名设置为如下格式：账户名.github.io

然后打开你所创建的仓库，并向仓库里上传相应的网站源码即可（下文会以Hexo博客举例）

然后在你的浏览器里输入你的账户名.github.io然后访问即可

至此，网站已经初步成型，但访问速度不快，如果要求不高，至此已完成，下文会讲到用Cloudflare Pages部署网站

三、Hexo部分（可选）

如果你想搭建一个Hexo博客，可以参考这步，否则可略过。

1. 准备工作：安装两个我们本次所需要使用的软件：

1. node.js下载地址-http://nodejs.cn
2. Git下载地址-https://git-scm.com/ (官网下载慢，可从其他地方下载)

安装过程一直Next就可以了(安装路径可以改)

两者安装完成之后，右击此电脑》属性》高级系统设置》环境变量》系统变量下的Path
可以看到两者已自动修改了环境变量，这是我们可以通过cmd命令查看两者版本。(确认是否安装成功及可以使用)
查看Node.js版本命令：node -v
查看Git版本命令：git –version

在电脑上随便创建一个文件夹

然后右键 选择 Open Git Bash Here，输入以下代码

1

$ npm install hexo-deployer-git --save

然后修改配置。

1
2
3
4
5

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]

生成站点文件并推送至远程库。执行 hexo clean && hexo deploy。

• 除非你使用令牌或 SSH 密钥认证，否则你会被提示提供目标仓库的用户名和密码。
• hexo-deployer-git 并不会存储你的用户名和密码. 请使用 git-credential-cache 来临时存储它们。

2. 在本地生成SSH公钥并绑定到github

设置git的用户名和邮箱

1
2
3

git config --global user.name "yourname" 
git config --global user.e mail "youremail"
ssh-keygen -t rsa -C "" 

然后找到 id_rsa.pub 文件，用txt打开

登录对应的git服务器、将公钥（id_rsa.pub中的内容）添加上去

将hexo部署到GitHub
在我们的配置文件_config.yml中做以下配置：

接下来我们运行以下命令部署我们的博客到github上：

1
2
3

hexo clean  #删除生成的文件和缓存
hexo g      #生成静态文件，也就是public文件夹
hexo d      #部署网站

登入 Github，请在库设置（Repository Settings）中将默认分支设置为_config.yml配置中的分支名称。稍等片刻，您的站点就会显示在您的Github Pages中。

一键生成静态文件+部署可以使用这个命令，这样可以直接生成+推送上去

1

hexo d -g

四、Cloudflare部分

1. 注册一个cloudflare账号

点击Sign Up 注册一个账号 （具体步骤略过 ），有了账号，点击login登录到控制台。

网址 https://cloudflare.com
自行注册即可

2. 创建Cloudflare Pages

在页面左侧，选择 Workers和Pages

然后在右上角点击蓝色的“创建应用程序”按钮

然后选择Pages，通过导入现有 Git 存储库创建，点击“连接到Git”蓝色按钮

然后按照图片的操作步骤进行添加，仓库选择你刚才创建的

选择Github、添加你的Github账户、选择你的仓库

然后第二步，填写项目名称，这将是你的二级域名，填好看一点，然后是分支，就选你之前设置的

然后点击页面下方的“保存并部署”的蓝色按钮即可，至此Cloudflare部署完成，

如果没有域名的可以结束了，你的网站地址是：项目名称.pages.dev

如果部署了cloudflare这步，可以将GitHub的那个仓库设置为私有仓库，这样别人就看不见你源码了，安全性+1

五、 绑定自己的域名（可选）

点击你刚才创建好的Pages标题

然后在自定义域里添加你自己的域名即可（前提是你的域名是在Cloudflare托管的）

至此，全文结束。

提示：最终部署完成后，Hexo的博客如果更新内容只需要在本地修改好之后输入这个命令，即可一键更新所有。（可能会有半分钟左右的延迟）

1

hexo d -g

diss

原创文章，全网首发，未经允许，请勿转载，转载请邮箱联系，邮箱地址在页面最下方”信封“按钮