在GitHub Pages上使用WordPress靜態網頁

撰寫程式時，經常在網路上查詢 ~~(複製)~~ 程式，感謝願意在網路上分享的前輩們。也常想著哪天，也能放放自己的爛程式，不僅可以備忘一下，也能供人參考 ~~供未來的自己複製~~ 。

雖然說，有想做這件事情，不過也想 n 年了 ~~懶人一枚~~，大概去年時，有一些空閒開始慢慢著手找尋資料。

對一些現成的部落格網站，進行了研究或嘗試，功能感覺有點陽春且能自訂的項目不多，或是需要撰寫程式來實現，要做到我想要的感覺，工量感覺也有點多。

若是要完全自己來，還需要找伺服器管理後台等等，暫時還不想搞得這麼龐大。

在搜尋資料的過程中，發現在 Github 上有 Github Pages ( github.io ) ，可以做為搭建網站的平台，可以用 Markdown 、 HTML 或其他格式。另外，也了解到 WordPress 是一個備受歡迎的自架網站平台。因此，現階段最後決定使用 WordPress 加上 Github Pages 來建立 Blog。

本篇文章，放上自己建立的過程步驟。

使用到的軟體、網站如下：

GitHub 網站
GitHub Desktop
XAMPP
WordPress
網頁瀏覽器

GitHub Pages 建立與設定

以下步驟為假設已經有 Github 網站的帳號並且登入後，可開始進行，

1-1.選擇習慣的方式，建立新的 Repository ，這邊登入後於網頁左側建立

1-2.點擊開始建立後，首先輸入 Repository name ，這邊輸入「帳號名稱.github.io」。再來視個人需求勾選 Add a README file ，建議可勾選，這樣在還沒 push 與部署其他東西前，進入主站會顯示 README 的內容。最後點選 “Create Repository” 建立。

補充， Repository name 也能輸入其他名稱，差別在於建立出來的網站，網址會有些差異。在 GitHub 上創建一個名為「帳號名稱.github.io」的 Repository 時，沒有特別設定的情況下，前面加上「https://」就會是您的主站點。若是其他名稱，主站點則會是「https://帳號名稱.github.io/Repository name」 ~~( 應該吧 )~~

1-3.建立完成後，會長得像這樣

1-4.建立名為「gh-pages」的分支，點選main分支標籤，輸入「gh-pages」後，按下下方的 “Create branch gh-pages from main”

1-5. gh-pages 分支建立完後的樣子

1-6.點選上方標籤列的Settings標籤，進入 Repository 的設定頁面，在 Default branch 區塊中來切換預設的分支

1-7.預設的分支，從原本的 main 改為剛建立的 gh-pages 分支後，按下 “Update”

1-8.按下 “I understand”

1-9.選擇左邊選單中的 Pages 頁籤，找到 Build and deployment 中的 Branch 項目，點選 main 分支

1-10.從 main 分支改為 gh-pages 分支，並且按下 “Save”

到上面步驟，基本上已經設定完畢，
以下為額外的設置，可以忽略，
此設置為讓 github 顯示出網站的連結，
避免自行所想的網址，與實際的網址有出入的情況 ~~絕對不是懶得記網址~~ ，

額外1-1. 首先在 Repository 的 Code 頁籤中，點選 About 右邊的設定圖示按鈕

額外1-2. 會出現下面的小視窗，可以看到有一個 Website 的欄位

額外1-3. 勾選該欄位下方的 “Use your GitHub Pages website” 選項後， Website 的欄位便會自動產生並填入主站點的網址，最後按下 “Save changes”

額外1-4. 儲存成功後，右邊的 About 便會顯示主站點的超連結，點進去後就能看到所建立的網站

WordPress 建立與設定

接下來目標是，在本機電腦上建立環境，安裝並使用 WordPress

2-1. 依照電腦系統與喜好下載 XAMPP 軟體，這邊下載 Windows x64 免安裝版本

2-2. 下載 WordPress ，這邊下載的檔案為 zip 壓縮檔

2-3. 將 XAMPP 解壓縮

2-4. 執行 “setup_xampp” 批次檔

2-5. 依照指示並等待批次檔執行完成

