跳转至

基于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托管的网页已经部署完毕🎆

追加: 如何防窥视

可能你会感觉这个主题有悖于网页本身“公开”的属性,但其实它很有必要 👀

笔者最开始也是秉持着包容的态度来开放网站内容,但有时还是会被一些不劳而获者的奇怪行为感到困扰。

比如:

我的个人主页新增内容 (12月初)

某xjtu同学的主页 (于我更新后的三天内)

alt text

我一直都知道他有抄袭剽窃的习惯,一般也就睁只眼闭只眼了,但是这次连字都不带改的有点难评😅

因此我觉得有必要增强下信息安全保护,但这本身又跟网页性质相违背,怎么办呢?

我的解决方法是:只允许IP地址为美国的用户访问,IP地址为亚洲的用户禁止access

出发点是:大多数中国用户 (尤其是xjtu学生) 会挂Singapore的节点,因为访问速度相比于美国节点快很多。因此我一旦禁止亚洲地区访问,他们就没法access并抄袭了🧐

Warning

很显然这是没有办法的办法了😅

如何做?

进入 cloudflare cloud dashboard 并点击网站 (这里是bxhu2004.com):

alt text

点击左侧菜单栏,选择 安全性 > WAF > 自定义规则

alt text

点击 + 创建规则

alt text

创建规则即可,可以自己diy,这里放一下我的配置:

alt text