您现在的位置是：网站首页 > GitHub Pages：发布静态网站文章详情
GitHub Pages：发布静态网站
陈川
【
开发工具
】
4319人已围观
什么是 GitHub Pages？
GitHub Pages 是 GitHub 提供的一个免费静态网站托管服务。它允许开发者将他们的项目、个人网站或博客部署到一个具有自定义域名的公共网页上。GitHub Pages 使用 Jekyll（一个静态网站生成器）作为默认引擎，但也可以使用其他框架如 Hugo 或 Pelican。
如何使用 GitHub Pages
创建或克隆项目
首先，你需要在 GitHub 上创建一个新的仓库或者克隆现有的仓库到本地。这一步是将你的静态网站内容保存在云端，以便 GitHub 可以访问并托管它。
# 如果你还没有 GitHub 帐户，请先注册。
# 然后，创建一个新的仓库：
# https://github.com/new
# 或者，克隆一个已有的仓库：
git clone https://github.com/yourusername/your-repo.git配置 GitHub Pages
在你的仓库中，需要配置一个名为 gh-pages 的分支，用于存放静态网站的内容。这可以通过 Git 进行操作：
cd your-repo
git checkout -b gh-pages
git add .
git commit -m "Initial commit for GitHub Pages"
git push -u origin gh-pages此时，你的静态网站已经部署到了 GitHub Pages。你可以通过访问 <your-username>.github.io 或 <your-username>/your-repo（如果仓库名与用户名相同）来查看网站。
自定义域名
要使用自定义域名，你需要先购买域名并在 DNS 设置中添加指向 GitHub Pages 服务器的 CNAME 记录。然后，在 GitHub Pages 的设置页面中，将域名关联到你的仓库。
- 登录 GitHub，导航到你的仓库。
- 点击仓库设置，然后在左侧菜单选择 “GitHub Pages”。
- 在页面底部，你会看到一个名为 “Source” 的字段。确保它被设置为你仓库的默认分支（通常是
master或main）。 - 点击 “Save” 以保存更改。
现在，你的自定义域名应该可以访问了。例如，如果你的域名是 example.com，则可以通过 example.com 来访问你的静态网站。
示例代码
假设你使用 Markdown 文件存储文章内容，以下是一个简单的示例：
- 创建 Markdown 文件：在仓库根目录下创建一个名为
index.md的文件。
touch index.md- 编辑 Markdown 文件：打开
index.md并添加内容。
---
title: "欢迎来到我的博客"
date: 2023-09-01
---
这是我的第一篇文章！-
编写文章：继续添加更多文章。每个新的文章应该有一个独立的 Markdown 文件，例如
post-2023-09-02.md。 -
更新 HTML 页面：为了使文章列表看起来更整洁，可以创建一个简单的 HTML 页面来显示文章列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的博客</title>
</head>
<body>
<h1>我的博客</h1>
<ul id="posts">
<!-- 动态生成文章列表 -->
</ul>
<script>
// 读取所有 Markdown 文件并动态生成列表
const files = ['index.md', 'post-2023-09-02.md']; // 添加更多文件名
const postsContainer = document.getElementById('posts');
files.forEach((filename) => {
fetch(filename)
.then((response) => response.text())
.then((content) => {
// 解析 Markdown 内容
const parser = new DOMParser();
const doc = parser.parseFromString(content, 'text/html');
const articleTitle = doc.querySelector('h1').textContent;
const articleDate = doc.querySelector('p').textContent.split(':')[1].trim();
const li = document.createElement('li');
li.textContent = `${articleDate} - ${articleTitle}`;
postsContainer.appendChild(li);
});
});
</script>
</body>
</html>- 部署更改：通过推送更改到
gh-pages分支来更新网站。
git add .
git commit -m "Update blog content and HTML"
git push -u origin gh-pages结论
GitHub Pages 是一个强大的工具，用于托管静态网站和博客。通过遵循上述步骤，你可以轻松地将自己的静态内容部署到全球网络上，且无需额外的服务器成本。随着对 Markdown、HTML 和 CSS 的熟练掌握，你可以创建出既美观又功能丰富的个性化网站。
站点信息
- 建站时间：2017-10-06
- 网站程序：Koa+Vue
- 本站运行：
- 文章数量：
- 总访问量：
- 微信公众号：扫描二维码，关注我
