不會寫程式，也能自己架一個免費網站：Publii + GitHub Pages

有時候，我們只是想要有一個簡單的網站，而且免費 XD~

現在人們離不開網路了，在以前沒學前端時，甚至是開始學習後，都覺得「架站」這件事很困難。

畢竟，除了需要一個能看的前台頁面，還會需有一個可以用編輯器維護頁面的後台。

以前，如果遇到要架站的需求，都會直接考慮 WordPress，但這就牽涉到要有一台主機、資料庫、網域 bla bla bla…

最近 August 看到了一篇：CMS Critic Awards 2019 Winners，裡面推薦了一個介面很簡單的架站工具－－Publii，試用了一下，發現他可以跟免費的 GitHub Pages 結合耶！而且還能有一個後台來維護頁面！心動了一下，就決定寫這篇。

寫這篇不是要搶工程師的飯碗，August 自己也是位前端啊。

寫這篇，主要是寫給不會寫程式，但又想要有一個自己的網站。
或是自己就是工程師，但想有個地方可以像本站一樣寫些學習的筆記、擺擺作品集，而又不用去依賴很多廣告不然就要收你錢的部落格之類的。

對，看完本篇，確實就可以有一個看上去還順眼的站，也可以開始有個後台來寫寫文章，這一切在一個額度內還是免費的。啊對，一定額度這部份不用擔心，如果你的流量（每個月 100GB）跟頁面數（共限 1000 頁）可以超過，代表你的站很知名了，放個廣告也能有收入，到時再花一筆小錢請人來架個更複雜的站就行。

不過要注意的是，用 Publii 可以架出來的站，風格很簡潔，目前官網上提供的版型也不多。如果想要客製一些功能，像是金流、動態效果等，是很難的，除非自己會寫一點程式，不然大部份就是依賴 Publii 提供的後台，來做頁面的維護。幸運的是，Publii 的後台，很多部份都開放讓使用者來改，裡面可修改的選項之多，如果要專心設定，大概也要一個工作天。

總之，如果今天你完全是個新手，沒寫過程式，但又想要有自己的一個站，那在經歷一次關於註冊及建立 GitHub 專案那段的陣痛後，未來就可以直接用 Publii 來管理，不用再理會看不懂的 GitHub。

如果你是位前端還用過 GitHub，恭禧你，其實你不用看這篇，或是跳著看就行，因為 Publii 的說明文件寫的很清楚了，本篇就是實作一次，然後用中文說明。你甚至可以選擇不用 GitHub 而改用 AWS、GCP、FTP 等，但在你關掉視窗之前，可以再考慮一下，看是不是幫本篇點個讚衝點人氣（咦？）。

---

步驟1：下載、安裝 Publii

首先，進到 Publii 的官網：

https://getpublii.com/

首頁是 Publii 的介紹，像是他們的佈景、可以接的伺服器服務、編輯器的概覽…等，要下載 Publii，就點右上角的 Download，會進到它們的下載頁面：

選擇自己電腦的作業系統，像 August 是用 Mac，所以就點 Publii.dmg，Windows 的朋友就點 Publii.exe。

下載完後，點開下載的檔案，Mac 的話就是直接把 Publii 拖到應用程式的資料夾裡，Windows 的應該就是一直按下一步，然後完成安裝。

---

步驟2：Publii 基本設定

安裝完成，點開 Publii，會看見 Create new website 的介面，請你填寫網站的基本資訊：

選擇想要的 icon，Website name 填你這個網站的名字，Author name 填作者的名字，因為 Publii 主要是部落格的架構，所以每篇文章都會有個作者，Author name 就是會顯示在作者的欄位上。

填寫完後按下 Create website，基本上網站的檔案就建立好了，如果有主機空間的朋友，到這一步就可以直接用 FTP 上傳整個資料夾，然後你的網站就生成了，是不是很方便~~~

好，但如果要像本篇一樣是用免費的，就請繼續看下去。

按下 Create website 後，讓它轉一下圈圈，接著就會看到你這個站的使用介面：

修改檔案存放位置

一看到介面，不用急著按左邊那排選單，我們先來設定一些全局設置，設定完後再來看其它。

點右上角有三個點的按鈕，會展開全局設置的選單：

先點第一個 Global settings，會看見一些通用的設定，如果都看不懂也沒關係，那就都不用改維持預設，這邊建議要改的，是下面那個「Files location」，可以更改所有檔案存放的位置。

設定完後按下 Save Settings 就可以了。

theme 佈景

再點右上角那三個點的按鈕，接著點選 Themes，會看到你的網站上有安裝了哪些佈景：

目前 August 安裝的 Publii 這一版，預設的佈景是「Simple」，如果想要安裝其它佈景，可以點選 Get more themes，就會進到官網的佈景頁面。

官網提供的佈景，有些是要付費的，這邊整理上面沒標示金額的幾個佈景：

• Technews
• QF Fashion
• Portfolio
• Mercury
• Tattoo
• Taste
• Square

安裝新佈景

這邊實作一次安裝新佈景。

假設今天想安裝 Technews 這個佈景，就進到 Technews 的頁面，按下 Download：

接著你會下載到一個 zip 壓縮檔，有了壓縮檔後，接下來就是把壓縮檔拖曳到 Publii 上：

嗯，對，這樣就新增一個新佈景了。

切換佈景

安裝了新佈景後，要怎麼讓你的網站使用這個佈景呢？

首先，我們 Publii 還在佈景頁上，按一下右上角的「Select a website」，然後選擇你的網站：

回到 Publii 的主介面後，左邊那一排選單主要是控制你選擇的這個網站，雖然我們要改的是選用的佈景，但不是選「Theme」，要選「Settings」，選擇以後，右邊的區塊會呈現網站的設定。接著點 Current theme 那一排的「Select theme」，就會看見剛安裝的佈景：

選完佈景後再按下「Save Settings」，如果想即時看到改變就按「Save & Preview」，以上，你的網站就成功的使用新佈景了。

August 的建議是，先挑好要用的佈景，再來改其他的設定，因為每個佈景可能會有自己的設定要調，如果佈景沒先選好就調，會遇到改了佈景後，又要再重新設定一次的狀況。

---

步驟3：建立 GitHub 帳號，取得 token

在開始寫怎麼取得 GitHub 的資訊前，先來看一下要讓 Publii 跟 GitHub 接通，需要哪些資料？

左邊選單選擇「Server」，會看見 Publii 可以接通的主機，接著選「GitHub Pages」：

接著就會看到需要填寫的欄位：

像上面的圖說明的：

• Domain 的「http://」改成「https://」
• Protocol 不變
• Branch 填「master」
• Parallel uploads 建議不變，因為社群上有人寫說 同步遇到錯誤 的狀況，後來把 Parallel uploads 改成 1 就解決了，所以建議是維持預設值「1」。

這些可以先改的改完後，我們需要從 GitHub 拿到的資料就剩 4 個欄位：

• Domain
• Username / Organization
• Repository
• Token

接下來我們就一步一步拿到這 4 個欄位。

---

Username / Organization

先進到 GitHub 的首頁：https://github.com/

如果你已經有 GitHub 的帳號，那點「Sign in」直接登入。如果沒有，那就點「Sign up」註冊一個新帳號：

如果你已有帳號並登入了，登入了以後點選右上角你的大頭照，會看到出現的選單第一行就是「Signed in as XXXX」，那個加了粗體的 XXXX 就是你的 Username：

如果你沒有 GitHub 帳號，以下是註冊新帳號的流程。

點擊「Sign up」，進到填資料頁：

第一欄要填的「Username」，就是之後要填在 Publii 的 Uername。

第二欄的 Email address 就填註冊的 email。

第三欄的 Password 就填上登入時的密碼。

Email preferences 看要不要勾，勾的話就會收到 GitHub 的電子報。

現在很有趣的是，在驗證的部份還要解開謎題，August 遇到的是讓一個娃娃轉到正確的方向。

都填寫完了以後，就按下「Next: Select a plan」。

選擇方案的部份，選擇 Free 的就行，因為接 Publii 的專案都要是公開，所以選擇 Free 或 Pro 的差別並不大：

選完 Free 後，會進到一個像是數據收集的頁面，填或不填都行，想填的話，填完後點「Complete setup」，不想填的話頁面滑到最下面點「Skip this step」。

按下了以後，就會看到要驗證 email 的訊息：

信箱裡面也會收到要求驗證的信：

點選驗證信裡的「Verify email address」，會要求輸入帳號（username）、密碼登入，登入完後就會收到驗證成功的信了：

