创建你的个人网站：免费且简单的教程

想要拥有一个展示个人文章、作品或作为个人主页的网站作为FDO的分支网站吗？静态网站是一个不错的选择，它不仅搭建简单，而且完全免费。本文将引导你通过 fork 已有的网站框架项目，快速搭建一个FDO的分支网站（当然也可以用于属于你自己的展示型网站）。

准备工作

在开始之前，你需要做好以下准备：

1. GitHub 账号: 这是构建网站的基础平台。
   • 推荐使用 GitHub 网页版，而非客户端，以确保所有功能可用。
   • GitHub 是一个国外平台，无需担心内容审查，但连接速度可能不稳定。建议在网络条件允许的情况下使用，或考虑开启代理。
   • 可以使用任何邮箱注册，但为了安全起见，建议避免使用国内邮箱。如果你有使用代理，可以先注册一个 Proton 邮箱，再用它来注册 GitHub。
   • 注意： 你在 GitHub 上设置的用户名会影响你最终的网站地址，所以尽量选择一个好记的用户名。
2. 浏览器: 建议同时打开本教程页面和 GitHub 页面，并确保 GitHub 账号已登录。

选择并 Fork 网站风格项目

我们已经为你准备好了包含不同风格的网站框架项目，你只需要选择喜欢的风格并 Fork 到你的 GitHub 账号下即可：

• 包含蓝绿色毛玻璃效果和简洁黑白风格的模板项目: FDO-page/website-templates
  • 这个项目包含了主页和文章页两种模板，以及蓝绿色毛玻璃和简洁黑白两种风格。
  • 点击链接打开项目页面，然后点击右上角的 "Fork" 按钮，将项目 Fork 到你的 GitHub 账号下。
  • Fork 后，你会在你的 GitHub 账号下看到一个名为 website-templates (或者你自定义的项目名) 的仓库，这就是你网站的根基。

修改网站内容

Fork 项目后，你就可以开始修改网站内容，将其变成你自己的个人网站了。以下是修改步骤：

1. 进入你 Fork 后的仓库页面 (例如： 你的用户名/website-templates)。
2. 浏览项目文件，你会看到以下文件和文件夹：
   • index.html: 默认主页文件 (简洁黑白风格)。
   • homepage.html: 蓝绿色毛玻璃效果主页文件。
   • articlepage.html: 蓝绿色毛玻璃效果文章页文件。
   • succinct_article_page.html: 简洁黑白风格文章页文件。
   • css 文件夹: 存放 CSS 样式文件。
   • images 文件夹: 存放示例图片。
3. 选择你要修改的文件，例如，如果你想修改默认主页 (简洁黑白风格)，就点击 index.html 文件名。
4. 点击右上角的 铅笔图标 (手机端是省略号，选择 “Edit this file”)，进入在线代码编辑器。
5. 滑动页面，找到以下内容，你可以修改它们：
   • 网页标题: <title>这里是网页名称</title>， </title> 前面的内容是网页名称，显示在浏览器标签页的标题栏。
   • 主页大标题: <h1>这里是主页标题</h1> ，</h1> 前面的内容是主页的大字标题部分。
   • 主页副标题/介绍: <p>这里是网站的描述或介绍</p>， </p> 前面的内容是主页的副标题或个人介绍。
   • 文章列表或链接: 你可以在 <div class="content"> 区域下添加你的文章列表或链接。 模板中已有一些示例链接。
6. 修改完成后，拉到页面底部，填写 Commit message (更新说明)，然后点击绿色的 "Commit changes" 按钮 保存修改。
7. 重复以上步骤，修改其他文件，例如 homepage.html (蓝绿色毛玻璃效果主页) 或 succinct_article_page.html (简洁黑白风格文章页) 等。

部署 GitHub Pages

修改内容后，你需要部署 GitHub Pages 才能让网站上线：

