本文將簡單介紹Github平台與hexo的特點,之後完整介紹如何利用Github建立屬於自己的靜態網站,此篇包含必要程式的下載、在Github網站創建網頁的過程。

筆者的電腦作業系統為Windows10,教學內容皆以此系統為主。

本文以個人經驗為主,完整列出架設hexo個人網頁的流程,旨在幫助所有同為資訊小白、毫無基礎的初學者,能有詳細的步驟可以遵循。

特別致謝:Albert Huang提供的技術指導。是架設網站界的翹楚,是架設網站與教學系之祭酒,同時也是筆者的好朋朋!

什麼是Github?

Gtihub是一個可以控制程式版本與協作的一個全球性平台,同時具有發布靜態網站(static website)的功能,時常被使用來儲存工程師編寫的程式碼與進行相關軟體開發時的開源(open source)作業。由於時常被工程師拿來進行作業開發,因此亦有「全球最大男性交友平台」的稱號。

什麼是Hexo?

Hexo是由Node.js所支援的一項網頁實作框架,可以用來快速地建造個人的部落格。一般而言與Github搭配來搭建靜態網站,但也可以利用其他的伺服器來進行作業。
Hexo使用Markdown語法來實現與儲存文章內容,相對於使用一般HTML檔案進行編寫有不小的便利性,對於網站初學者可以建立概念與快速入門。

動態網站與靜態網站的差別?

動態網站,顧名思義他與使用者的操作是屬於動態的互動模式,主要是搭配伺服器與資料庫共同運作,一般而言主要會使用在會員登入、討論區等地方,常用的語言有PHP、ASP、SQL等。

相對的,靜態網站以超文件標示語言(HyperText Markup Language)來編寫的網站,主要是供更新不頻繁與展示性質的網站使用,常與CSS與Javascript搭配完成架設。

下載必要程式

1. Git (Git下載連結)

  1. 開啟Git下載頁面,選擇Windows。
  2. 點選最新版本下載。
  3. 下載完後開啟檔案,完成安裝。(按Next直到結束)

2. Node.js(Node.js下載連結)

  1. 開啟Node.js下載頁面,下載LTS版本。
  2. 下載完後開啟檔案,完成安裝。(一樣持續按Next即可)

3. Visual Studio Code(VS Code下載連結)

  1. 開啟(VS Code下載頁面),下載Windows版本。
  2. 下載後開啟檔案,完成安裝。(按Next)

在Github建立repo

  1. Github網頁註冊自己的帳號。
    (username攸關未來創建的所有個人網頁網址,記得三思後落筆。)
  2. 點開Your Repositories(以下簡稱repo),Create a new repo。
  3. 在Repository name輸入username(後面加.github.io)

    3.目的是讓個人網頁的網址更簡短,若是設定其他字,未來的網址就會變成: username.github.io/repository

  4. 選擇Public,其他不用理沒關係。(之後會套用現成模板)
  5. 創好repo後,點進去並進入settings。
  6. 左方欄位選擇Pages
    將Branch改成master並儲存,再選擇任一theme。
  7. 架設網站成功!

目前進入個人網頁會呈現以下樣貌,屬正常現象XD 但你已經擁有屬於自己的網站了!

下一篇教學文會分享如何將網站個人化,以及如何自己的電腦修改程式碼後更新到網頁上。

最後,祝大家新年愉快、幸虎快樂!❤
Claire2004(2022/02/07)

Cover pic from https://inclusion-international.org/