保姆教程：从零开始构建 GitHub Pages 静态网站（上）

1. Github Pages为何物？

Github Pages官网：https://pages.github.com/

GitHub Pages 是 GitHub 提供的一个免费的静态网站托管服务，它允许 GitHub 用户创建和托管自己的静态网站，这些网站可以通过特定的 GitHub 仓库进行管理和托管。

GitHub Pages 的主要特点包括：

• 免费托管： GitHub Pages 提供免费的静态网站托管服务，允许用户将自己的网站内容托管在 GitHub 上，用户不需要支付额外的托管费用；
• 使用简单： 创建和管理 GitHub Pages 静态网站相对简单，特别是对于熟悉 GitHub 的用户来说，用户只需在自己的 GitHub 帐户中创建一个特定名称的仓库，将网站文件上传到该仓库即可；
• 自定义域名： 用户可以选择使用自定义域名来访问他们的 GitHub Pages 网站，这使得它们更适合个人网站、博客和项目页面；
• 支持多种静态网站生成工具： GitHub Pages 支持多种静态网站生成工具，如 Jekyll、Hugo、Gatsby 等，以及纯HTML、CSS 和 JavaScript 等前端技术，这使得用户能够根据自己的需求选择适合他们的工具；
• 自动构建： GitHub Pages 可以自动构建用户上传的网站内容，无需用户手动生成或编译网页，这使得发布网站变得更加简单。

对于开发人员和技术爱好者来说，GitHub Pages 是一个很好的选择，用于托管个人网站、博客、文档、项目页面等静态内容，它提供了一个方便的方式来分享和展示自己的作品。

2. 快速搭建第一个Github Pages网站

在搭建前，默认已经注册成功了Github用户，现在开始根据官网教程一步一步的搭建。

GithubPages的站点类型有几种：

• 个人或组织站点（User or Organization sites）：对于个人或组织站点，每个GitHub用户或组织只能有一个站点，它通常使用username.github.io或organizationname.github.io的格式，这是GitHub Pages的默认站点，通常用于个人网站、博客等。
• 项目站点（Project sites）：对于项目站点，每个GitHub仓库可以有一个关联的GitHub Pages站点，这意味着对于每个项目，您可以创建一个独立的GitHub Pages站点，无需限制。

本文讲解下以上两种建站的方式。

2.1 搭建个人（组织）类型的网站

Step1： 新建一个项目

登录Github：https://github.com/，在顶部菜单栏点击“+”，然后“New repository”新建仓库，输入项目的相关信息，然后“Create repository”创建仓库：

Step2： 创建一个界面文件

首先创建一个文件：

输入文件内容，点击提交：

输入提交信息，点击提交

Step3： 访问

大概等待几十秒，访问：https://用户名.github.io/，即可部署第一个属于自己的静态网站了，可以看到部署成功了：

2.2 搭建项目类型的网站

Step1： 新建一个项目

登录Github：https://github.com/，在顶部菜单栏点击“+”，然后“New repository”新建仓库，输入项目的相关信息，然后“Create repository”创建仓库：

Step2： 创建一个界面文件

同样是创建一个文件：

同样写入内容：

然后输入提交信息：

Step3： 设置Github Pages

点击Settings：

设置Github Pages：

Step4： 保存并访问

点击上图的保存，然后不断刷新保存之后的页面，直至出现GtihubPages的地址：

点击跳转之后，可以看到已经为该项目创建了静态网站了：