該文首發於我的個人部落格ReadLamp

前言

內容概覽：利用Github中的Github Pages服務，以及Hexo自帶的一鍵部署功能，將本地搭建好的部落格部署至Github，並通過對應Github倉庫鏈接實現瀏覽器存取部落格頁面。

目的：從零開始快速搭建屬於自己的部落格，並可通過瀏覽器存取。

啥是Hexo？

一個基於Nodejs、快速簡潔高效的部落格框架（靜態部落格）。擁有超快渲染、支援Markdown、一鍵部署、可延伸性等功能，且有衆多美觀、強大、可定製的主題。

本文分爲以下部分：

Hexo部落格本地搭建
部署至Github

Hexo部落格本地搭建

步驟概覽：

環境搭建
安裝與初始化Hexo
基本操作

環境搭建

在安裝Hexo前，我們需要做一些準備工作，Hexo既然是基於Node.js，那首先需要安裝Node.js。爲了更好的使用相關命令，還需要安裝Git工具。如之前已安裝過這兩個，可跳過環境搭建，進入安裝Hexo。

安裝Node.js

什麼是Node.js?

Node.js是一個能夠在伺服器端執行JavaScript的開放原始碼、跨平臺JavaScript 執行環境.

點選傳送門進入官網
選擇LTS版下載並安裝，安裝過程一直預設下一步即可

目前版本可能高於圖片所示，按最新的LTS版本下載

安裝Git

此處提供兩種下載方法，安裝過程一直預設下一步即可

由於特殊原因，官網下載較慢，建議使用第二種下載。

安裝CNPM

該步驟用以替代npm下載hexo，cnpm爲淘寶映象源下載更快。但在此之前，還是得通過npm下載cnpm。

在上一步中，我們已經安裝好了Git，開啓C槽，右鍵便可以看到Git Bash選項。

點選Git Bash開啓介面，輸入以下命令並回車：

npm install -g cnpm --registry=https://registry.npm.taobao.org

等待安裝完成後可以輸入cnpm -v檢視版本。

注意，在windows系統中，Git工具不支援Ctrl + C/V快捷鍵，建議使用右鍵複製/貼上。

安裝與初始化Hexo

安裝Hexo

同樣在上述右鍵Git Bash後的介面中，輸入cnpm install -g hexo-cli回車，即可通過cnpm下載並安裝Hexo。待完成後，可輸入hexo -v檢視版本。

初始化

選擇一個你想要存放部落格的位置，如C:\Users\Administrator（無硬性要求，放在哪都行）
新建一個資料夾（取名隨意，如MyHexoBlogs即可，下稱根目錄）用以存放Hexo部落格（如果後面不喜歡了可以刪掉這個資料夾，重新進行初始化）

提示：初始化部落格可能不同機型使用的時間不等，可能需等待很久，想要體驗完整的初始化流程的可忽略此提示。如果不想等待，可直接下載初始化後的根目錄資料夾，解壓後放置到想要存放位置（可按需重新命名使用），並跳至第5步繼續（初始化完畢後，便可以……）。

進入新建的根目錄，右鍵開啓Git Bash。
輸入hexo init命令初始化blog資料夾

等待一會（實際上要很久），便可以在根目錄下實現部落格的初始化了。

初始化完畢後，便可以看到根目錄裡，已經有部落格框架的相關檔案了。（看看它出生的樣子…）

