开始写作 Help

保姆级教程: 从零构建GitHub Pages静态网站

官方文档

1. Github Pages是什么?

GitHub Pages 是一个静态网站托管服务,它允许你使用 GitHub 仓库来展示你的项目、博客或个人主页。你可以使用 HTML、CSS 和 JavaScript 等技术来创建你的静态网站,并将其托管在 GitHub Pages 上。

GitHub Pages 有两种类型:用户网站和项目网站。用户网站是指你在 GitHub 上的个人主页或组织主页,项目网站是指你在 GitHub 上的某个仓库。用户网站和项目网站的区别在于,用户网站的 URL 是 https://username.github.io ,而项目网站的 URL 是 https://username.github.io/repository

1.1 用户网站

用户网站是指你在 GitHub 上的个人主页或组织主页。你可以在 GitHub 上创建一个仓库,仓库的名字必须是 你的github用户名.github.io ,然后将你的静态网站代码上传到这个仓库中。这样,当你访问 https://你的github用户名.github.io 时,就会展示你在这个仓库中的静态网站。

1.2 项目网站

项目网站是指你在 GitHub 上的某个仓库。你可以在 GitHub 上创建一个仓库,然后将你的静态网站代码上传到这个仓库中。这样,当你访问 https://username.github.io/repository 时,就会展示你在这个仓库中的静态网站。

1.3 自定义域名

你还可以为你的 GitHub Pages 网站配置一个自定义域名。这样,当你访问 https://你的域名 时,就会展示你在这个仓库中的静态网站。

要为你的 GitHub Pages 网站配置自定义域名,你需要先在域名注册商处购买一个域名,并将域名的 DNS 记录指向 GitHub 的服务器。然后,在 GitHub 上的仓库中,你需要在 Settings-> Pages 中,将自定义域名填写到 Custom domain 中。这样,当你访问 https://你的域名 时,就会展示你在这个仓库中的静态网站。

2. 搭建GitHub Pages静态网站

要搭建 GitHub Pages 静态网站,你需要先在 GitHub 上创建一个仓库。仓库的名字必须是 你的github用户名.github.io ,然后将你的静态网站代码上传到这个仓库中。

你可以使用 GitHub 的在线编辑器来编写代码,也可以使用本地的编辑器来编写代码。编写代码时,你需要注意以下几点:

  1. 代码必须是静态的,不能包含任何动态的内容。

  2. 代码必须是 UTF-8 编码的。

  3. 代码必须放在仓库的根目录下。

  4. 代码中不能包含任何敏感信息,比如密码、密钥等。

编写完成后,你需要将代码上传到 GitHub 仓库中。上传代码的方法有两种:

  1. 使用 GitHub 的在线编辑器。

  2. 使用本地的编辑器,将代码上传到 GitHub 仓库中。

搭建github pages需要先搭建一个github仓库,仓库的名字必须是 你的github用户名.github.io ,然后将你的博客项目clone到本地,将博客项目push到仓库中,仓库中就会有一个gh-pages分支,这个分支就是你的github pages页面。

搭建完成后,你的博客项目就会变成一个静态页面,你可以通过 你的github用户名.github.io 来访问你的博客页面。

搭建自己的博客

搭建自己的博客需要先搭建一个博客项目,博客项目可以使用vuepress、hexo、hugo等搭建。

搭建vuepress博客项目

  1. 安装nodejs

  2. 安装vuepress

  3. 新建一个博客项目

  4. 编写博客

  5. 发布博客

搭建hexo博客项目

  1. 安装nodejs

  2. 安装hexo

  3. 新建一个博客项目

  4. 编写博客

  5. 发布博客

搭建hugo博客项目

  1. 安装hugo

  2. 新建一个博客项目

  3. 编写博客

  4. 发布博客

fastgithub

fastgithub是一个可以加速github的工具,它可以将github的仓库clone到本地,然后将本地的仓库push到github中,这样可以加速github的clone和push速度。

fastgithub的使用方法:

  1. 在本地安装fastgithub

  2. 在fastgithub中配置github仓库

  3. 在本地clone github仓库

  4. 在本地修改github仓库

  5. 在本地push github仓库

fastgithub的优势:

  1. 加速github的clone速度

  2. 加速github的push速度

  3. 免费

fastgithub的劣势:

fastgithub

08 七月 2025