1. 打开你的 Fork 后的仓库，点击右上角的 “Settings” 按钮。
2. 在左侧导航栏中，找到 “Pages” 并点击。
3. 在 “Source” 部分，找到 “None” 按钮并点击，选择 “main” 分支 (或 “gh-pages” 分支，如果项目使用了该分支)。
4. 点击右边的 "Save" 按钮 保存设置。
5. 刷新几次页面，稍等片刻 (通常一分钟左右)，你会看到一个以 "Your site is live at" 开头的链接，这就是你的网站地址，格式通常为 你的用户名.github.io/website-templates (如果你的仓库名是 website-templates)。
6. 点击链接右边的 “Visit site” 按钮，检查你的网站是否正常显示。

自定义网站内容 (深入)

除了修改文字内容，你还可以进行更深入的自定义，例如：

修改默认首页风格

默认情况下，访问 你的用户名.github.io/website-templates 会显示 index.html 文件的内容 (简洁黑白风格主页)。如果你想使用蓝绿色毛玻璃效果主页作为默认首页，可以进行以下操作：

1. 进入你的仓库代码页面。
2. 将 homepage.html 文件重命名为 index.html。
3. (可选) 将原来的 index.html 重命名为其他名称，例如 succinct_index.html，以便保留简洁黑白风格主页。
4. 提交 (Commit) 这些更改。
5. 等待 GitHub Pages 重新部署，然后访问你的网站，默认首页就会变成蓝绿色毛玻璃效果风格。

添加新的文章页面

你可以通过创建新的 HTML 文件来添加更多的文章页面：

1. 在你的仓库根目录下，点击 "Add file" -> "Create new file"。
2. 输入新的文件名，例如 article1.html, my_article.html 等。 注意使用 .html 后缀。
3. 复制文章页模板代码 (例如 articlepage.html 或 succinct_article_page.html) 粘贴到新的文件内容中。
4. 修改新文章页面的内容，包括标题、正文等。
5. 在你的主页或其他页面中，添加链接到新的文章页面。 例如，在主页的 index.html 文件中，使用 我的第一篇文章 创建链接。
6. 提交 (Commit) 这些更改。
7. 等待 GitHub Pages 重新部署，然后你就可以通过链接访问新的文章页面了 (例如 你的用户名.github.io/website-templates/article1.html)。

代码说明 (通用)

以下代码说明适用于所有 HTML 文件，帮助你更深入地自定义网站内容：

