免费打造你的个人网页——GitHub Pages使用指南

免费打造你的个人网页------GitHub Pages使用指南

前言

这段时间我一直想为我的独立开发应用音视频编辑器（AudioAndVideoEditor）弄一个网页，显然自己去弄服务器、域名、从零开始开发网站的成本比较高，正好GitHub提供的免费静态网页托管服务，简单几步（相对从零开发网站来说）就能上线自己的网站。本文结合我自己的使用经历介绍GitHub Pages的使用方法。

欢迎大家关注我的GitHub Pages：ilovecat1949.github.io/AudioAndVid... 。一个开源的Android音视频编辑器，支持ffmpeg命令行、视频编码压缩和格式转换、视频剪裁变速等多种音视频功能。>

GitHub Pages的优势和限制

大家都知道GitHub可以免费托管代码，但是知道可以使用GitHub Pages搭建个人网站的人可能不多，我简要介绍一下GitHub Pages的优势和限制。

1.零成本。这是最直接的优点。无需支付任何服务器、域名或托管费用。

2.简单易上手。无需太多的开发知识，使用现成模板即可建站。特别是现在有AI编程加持，捣鼓出自己想要的界面更简单了。

3.稳定可靠。GitHub还是靠谱的，建站好后不用担心网站被撤或者黑客攻击等安全问题。基于GitHub的全球CDN加速，确保网页加载飞快，支持HTTPS安全加密。

4.集成GitHub：网站直接基于GitHub仓库，版本控制、协作分享都很方便。

5.拥有一个GitHub Pages网站，可以打造线上简历，用于求职找工作。

根据GitHub 服务条款，我们在使用GitHub Pages服务条款中还受到如下限制： 1.GitHub 上的每个帐户只能创建一个用户或组织站点。

一个GitHub Pages网页，其URL格式为username.github.io/项目名或 organization.github.io/项目名。这个限制的意思是说一个账户只能拥有一个username.github.io或organization.github.io的GitHub Pages站点。当然可以为多个项目创建不同的GitHub Pages网页，但是它们前缀是同一个username.github.io或organization.github.io。

2.源代码仓库建议大小限制为 1 GB，已发布的站点大小不能超过 1 GB。 3.部署超时限制为 10 分钟。

4.每月带宽有 100 GB 的软限制。

5.每小时最多允许 10 次构建（使用自定义 GitHub Actions 工作流发布的站点不受此限制）。

使用 GitHub Pages 的默认构建方式（例如通过 GitHub Pages 设置中的发布源选项），你的站点每小时最多只能触发 10 次构建。

然而，如果你使用自定义的 GitHub Actions 工作流来构建和发布你的站点，这个限制不适用。换句话说，自定义 GitHub Actions 工作流可以绕过每小时 10 次构建的限制，允许你根据需要更频繁地构建和发布站点。 6.可能会应用速率限制以确保服务质量，触发速率限制时会收到 HTTP 状态代码 429 的响应。

7.此外，GitHub Pages 不允许用于商业交易、SaaS 服务或其他敏感事务（如发送密码或信用卡信息）。

GitHub Pages搭建指南

GitHub Pages依赖于GitHub仓库，而且是公开库。所以在构建GitHub Pages前需要注册一个GitHub账号，并且创建一个GitHub仓库。我直接基于我的开源项目AudioAndVideoEditor构建。有了仓库后，按下面步骤激活GitHub Pages。

1.进入你的仓库页面，点击"Settings"标签。

2.在左侧菜单找到"Pages"选项。

3.在"Source"下，选择"Deploy from a branch"，然后选"main"分支（默认），点击"Save"。

4.几分钟后，刷新页面，你会看到生成的网站URL：username.github.io/项目名。比如我的是 ilovecat1949.github.io/AudioAndVid... 。 GitHub仓库里面一般有README file，在没有其他网页文件的情况下，GitHub Pages显示的是你的README file。为了构建花里胡哨的好看界面，我们一般需要创建或上传网页文件。如下。 1.在仓库中（根目录下），点击"Add file" > "Create new file"。

2.文件名为"index.html"，输入简单代码：

xml 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>我的个人网页</title>
</head>
<body>
    <h1>欢迎来到我的世界！</h1>
    <p>这里是我的介绍：热爱编程、旅行和咖啡。</p>
</body>
</html>

Commit提交代码，几秒后刷新网站，就能看到更新，这回显示的是index.html的内容。

好了，上面就是使用GitHub Pages的大致步骤和思路，但这显然还不能构建精美的界面，接下来所以介绍一下用Jekyll模板搭建建博客。

分支构建和Actions 构建

使用Jekyll前，我们需要了解一下GitHub Pages构建的一些知识。在上面的步骤中，我们既可以选择代码分支作为源进行构建，也可以选择GitHub Actions来构建。

分支构建 (Build from a branch)是最传统和最简单的方式。它的工作原理是你指定一个分支（通常是 gh-pages 或 main），GitHub Pages 会自动将这个分支上的内容作为你的网站。它优点是简单，零配置。你只需将静态网站文件（HTML, CSS, JS）直接推送到该分支（一般是根目录下）即可。缺点是没有自动化构建。如果你使用 Jekyll，你需要先在本地运行 jekyll build 来生成 _site 目录，然后将 _site 里的所有文件推送到 GitHub Pages 分支（一般是根目录下）。这很繁琐，容易出错。

