GitHub Pages搭建免费个人静态网站教程

Git GitHub Pages 网站
Git
文章字数:   1.9k
阅读时长:   7 分

想拥有一个完全免费、又酷又快的个人网站吗？别再折腾虚拟机和付费主机了，GitHub Pages 就是你的最佳选择！这篇教程会像朋友聊天一样，手把手带你从零开始，用 GitHub Pages 搭建一个属于你自己的静态网站。无论你是想写博客、做简历，还是展示你的项目作品，这篇教程都够用了！

啥是 GitHub Pages？

简单来说，GitHub Pages 是 GitHub 提供的一项免费服务，它能直接把你仓库里的静态文件（HTML, CSS, JavaScript）变成一个可以公开访问的网站。它不仅免费，而且因为是静态网站，访问速度飞快，还不用你操心服务器维护的问题。对于开发者和技术爱好者来说，用它来托管个人网站、博客或项目文档再合适不过了。

准备工作

在开始之前，你需要准备好两样东西：

  1. 一个 GitHub 账号：如果没有，赶紧去 GitHub 官网 注册一个。
  2. Git 客户端：确保你的电脑上安装了 Git，这样才能在本地管理网站内容并推送到 GitHub。

准备好了吗？我们开始吧！

第一部分：5分钟，搭建你的第一个极简网站

咱们先从最简单的开始，创建一个“Hello World”级别的网站，让你感受一下整个流程。

第一步：创建你的专属仓库

GitHub Pages 有两种网站类型：个人/组织站点和项目站点。我们这里创建的是最常用的个人站点，每个账号只能有一个。

  1. 登录 GitHub，点击右上角的“+”号，选择 New repository。
  2. 在 Repository name (仓库名称) 的地方，必须 使用一个特殊格式：你的用户名.github.io。比如，我的用户名是 octocat，那仓库名就是 octocat.github.io。
  3. 确保仓库是 Public (公开) 的，私有仓库要使用 GitHub Pages 是需要付费的。
  4. 点击 Create repository 创建仓库。

第二步：创建网站首页

仓库建好了，现在我们给网站添加一个首页。

  1. 进入你刚刚创建的 你的用户名.github.io 仓库。
  2. 点击 Add file -> Create new file。
  3. 在文件名输入框里填上 index.html。这是网站的默认首页。
  4. 在下方的文件内容编辑区，粘贴以下 HTML 代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的个人网站</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f2f5;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>你好，世界！我的网站上线啦！</h1>
</body>
</html>
  1. 页面拉到最下面，点击 Commit new file 按钮，提交文件。

第三步：见证奇迹的时刻！

搞定！现在，打开你的浏览器，访问 https://你的用户名.github.io，就能看到你刚刚上线的网站了！

温馨提示：有时候 GitHub Pages 需要一两分钟来生成和部署你的网站，如果第一次打开是 404 页面，别慌，稍微等一下再刷新试试。

第二部分：进阶玩法，用 Jekyll 模板让网站酷起来

纯手写 HTML 太麻烦了，特别是写博客，每次都要复制粘贴改半天。这时候，静态网站生成器就派上用场了。GitHub Pages 内置了对 Jekyll 的支持，可以帮你轻松地把 Markdown 文件转换成漂亮的博客文章。

案例：套用一个现成的主题

最快的方式就是直接使用 GitHub 提供的模板，或者找一个你喜欢的主题“站在巨人的肩膀上”。

  1. 在仓库设置中选择主题

    • 进入你的 你的用户名.github.io 仓库，点击 Settings 标签页。
    • 在左侧菜单中找到 Pages 选项。
    • 在 “Build and deployment” 部分，你会看到一个 Choose a theme (选择一个主题) 的按钮，点它！
    • 选择一个你喜欢的主题，点击 Select theme。GitHub 会自动帮你创建 Jekyll 所需的配置文件。

  2. （推荐）Fork 一个成熟的博客主题

    • 在 GitHub 上有海量的 Jekyll 主题，你可以在 GitHub Topics 或 Jekyll Themes 等网站上寻找。
    • 找到喜欢的主题后，直接 Fork 它的仓库到你自己的账号下。
    • 将 Fork 来的仓库名称修改为 你的用户名.github.io。
    • 根据主题的说明文档（通常是 README.md 文件），修改 _config.yml 文件，把网站标题、作者信息等改成你自己的。

怎么写一篇新博客？

使用 Jekyll 主题后，你的网站结构通常会包含一个 _posts 文件夹。写博客就跟记笔记一样简单。

  1. 在 _posts 文件夹里，创建一个新文件。
  2. 文件名必须遵循 年-月-日-文章标题.md 的格式，例如 2025-09-12-my-first-post.md。
  3. 用 Markdown 语法写文章就行了！

代码案例：一篇博客文章

---
layout: post
title:  "我的第一篇博客"
date:   2025-09-12 16:30:00 +0800
categories: jekyll update
---

大家好！

这是我用 Jekyll 写的第一篇博客。感觉太棒了！以后我会在这里分享我的学习笔记和技术心得。

- 简单
- 快速
- 免费

希望大家喜欢！

写完后，把文件提交 (Commit) 并推送 (Push) 到你的 GitHub 仓库，GitHub Pages 会自动帮你重新生成网站，稍等片刻，你的新文章就发布了。

第三部分：终极玩法，绑定你的专属域名

yourname.github.io 这个域名虽然不错，但如果能换成自己的专属域名，那才叫真正的“高大上”！

第一步：购买一个域名

你需要先有一个自己的域名。你可以在阿里云、腾讯云或者 GoDaddy 等域名服务商那里购买。

第二步：在 GitHub 仓库中设置域名

  1. 还是在你的网站仓库里，进入 Settings -> Pages 页面。
  2. 找到 Custom domain (自定义域名) 的设置项。
  3. 输入你购买的域名（例如 www.yourdomain.com 或者 blog.yourdomain.com），然后点击 Save。
  4. 保存后，GitHub 会自动在你的仓库里创建一个名为 CNAME 的文件，里面包含了你的域名。
  5. 务必勾选下方的 Enforce HTTPS 选项，GitHub 会免费为你的域名提供 SSL 证书，让你的网站变成更安全的 https 开头。

第三步：配置域名解析 (DNS)

最后一步，就是去你的域名服务商后台，告诉它把域名指向 GitHub 的服务器。

  1. 登录你的域名服务商（比如阿里云）的控制台。
  2. 找到 DNS 解析设置。
  3. 添加一条新的解析记录。记录类型选择 CNAME。
    • 主机记录：填写你希望使用的域名前缀。比如你想用 www.yourdomain.com，就填 www；如果想用 blog.yourdomain.com，就填 blog。
    • 记录值：填写你 GitHub Pages 的默认地址，也就是 你的用户名.github.io。
    • TTL：保持默认即可。

配置完成后，等待 DNS 解析生效（通常需要几分钟到几小时不等），然后你就可以通过自己的域名访问你的网站了！

总结

至此，你已经掌握了使用 GitHub Pages 搭建个人网站的全部核心技能！从一个简单的 HTML 页面，到一个功能齐全的博客，再到绑定个性化域名，整个过程完全免费，而且充满乐趣。

当然，除了 Jekyll，你也可以使用 Hexo、Hugo 等更强大的静态网站生成器，它们提供了更丰富的主题和更快的生成速度，但配置过程会稍显复杂。

现在，就动手创建属于你自己的网络空间吧！

Git GitHub Pages 网站
  目录