Mac OS環境下使用Hexo搭建個人博客

Mon, 30 May 2022 16:27:30 +0000

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

準備工作

安裝 Homebrew

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

設置環境變量：

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 安裝腳本：

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

如果你的網絡環境良好（不在中國大陸），可以略過設置環境變量的步驟並直接使用正常的安裝腳本：

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

安裝 Git 和 Node.js

Homebrew安裝完成後，安裝 Git 和 Node.js：

brew install git
brew install node

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

依次輸入下面的命令

npm -v
node -v
git --version

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

安裝 Hexo

使用 npm 命令安裝 Hexo：

npm install -g hexo-cli

等待安裝完成後初始化博客：

hexo init blog

這條指令的作用是在你目前所在的目錄下（默認是你的home目錄）新建一個名為blog的文件夾（你可以將這條命令中的blog替換成任何你想要的名字），並在內初始化你的博客。之後所有的操作都在這個文件夾下進行，請確保在執行後文的操作前已經切換到了這個文件夾（cd blog）。

待初始化完成，切換到blog文件夾中，即可生成和預覽博客。

cd blog
hexo g
hexo s

執行hexo s命令後，通過瀏覽器訪問http://127.0.0.1:4000可以預覽你的博客，預覽功能會實時監測博客的文件變化，並實時反饋在瀏覽器上，在調試博客前端時非常好用。

部署到GitHub

執行hexo g命令後博客靜態文件會生成在public文件夾下，只需要將這些文件上傳到你的靜態網站託管服務即可將站點發布到公網，本文用到的託管服務是Github Pages，下文提到的用戶名均指你的Github用戶名。

添加SSH Key到github

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

配置Git用戶名和賬號：

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

其中 username 是你的用戶名，example@example.com是你 Github 的登錄郵箱。

然後通過終端命令生成 SSH Key：

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即可。

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

ssh git@github.com

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

上傳至 Github

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

安裝 Hexo 的擴展 hexo-deployer-git，注意一定要在你的博客文件夾下執行：

npm install hexo-deployer-git --save

編輯博客安裝文件夾下的_config.yml文件，翻到底部，修改deploy部分為：

deploy:
  type: git
  repo: git@github.com:你的用戶名/你的用戶名.github.io.git
  branch: master

修改完成後按Command + S保存，此時就可以使用hexo d把存在本地的博客deploy到Github上了：

#生成博客
hexo g
#將博客推送到指定的地方，在這裡是我們的Github倉庫
hexo d

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

新建一個 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。

執行完畢後，打開你的用戶名.github.io就能看到你的博客了。

綁定自定義域名（可選）

其實到這一步就可以開始寫博客了，默認的 github.io 的域名是可以更換的：

首先自行申請一個域名，登陸到域名申請的後臺，添加一條CNAME解析記錄：你的用戶名.github.io。

打開存放博客的Github倉庫，進入Settings頁面在pages選項裡的Custom domain裡填入你的域名，點擊Save，勾選Enforce HTTPS，即可通過自定義域名訪問你的博客。

開始寫作

生成一篇新文章：

$ hexo new </code></pre><p>執行後會在<code>blog/source/_post</code>文件夾裡生成一個名為<code><title>.md</code>的文件，打開它即可使用 Markdown 開始寫作</p>
<p>

</p>
<p>值得一提的是，Hexo生成時真正顯示的標題是<code><title>.md</code>文件的 Front matter 裡 title 項的標題，文件名影響的是生成後文章的永久鏈接。</p>
<p>寫作完成後執行：</p>
<pre><code class="language-bash">#注意以下命令需要切換到blog文件夾(cd blog)執行
$ hexo g
$ hexo d</code></pre><p>即可將文章發佈，根據主題的不同，最好在執行<code>hexo g</code>前先執行：</p>
<pre><code class="language-shell">$ hexo clean</code></pre><p>以避免潛在的問題。</p>
<h2 id="hexo常用命令">Hexo常用命令
</h2><pre><code class="language-bash">#注意以下命令需要切換到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   #清除緩存，網頁正常情況下可以忽略此條命令</code></pre>
</article>
</main></body></html>

Hexo on 亂筆