使用 github pages快速部署自己的靜態網頁

看見很多大神在Github Pages上部署Demo，感覺效果還不錯，剛才自己也試了一下，發現其實並不難！

選擇 github pages 的理由

1. 使用零成本: github pages 集成在 github 中, 直接和代碼管理綁定在一起, 隨着代碼更新自動重新部署, 使用非常方便.
2. 免費: 免費提供 http://username.github.io 的域名, 免費的靜態網站服務器.
3. 無數量限制: github pages 沒有使用的數量限制, 每一個 github repository 都可以部署為一個靜態網站.

首先我們介紹一下部署最基礎的靜態網頁, 最終的效果是展示出一個 Hello, github pages :) 頁面.

一、新建一個github項目

前往 github 官網, 點擊 New repository 創建新項目. 填入項目基本信息, 點擊 Create Repository 確認.

確認完成后會看到如下頁面:

 2 為 repository 開啟 github page 選項

如圖, 我們選中 Setting tab

往下滾動, 找到 Github Pages 選項, 將 Source 改為 master branch, 最后點擊 Save 按鈕

如果為 master branch顯示為灰色而無法點擊，你需要先給該倉庫隨便添加一個文件

最后我們會得到一個鏈接, 通過這個鏈接, 待會我們就能通過這個鏈接訪問到該項目的 github pages 頁面.

3 代碼 clone 到本地, 並創建幾個基本文件

再將自己的代碼寫好

4 將代碼更新到 github 倉庫

cd github-pages-demo
git add .
git commit -m "Add simple code"
git push

5. 查看效果

Demo地址：https://ssthouse.github.io/github-pages-demo/

 現在貌似有點區別，需要進入 /main.html（假設主頁是main.html）

續：知道了，默認的主界面是 index.html

 

 

其他的：

添加自己的域名

我用的阿里雲的域名服務，按如下格式添加：

 保存后如下：

這里綁定的二級域名 rank.rogn.top，如果你想綁定到一級域名，將主機記錄處留空即可（注意，可能會與已有的沖突，需要先刪除）

然后在github倉庫的 Settings 找到 Custom  domain，填入你的域名（如  rank.rogn.top）；

你會發現在該倉庫下生成了一個 CNAME 文件，里面就是你剛才保存的域名；

等幾秒就能通過你的這個域名訪問了。

 

 

參考鏈接：

1. 快速搭建靜態網頁 https://zhuanlan.zhihu.com/p/38480155

2. 添加域名解析 https://www.jianshu.com/p/93c939fc939a