GitHub 是透過 Git 進行版本控制的軟體原始碼代管服務平台。普遍是由應用程式開發者及科技公司使用的。不過,即使你沒有寫程式的經驗也可以使用 GitHub 去永久寄存你的簡單網站。

每一個 GitHub 帳戶或 Organization 只能夠創建一個 GitHub Pages 網站,但是因為每個賬號能夠創建無限個 Organization; 因此大家可以利用 GitHub Pages 去 host 無限個網站。

今次教學將會使用 Webflow 去製作網站原始檔,但理論上你可以用其他的形式去製作網站原始檔。

注意事項:你的Webflow帳戶起碼需要有 Account Plan Lite 才能匯出網站原始檔。另外,你的 Webflow 網頁不能夠使用CMS 及 Form Submission。

如果你從未在 Webflow 上建立網站的話,你可以跟試試跟著此 YouTube 視頻教學創立第一個 Webflow 網站。否則,你可以繼續跟著本篇教學。

步驟

1. 建立GitHub帳戶

a. 前往github.com/signup,並按照指示填寫資料,例如使用者名稱,電郵地址,密碼等資料,再進行電郵確認。

https://assets.website-files.com/617a60b5e57d6278df0b82ae/61aa18bdc10c2926ccdd9095_moYDVkmSAA7deGg9RmQrMnXlWL5Y1jf4QaVtq09X7WewTJ8UVgO9UazAtueayJs4VxyB0DDcPytGVeXjhXP4bBILGr4Xid93MqEO9rBV946sQN1MmLIurVDq6uGzHaCLqzPQEW8h.png

2. 建立Repository

(註:Repository中文譯法因地而異,台灣會譯作倉儲,而中國大陸就會譯作倉庫。為免産生誤會,以下將全部統稱為Repo。)

https://assets.website-files.com/617a60b5e57d6278df0b82ae/61aa18bce4ad137e20121861_uL7arUzU8Yt30hfvOj2_l_Axu-3lF7ZX9Jlnf0D7y8U0myJzKaQUi-v6sJMvSzlGwG8BkEI12LKtQnojStQTfPeRHAasPyWzdzJCcOukhKi33aWxQoeSl5Kf3jZdUVZ0Wnrvw5Fx.png

a. 當你完成上述的步驟之後,這個就是你的初始介面。點擊左上角的”Create Repository”按鈕去創建你的Repo。(紅圈示)

https://assets.website-files.com/617a60b5e57d6278df0b82ae/61aa18bc51de8070a7047f68_kMbLwPIvOuTkbK1IPLhAumF_Pz5YyCehDo5A6cf9FzREzC0_2bo-uCAgkSxRwUM-d4gKPXxf-eH1M29QNIFUbI6eGB5f1jqi9o1MpP8MdJ5Xope20cw3zWyuEuFsGHqnIP4kf1ak.png

b. 你會被導引到創建新repo的介面。填寫Repository Name (1) 。請注意,你應該把你的repo名稱設定為和你的使用者名稱一樣,即 [username].github.io。 把權限設定為 Public (2),然後再按 Create Repository (3) 完成程序。以我做例子,我的 GitHub 用戶名稱是 CTRLee ,而我要使用的 Repository Name 必須是 CTRLee.github.io

3. 下載Github Desktop

https://assets.website-files.com/617a60b5e57d6278df0b82ae/61aa18bc7627ef1d2c6e2e9a_m2Vsq7Ue_7RfE3h3AZD4nKpghOqwuTUhl9Dds7jEgmwql06CqqEn7Tp_vXUoGm-IZ9tVHplWL3wuZ-VnbXwaf0gh3729prkX2lcMesQw2jx7JvOJvFICseGD0nQ5AJz_cTqMYOkE.png

a. 完成上述的步驟之後你就可以前往 desktop.github.com 下載 GitHub Desktop。或者點擊紅圈所示的 Set up in Desktop。