註冊這步做完，我們就拿到我們的 Username，也有我們自己的 GitHub。

這步完成，目前我們有的資訊是以下：

• Domain
• Username / Organization：登入的帳號
• Repository
• Token

---

Repository

Repository 就是專案名稱，GitHub 上，你存的東西都是一個專案、一個專案來分，專案可以想像成是你電腦裡的一個個資料夾。

為了讓 Publii 可以接到 GitHub Page，我們接下來就要開一個新的專案來接。

登入 GitHub後，右上角顯示你大頭照的地方，他的左邊有一個「+」，點了以後會展開子選單，點擊「New repository」：

進到新增專案的頁面，只有一項是必填項目「Repository name」（專案名稱），這邊只能填英文，如果填了中文，會變成「-」。

Public、Private 的部份，一定要選擇 Public，原因是 Free 方案的 GitHub 帳號，禁止建立 Private 的頁面。Public 指的就是你的程式碼大家都看得到，既然你要創的網站就是要給別人看的，那這邊選 Public 也無妨。

所以先在這邊說一下，參考這篇建立出自己的網站，請不要寫上有私密訊息的文章，因為你傳到 GitHub 後連外星人都看得到。

最後就可以按下「Create repository」來建立專案。

經過了這步，我們就有了 Repository 要填的值了，就是你設定的專案名稱。

所以我們目前有的資訊是以下：

• Domain
• Username / Organization：登入的帳號
• Repository：專案名稱
• Token

---

Domain

有了 Username 跟 Repository 後，其實 Domain 就有了。

Domain 要填的規則是這樣：

Username.github.io/Repository

Username 就是你的登入帳號。

Repository 就是我們上一步所填的專案名稱。

所以我們目前有的資料有3項了：

• Domain：登入的帳號.github.io/專案名稱
• Username / Organization：登入的帳號
• Repository：專案名稱
• Token

---

建立 GitHub Page

在拿 token 前，還有一個步驟要做，就是確認 GitHub Page 被建立了。

首先進到你的專案頁面，畫面會是這樣：

接著點選上圖標示的「README」，會進到填 README 的頁面。README 通常是拿來寫使用說明、補充說明之類的，但 Publii 的說明文件上說，這邊建立的 README 會在接上 Publii 後就被刪掉，所以我們就直接滑到最下面，點「Commit new file」就好：

點完後，會回到我們的專案頁面，就會看見多了一個 README.md，但它會不見，所以不用理它。我們就點選上面一排選單最右邊的「Settings」：

Settings 的頁面很長，我們需要看的只有一個部份：GitHub Pages

Settings 頁面一路往下滑，滑到看到「GitHub Pages」這個標題：

點擊上張圖標示的「None」，會出現「Select source」（選擇來源）的子選單，點擊「master branch」就行了：

點完後頁面會自動重新整理一次，如果再滑到 GitHub Pages 那一塊，就會看到原本的 None 改成 master branch，而且網址的部份也強制是 https：

這一步就到這結束，最後就是要取得 token 了~

---

Token

Token 是一個令牌，就很像今天你是一家公司的員工，要進辦公室前要先刷個識別證一樣，那個識別證就是 token，Publii 有了這個 token，GitHub 看到了才會讓它更新專案裡的檔案。

首先，按下 GitHub 右上角你的大頭照，出現的子選單選「Settings」：

頁面進到 Settings，會看見左邊有一排「Personal settings」的選單，選擇「Developer settings」：

接著進到 Developer settings，左邊一樣有一排選單，選擇「Personal access tokens」，會看見右邊的內容變成 Personal access tokens 的說明：

然後點選右上角的「Generate new token」，會進到 New personal access token 頁面：

「note」的欄位必填，這是給你自己看的，以後回頭來看時才會知道這個 token 是給誰用，建議就直接填「Publii」。

「repo」要打勾，讓 Publii 有權限可以管理專案。

note 填完、repo 打勾後，就滑到最下面點擊「Generate token」。

點擊完後，頁面就會出現你的 token，同時也會收到一封通知信說你新增了一個 token：

token 不能外流，因為別人有 token，就等於有了你的識別證，可以隨意進入你的專案了。

按一下上圖紅框標示那個記事板造型圖示，就會複製 token，可以在 Publii 的 Token 欄位中貼上。

---

