手把手教你搭建 Hex0 + GitHub 部落格

阿新 • • 發佈：2018-11-19

1.環境安裝

1.1 Git

Windows:
https://gitforwindows.org/

如果是 Mac 電腦的話，請先安裝 Xcode，因為 Xcode 自帶 Git.

1.2 Node.js

下載對應系統的 node 安裝包，一路 next 無腦安裝即可；

https://nodejs.org/en/

1.3 hexo

因為 npm 命令是 node 中的，所有需要先安裝node 然後再安裝 hexo，然後利用 npm 命令即可安裝 hexo（Windows 在任意位置點選滑鼠右鍵，選擇 Git bash，Mac 直接在終端中如下執行命令即可）

npm install -g hexo

提示本篇文章可能存在時效性，最新版本 hexo 的安裝請檢視官方文件：

https://hexo.io/docs/

報錯:

npm ERR! registry error parsing json 錯誤，可能需要設定 npm 代理，執行命令

npm config set registry http://registry.cnpmjs.org

hexo:command not found
刪除剛剛安裝的 npm 目錄，重新執行命令：

npm install -g hexo

來安裝 hexo。

2.開始搭建

首先建立 hexo 資料夾，如 HexoBlog，注意建立的資料夾一定是空的！！！進入 HexoBlog 目錄並執行以下指令(Windows 在 HexoBlog 資料夾內點選滑鼠右鍵，選擇 Git bash，Mac 直接 cd 進入)，Hexo 即會自動在資料夾生成網站所需要的所有檔案。

hexo init

安裝依賴包:

npm install

報錯：

evernotecid://785B2D88-EE4A-435D-8F13-6593AEC86C1F/appyinxiangcom/15001405/ENResource/p25846

根據錯誤提示，是系統沒有 package.json 這個檔案導致。這個檔案的作用就是管理你本地安裝的npm 包，一個 package.json 檔案可以做如下事情：

1.展示專案所依賴的npm包；
2.允許你指定一個包的版本[範圍]；
3.讓你建立起穩定，意味著你可以更好的與其他開發者共享；

此刻我們需要執行命令：

npm init

建立package.json檔案，系統會提示相關配置，也可以使用命令：

npm init -y

直接建立 package.json 檔案，這樣建立好處是必填項已經幫你填好，執行完命令後可以看到使用者路徑下多了一個 package.json 檔案。

溫馨提示：如果是 Mac 的話，執行每一步命令記得都需要加 sudo !

現在我們已經搭建起本地的 hexo 部落格了，執行以下命令，然後到瀏覽器輸入localhost:4000就能看到我們搭建的部落格了。

hexo generate
hexo server

好了，至此，我們本地部落格已經搭建起來了，這裡只能本地訪問，別人看不到的，我們搭建的部落格如果只是在本地那是沒有任何意義的，接下來，我們需要把本地的部落格部署到 GitHub 上去。

報錯：

執行 hexo server提示找不到該指令!

解決辦法：

在 Hexo 3.0 後 server 被單獨出來了，需要安裝 server，安裝的命令如下：

npm install hexo -server --save

安裝 server 後再試，問題解決~

3.GitHub 建立部落格

如果已經有 GitHub 賬號就建立一個倉庫，倉庫的名字需要和你的賬號對應，格式為: yourname.github.io 其中 yourname 就是你的 GitHub 的使用者名稱。

如果沒有 GitHub 賬號，您需要先註冊一個賬號，註冊完之後需要把你本地機器的公鑰新增到 GitHub 中去。

3.1 生成 SSH 金鑰

開啟 Git Bash 執行如下命令列：

ssh-keygen -t rsa -C "youremailaddress"

執行完會提示你輸入一些資訊，這裡我們直接一路回車即可，密碼設定為空。

3.2 檢視 SSH 金鑰

SSH 公鑰預設儲存在賬戶的主目錄下的 ~/.ssh 目錄，進入 .ssh 目錄下，命令列：

ls

檢視如果顯示 id_rsa 和 id_rsa.pub，說明已經成功生成了 SSH 公鑰。

3.3 新增 SSH 金鑰

