Hexo+CloudflarePages建站与踩坑教程

  • ~2.09K 字
  1. 1. 写在开始之前
  2. 2. 准备工作
  3. 3. 正式开始
    1. 3.1. 1.注册Cloudflare账号
    2. 3.2. 2.购买域名
    3. 3.3. 3.托管域名到cloudflare
      1. 3.3.1. 回到cloudflare
    4. 3.4. 4.创建github仓库(假设你已经登陆了)
    5. 3.5. 5.构建pages
    6. 3.6. 6.绑定域名
    7. 3.7. 结尾

请注意文章撰写时间,不保证现在的政策与之前相同!

写在开始之前

今年寒假,我在b站上刷视频看到了使用cloudflare pages建站的视频,是建站之魂再次燃烧,也就有了这篇文章。
##优势:几乎免费
你需要付出的只是域名租用费,cloudflare pages现阶段是全免费的,非常甜点

本人承诺这篇文章没有任何推广内容

准备工作

  1. 一台可以联网、安装好git和nodejs的电脑(此处我以win11为例)
  2. 支付宝/visa or 万事达卡
  3. 一个正常人类的大脑(doge)
  4. 一个GitHub账号
  5. 一个cloudflare账号
  6. 一个spaceship账号(可选)

正式开始

1.注册Cloudflare账号

打开cloudflare.com
右上角找到“log in”,左键单击
在下方单击“sign up”
填写相关信息,验证邮箱,结束注册
进入个人控制板后,先选择最右上角小人,单击,在弹出菜单中选择language,在选择简体中文

2.购买域名

###域名购买商随意,这里我以spaceship.com为例
进入网站,在中间搜索框输入你想要的域名

有坑

如果你对价格比较敏感,建议找一些比较小众的后缀,像是“.one”“.top”之类,但是不建议使用“.one”之类的过于小众的,因为这样如果后期不能将域名转入阿里云、腾讯云等国内服务商,也就不能进行ICP认证,这是比较麻烦的。

之后点击“add to cart”
找到右上角的购物车标志,单击,之后再弹出框内无脑点击下方按钮。
进入shopping cart界面后,根据提示注册账号,添加付款方式、付款人信息。

3.托管域名到cloudflare

进入cloudflare账户界面。
在侧边栏找到“域”,进入界面,选择“加入域”
在弹出界面“输入现有域”中输入你购买的域名

输入域名时不要输入“www.” 之类

不需要动其他设置,点击“继续”
在选择计划页面选择“free”
在“查看您的 DNS 记录”页面什么也不用动,单击“继续前往激活”
进入“更新您的名称服务器来激活 Cloudflare”页面后,首先回到spaceship.com
点击右上角“launchpad”,之后在弹出页面选择“Domain Manager”
进入页面后,找到你的域名,单击此行,在弹出的侧边栏选择“Nameservers & DNS”
点击“change”,再在弹出的框中选择“Custom nameservers”
将“更新您的名称服务器来激活 Cloudflare”页面中两个名称服务器按顺序粘贴进spaceship的nameservers两个文本框中,再单击“save nameserver settings”

回到cloudflare

点击“我已更新名称服务器”,之后点击“立即检查名称服务器”
之后点击“back to domains”,等待域名状态为“活动”后,单击域名,点击右侧“DNS记录”
首先删除所有原来的记录,之后选择“back to domains”

4.创建github仓库(假设你已经登陆了)

进入guihub.com
进入https://github.com/kratos-rebirth/quickstart
进入后,点击“use this template”,再点击“create a new repository”
在创建界面填好空,将visibility设置为“private”,再点击“create repository”,创建仓库
进入你创建的仓库,点击“code”,复制url
打开你电脑上的项目文件夹,打开一个cmd,输入
git clone <你仓库的url>
因为是private仓库,会有身份认证,完成即可
之后建议参考https://wiki.krt.moe/posts/quickstart/进行操作

5.构建pages

点击“Compute”,再进入“Workers 和 Pages”,选择“创建应用程序”
点击页面下方“想要部署 Pages?”右侧的开始使用,点击导入现有git存储库的“开始使用”,登录github账号,并选择你博客使用的仓库,之后点击“开始设置”。
在“设置构建和部署”页面中,在“构建命令”中填入以下内容:
npm install -g hexo; hexo clean; hexo generate
将“构建输出目录”空中填入public,点击“保存并部署”。

6.绑定域名

进入“Workers 和 Pages”页面,单击你创建的pages应用,点击“自定义域”,再点击“设置自定义域”,输入域名点击继续,再点击“激活域”,完成一个配置

注意,你需要分别为www.与@.配置,并且dns刷新需要时间!

结尾

通过以上内容你基本可以搭建起一个好看的博客,后续具体的博客配置教程过几天我会继续写的

赞助喵
非常感谢您的喜欢!
赞助喵
分享这一刻
让朋友们也来瞅瞅!