Actions 构建 (GitHub Actions)是更现代、更强大的方式。工作原理是你创建一个 GitHub Actions 工作流，当有代码被推送到指定分支时，这个工作流会自动运行，在云端为你完成 Jekyll 构建，并将生成的网站文件发布到 GitHub Pages。它的优点是全自动化。你只需要向仓库推送你的 Jekyll 源代码（比如 .md 文件和布局文件），剩下的所有工作（构建、部署）都由 GitHub Actions 自动完成。你不需要在本地运行 jekyll build。它的缺点是需要编写和配置 YAML 工作流文件，对初学者来说可能稍显复杂。不过，其实你选择GitHub Actions构建的时候，GitHub会提示你选择Jekyll Workflow来构建，你按照GitHub的提示点点点，它会自动帮你生成一个.github/workflows/jekyll-gh-pages.yml工作流文件。

分支构建就像是手动上传，你把最终产品准备好再给 GitHub,项目根目录下的HTML、Markdown等类型的文件会作为网页内容的来源。 Actions 构建就像是雇了一个全职自动化工人，你把原材料（Jekyll 源代码）给他，他会帮你完成所有工作并交付最终产品。构建生成的代码在_site目录下， _site目录下的文件是网页内容的来源。

我自己在操作的时候选择了Actions 构建，在本地通过jekyll build构建网页进行调试，上传到GitHub又触发工作流再构建一遍并发布。

GitHub Pages+Jekyll

首先说一下Jekyll是什么。Jekyll是一个强大的静态网站生成器。它能将你用 Markdown 语言写的文章，结合精美的主题模板，自动生成一个完整的静态网站。你只需要专注于内容创作，剩下的美化和排版工作都交给Jekyll来完成。我们其实不需要去倒腾Markdown生成网页了，现在强大的AI编程直接就能给出满足我们需求网页文件，我们需要的是Jekyll的主题模板、本地预览、实时调试功能。

安装Jekyll

开发工作还是需要在本地进行和在本地测试验证完后再上传才比较好。要在本地使用Jekyll，需要先安装一些依赖环境。

Jekyll是基于Ruby开发的，因此需要先安装 Ruby 和 Bundler。安装 Ruby：

Windows 用户：推荐使用 RubyInstaller for Windows，安装时请勾选 Add Ruby executables to your PATH 选项。 macOS 用户：Ruby 通常是预装的。你可以在终端中输入 ruby -v 来检查版本。

Linux 用户：使用包管理器（如 sudo apt-get install ruby-full）进行安装。

安装 Bundler：

Bundler 是 Ruby 的一个包管理工具，用于管理和安装 Jekyll 项目所需的依赖。在终端或命令提示符中，运行以下Bash命令：

复制代码

gem install bundler jekyll

这条命令会同时安装 Bundler 和 Jekyll。上面的安装预计会占用1个G磁盘空间。

克隆你的仓库到本地

现在，你需要将你在GitHub上创建的网站仓库克隆到本地电脑。

安装 Git：如果你的电脑还没有安装 Git，你需要先安装它。

克隆仓库：打开终端或 Git Bash，进入你想要存放项目的文件夹，然后运行以下命令：

bash 复制代码

git clone https://github.com/你的GitHub用户名/项目名.git
cd 项目名

进入你的项目文件夹后，就可以本地启动网站了。安装依赖：运行以下命令来安装项目所需的依赖（包括Jekyll和主题插件）：

复制代码

bundle install

第一次运行可能需要一些时间。启动本地服务器：现在，运行以下命令来启动一个本地服务器：

bash 复制代码

bundle exec jekyll serve

当命令执行完毕后，你会在终端看到一个本地网址，通常是 http://127.0.0.1:4000 。在浏览器中打开这个网址，你就能看到你的网站了。

现在进入你的仓库目录你会发现多了很多文件和目录，然后根目录下有一个文件index_markdown.md，它是整个网站的默认入口文件。正如我上面说的，我们不要去倒腾Markdown生成网页的事情了，我们将index_markdown.md改成index_markdown.txt，这样它就不会生效了，然后加入index.html文件（如果原来没有的话），这样Jekyll会以index.html作为网站的入口点。

接着，你只需要让AI基于Jekyll编写满足你需求的网页代码就可以了。

代码写完后，可以在本地预览效果，如果可以的话就提交代码。

sql 复制代码

git add .
git commit -m "你的提交信息"
git push origin main

提交后，GitHub Pages会再次自动为你部署（选择Actions 构建会重新构建再部署）网站，让你的线上网站和本地完全同步。

总结

使用GitHub Pages我们可以获得了一个免费的网站宣传自己和自己的项目、产品，打造自己的"数字名片"，说不定能为简历添上浓墨重彩的一笔。配合当今热门的AI编程，开发出自己满意的静态网页也不是难事。现在就打开 GitHub，开始你的创作之旅吧！

最后欢迎大家关注我的GitHub Pages：ilovecat1949.github.io/AudioAndVid... 。一个开源的Android音视频编辑器，支持ffmpeg命令行、视频编码压缩和格式转换、视频剪裁变速等多种音视频功能。

参考

1.GitHub Pages官方文档

2.Jekyll官网

3.Ruby官网