開啟 id_rsa.pub（Windows 可用任意一個文字編輯器開啟，Mac 下用 cat 或者 vim 編輯器檢視）複製裡面的全部內容到:

https://github.com/settings/ssh

找到 Add SSH key，貼上進去並儲存～

新增 ssh 的作用是你的 GitHub 就可以和你本地的機器進行 push 和 pull 操作了，不需要輸入任何的密碼，GitHub 就已經知道你是操作的了。

4.Hexo 的使用

4.1 Hexo 的目錄結構

4.2 全域性配置檔案_config.yml

# Hexo Configuration
# Docs: http://hexo.io/docs/configuration.html
# Source: https://github.com/hexojs/hexo/
# Site #站點資訊
title:  #標題
subtitle:  #副標題
description:  #站點描述，給搜尋引擎看的
author:  #作者
email:  #電子郵箱
language: zh-CN #語言
# URL #連結格式
url:  #網址
root: / #根目錄
permalink: :year/:month/:day/:title/ #文章的連結格式
tag_dir: tags #標籤目錄
archive_dir: archives #存檔目錄
category_dir: categories #分類目錄
code_dir: downloads/code
permalink_defaults:
# Directory #目錄
source_dir: source #原始檔目錄
public_dir: public #生成的網頁檔案目錄
# Writing #寫作
new_post_name: :title.md #新文章標題
default_layout: post #預設的模板，包括 post、page、photo、draft（文章、頁面、照片、草稿）
titlecase: false #標題轉換成大寫
external_link: true #在新選項卡中開啟連線
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #語法高亮
  enable: true #是否啟用
  line_number: true #顯示行號
  tab_replace:
# Category & Tag #分類和標籤
default_category: uncategorized #預設分類
category_map:
tag_map:
# Archives
2: 開啟分頁
1: 禁用分頁
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地伺服器
port: 4000 #埠號
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期時間格式
date_format: YYYY-MM-DD #參考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分頁
per_page: 10 #每頁文章數，設定成 0 禁用分頁
pagination_dir: page
# Disqus #Disqus評論，替換為多說
disqus_shortname:
# Extensions #拓展外掛
theme: landscape-plus #主題
exclude_generator:
plugins: #外掛，例如生成 RSS 和站點地圖的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署，將 lmintlcx 改成使用者名稱
deploy:
  type: git
  repo: [email protected]:yourgithub/yourgithub.github.io.git
  branch: master

編輯 config.yml 檔案將 repo: [email protected]:yourgithub/yourgithub.github.io.git 替換為你剛建的 GitHub 倉庫的地址。

注意：
每一行配置檔案的冒號 “:” 後面有一個空格！
repo 的這種形式的是配置了SSH Key之後的，如果沒有配置則使用 https 形式的地址。

然後執行如下命令即可完成生成靜態網頁 & 部署：

hexo generate
hexo deploy

提示：每次在執行上面兩條命令之前先 hexo clean 一下，這樣可以防止快取的影響。

如上命令可以簡寫，簡寫和全寫命令對應如下：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

問題：

安裝 deployer:

npm install hexo-deployer-git --save

再重新 hexo d，如果顯示以下提示說明部署成功：

[info] Deploy done: git

然後開啟瀏覽器輸入：yourgithub.github.io

如果你看到了和剛才本地訪問一樣的網頁，說明我們的部落格已經成功的部署到了 GitHub 了。

5.繫結域名

部落格搭建完，預設的域名只能是：yourgithub.github.io 而且是不能修改的，如果要想逼格更高點，想繫結自己的域名也是可以的。

5.1 購買域名

首先你需要購買一個域名，現在基本都是到萬網或者騰訊等也可以購買域名，購買也比較簡單，這裡放出阿里萬網購買地址：

https://wanwang.aliyun.com/

5.2 配置DNS地址

這裡以萬網為例，進入萬網的管理控制檯(阿里雲手機 APP 也可以)進行修改，修改 DNS 為 DNSPod 的免費 DNS 地址：

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

5.3 域名解析

登入萬網控制檯或阿里雲手機 APP 之後，把我們新註冊的域名加進去，在域名解析列表中國新增 3 條解析記錄：

