掘金文章归档 · 第 26 篇 Git / 工程化 系列 5/8 GitHub Pages

GitHub.io(Pages)来搭建自己的网站

免费的静态网站托管:博客、项目文档一键发布

原文作者:随意_(掘金) | juejin.cn/post/7188052425537191991 | 发布于 2023-01-13 | 阅读 1,310 · 约 1 分钟

0什么是 GitHub.io,它能干什么

GitHub.io 就是 GitHub Pages,是可以展示你的项目及项目网站的托管工具,可以理解为免费的"阿里云"等服务器,可以展示网站(比如你想搭建一个自己的博客、项目文档等)。

能力说明
免费托管无需购买服务器,GitHub 免费提供静态站点托管
域名默认域名 username.github.io
适用内容个人博客、项目文档、打包后的静态站点等

1如何使用 GitHub.io

  1. 注册账号:首先需要有一个 GitHub 账号,没有的话可以去注册;
  2. 登录 GitHub:登录后进入主页面;
  3. 创建项目:在主页找到 Your repositories,新建仓库;
  4. 命名仓库:仓库名称必须是 username.github.io,用户名跟 Owner 的名称需要保持一致,注意英文大小写,均小写即可;
  5. 克隆到本地:进入项目,将项目 clone 到本地:git clone 项目地址
  6. 添加二级文件夹:clone 到本地后,在项目中添加二级文件夹(英文名称),作者添加的是 hongluan-ui 文件夹;
  7. 添加静态文件:hongluan-ui 文件夹中增加 index.html 静态文件(可以引入 css img 等),可以是打包后的项目,作者放的是打包后的文档;
  8. push 代码:git 提交流程省略,不会的自己查资料;
  9. 访问站点:一段时间后浏览器输入 username.github.io 查看项目,username 是 GitHub 登录名。作者的访问地址是 13552569078.github.io/hongluan-ui
GitHub Pages 访问效果截图占位:浏览器输入 username.github.io 查看部署完成的网站
✅ 总结:GitHub Pages 是免费的静态网站托管服务,创建 username.github.io 仓库 → clone → 添加静态文件 → push,即可通过公网地址访问自己的网站。