跳转至

基于Cloudflare部署网页

这篇文章的背景要求是:

  • 网页使用 Mkdocs 搭建(别的也可以,按照下列流程走,相应进行调整就行)
  • 基于Cloudflare部署

前置工作

购买域名

namesilo

这东西就跟淘宝一样,自己上网搜就行了

上传github仓库

这份文档全部是以下列仓库文件为例讲述上传过程

alt text

注意到这个仓库是private的,说明公网部署网页不需要该仓库保持public(这点跟github pages不同🐶)

我觉得这是很大的优点,不然会有很多人会在未经本人允许的情况下,直接把我的Blog Clone到本地,然后未经授权做一些奇怪的事情...

虽然发布到公网上更可能被人以html等形式把文档下载到本地,但我觉得既然他们都会公网爬取,水平肯定比我高,那又何必要爬去我这个小趴菜的blog呢(🐶

闲言少叙,现在我们把这个仓库建好了,网页内容使用mkdocs建立完毕,现在需要上传了!

针对Mkdocs的patch

需要给网页的工作目录下加上requirements.txt && package.json

实例如下,可以白嫖:

requirements.txt

  1. 进入当前工作目录: cd ~/Github_Content/The_Website_of_hbx($WORK_PATH)
  2. 在你的网页工作目录下进入虚拟环境: source .venv/bin/activate
  3. 导出依赖环境: pip freeze > requirements.txt

比如下面是我的:

Bash
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Babel==2.15.0
beautifulsoup4==4.12.3
certifi==2024.6.2
charset-normalizer==3.3.2
click==8.1.7
colorama==0.4.6
ghp-import==2.1.0
idna==3.7
Jinja2==3.1.4
Markdown==3.6
MarkupSafe==2.1.5
mergedeep==1.3.4
mkdocs==1.6.0
mkdocs-get-deps==0.2.0
mkdocs-material==9.5.27
mkdocs-material-extensions==1.3.1
mkdocs-meta-descriptions-plugin==3.0.0
mkdocs-meta-manager==1.0.0
packaging==24.1
paginate==0.5.6
pathspec==0.12.1
platformdirs==4.2.2
Pygments==2.18.0
pymdown-extensions==10.8.1
python-dateutil==2.9.0.post0
PyYAML==6.0.1
pyyaml_env_tag==0.1
regex==2024.5.15
requests==2.32.3
six==1.16.0
soupsieve==2.5
urllib3==2.2.2
watchdog==4.0.1

package.json

JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
    "name": "bxhu blog",
    "version": "1.0.0",
    "description": "an interesting blog",
    "main": "index.js",
    "scripts": {
      "build": "source venv/bin/activate && mkdocs build"
    },
    "author": "Boxuan Hu @XJTU",
    "license": "MIT",
    "dependencies": {},
    "devDependencies": {}
}

上面重要的是source venv/bin/activate && mkdocs build,它告诉cloudflare(后续)应该以什么命令运行mkdocs

  1. 先进入虚拟环境
  2. 再进行build过程

现在我们本地的工作已经全部完成了,可以转战Cloudflare了 😄

基于cloudflare pages部署网页

Cloudflare Pages

登录进去以后就会发现:

alt text

当前我们在 Workers & Pages / Overview下,点击右上角create

alt text

选择Pages,点击Connect to Git

alt text

选择想要建立workflow的仓库,比如这里就是The_Website_of_hbx

alt text

Save and Deploy即可

alt text

现在网页已经部署完毕了,但不是我们心仪的域名

在cloudflare更改域名

回到 Workers & Pages / Overview,现在我们发现有了这个:

alt text

点进去

alt text

点击右上角 setup a custom domain

如果添加的是在cloudflare托管的域名的话,应该会自动帮你填这个DNS Record

至此,由cloudflare托管的网页已经部署完毕🎆