@         A         192.30.252.153
@         A         192.30.252.154
www      CNAME      yourname.github.io

其中A的兩條記錄指向的 ip 地址是 GitHub Pages 的提供的 ip，如何知道你的 GitHub 上專案的 ip？

5.4 新增 CNAME 檔案

新建一個名為 CNAME 的檔案，無後綴，內容為你的域名地址，將該檔案放入本地部落格的 source 資料夾裡面，執行下面命令並更新到 Github。

hexo clean
hexo g
hexo d

注意：域名的地址不需要新增協議頭 http:// ,直接寫域名即可，例如：www.baidu.com

然後在你的瀏覽器中輸入你的域名，是不是和之前一樣，如果一樣，說明你的域名已經繫結成功了～

搭建部落格本身的難度不大，重要的是搭建部落格這個過程，主要考驗自己的動手能力和問題解決能力，過程中你可能會遇見各種各樣的問題，然後你會一個個的解決掉這些問題，這本身就是學習的過程，希望大家也能多多動手，希望大家搭建成功～

最後晒上我的部落格地址：

http://www.x-sir.com

6.Hexo 部落格主題美化

6.1 clone 主題

Hexo官網：

https://hexo.io/themes

裡面有特別多的主題可以選擇，我在這裡選的是 next這個主題，下載主題：

cd themes
git clone https://github.com/Fechin/hexo-theme-diaspora.git diaspora

6.2 啟用主題

修改Hexo配置檔案 _config.yml 主題項設定為diaspora

...
theme: diaspora
...

6.3 更新主題

注意：請在更時主題時備份_config.yml配置檔案

cd themes/diaspora
git pull

6.4 釋出新主題

執行如下命令然後瀏覽器中輸入部落格地址檢視：

hexo clean
hexo g
hexo d

注意：更換新的主題，可能會有一些延遲！

7.Hexo 部落格細節配置

需要修改的內容可以參考網站：

https://hexo.io/zh-cn/docs/configuration

裡面對各個引數有一些詳細的解釋，我這裡修改一些部落格的標題，副標題，描述，語言等，建議大家修改一項，重新部署網站一下，因為一旦出錯，這樣就比較容易找到原因。

8.安裝外掛

安裝外掛：npm install 外掛名 –save
解除安裝外掛：npm uninstall 外掛名
更新外掛和部落格框架：npm update

執行以下命令安裝 RSS 外掛:

npm install hexo-generator-feed --save

生成站點地圖:

npm install hexo-generator-sitemap --save

生成百度站點地圖:

npm install hexo-generator-baidu-sitemap --save

SEO 優化:

npm install hexo-generator-seo-friendly-sitemap --save

HTML 壓縮:

npm install hexo-html-minifier --save

CSS 壓縮:

npm install hexo-clean-css --save

JS 壓縮:

npm install hexo-uglify --save

imagages 壓縮:

npm install hexo-imagemin --save

外掛開啟配置

根目錄下的 _config.yml，新增以下程式碼:

# RSS
feed:
type: atom
path: atom.xml
limit: 20
# sitemap
# 提交給谷歌搜素引擎，SEO優化開啟配置是一樣的
sitemap:
    path: sitemap.xml
# 提交百度搜索引擎   
baidusitemap:
    path: baidusitemap.xml 
# HTML壓縮
html_minifier:
  exclude:     
# css壓縮
clean_css:
  exclude: 
	- '*.min.css'
# js壓縮   
uglify:
  mangle: true
  output:
  compress:
  exclude: 
	- '*.min.js'
# image壓縮    
imagemin:
  enable     : true
  interlaced : false
  multipass  : false
  optimizationLevel: 2
  pngquant   : false
  progressive: false

注意：目前設定 HTML 壓縮有報錯！
圖片壓縮會導致圖片破損！
package.json 檔案中可以看安裝了哪些外掛。

9.安裝 gitalk 評論外掛

參考下面的部落格即可，寫的比較詳細：

https://segmentfault.com/a/1190000014085547

如果安裝過程中，出現問題請先戳gitalk issue 區看看有沒有解決方案：

https://github.com/gitalk/gitalk/issues