2-6. 在 XAMPP 中尋找 “htdocs” 的資料夾。進入 “htdocs” 資料夾中，建立一個資料夾，這邊我建立了一個 cornerchat543 的資料夾，再來把前面步驟中下載的 WordPress 壓縮檔，解壓縮到該資料夾中

2-7. 回到XAMPP資料夾中，點選 “xampp-control” 來啟動程式。程式啟動後點選 “Apache” 和 “MySQL” 右邊的 Start 按鈕。若出現防火牆的訊息，則按下允許。

2-8. 皆正常運作的話，畫面會與下面相同

2-9. 開啟網頁瀏覽器程式，輸入「 http://localhost/phpmyadmin/ 」來進入 MySQL 數據庫的網頁介面

2-10. 建立新的資料庫，點選左邊選單中的”新增”，在中間輸入欲新增的資料庫名稱，輸入完畢後按下右邊的”建立”按鈕

2-11. 新增成功的話，可從左邊選單中，看到該資料庫在列表中。接著安裝 WordPress ，在瀏覽器中輸入「 http://localhost/{資料夾名稱}/ 」，資料夾名稱為步驟2-6，也就是在 htdocs 資料夾中，自行建立的資料夾名稱

2-12. 進入後便可看到此畫面，點選下方”開始安裝”

2-13. 接著輸入步驟2-10所建立的資料庫名稱，以及資料庫預設的帳號 root 與空密碼(不用輸入)，完成後按下”傳送”

2-14. 按下”執行安裝程式”

2-15. 根據表單填入對應的資訊，使用者名稱與密碼是未來要進入後台管理時需要的。填寫完畢後按下 “安裝WordPress”

2-16. 等待之後，安裝完成畫面如下圖，再來便可點選”登入”

2-17. 輸入步驟2-15所輸入的使用者與密碼來進行登入

2-18. 登入成功後，便會進入到網站的控制台管理畫面。未來要直接進入控制台，則在瀏覽器輸入「 http://localhost/{資料夾名稱}/wp-admin/ 」，資料夾名稱為建立於 htdocs 下的。

2-19. 若要前往前台網站，點選控制台左上角的房子 icon 即可

2-20. 進入到前台，目前為預設的佈景主題與內容。若要回到控制台頁面，則點選左上角的速度表 icon

2-21. 若要變更預設的佈景主題，則在左方點選”外觀” > “佈景主題”，可以選擇或安裝新的主題。未來本網站會使用 Blocksy 主題

部屬靜態網站到 Github

Github 倉儲和 WordPress 網站建立好之後，再來要將網站部署到 Github 上，因 Github pages 需使用靜態網站，因此接下來會將網站轉為靜態網站，然後進行部署

3-1. 首先將先前所建好的 Repository Clone 到本機端吧。選擇自己習慣的 Github 工具，這邊用的是 Github Desktop

3-2. 選擇要 Clone 使用的 Repository ，再來設定要存放在本機的路徑後，按下 “Clone”

3-3. 接下來安裝產生靜態網站的外掛，回到控制台頁面，在左側選單中點選”外掛” > “已安裝外掛”，在點選上方的”安裝外掛”，或是左側選單直接點選”外掛” > “安裝外掛”

3-4. 在安裝外掛的頁面，到右邊搜尋欄中輸入 “Simply Static” ，並且在下方找到該外掛後，進行安裝與啟用

3-5. Simply Static 外掛啟用後，可看到左側選單中，出現了 Simply Static 的選項

3-6. 產生靜態網站前，要做些設定，點選左側 “Simply Static” 後，尋找並點選 “General” ，右側的 REPLACING URLS 選項選擇 “Absolute URLs” ，並在下方 SCHEME 選擇 “ https:// ” ， HOST 則填入去除 https:// 後，自己的 github pages 網址，完成後到網頁底端按下 “Save Settings”

3-7. 在 Simply Static 頁面中，尋找並點選 “Deploy”，將右邊的 DEPLOYMENT METHOD 選擇 “Local Directory” ，接著在 Local Directory 區塊中的 PATH 欄位裡，填入步驟3-2， Clone 下來的 Repository 本機路徑，完成後到網頁底端按下 “Save Settings”