• 引用链接: 使用 [link:显示文字](链接地址) 格式，如 [link:我的博客](https://example.com)。
• 换行: 在正文中使用 <p></p> 来换行。
• 文章格式转换: 如果觉得手动换行麻烦，可以使用 这个网站 来转换你的文章格式(从markdown到HTML)。

引用图片法一：

1. 上传图片到 GitHub 仓库:
   • 在你的 GitHub 仓库中，创建一个文件夹（例如 images）用于存放图片 (如果项目没有 images 文件夹)。
   • 将你的图片文件上传到这个文件夹中。
   • 确保图片文件以常见的图片格式（如 .jpg，.png，.gif）结尾。
2. 获取图片路径:
   • 如果你将图片放在了 images 子目录下，可以使用相对路径（例如 images/myimage.jpg）。
3. 在网页中引用图片:
   • 使用标准的 HTML 图片标签 来插入图片。 语法为： <img src="图片路径" alt="图片描述"> 例如：
     • 如果图片在 images 子目录下： <img src="images/myimage.jpg" alt="我的图片">
   • src 属性指定图片的路径 (URL 或相对路径)。
   • alt 属性是替代文本，非常重要！它在图片无法加载时显示，并为使用屏幕阅读器的用户提供图片描述，有助于提升网页可访问性。

4. 法二：使用图床(更简单)

   • 引用图片: 使用标准的 HTML 图片标签 标签，语法为： <img src="图片链接" alt="图片描述"> 例如： <img src="https://example.com/image.jpg" alt="我的图片">。
     • 图床选择: 你需要使用图床服务来托管图片并获取图片链接。 推荐使用 sm.ms，它免费且在国内访问速度相对较快。 当然，你也可以选择其他图床服务。
     • 获取图片链接: 将图片上传到图床后，你会得到一个以图片格式结尾的 URL（例如 .jpg, .png, .gif 等）。 将这个 URL 复制到 <img src="..."> 标签的 src 属性中。
     • 检查图片链接: 确保图片链接以图片格式（如 .jpg, .png, .gif）结尾。 如果不是，请检查你的图床链接是否复制正确，或者图片上传是否成功。
     • alt 属性是替代文本，与方法一相同，用于在图片无法加载时显示，并为使用屏幕阅读器的用户提供图片描述。 务必为你的图片添加有意义的 alt 文本。

使用 Cloudflare 加速访问（可选）

如果你的网站访问不稳定，可以考虑使用 Cloudflare 加速访问。对于静态网站，Cloudflare 提供免费的部署服务。

Cloudflare 部署步骤

1. 使用你注册 GitHub 的邮箱注册并登录 Cloudflare 账号。（也可以使用其他邮箱，但关联 GitHub 账号会麻烦一些）
2. 下滑找到 “start building” 按钮并点击。
3. 选择第一个 “Build” 开头的选项。
4. Cloudflare 会检查你的邮箱，打开邮箱找到验证邮件，并点击其中的链接。
5. 点击 “Pages” 选项。
6. 点击 “Connect to git” 按钮。
7. 在跳转的页面中，点击 “Connect GitHub”。
8. 在接下来的页面中，直接下滑并点击绿色的 “Install” 按钮。
9. 登录你的 GitHub 账号。
10. 选择你要部署的仓库 (你的 Fork 项目)，并点击。
11. 输入项目名称，注意，这个名称也会影响你的 Cloudflare 免费网址，尽量选择简短好记且和 Cloudflare 提供的网址不同的名称。
12. 滑动到页面底部，点击蓝色的 "Save" 按钮。
13. 等待部署完成后，点击右下角蓝色按钮退出，你会看到你部署的网站，点击右上方的 “Visit Site” 按钮进行检查。
14. 如果有其他 GitHub 仓库需要部署，点击左上角的 "Workers" 重复以上步骤。

创建分支网站（子目录）

如果你想创建类似于 A.com/B/C 这样的分支网站，步骤与原教程创建分支网站部分相同，但操作对象变为你 Fork 后的项目仓库。

1. 在你的 GitHub 仓库中创建一个新的文件夹()， 例如 B。
2. 在 B 文件夹中，创建另一个文件夹，例如 C。
3. 在 C 文件夹中，创建一个 index.html 文件，并将你想要展示的内容（如文章页模板代码）粘贴进去。
4. 提交 (Commit) 这些更改 到你的 GitHub 仓库。
5. 确保你的 GitHub Pages 设置 指向 main 分支（或者你实际使用的分支）。
6. 稍等片刻，让 GitHub Pages 部署新的更改。
7. 访问你的分支网站，地址为 “你的用户名.github.io/website-templates/B/C。”

注意事项: (与原教程分支网站部分相同)

• 目录结构： 你的用户名.github.io/website-templates/B/C 中， B 是你的一个文件夹，C 是 B 下的一个文件夹， index.html 放置在 C 文件夹下。
• 多级目录： 你可以在 C 文件夹下继续创建多级目录和 index.html 文件，来组织更复杂的内容。例如 你的用户名.github.io/website-templates/B/C/subpage。
• 资源链接： 如果你在分支网站中引用图片或其他资源，确保你的链接是相对于当前页面的路径，或者使用绝对路径。例如，如果你在 C/index.html 中要引用同目录下的图片 image.jpg，可以使用 <img src="image.jpg">。
• Cloudflare 支持: 如果你使用 Cloudflare 加速，以上的分支网站也会被正确部署，访问路径与 GitHub Pages 相同。

总结

通过以上步骤，你就拥有了自己的个人网站和分支网站，快去尝试构建吧！ 现在专注于修改模板内容，打造独具个人特色的网站吧！