【github.io静态网页 怎么使用 github.io 搭建一个简单的网页?】
这里是一张展示 GitHub Pages 静态网站架构与部署流程的示意图,可以帮助你更直观理解整个流程。
要使用 github.io
(GitHub Pages)搭建一个简单的网页,你可以按照以下步骤操作:
快速入门:个人网站(User/Organization Site)
这是最简单的方式,适合你快速上线一个静态网页。
-
创建 GitHub 仓库
登录 GitHub 后,点击右上角 “+” → “新建仓库”(New repository),仓库名称设为username.github.io
,其中username
是你的 GitHub 用户名(需全小写)(GitHub Docs, GitHub Pages)。 -
初始化仓库
可以勾选 “使用 README 初始化此存储库”(Initialize with README)(GitHub Docs)。 -
添加网页内容
-
在仓库根目录新增一个
index.html
文件,或index.md
(Markdown)也可以(GitHub Docs, GitHub Pages)。 -
内容可以是简单的 HTML 或 Markdown,比如:
<h1>Hello, GitHub Pages!</h1>
-
or 使用 Markdown:
# Hello, GitHub Pages!
-
-
设置 Pages 发布来源
进入仓库的 Settings → “Pages” 部分,在 “生成和部署” 的 “源” 选项中选择main
分支并保存(GitHub Docs)。 -
访问网站
等待几分钟后,即可访问你的站点:http://username.github.io (GitHub Docs, GitHub Pages)。
可选:使用 Jekyll 主题美化页面
如果你想要页面更美观,可以使用内置的 Jekyll 主题:
-
在 Settings → Pages → “主题选择”(Theme chooser)中选择一个主题后提交即可使用(GitHub Pages)。
-
想自定义网站标题、描述等内容,可在
_config.yml
中添加或修改:theme: jekyll-theme-minimal title: 我的个人主页 description: 欢迎访问我的网站!
(GitHub Docs)
项目站点(Project Site)— 如仓库名不是 username.github.io
如果你希望为其他项目创建独立页面:
-
可在任意公开仓库里添加
index.html
,然后到 Settings → Pages → 设置来源(如main
或gh-pages
分支),成功部署后访问地址为:https://username.github.io/repository/
(GitHub Docs, 维基百科)。
小贴士
- GitHub Pages 只支持静态内容(HTML、CSS、JavaScript 或 Markdown)(Reddit)。
- 如果希望绑定自定义域名,可在仓库根目录添加
CNAME
文件,并在域名服务商处配置 DNS 指向 GitHub Pages(Stack Overflow)。 - 每次提交可能需要几分钟才会生效,等待一下再刷新页面即可(GitHub Docs)。
总之,要建一个简单网页并发布上 GitHub 页面,大致就是以上几步:创建仓库 → 添加 index.html
→ 设置 Pages → 等待部署 → 浏览访问。如果你对 Jekyll 或自定义域名感兴趣,我也可以进一步帮你细化设置,随时告诉我~
进一步阅读
https://heardlibrary.github.io/digital-scholarship/manage/control/github/pages/