不會寫程式,也能自己架一個免費網站:Publii + Github pages

不會寫程式,也能自己架一個免費網站:Publii + Github pages

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

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

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

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

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

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

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

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

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

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

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


步驟1:下載、安裝Publii

首先,進到Publii的官網:

https://getpublii.com/

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

Publii Download page
Publii Download page

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

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


步驟2:Publii基本設定

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

Create new website
Create new website

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

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

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

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

Publii 使用介面
Publii 使用介面

修改檔案存放位置

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

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

Publii全局設置、佈景
Publii全局設置、佈景

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

修改檔案存放路徑
修改檔案存放路徑

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

theme 佈景

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

Publii Theme
Publii Theme

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

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

安裝新佈景

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

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

按下download下載新佈景
按下download下載新佈景

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

壓縮檔拖曳到Publii上後就安裝完佈景了
壓縮檔拖曳到Publii上後就安裝完佈景了

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

切換佈景

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

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

選擇要改變佈景的網站
選擇要改變佈景的網站

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

選擇網站佈景
選擇網站佈景

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

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


步驟3:建立Github帳號,取得token

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

左邊選單選擇「Server」,會看見Publii可以接通的主機,接著選「Github Pages」:

點Server,點Github Pages
點Server,點Github Pages

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

Publii Github Pages 表單
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:

 Username / Organization
Username / Organization

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

點擊「Sign up」,進到填資料頁:

Github的註冊表單
Github的註冊表單

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

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

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

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

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

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

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

選擇Free
選擇Free

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

數據收集的頁面填不填都行
數據收集的頁面填不填都行

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

驗證email的訊息
驗證email的訊息

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

信箱收到驗證信
信箱收到驗證信

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

信箱驗證成功,收到成功信
信箱驗證成功,收到成功信

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

這步完成,目前我們有的資訊是以下:

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

Repository

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

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

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

點擊New repository來新增專案
點擊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」就好:

直接點擊Commit new file
直接點擊Commit new file

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

點擊settings
點擊settings

settings的頁面很長,我們需要看的只有一個部份:GitHub Pages

settings頁面一路往下滑,滑到看到「GitHub Pages」這個標題:

GitHub Pages部份
GitHub Pages部份

點擊上張圖標示的「None」,會出現「Select source」(選擇來源)的子選單,點擊「master branch」就行了:

點擊master branch
點擊master branch

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

None改成master branch
None改成master branch

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


Token

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

首先,按下Github右上角你的大頭照,出現的子選單選「Settings」:

點大頭照 -> settings
點大頭照 -> settings

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

選擇Developer settings
選擇Developer settings

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

選擇Personal access tokens
選擇Personal access tokens

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

New personal access token頁面
New personal access token頁面

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

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

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

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

取得token
取得token

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

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


步驟4:填上取得的4個值到Publii,然後同步

經過了步驟3,我們取得了必填的4個值,還開通了Github Page的功能,檢視一下取得的4個值如下:

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

我們開啟Publii,依序填上:

填上從Github取得的資訊到Publii
填上從Github取得的資訊到Publii

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

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

成功的話,就會看見Publii秀出一行訊息:

server設定成功的訊息
server設定成功的訊息

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

左下角的按鈕變成Sync your website
左下角的按鈕變成Sync your website

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

再次確認是否要同步
再次確認是否要同步

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

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

同步中
同步中
同步完成
同步完成

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

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

網站建立完成 歡呼~
網站建立完成 歡呼~

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

Augustus照這流程建立出來的網站在這邊:

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

如果還有心去看一下Github,就會看見剛建立的專案,裡面都有檔案了:

Github上有了Publii同步上去的檔案
Github上有了Publii同步上去的檔案

Augustus的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個請求。

在這個限制之下,Augustus的建議有2點:

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

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

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

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

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

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

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

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

可以自訂網域

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

這部份,等以後有時間,並看看這篇文章的瀏覽量、點讚數、回應狀況後,再來考慮要不要寫XD~


Summary
不會寫程式,也能自己架一個免費網站:Publii + Github pages
Article Name
不會寫程式,也能自己架一個免費網站:Publii + Github pages
Description
本篇大綱:有時候,我們只是想要有一個簡單的網站,而且免費。下載、安裝Publii。Publii基本設定。建立Github帳號,取得token。填上取得的4個值到Publii,然後同步。最後幾個提醒事項。寫這篇,主要是寫給不會寫程式,或是自己就是工程師,但都想要有一個自己的網站。
Augustus
Let's Write
Let's Write
Publisher Logo

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *