如何搭建不用服务器的个人网站呢？

分类: 技术 | 发布于: 2025年4月21日

你好，我是MaxCaulfield。这期分享一下如何利用 GitHub Pages 免费搭建一个不需要额外购买服务器的个人网站。

第一步：准备 GitHub 账号

首先，你需要能够访问 GitHub。前往 GitHub 官网注册一个账号，推荐使用个人常用邮箱进行注册。

按照提示填写注册所需的个人信息，包括邮箱、密码、用户名等。

注册过程中，GitHub 会向你的邮箱发送一封验证邮件。登录你的邮箱（例如 QQ 邮箱），找到这封邮件。

从邮件中获取 GitHub 发送给你的验证码（通常是一串数字）。

回到 GitHub 注册页面，将获取到的验证码输入到指定的框内，完成账号验证。

第二步：创建 GitHub Pages 仓库

成功登录 GitHub 后，点击页面右上角的你的头像，在下拉菜单中选择 "Your repositories"（我的仓库）。

GitHub 右上角菜单截图 — 导航到 "Your repositories"。

在你的仓库页面，点击绿色的 "New"（新建）按钮来创建一个新的代码仓库。

这是关键的一步：填写仓库名称 (Repository name)。

重要提示：仓库名称必须严格按照 `<你的用户名>.github.io` 的格式来填写。例如，如果你的 GitHub 用户名是 `MaxCaulfield`，那么仓库名就必须是 `MaxCaulfield.github.io`。

GitHub 创建新仓库页面截图 — 按照 `<用户名>.github.io` 格式填写仓库名称。

向下滚动页面，进行以下设置：

确保仓库设置为 "Public"（公开）。私有仓库无法用于 GitHub Pages 免费托管。
勾选 "Add a README file"（添加一个 README 文件）。这是一个好习惯，用于说明你的项目。

GitHub 仓库设置截图 — 确保设置为 Public 并添加 README。

点击 "Create repository"（创建仓库）按钮完成创建。

第三步：准备网站主页文件

现在我们需要创建网站的入口文件。回到你的电脑桌面，新建一个文本文档。

将这个文本文档命名为 index（注意是小写），然后用文本编辑器（如记事本、VS Code、Sublime Text 等）打开它。

接下来，我们需要编写主页的 HTML 代码。你可以自己编写，也可以借助 AI 工具快速生成一个基础模板。这里以 DeepSeek AI 为例，你可以向它提出类似这样的要求：

"我现在要创建个人网站主页，请你生成一个节约优雅的个人主页 HTML 代码，内容需要包含：我的头像占位符、我的名字、我的兴趣和爱好、我的联系方式。"

下面是一个 AI 可能生成的示例代码（你可以根据自己的需求修改）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人主页</title>
    <style>
        body { font-family: sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; }
        .container { max-width: 900px; margin: 30px auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
        .header { text-align: center; margin-bottom: 40px; }
        .avatar { width: 120px; height: 120px; border-radius: 50%; margin-bottom: 15px; border: 3px solid #eee; }
        h1 { margin: 10px 0 5px; color: #333; }
        .subtitle { color: #777; font-size: 1.1em; }
        h2 { color: #444; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-top: 40px; }
        ul { list-style: none; padding: 0; }
        li { margin-bottom: 8px; }
        .contact-list a { color: #007bff; text-decoration: none; }
        .contact-list a:hover { text-decoration: underline; }
        .interests span { display: inline-block; background: #e7e7e7; color: #555; padding: 5px 10px; border-radius: 15px; margin: 5px 5px 5px 0; font-size: 0.9em; }
        footer { text-align: center; margin-top: 50px; color: #888; font-size: 0.9em; }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <!-- 重要: 替换为你自己的头像图片路径 -->
            <img src="images/avatar.jpg" alt="我的头像" class="avatar">
            <h1>你的名字</h1>
            <p class="subtitle">你的职业或简介</p>
        </header>
        <section id="about">
            <h2>关于我</h2>
            <p>在这里写一段关于你自己的介绍。可以包括你的专业背景、技能、目标或者任何你想分享的有趣的事情。</p>
        </section>
        <section id="interests">
            <h2>兴趣爱好</h2>
            <div class="interests">
                <!-- 修改或添加你的兴趣标签 -->
                <span>编程</span> <span>阅读</span> <span>旅行</span> <span>摄影</span>
            </div>
        </section>
        <section id="contact">
            <h2>联系方式</h2>
            <ul class="contact-list">
                <!-- 修改为你的联系信息 -->
                <li>邮箱: <a href="mailto:your.email@example.com">your.email@example.com</a></li>
                <li>GitHub: <a href="https://github.com/yourusername" target="_blank">yourusername</a></li>
                <li>LinkedIn: <a href="https://linkedin.com/in/yourprofile" target="_blank">yourprofile</a></li>
            </ul>
        </section>
    </div>
    <footer>
        <p>&copy; 2025 你的名字. 保留所有权利.</p>
    </footer>
</body>
</html>

提示：这只是一个非常基础的模板。你可以使用我们之前做的那个更炫酷的个人网站 `index.html` 文件作为你的主页！只需确保文件名是 `index.html` 即可。

将你准备好的 HTML 代码复制粘贴到刚才打开的 `index.txt` 文件中，然后按 `Ctrl + S` (或 `Cmd + S`) 保存文件。

关闭文本编辑器。现在，找到你桌面上那个 `index.txt` 文件，将它的后缀名从 `.txt` 重命名为 `.html`。系统可能会提示你修改后缀名可能导致文件不可用，选择“是”即可。

注意：如果你看不到文件的后缀名（如 `.txt`），你可能需要在文件资源管理器的“查看”选项中勾选“文件扩展名”。

第四步：上传文件到 GitHub 仓库

回到你刚才在 GitHub 上创建的 `<用户名>.github.io` 仓库页面。点击 "Add file"（添加文件）按钮，然后选择 "Upload files"（上传文件）。

你可以直接将你电脑桌面上的 `index.html` 文件（以及包含头像、照片等资源的 `images` 文件夹，如果你的 `index.html` 引用了它们的话）拖拽到上传区域，或者点击 "choose your files" 来浏览并选择文件。

重要：如果你的 `index.html` 文件引用了本地图片（例如放在 `images` 文件夹下），你需要将整个 `images` 文件夹也一并上传到仓库的根目录下，以保持文件结构一致。

文件选择完毕后，页面下方会显示你即将上传的文件列表。你可以添加一个提交说明（Commit message），例如 "Add initial website files"，然后点击 "Commit changes"（提交更改）按钮。

第五步：访问你的网站

上传完成后，等待几分钟（有时 GitHub Pages 需要一点时间来部署）。

然后，在你的浏览器地址栏中输入你的 GitHub Pages 域名：

https://<你的用户名>.github.io

例如：https://MaxCaulfield.github.io

按下回车键访问。如果第一次访问显示 404 页面或者不是最新的内容，请稍等片刻再刷新页面。

恭喜！你的无需服务器的个人网站现在应该已经成功部署并可以公开访问了！

总结

通过 GitHub Pages，我们可以非常方便地免费托管静态网站（由 HTML, CSS, JavaScript 文件组成）。这对于个人博客、项目展示页或简单的在线简历来说是一个绝佳的选择。后续你只需要更新仓库中的文件，GitHub Pages 会自动重新部署。