Featured image of post Mac OS環境下使用Hexo搭建個人部落格

Mac OS環境下使用Hexo搭建個人部落格

網上大部分基於Hexo搭建個人部落格的教程都是在Windows環境下實現的,Mac OS的教程很少,然而,Mac OS下完成這個任務遠比Windows要容易。

準備工作

安裝 Homebrew

Homebrew 是一個社羣驅動的包管理器,它能方便我們安裝我們需要的環境。在中國大陸,推薦使用映象源安裝 Homebrew,下面以中科大映象源為例。

設定環境變數:

1
2
3
4
export HOMEBREW_BREW_GIT_REMOTE="https://mirrors.ustc.edu.cn/brew.git"
export HOMEBREW_CORE_GIT_REMOTE="https://mirrors.ustc.edu.cn/homebrew-core.git"
export HOMEBREW_BOTTLE_DOMAIN="https://mirrors.ustc.edu.cn/homebrew-bottles"
export HOMEBREW_API_DOMAIN="https://mirrors.ustc.edu.cn/homebrew-bottles/api"

執行中科大 Homebrew 安裝指令碼:

1
/bin/bash -c "$(curl -fsSL https://mirrors.ustc.edu.cn/misc/brew-install.sh)"

如果你的網絡環境良好(不在中國大陸),可以略過設定環境變數的步驟並直接使用正常的安裝指令碼:

1
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安裝 Git 和 Node.js

Homebrew安裝完成後,安裝 Git 和 Node.js:

1
2
brew install git
brew install node

測試所需元件是否安裝成功

依次輸入下面的命令

1
2
3
npm -v
node -v
git --version

出現npm、Node.js和git的版本號即代表安裝成功。

安裝 Hexo

使用 npm 命令安裝 Hexo:

1
npm install -g hexo-cli

等待安裝完成後初始化部落格:

1
hexo init blog

這條指令的作用是在你目前所在的目錄下(預設是你的home目錄)新建一個名為blog的資料夾(你可以將這條命令中的blog替換成任何你想要的名字),並在內初始化你的部落格。之後所有的操作都在這個資料夾下進行,請確保在執行後文的操作前已經切換到了這個資料夾(cd blog)。

待初始化完成,切換到blog資料夾中,即可生成和預覽部落格。

1
2
3
cd blog
hexo g
hexo s

執行hexo s命令後,透過瀏覽器訪問http://127.0.0.1:4000可以預覽你的部落格,預覽功能會實時監測部落格的檔案變化,並實時反饋在瀏覽器上,在除錯部落格前端時非常好用。

hexo -s 預覽

部署到GitHub

執行hexo g命令後部落格靜態檔案會生成在public資料夾下,只需要將這些檔案上傳到你的靜態網站託管服務即可將站點發布到公網,本文用到的託管服務是Github Pages,下文提到的用戶名稱均指你的Github用戶名稱。

新增SSH Key到github

若之前使用過相關功能且已經配置過請跳過此步。

配置Git用戶名稱和賬號:

1
2
git config --global user.name "username"
git config --global user.email "example@example.com"

其中 username 是你的用戶名稱,example@example.com是你 Github 的登入郵箱。

然後透過終端命令生成 SSH Key:

1
ssh-keygen -t rsa -C "example@example.com"

如果已經建立過會出現 Overwrite (y/n)? n提示可以輸入 n,沒有建立過的話三個回車就好,執行完成後會在~/.ssh/id_rsa.pub目錄下生成 需要使用的 key,也就是公鑰。

到賬户主資料夾下同時按Command+Shift+.顯示隱藏檔案,找到.ssh資料夾,開啓id_rsa.pub,將裏面的內容全部複製。

開啓GitHub_Settings_keys 頁面,新建New SSH Key,Title隨意填,Key就把剛才複製的內容全都貼上上去。然後點Add SSH Key即可。

完成這些工作以後可以透過以下命令測試是否配置成功:

1
ssh git@github.com

出現你的Github用戶名稱代表配置成功。

上傳至 Github

在Github上新建一個倉庫,Repository Name 填你的用戶名稱.github.io,倉庫狀態設為 Public,點選 Create Repository 建立新的網站倉庫。

