一行代码都不写，用Cloudflare轻松做网站

相信很多人跟我一样，认识 Cloudflare 都是通过一个无情的验证界面。 非常好奇这个服务能做什么，为什么现在国外的网站都在用它。于是就稍微谷歌了一下，发现 Cloudflare 简直就是个宝藏： 域名、DNS、访问加速、域名邮箱、网站部署、云函数worker、R2 文件存储… 这一切除了域名是成本价9美金外，其他统统都是免费的

引言

相信很多人跟我一样，认识 Cloudflare 都是通过一个无情的验证界面。

非常好奇这个服务能做什么，为什么现在国外的网站都在用它。于是就稍微谷歌了一下，发现 Cloudflare 简直就是个宝藏：

域名、DNS、访问加速、域名邮箱、网站部署、云函数worker、R2 文件存储…

这一切除了域名是成本价9美金外，其他统统都是免费的，（甚至域名不买也是可以的）不仅如此，整个网站的使用体验也是非常顺畅的，功能丰富免费易用，让人想起十年前的 Google。

尝试的结果就是做出了 orangesai.com ，一个无须写任何代码，且可以通过任何 Markdown 编辑器（比如 Obsidian ）编辑的网站。

接下来是建站流程，写给2023年还愿意折腾网站的稀有物种，首先打开 Cloudflare 的官网吧

https://www.cloudflare.com/

主要步骤：

• 域名购买

• 网站文件存放

• 网站部署

• 网站更新

域名购买

可以买域名的地方很多，比如加价50%的 GoDaddy，比如需要实名认证的疼讯云，但是 Cloudflare 只需要邮箱注册，并且只收成本价，.com 域名的购买和续费都是 9 美金，基本是最低价了。

顺便说下为什么 .cn .xyz 域名的只要十块钱，还有其他免费的域名，一定要花9美金来购买一个 .com 域名？因为 .com 域名就是最正的域名，不仅本身好记（其他域名相当于后面几个字母是额外的记忆成本），搜索引擎也非常认可，比如一个新上线的没有任何 SEO 的网站就被 Google 收录到了第一的位置。

使用 GitHub 存放网站文件

一个最简单的网站，其实只需要包括一个 index.html 文件即可。

为了好看，可以加上网站的 favicon、图片、样式。这些都很简单，后面说明。

为了存放这些文件，可以先注册一个 GitHub 账户，然后新建或者去我的 GitHub 仓库直接 Fork 一下。

https://github.com/orange2ai/orange2ai

可以看到总共就这几个文件，图片可以直接替换，index.html 可以直接编辑修改。

这里要注意的是 index.html 里引用的图片的 URL 可以用 GitHub 这个仓库里的（会加载慢，且需要公开仓库），也可以用部署后的图片地址（域名/图片名），还可以用 Cloudflare 的 R2 服务，这里图片就一张，就没折腾 R2 。

虽然 HTML 是很简单的语言，但本教程突出一个懒，后面会讲怎么用 Markdown 编辑器来做。

另外，再顺便说下 readme.md ，如果 GitHub 仓库名是用户名同名的，会在你的 GitHub 主页展示这个 readme.md 里的内容，非常方便，同时这个 readme.md 也是 index.html 的源文件。

使用 Cloudflare 进行网站部署

修改好网站的文件之后，就可以部署了。

打开 Cloudflare Page，添加站点，关联一下 GitHub 账号，选择你要部署的仓库，其他都不用管，下一步，下一步，完成。完成后，你就获得了一个二级域名的网站，orange2ai.pages.dev

域名配置

接下来把你的主域名绑定到网站上，方便大家记忆和访问。

在「自定义域」tab 里输入你的域名，建议绑定主域名和 www 子域名，比如 orangesai.com 和 www.orangesai.com ，因为有一些老派的人还是会用 www 的。

然后再新开一个浏览器页面，来到 Cloudflare 的 DNS 配置页面，按照页面的信息进行配置。

左侧：页面信息 右侧，DNS 配置页面

另外说一下，域名购买完成后，首先可以开启 C ，这个服务「可抵御伪造的 DNS 应答。受 DNSSEC 保护的区域将通过密码进行签名，以确保收到的 DNS 记录与域所有者发布的 DNS 记录相同。」简单说就是可以防止 DNS 污染，（有些国家的整个网络就是个大型 DNS 污染）。

大功告成，恭喜！

通过以上三步就配置完成一个基本的网站了。

但是这个网站如何更新和个性化呢？

每个人的选择不一样

• 如果这个页面只是展示个人信息和关联博客，其实直接用文本编辑器修改 html 文件。然后放个 Notion 的链接即可，毕竟 Notion 写博客是真方便。

• 如果对这个页面的样式和更新都有一定的要求，就可以继续看下面的懒人之路 Obsidian 编辑网页。

更新网站

为什么要用笔记软件来编辑网页呢？笔记软件它方便啊。2023年的网站创建者也要考虑自己的用户体验。

左图是 HTML ，右图是 Obsidian 界面。所见即所得，直接编辑，不仅支持 Markdown，也支持 HTML。毕竟最终要做的是网页，还是要用到一点点 HTML （图片和邮箱的链接） 。

如果是 Typora，选好主题，编辑好信息，直接导出 HTML 即可。但是 Typora 的文件管理功能不强，格式导出后效果也不是很理想，还是推荐 Obsidian。

Obsidian 本身有一定的学习成本，但 Obsidian 是最值得学习的软件之一，它完全免费，支持丰富的插件，而且插件现在已经支持了 ChatGPT API，可以直接在笔记里开聊，强烈推荐。

Obsidian 的配置和使用

接下来讲下 Obsidian 编辑和导出的功能，配置步骤：

• 安装 Minimal Theme 主题，并安装 Minimal Theme Settings 插件，对这个强大的主题需要一个插件来支撑，内置了11种非常好看的样式，我最喜欢用 Notion 风格。

• 安装 Pandoc 插件，有了这个插件才可以把Markdown文件导出成 HTML 文件。

• 安装 Pandoc 安装包 https://pandoc.org/installing.html （好像转 HTML 文件不需要这一步，但是装上之后还可以解锁导出 ePub PPT Word 等等，何乐而不为。

配置完成后就可以笔记来更新网站了：

• 新建一条笔记，命名 index，编辑好内容

• 打开命令面板（ cmp+P），搜索 html，找到这条导出命令，点击导出，这条笔记就导出到笔记所在的文件夹了

• 把 index.html 上传到 GitHub，大功告成！

• Cloudflare 会自动部署更新的文件，所以更新网站的流程就是如此简单。

如果需要增加其他页面也是类似流程，把笔记都导出 HTML，并且把超链接放到 index.html 里就可以了。