前言：

Node.js+Hexo+Next+Git+GitHub，讓你幾分鐘就能建立一個部落格

網上很多資料由於版本原因，實現方法已經發生變化，這裡貼出一些新版本更方便的方法，如果失效，請聯絡我

本系列文章 所提及方案全部經過實驗證明有效，基於Node 8.9.4,Hexo 3.4.4 ,Next 5.1.4

本文首發於我的部落格，國內訪問節點

talk is cheap ,下面開始

必須準備

Git

安裝nodejs

Hexo 的安裝

建立部落格目錄，該目錄下 ：git bash

輸入命令：
npm install -g hexo-cli

建立hexo資料夾

部落格目錄下

hexo init

安裝依賴包

npm install

站點配置

必須要改動的

title: xxx  # 部落格名，站點名稱

author: xxx # 部落格作者名字

description: xxx # 對站點的描述，搜尋引擎會抓取，可以自定義

language: zh-Hans # 語言 簡體中文

theme: next  # 配置主題，後面會講到主題配置

釋出必須要增加的

deploy: # 部署相關配置
 type: git # 使用 Git 提交
 repository: [email protected]
 
.com/username/username.github.io.git# 部落格倉庫地址
 #repository: https://github.com/xxx/xxx.github.io.git 

注意：
nodejs 3.0版本以上不再使用：https://github.com/username/username.github.io.git

本地檢視預設站點

生成檔案

hexo g 或 hexo generate

啟動服務

hexo s 或 hexo server

瀏覽器輸入localhost:4000檢視

釋出，部署到github

確認站點配置檔案配置正確

deploy:
 

  type: git
  repository: https://github.com:username/username.github.io.git
  branch: master

釋出
hexo clean && hexo g && hexo d

釋出無反應且頁面為404時：

站點配置：repository: [email protected]:path/username.github.io.git，GitHub倉庫需為username.github.io

每次修改本地配置檔案後，需要hexo generate才能儲存。每次使用命令時，都要在部落格所在目錄下進行。

恭喜，部落格已經初步建立成功

釋出文章

hexo new "部落格文章檔名"

或新建md檔案放到
/source/_posts資料夾或其子資料夾中

文章要按照規定格式書寫

如：

---
title: 個人部落格搭建詳解（Windows和Mac通用版） # 這是標題
tags:   # 這裡寫的標籤會自動彙集到 tags 頁面上
- 實用 # 可配置多個標籤，注意格式
- 個人部落格
category:  # 這裡寫的分類會自動彙集到 categories 頁面上，分類可以多級
- 實用技術 # 一級分類
- 個人部落格 # 二級分類 
---

本地預覽文章

清除快取： hexo clean
生成靜態網頁： hexo g
預覽： hexo s

注意
1. 已釋出的文章發生修改， 可直接預覽，即 不執行上述3個命令,重新整理瀏覽器即可;
2. 遠端部署必須要執行上述命令
3. 修改內容一旦預覽與修改不一致，則需要clean

也可一次性執行：hexo clean && hexo g && hexo s

建立分類及標籤頁面

分類

命令：hexo new page "categories"

找到 index.md檔案編輯：

增加頁面型別：

type: “categories” #將頁面的型別設定為categories

標籤

hexo new page "tags"
index.md檔案
設定頁面型別:
type: “tags”

站點配置：啟用分類及標籤，清除快取，生成頁面，啟動服務預覽，無問題後釋出

404頁面

hexo new page "404"

編輯source/404.md即可

主題修改

下載

git clone https://github.com/iissnan/hexo-theme-next themes/next

建議：
若想多端同步修改部落格，最好先將此主題fork到自己github倉庫，再下載。否則，無法對主題進行push，此處有坑，若無此需求，無視

啟用

主題檔案拷貝到themes目錄下

• 站點配置檔案
  theme：next
  hexo generate 儲存

• 主題配置檔案
  開啟任意一項

    # Schemes
    scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    #scheme: Gemini

驗證

hexo clean && hexo g && hexo s

部落格已經初步完成。

Hexo相關命令總結

hexo clean #清除快取

hexo g  #儲存修改，生成檔案

hexo s  #啟動本地服務

hexo d  #釋出到遠端

hexo init #生成站點

hexo new page "xxx" #生成頁面

hexo new "" #生成文章

npm install --save xxx  #安裝外掛

npm unstall xxx #解除安裝外掛

上述命令將貫穿於整個部落格過程，不難，能動手儘量別複製貼上

全程在部落格目錄下進行，離不開gitbash

建站問題及錯誤

遇到問題不要慌，大膽猜測小心驗證

站點配置檔案

Site
key: value#欄位後必須空格

hexo d 釋出時

問題：ERROR Deployer not found: git

如果使用git方式進行部署需要
需要安裝對應的外掛

解決：安裝自動部署釋出工具
npm install hexo-deployer-git --save

釋出後頁面404或無反應

1. github建立的倉庫名必須為：username.github.io

2. 配置檔案：key: value必須空格

3. 3.0後 型別需為git,倉庫需為ssh形式: [email protected]:path/username.github.io.git

   參考：知乎

FATAL Cannot read property ‘replace’ of null

url不能為空

釋出時無反應，username.github.io 404

定位：
站點配置：釋出地址為https://github.com/path/username.github.io.git

解決：
3.0版本以上使用如下配置：
釋出地址修改為 [email protected]:yourname/yourname.github.io.git

git bash 提示如下表示釋出成功

發表文章標題顯示為無標題

定位：手動新建的md檔案 放於source資料夾且 檔案遵守規則

解決：
使用git bash 命令： hexo new"xxx檔名"
此時 自動在source資料夾下生成 xxx檔名的md 檔案，自帶標題，修改此標題 即可

測試標題顯示情況

實驗手動建立文章

遵守規則

---
title: 文章測試檔案
tags:
category:

---

啟動服務，驗證：成功

已有md檔案，手動新增title

遵守規則
成功

復現文章標題失敗情景

復現失敗
猜測：網頁快取或瀏覽器快取導致，待驗證

hexo g 生成靜態網頁時

問題重點：Error: Unable to call __, which is undefined or falsey

定位：
md檔案出現不識別字符：’__’

解決： 找到對應字元，轉義或刪除

404頁面直接新增到站點失敗

參考知乎

使用 hexo new page"404"，編輯index.md檔案即可

部署到GitHub後頭像顯示失敗

圖片放於
主題：./themes/next/source/images/路徑，顯示成功
站點:./source/uploads/路徑，顯示失敗

主題完整路徑：./themes/next/source/images/avatar.jpg

主題配置：avatar: /images/avatar.jpg

參考 主題配置檔案

關閉頁面評論

index.md檔案增加comments: false #關閉頁面評論顯示

文章插入程式碼塊

1. 使用 codeblock endcodeblock 標記swig模板程式碼,程式碼無法顯示
2. 使用tab 標記程式碼塊，顯示為非原始碼

改為“` 包裹程式碼 標記

可正常顯示

參考知乎