安裝 Hexo 的擴充套件 hexo-deployer-git,注意一定要在你的部落格資料夾下執行:

1
npm install hexo-deployer-git --save

編輯部落格安裝資料夾下的_config.yml檔案,翻到底部,修改deploy部分為:

1
2
3
4
deploy:
  type: git
  repo: git@github.com:你的用戶名稱/你的用戶名稱.github.io.git
  branch: master

修改完成後按Command + S儲存,此時就可以使用hexo d把存在本地的部落格deploy到Github上了:

1
2
3
4
#生成部落格
hexo g
#將部落格推送到指定的地方,在這裏是我們的Github倉庫
hexo d

部署 Hexo 時出現報錯

雖然我也不知道是為什麼,即使我們已經加好了 SSH 公鑰,並且填入hexo-deployer-git的倉庫資訊也是 SSH 連結,第一次執行hexo d命令時還是可能要求你輸入你的Github賬號和密碼,這裏如果輸入你的賬號和密碼會出現如圖所示的報錯,這是因為 Github 在2021年 8 月 13 日停止了使用密碼認證的支援,在Gihub的Developer Settings頁面上新建一個 Personal Access Token 代替密碼就可以順利 deploy。

新建傳統 Token

新建一個 Token(classic),並賦予這個 Token 操作 repo 的許可權,有效期可以設定為 No expiration。

其實出於安全考慮更推薦使用目前處於 Beta 階段的 Fine-grained tokens ,它提供了更精細的 Token 許可權控制,例如可以只允許這個 Token 訪問特定的倉庫,而非傳統 Token 的全部倉庫。出於安全考慮,Fine-grained tokens 最高只能設定一年的有效期。

開啓倉庫的 Github Pages 功能

成功上傳後,部落格倉庫裏應該會出現檔案,這時只需在倉庫設定裏開啓 Github Pages 功能就可以了。

開啓倉庫的 Settings -> Pages,將 Build and deployment 項下的 Source 設定為「Deploy from a branch」,Branch 選擇「master」,單擊 Save 儲存,Pages 功能就被開啓了,每次hexo d,更新後的網頁都將被自動部署到 Github Pages。

在倉庫設定裏開啓 Pages 功能

執行完畢後,開啓你的用戶名稱.github.io就能看到你的部落格了。

繫結自定義域名(可選)

其實到這一步就可以開始寫部落格了,預設的 github.io 的域名是可以更換的:

首先自行申請一個域名,登陸到域名申請的後台,新增一條CNAME解析記錄:你的用戶名稱.github.io

開啓存放部落格的Github倉庫,進入Settings頁面在pages選項裏的Custom domain裏填入你的域名,點選Save,勾選Enforce HTTPS,即可透過自定義域名訪問你的部落格。

給 Pages 繫結自定義域名

開始寫作

生成一篇新文章:

1
$ hexo new <title>

執行後會在blog/source/_post資料夾裏生成一個名為<title>.md的檔案,開啓它即可使用 Markdown 開始寫作

.md 檔案裏的 Front Matter

值得一提的是,Hexo生成時真正顯示的標題是<title>.md檔案的 Front matter 裏 title 項的標題,檔名影響的是生成後文章的永久連結。

寫作完成後執行:

1
2
3
#注意以下命令需要切換到blog資料夾(cd blog)執行
$ hexo g
$ hexo d

即可將文章釋出,根據主題的不同,最好在執行hexo g前先執行:

1
$ hexo clean

以避免潛在的問題。

Hexo常用命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#注意以下命令需要切換到blog資料夾(cd blog)執行
hexo n "文章名稱"  => hexo new "文章名稱"  #這兩個都是建立新文章,前者是簡寫模式,下同,new後面加一個draft可以生成草稿
hexo p  => hexo publish  #釋出草稿
hexo g  => hexo generate  #生成
hexo s  => hexo server  #啓動服務預覽
hexo d  => hexo deploy  #部署

hexo server   #Hexo 會監視檔案變動並自動更新,無須重啓伺服器。
hexo server -s   #靜態模式
hexo server -p 5000   #更改埠
hexo server -i 192.168.1.1   #自定義IP
hexo clean   #清除快取,網頁正常情況下可以忽略此條命令