從零開始架–Github Pages個人網頁

介紹：

只要有Github帳號，人人都可以免費透過Github Pages功能架設專屬於你的靜態個人網頁，用來展示你的特色、專長、興趣以及愛好！

使用工具：

1. Visual Studio Code(用來編輯網頁內容)

2. 網頁模板(可自製，也可使用現成模板，例如：HTML5UP等…)

3. Github(用來部署個人網頁)

第一步驟：下載模板，這裡用HTML5UP來作範例：

到HTML5UP中選自己喜歡的模板，可以點"Live Demo"來觀看樣板，選好後點選"Free Download"即可下載，下載後解壓縮會出現類似下圖的檔案：

我們需要修改的只有"index.html"檔案(注意！這個檔案名稱不可以更改)，現在我們先打開VSCode，按快捷鍵(ctrl+k+o)開啟檔案所在的資料夾，開啟後從左方欄位中選取"index.html"檔案後就可以編輯了，我推薦安裝一個名為LiveServer的插件

安裝完成後回到編輯程式碼的頁面，點擊畫面右下角的Go Live

就可以一邊編輯一邊透過網頁實時查看編輯現況。

如果需要的話 也可以參考我的網頁Repo：Makino-Shiro

第二步驟，上傳至Github Pages：

開啟Github(沒有帳號請先註冊)，點擊右上角頭像，選取"Your Repositories"後點擊畫面中的，進入下圖這畫面：

幫你的專案命名，命名有規則{username.github.io}，例如我的帳號名稱是Makino-Shiro，我的專案名稱就必須命名為"Makino-Shiro.github.io"(這也會是完成後你的網址)，並注意要選取Public選項，完成後點擊"Create repository"。

接下來你會看到這個畫面：

點擊後上傳剛剛編輯完成的模板的檔案：

完成後點擊Commit Changes後應該會長這樣

如此便大功告成了，Github Pages會自動幫你部署(會需要一點時間)

如果你不想用{.github.io}的網址格式，可以購買網域(例如向CloudFlare購買)後，綁定DNS便可用你的網域訪問網站了，例如我的網址是{Makino-Shiro.github.io}，也可以用{zergling73.com}來訪問我的網頁！

有任何問題也歡迎聯繫我！