步驟4：填上取得的 4 個值到 Publii，然後同步

經過了步驟 3，我們取得了必填的 4 個值，還開通了 GitHub Pages 的功能，檢視一下取得的 4 個值如下：

• Domain：登入的帳號.github.io/專案名稱
• Username / Organization：登入的帳號
• Repository：專案名稱
• Token：從 GitHub Personal access tokens 取得的 token

我們開啟 Publii，依序填上：

看到欄位都被填上，是不是眼淚都要掉下來了？

接下來就是按下「Save Settings」了。

成功的話，就會看見 Publii 秀出一行訊息：

接著，整個 Publii 的使用介面，原本左下角的按鈕就會變成「Sync your website」：

勇敢的按下去，會再出現一個確認視窗：

那個黃底的警告是說，GitHub 上的檔案，如果你的電腦裡也有的話，你電腦裡的檔案會覆蓋掉 GitHub 上的。

再勇敢的按下「Sync your website」，你電腦裡的檔案，就會開始同步到 GitHub 上。

同步完成！黃底的那個警告是說，你這次同步上 GitHub 的檔案，會沒這麼快就顯示在頁面中，可能要等幾分鐘讓 GitHub 完成布署的動作。

按下「Visit your website」，就會直接開啟你的網站了。

網站上一開始什麼都沒有很正常，等你陸續在 Publii 上寫幾篇文章、左邊那排選單都設定過一輪後，網站就會豐富了。

August 照這流程建立出來的網站在這邊：

https://letswritetw.github.io/letswrite-publii-github-pages/

如果還有心去看一下 GitHub，就會看見剛建立的專案，裡面都有檔案了：

August 的 GitHub 專案在這邊：

https://github.com/letswritetw/letswrite-publii-github-pages

同步完後，Publii 原本左下角的那個同步按鈕，也會顯示最後一次同步的時間：

好了各位朋友，眼淚可以掉下來了 XD~

---

最後幾個提醒事項

GitHub Pages 的限制

在官方的說明文件中，有提到用 GitHub Pages 的限制：

It is not possible to upload a website with more than 1000 files, though this will be increased to approx. 5000 files in later releases. This limit is high enough for the vast majority of websites, but it’s good to be aware just in case you are running a very large website project through Publii.

The Github API is limited to 5000 requests per hour; Publii will inform you if your request limit is too low to complete deployment or syncing of your website. This limit also applies if a sync has more than 5000 changes at once; in this case, you should sync your website regularly to avoid amassing too many changes.

How to create a static website using Github Pages

就是說有限制最多上傳的檔案數量是 1000 個，以後會加到上限 5000 個，以及跟 GitHub 的同步每小時最多是 5000 個請求。

在這個限制之下，August 的建議有 2 點：

Publii 左下角那個「Sync your website」，沒事不要隨便按

最好是你設定完其他東西，或是確認文章寫好了，先按下它上面那個「Preview your changes」，看一下存在你電腦裡的檔案，呈現的樣子會是什麼，都確認後再按下同步。

圖片的部份，一定要壓縮，並且改上傳到圖庫後再引用

網站最耗流量的，大部份都是圖片，很多新手經營網站時，常常沒注意到圖片大小，一個不小心一張圖就 10 幾 MB。這邊推薦一個很多人用的壓縮圖片線上功能：TintPNG，雖然是叫 PNG，但 JPG 也可以壓。

圖片的部份，盡量放在圖庫上，除非你的圖片是有授權的，不能放在外部。

August 平時發文時，圖片都是先傳到圖庫上，頁面上要插入圖片時就填上圖庫給的網址，這邊推薦的是：Imgur，不僅免費，還可以把圖片設成 hidden，是節省流量的好物。

私密性質的圖片、文章不要寫在 Publii 上

雖然用 Publii 發文時，有「Hide post」這個選項，可以讓該篇文章不會出現在網站上，但之前在建立 GitHub 專案那段也說了，所有的檔案會上到 GitHub，而 GitHub 的專案 Free 版本只能設成 Public，Public 就是連外星人都看得到的意思，即便你文章設 Hide，但也只是不是呈現在網站上，GitHub 的原始碼還是看得到的！

可以自訂網域

用 GitHub Pages 建立的網站，本身就有提供自訂網域的功能，所以 Publii 來接 GitHub 這部份，也是可以自訂網域的。