免费白嫖个人静态网站的两种方案：Github Pages 和 Cloudflare Pages

## 简介

在当今互联网时代，拥有一个个人静态网站已经成为许多人展示自己技能、项目以及创意的理想选择。而要搭建一个简单而高效的个人静态网站，有两种常用的方法：`Github Pages` 和 `Cloudflare Pages`。

本文将介绍这两种方法，并比较它们的优缺点，以便读者选择最适合自己的方案。

![github-vs-cloudflare](https://images.oldmoon.top/images/dingdangdog/dingdangdog-1713608288261.jpeg)

<!-- more -->

## Github Pages

`Github Pages`是由 `Github` 提供的一项免费服务，可以轻松地将你的静态网页托管到 `Github` 仓库中，并可以通过 `Github` 规则的域名访问。

`Github` 会给每位用户分配域名。域名结构是 `username.github.io`，其中 `username` 是你的账号。当静态网站托管后，可以通过你的域名访问网站。

<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>

### 使用步骤

以下是使用 `Github Pages` 搭建个人静态网站的简要步骤：

1. 注册 `Github` 账号并登录
2. 在 `Github` 上创建一个新的仓库，命名为 `username.github.io`，其中 `username` 是你的 `Github` 用户名。
3. 将你的静态网页文件（如 `HTML`、`CSS`、`JavaScript`等）上传到这个仓库中。
4. 等待几分钟，`Github` 会自动为你的仓库创建一个网站，并提供一个访问链接，如`https://username.github.io`。
5. 如果你有自己的域名，还可以将其绑定到Github Pages上，让你的网站拥有个性化的访问链接。

### 优点
1. 免费使用，并且无需额外配置。
2. 集成了 `Git` 版本控制，方便管理和更新网站内容。
3. 可以通过自定义域名来提高个性化和专业性。

### 缺点
1. 功能相对简单，不支持后端代码。
2. 对于大型网站或高流量网站可能存在访问速度较慢的问题。

## Cloudflare Pages

`Cloudflare Pages` 是 `Cloudflare` 提供的一项全新的静态网站托管服务，它利用 `Cloudflare` 的全球性网络来加速网站的访问速度，并提供更丰富的功能。

<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>

### 使用步骤
以下是使用 `Cloudflare Pages` 搭建个人静态网站的简要步骤：

1. 在 `Cloudflare` 注册账号并登录。
2. 在 `Workers & Pages` 面板中点击 “`Create a project` / `创建应用程序`” 
3. 切换到 `Pages` 页面，选择连接到 `Git` 或者上传静态文件。
4. 配置你的项目设置，包括域名、缓存策略等。
5. 等待几分钟，Cloudflare会为你的网站生成一个全球性的CDN链接，以提供更快的访问速度。

### 优点
1. 全球性的CDN加速，可以提供更快的网站访问速度。
2. 支持现代的构建工具和框架，如`React`、`Vue`等。
3. 提供更丰富的缓存策略和性能优化选项。
4. 现在已经支持连接到 `Github`/`GitLab` 仓库，与 `Github Pages` 类似了。

### 缺点
1. `Cloudflare Pages` 提供的免费域名相对于 `Github` 来说更差一些；
2. 部分高级功能可能需要付费使用；
3. 相对于 `Github Pages` 来说，配置和管理稍显复杂。

## 总结

`Github Pages` 和 `Cloudflare Pages` 都是搭建个人静态网站的优秀选择，具有各自的特点和优势。

如果你希望快速简单地搭建一个基本的静态网站，并且不需要过多的配置和管理，那么 `Github Pages` 是一个理想的选择。

但如果你对网站的性能优化和全球访问速度有更高的要求，或者希望使用现代的构建工具和框架，那么 `Cloudflare Pages` 可能更适合你。最终选择取决于你的具体需求和技术偏好。

当然，`Github` 也支持现代的构建工具，这就需要用到 `Github Actions` 功能了，想要了解可以阅读之前的文章【[Github-Actions自动部署gh-pages](https://oldmoon.top/post/76)】！

<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>