[GitHub] 跟我一塊兒白嫖 GitHub Pages 作我的站點 ?

What`s The GitHub Pages ？

Websites for you and your projects. Hosted directly from your GitHub repository. Just edit, push, and your changes are live.

簡單的說，就是提供了用 GitHub 的倉庫作站點的一種方式，咱們無需本身提供服務器。

而咱們用 GitHub Pages 就是想白嫖啦，藉助它提供的直接訪問靜態資源的能力，

咱們可經過 GitHub Pages 功能去託管：

我的博客，

項目說明，

XX產品說明書等等

如何使用 GitHub Pages

首先你要建立本身的 GitHub 帳號，點擊註冊

關於 Git 命令的使用，能夠參考這篇文章進行學習

建立倉庫

在 GitHub 建立一個名爲 username.github.io 的新倉庫，其中username是你在GitHub上的用戶名（或組織名稱）。 若是倉庫的第一部分與你的用戶名不徹底匹配，則它將沒法正常工做，所以請確保正確輸入。

請注意我這裏的倉庫名，和個人用戶名

初始化倉庫

向倉庫添加我們的靜態資源。

# git 命令行，克隆到本地，注意使用你本身的地址哦！！！
git clone https://github.com/username/username.github.io.git
# 進入文件夾
cd username.github.io
# 製做頁面，注意名稱要是index.html
echo "Hello World" > index.html
# 添加到暫存區
git add --all
# commit 
git commit -m "Initial commit"
# push 到遠程
git push -u origin master
複製代碼

訪問站點

而後咱們能夠在瀏覽器輸入倉庫名稱便可訪問了，默認會訪問到我們的 index.html

到這裏，我們已經把 GitHub Pages 用起來了，後面具體往站點上放什麼資源，就能夠自由 DIY 啦。

不少同窗都會用 username.github.io 這個根站點維護我的博客，你也能夠的。

---

乾貨贈送：GitHub Pages 其實不止這麼多

可能通常人介紹 GitHub Pages 介紹到這就已經結束了，完結撒花~

GitHub Pages 就只能用 username.github.io 這一個站點 ？

No！

你沒聽錯，你還能使用二級目錄訪問，建立不少倉庫，每一個倉庫均可以作站點。

訪問方式 username.github.io/repositoryName

我這裏有用 vue 作了個簡易的在線播放器，能夠去訪問體驗一下，若是你喜歡直接拿走吧。。。暫時咱不討論這個播放器怎麼實現的，感興趣的話留言交流

項目地址：

yuansaysay.github.io/vueMusicPla…

代碼地址：

源代碼地址

二級站點搞起來

簡單說下怎麼玩起來，

• 建立倉庫，和上面同樣的方式
• 初始化倉庫，添加你須要的靜態資源，好比我上面的音樂播放器代碼

若是這時候你直接訪問會是這個結果，由於咱們還要把倉庫的 Github Pages 功能開啓。

須要啓用倉庫的 GitHub Pages 功能：找到setting，往下拉找到GitHub Pages，如圖設置就OK !

而後就能夠以複製的方式，作出各類各樣的站點啦！

---

但願對你有幫助，有疑問能夠留言交流。

開啓你的 GitHub Pages 使用之旅吧！