[外連圖片轉存失敗,源站可能有防盜鏈機制機製,建議將圖片儲存下來直接上傳(img-aYAZA58X-1597393636074)(https://cdn.jsdelivr.net/gh/LeoMu0815/HexoStaticFile1@latest/2020/08/08/5bc1e7d4fcf857ef5fc931709a8846f3.png)]

（同樣在根目錄下右鍵開啓Git Bash的介面中）命令列輸入hexo s，開啓本地伺服器埠。

出現以下內容即爲已開啓：

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

可以看到埠號是4000，開啓瀏覽器在網址處輸入http://localhost:4000回車，你就可以在瀏覽器中看到它的樣子了。

注意：這裏不要用Ctrl + C複製命令列裡的網站，因爲Ctrl + C會退出伺服器。

當不想繼續瀏覽時，記得按Ctrl + C關閉服務。

基本操作

建立你的第一篇部落格

在本地瀏覽的時候，你會發現已經有了一篇部落格，那是hexo初始化blog時預設生成的。

可以暫時先不用刪除，留作紀念hh

現在讓我們開始建立我們的第一篇部落格吧，具體步驟如下：

關閉上面開啓的伺服器，即在命令列中按下Ctrl + C。
輸入hexo new '我的第一篇部落格'即可在根目錄下的source/-posts/目錄（該目錄即部落格文章儲存目錄）下生成一個名爲「我的第一篇部落格」的md檔案。

md檔案是啥？

md檔案即Markdown格式檔案， Markdown 是一種輕量級標示語言，它允許人們使用易讀易寫的純文字格式編寫文件。在Hexo部落格中，我們便是使用Markdown來寫文章的。

放心，Markdown的語法極其簡單，常用的就那麼幾個。如果你使用的是Typora（一款極其優秀的Markdown編輯器），甚至無需記憶語法，直接使用快捷鍵或滑鼠右鍵操作格式。

開啓「我的第一篇部落格」md檔案

md檔案可以用任意文字編輯器開啓，如記事本。但也可以使用專門的Markdown編輯器開啓並撰寫文章，此處僅作舉例用，可暫時使用右鍵以記事本開啓。

可以看到在md檔案中已存在部分內容，下稱 Front-matter（在此暫不做講解，在我的後續文章中將有介紹，剛開始時可直接忽略，專注在寫部落格上），在其下方輸入你想輸入的內容（即部落格正文），如：

---
title: 我的第一篇部落格
date: 2020-01-01 00:00:00
tags:
---
## 今天是個特殊的日子
### 我寫下了我的第一篇部落格
非常非常開心！！！  
> 雖然比較簡單。。

**#**號和 **>**號便是一種markdown格式符。其中## 爲二級標題；### 爲三級標題；> 爲參照。

若使用專門的markdown編輯器可實時檢視效果圖。

以下爲Typora編輯器示意圖：

Ctrl+S儲存「我的第一篇部落格」md檔案，回到Git命令列，鍵入hexo s開啓伺服器
重新重新整理你瀏覽器的http://localhost:4000介面（如果剛剛沒關閉的話，關了就重新開啓即可），便能夠看到你寫的第一篇部落格了。

用完記得要按Ctrl + C關閉本地伺服器哦。

Hexo常用命令小結

hexo init
hexo new 'title'
hexo clean
hexo g
hexo s
hexo d

hexo init 用於初始化部落格，在最開始的時候用一次就夠了
hexo new ‘title’ 用於新建一篇md檔案（直接右鍵新建md檔案的話，是沒有Front-matter的），單引號內爲部落格名稱
hexo s 我們上面已經用過了，實際上是 hexo server 命令的簡寫，即啓動伺服器，預設埠爲4000
hexo clean 爲清除快取檔案和已經生成的靜態檔案（爲保證更改設定後生效用的）
hexo g 即 hexo generate 命令的簡寫，用於生成靜態檔案（後續搭配部署用的，也是hexo稱爲靜態部落格的原因）
hexo d 即 Hexo deploy 命令的簡寫，用於將本地靜態檔案部署至網路（需搭配 hexo g 使用）

後三種將在以下部分介紹在什麼時候使用，更多更詳細的命令可參考Hexo官方文件或自行百度。

部署至Github

在經過上述步驟後，我們已經實現了本地搭建Hexo部落格，並寫下了第一篇部落格。

但此時，我們只能在本地進行存取，若想讓其他人也能通過瀏覽器存取自己的部落格，就需要將Hexo的靜態檔案部署至伺服器上。由於自己購買伺服器搭建費時費力，且要定期維護，如果有這方面愛好或是希望鍛鍊自己的話可以搗鼓搗鼓，否則不建議這樣做。

這裏選擇的是Github平臺，雖然是國外的偶爾可能存取較慢，但也勝在方便快捷，不需要定期維護。

在此正式步驟開始之前，我們得先有一個Github賬號。

如無Github賬號，請登錄Github官網註冊。

如需具體步驟，可參考此鏈接或自行百度

註冊時的暱稱將成爲未來存取部落格時，所使用網址的一部分。

建議取個好聽好記的名字。

步驟概覽：

建立Github倉庫
生成並新增SSH
Hexo組態檔

建立Github倉庫

登錄Github官網
登錄後，在右上角點選加號，選擇New repository新建一個倉庫。

001

按下圖設定

002

假設暱稱爲zhangsan，則Repository name（倉庫名）需填寫爲zhangsan.github.io，一定得是暱稱.github.io這個格式。

Description描述隨便寫，然後點選Create repository建立倉庫。

倉庫建立成功後，會跳轉到倉庫頁面，先別關閉該頁面。

生成並新增SSH

回到Git Bash中，在命令列中依次輸入

git config --global user.name "gitHubname"
git config --global user.email "email"

githubname爲你的Github使用者名稱，email則是Github註冊時的郵箱

輸入ssh-keygen -t rsa -C "email"生成SSH

同樣的，email爲Github註冊時的郵箱。

過程中一直回車即可。

用記事本開啓生成的id_rsa.pub檔案，複製所有內容

一般來說，生成的ssh會在C:\Users\使用者名稱\.ssh目錄下

回到Github頁面，點選頭像，開啓setting

[外連圖片轉存失敗,源站可能有防盜鏈機制機製,建議將圖片儲存下來直接上傳(img-oxJ0ro7O-1597393636081)(https://cdn.jsdelivr.net/gh/LeoMu0815/HexoStaticFile1@latest/2020/08/08/fbb07c948ffaf7aa26e690c7f198e616.png)]

在SSH and GPG keys索引標签內點選New SSH key新增新的SSH金鑰

Title隨便寫，在Key中貼上剛剛第3步中複製的內容，點選Add SSH key新增。

回到Git Bash中，輸入 ssh -T [email protected]檢視是否成功。

Hexo組態檔

在Hexo部落格根目錄下，開啓搭配站點組態檔_config.yml

拉到最底下，找到 # Deployment，修改爲

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/githubname/githubname.github.io.git
  branch: master

在repo那一行，將githubname填寫爲你的Github暱稱

注意，每個冒號都爲英文冒號，且冒號後有一個空格！

回到Git Bash中，輸入npm install hexo-deployer-git --save安裝deploy-git
安裝後，在命令列按序輸入：

hexo clean
hexo g
hexo d

也就時在上面Hexo部落格本地搭建末尾提及的6個命令中的後3個命令，因爲修改了站點組態檔_config.yml，需要用hexo clean清除快取。部署到GitHub的實際上是靜態檔案，也就是 hexo g命令在public資料夾下生成的靜態檔案，最後，通過 hexo d部署至github。

注意，在hexo d命令執行時，可能要求輸入username和password（即Github的暱稱和密碼），一般在第一次部署時纔會出現。

此時回到剛剛建立倉庫時，跳轉的那個倉庫頁面，重新整理一下，如果出現一堆資料夾和檔案，就說明部署成功了！
複製圖中紅框部分，在瀏覽器中新標籤頁地址內輸入開啓，就是真正通過網路存取你的部落格了。

如果無法正常跳轉，可嘗試在前面加上https://如https://yourname.github.io/

小結

至此，從本地到部署已經實現。

像是環境搭建之類的步驟已經完成，今後如果需要刪除部落格根目錄重新初始化，只需要按上面介紹使用hexo init命令或下載已初始化的部落格資料夾就可以了，不需要重新安裝node.js和git。

在寫部落格時，先通過 hexo new 'title'新建md檔案，寫完後，可先通過 hexo s開啓本地伺服器，在瀏覽器（位址列輸入localhost:4000`）中檢視效果，滿意後再按序執行命令部署到GitHub：

hexo clean
hexo g
hexo d

後記

此時的Hexo部落格可能比較簡（chou）約（lou），我們可以進一步地去瞭解使用Hexo的衆多主題。比如Next、yilia、butterfly都是不錯的主題，可以參考知乎-有哪些好看的Hexo主題找一個自己喜歡的主題，並去配（tiao）置（jiao）它。

如果不熟悉markdown語法的，建議去學習一下，並且找到一款自己喜歡的markdown編輯器，如Mou（Mac OS X），MarkdownPad或MarkPad（Windows），Typora等。

我個人使用的是Butterfly主題與Typora編輯器。

參考資料：

Hexo官網：https://hexo.io/zh-cn/index.html
CodeSheep：https://www.bilibili.com/video/BV1Yb411a7ty
zjufangzh：https://blog.csdn.net/sinat_37781304/article/details/82729029

利用Github建Hexo部落格

前言