0%

[教學] 使用 GitHub Pages + Hexo 來架設個人部落格

Hexo 部落格教學文系列:
[教學] 使用 GitHub Pages + Hexo 來架設個人部落格
[教學] 我的第一篇 Hexo 文章 - 使用 hexo-admin 後台管理工具
[教學] 撰寫 Hexo 文章 - Markdown 語法大全
[教學] Hexo 資料夾/檔案架構、佈景主題修改介紹
[教學] Hexo 筆記 - Next 主題升級、客製功能及樣板編輯全記錄
[教學] APlayer:為 Hexo 部落格加入個人音樂播放器

如果想要架設自己專屬的部落格該怎麼做呢?大部分的人會利用網路上現有的服務,例如:Blogger、痞客邦、udn部落格等平台上發文;而這類的部落格平台,最大優點就是擁有文章搜尋、文章分類、留言…等一般使用者可能會用到的功能,通通都幫你準備好了,非常方便。

至於缺點呢,就是始終如一或看起來都大同小異的主題介面。另外,有些部落格為了要營利,可能在部落格邊欄和文章內安插廣告;因此接下來就要來介紹如何不靠網路上現有的 Blog 平台,自己架設一個能客製化界面的專屬部落格。

為何使用 GitHub Pages 來架設 Hexo 部落格?

在架設自己的部落格之前,首先必須要先有一個可以放網站的空間!總共有三種方法,第一種是去尋找網路上提供的主機空間,大多數要付費(月費/年費),只有極少數是免費的(但免費的限制都很多)。第二種是自己用 NAS 來架設,這裡也不多贅述;而第三種就是透過 GitHub Pages 來架站,它是完全免費的且架設方法很簡單,不過還是有以下幾點限制

GitHub Pages source repositories have a recommended limit of 1GB .

Published GitHub Pages sites may be no larger than 1 GB.

GitHub Pages sites have a soft bandwidth limit of 100GB per month.

GitHub Pages sites have a soft limit of 10 builds per hour.

總結上述限制,就是網站大小不能超過 1 GB網站每月流量不能超過 100 GB、還有一小時內的網站更新不得超過 10 次;這些限制除非是把 GitHub Pages 當圖床、丟影片,或是每天超過幾千幾萬人會瀏覽您的網站,否則對於大部分的人一定來說都夠用。況且 GitHub 是非常著名的軟體原始碼代管服務,網站基本是不會有掛掉、連不上等問題的。

既然這麼方便又免費,那多數的個人網站應該都架在 GitHub Pages 了呀?因此筆者還是要說它唯一的缺點,也就是 GitHub Pages 只能架設「靜態網站」。舉例來說,需要連接資料庫的網站(像是要輸入帳號密碼登入的那種頁面),還有也是很受歡迎的個人部落格服務 - Wordpress,也是需要資料庫才能運作,所以上述這些都不適合。

說到使用靜態網站架設部落格的方式,就非 HEXO 莫屬了!HEXO 使用 Node.js 建置,擁有許多免費主題供大家使用;且如果有程式底子的人,透過修改主題框架、加入套件等,就能讓部落格看起來與眾不同。

架設 Hexo 部落格之超簡易教學

建立 GitHub Pages 環境

-> 註冊 Github 帳號

GitHub官網:https://github.com/

-> 建立 Github Pages

靜態網頁的好夥伴:Github Pages,它可以給我們託管在 GitHub 上的靜態網頁。在申請完 Github 帳號之後,點一下畫面中間的 Start a Project。

接著將專案名稱取名為 username.github.io 並按下最下方的 Create repository

註: username 指的是你的 GitHub 帳號,在旁邊 Owner 的地方就會顯示你的帳號。例如我的帳號是 xdxd123,那麼專案名稱就取名為 xdxd123.github.io。

接著進入專案,到 Settings 頁面。

頁面往下滑,有個 GitHub Pages 設定,點一下 Choose a theme。

開新分頁後,有好幾個樣板供使用者選擇,這裡直接按下 Select theme。(這時候的樣板只是暫時,之後才會部署自己的 Hexo 部落格上來)

最後在網址列輸入 https://username.github.io/ (username 是自己的 GitHub 帳號),就能看到自己剛架好的 Github Pages 了唷!

建立 Hexo 環境

-> 安裝相關軟體

目前的樣板只是暫時的,我們的目標是要使用 Hexo 框架來架設部落格,最後才會部署到 GitHub Pages。接下來要建立 Hexo 環境,由於筆者是 Windows 系統,這邊以 Windows 系統來示範安裝和部署,因此需要先安裝以下軟體:

  1. Node.js
  2. Git
  3. Notepad++ (文字編輯器,建議安裝;如果使用者有自己習慣使用的文字編輯器則不用裝)
  4. Xcode ( Mac 用戶才需要安裝)

-> 初始設定

若都安裝好了,我們可以開啟我們的終端機(命令提示字元),並輸入以下指令安裝 Hexo:

1
npm install -g hexo-cli

安裝完 Hexo 套件後,我們要在終端機輸入以下指令來初始化 Hexo 部落格 :

