如果你希望把你的前端項目、demo 快速展示給別人，你又沒有搭建一個屬于自己的個人網站，github pages 能夠快速的幫到你。只需要以下簡單的步驟，就可以讓其他人訪問到你的前端頁面。
1
在 github 上創建一個項目
在 github 首頁點擊按鈕 「New」，即可進入到如下頁面，填寫相關的信息，然后點擊最后的「Create repository」 按鈕，即可創建一個項目。
2
設置站點首頁
創建好之后，項目如下
點擊 「Settings」 ，進入到設置頁面。
找到設置頁面中，左側導航欄中的「Pages」。
點擊該鏈接，進入到 pages 的設置頁面。
該頁面有兩個設置項。一個是 Source，表示代碼源。另一個是 Theme Chooser，表示選擇主題。
設置了 Source 之后，屬于該項目的站點就會激活，可以通過該設置來指定項目的首頁。
第一個按鈕可以選擇指定的分支，此時我們選擇 main 主分支。
由于某些種族歧視問題，現在 github 上所有的項目，主分支已經從 master 改成了 main
第二個按鈕可以選擇指定的文件，此處提供了兩個選項，root 根目錄與 docs 目錄。
對于簡單的項目，我們可以將項目首頁 index.html 放在根目錄中，如果根目錄中沒有 index.html，此處會將 README.md 解析為首頁。
對于 React/vue 項目來說，我們可以將 index.html 以及其他代碼打包到 docs 目錄中。
此處我們選擇 man -> /(root)，項目中只有一個 README.md，那么此文件會被解析為首頁，保存一下，試試看
保存之后，改項目的鏈接地址會根據項目自動生成，并在 pages 設置頁顯示出來。該地址不會馬上就可以生效，要稍微等一會兒。
成功訪問，搞定！
此時我們發現頁面非常簡單，因此為了頁面看上去稍微豐富一點，我們可以選擇一個主題。
點擊「Choose a theme」 按鈕，進入到主題選擇頁面。每一個主題都有預覽效果，選擇一個你喜歡的主題，點擊「Select theme」按鈕。
想要讓主題生效，就會改變我們的項目代碼。
因此當我們選擇一個主題時，代碼會發現改變，此時我們應該往項目中提交主題對應的代碼，所以當點擊了「Select theme」按鈕之后，會進入到一個代碼的提交頁面
填寫本次提交的備注，然后點擊按鈕「Commit changes」即可。
提交之后，README.md 文件被修改，并且多了一個主題相關的配置文件
點擊剛才的博客地址，觀察一下生效之后的頁面效果。
3
編寫網頁代碼
通常情況下，我們并不需要選擇默認的主題，而是自己編寫代碼。例如，我們再項目中添加一個簡單的 html 文件作為演示。
你可以通過在線的方式添加文件
也可以將代碼通過 git clone 指令將代碼拉取下來，在本地編輯好之后，再通過其他的 git 指令提交代碼，這需要對 git 有一定程度的熟悉。
我的步驟如下：
a. 拉取代碼到本地文件
git clone git@github.com:yangbo5207/bo.git
// 進入到項目目錄
cd bo
b. 使用 vs code 等代碼編輯器添加 index.html，隨便添加一點內容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>github pages 演示代碼</title>
</head>
<body>
<h1>Github pages</h1>
<div>hello world!</div>
</body>
</html>
然后刪掉剛才我們添加的主題相關的文件與內容。
c. 執行如下指令將代碼提交到遠程倉庫
// 添加到暫存區
git add .
// 提交到本地倉庫
git commit -m '自己添加文件'
// 同步遠程提交
git pull
// 推送到遠程倉庫
git push origin main
隨后項目文件變成了這樣，如圖
此時可能會因為構建方式的修改導致頁面長時間訪問不到，所以稍微等待一下即可。重新刷新訪問剛才的頁面，發現我的代碼已經生效。
該 demo 項目訪問地址為：https://yangbo5207.github.io/bo/