1
2
3
4
hexo init name  //初始化新的 Hexo,會在當前路徑建立一個叫 name 的資料夾,資料夾名稱可以隨意取,例如「myblog」,那麼指令就是 hexo init myblog
cd name //進入您剛剛建立的 name 資料夾當中,cd 是 change directory 的意思
npm install //安裝 Hexo
npm install hexo-deployer-git --save //安裝 git 部署套件

這樣就完成安裝了唷!

-> 設定部落格相關資訊

進入剛設定好的 Hexo 資料夾之後(本範例資料夾名稱為 myblog ),先找到 _config.yml 這個檔案,然後對它點右鍵 -> Edit with Notepad++ (或是用自己習慣的文字編輯器打開)。

打開 _config.yml 後,修改第 6~12 行資訊,輸入完記得按下 Ctrl+S 存檔(# 為註解):

1
2
3
4
5
6
7
title: 我的部落格  #輸入部落格標題
subtitle: 一個抒發本人心情的地方 #輸入副標題
description: #輸入網站描述
keywords: #輸入網站關鍵字(以逗號隔開),方便 SEO
author: 王小明 #輸入姓名或暱稱
language: zh-TW #輸入您所使用的語言
timezone: #留空以使用系統時間

接著第 16 行的地方,url 請換成自己網站的連結 https://username.github.io/ ,username是自己的 GitHub 帳號。

1
url: https://username.github.io/

這樣就初步完成部落格的個人化設定了!

-> 設定部署至 GitHub 的資訊

接著一樣在 _config.yml,要找到部署至 github 的設定:deploy (在文件的底部),請輸入以下設定,repo 的 username 改成自己的 GitHub 帳號,所以 repo 的連結架構長這樣: https://github.com/自己帳號/專案名稱.git ,輸入完一樣記得按下 Ctrl+S 存檔。

1
2
3
4
deploy:
type: git
repo: https://github.com/username/username.github.io.git
branch: main #目前最新的預設 branch 是 main,若原本的 branch 為 master,則輸入 master

PS. 目前最新的預設 branch 是 main,若原本的 branch 為 master,則輸入 master。如下圖,查看方式請到 GitHub 剛建好的專案下,確認 defult branch 為 main

註:至於 _config.yml 在 deploy 的地方,為何預設只有 type 一個項目呢?這是因為 Hexo 可以部署到很多地方,GitHub 只是其中一個選項,而每個網站的設定值皆不同。使用者也可以一次部署到多個網站,有興趣者可以參照這個文件教學:Deployment | Hexo

-> 部署至 GitHub

回到終端機,首先確認終端機的路徑在 myblog 資料夾根目錄下,並依序輸入以下三個指令:(輸入 hexo d 後會要求登入 GitHub 帳號,如圖所示)

1
2
3
hexo cl  //清除之前建立的靜態檔案,也可以輸入 hexo clean
hexo g //建立靜態檔案,也可以輸入 hexo generate
hexo d //部署至 Github Pages,也可以輸入 hexo deploy

PS. 若第一次使用 Git,則在執行 hexo d 時會報錯(出現 Auther identity unknown. Please tell me who you are. 錯誤訊息),這時候就要輸入以下兩行資訊(雙引號內自行修改,輸入指令時雙引號要保留):

1
2
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

這三個缺一不可的指令,就是幫我們把網站自動生成並發佈到 https://username.github.io 上的指令,完成後就可以打開瀏覽器看看自己網站發布成功的樣子摟!

小結:本次介紹如何安裝 Hexo 環境,包含個人資訊和部署設定,而 Hexo 還能自訂主題、套件等等,玩法非常的多!

附錄:實用教學

直接在指定資料夾路徑開啟終端機

在部署時,終端機的路徑在 myblog 資料夾根目錄下才可以輸入指令,除了用 cd 指令,有沒有更輕鬆的方式呢?答案是直接在該資料夾的路徑列輸入 cmd,按下 enter 後,就會在這個路徑打開命令提示字元。

專案名稱和部落格網址的關係

前面有提到,如果你的帳號叫 xdxd123,那麼專案名稱就要叫做 xdxd123.github.io,這樣子連到該專案的網址才會是 https://xdxd123.github.io/ 。那如果專案名稱不是這樣取呢?還有辦法連到這個專案的網站嗎?還是一個 GitHub 帳號只能建立一個部落格?

關於以上問題,一個 GitHub 帳號可以架設很多個網站;名稱的部分,如果我的名稱不是以 username.github.io 為命名,例如我取該專案的名稱為 hello,那麼的網址連結就會是 https://xdxd123.github.io/hello/ ,也就是在網址尾巴附上專案名稱。

以下做簡單的整理(假設使用者名稱為 xdxd123):

專案(repository)名稱 該專案的網址連結
xdxd123.github.io https://xdxd123.github.io/
hello.github.io https://xdxd123.github.io/hello.github.io/
hello https://xdxd123.github.io/hello/
project https://xdxd123.github.io/project/     (…依此類推)

要注意的是,假設用專案名稱:hello 來建立 Hexo 部落格,記得 Hexo 資料夾根目錄下的 _config.yml 要修改第 16 行和第 17 行,如下圖,否則部署至 GitHub Pages 後會無法正確顯示: