最新版hexo+github搭建個人博客

從學生時代開始就有做筆記和總結的習慣，以前的筆記都是在本子上，經常不知不覺就做了很多筆記，每次回頭看到那麼多工整漂亮（嗯，就是自戀>o<）的筆記成就感就油然而生。現在已經是信息時代了，購物也從線下搬到線上，想必筆記也應該如此。俗話說，“好記性不如爛筆頭”，希望自己搭建的這個博客能夠成爲自己以後的筆記本。

本人博客預覽：[email protected]

搭建環境：Windows10

前提條件

擁有github賬戶

已經有github賬戶，如果沒有的話，先註冊一個，參考這個鏈接GitHub註冊及使用流程，注意郵箱要確認註冊，否則無法新建repository。

踩坑提醒：

github設置公鑰以後，第一次使用時出現以下提示，記得選擇yes：

​ 這個提示出現的原因是：第一次連接遠程主機的時候，爲了避免中間人攻擊——如果有人中間截獲了你的登錄請求，並且模擬ssh服務端的話，你的密碼就會泄漏，所以ssh要詢問一下，選擇yes確認把服務端的信息加入本地的~/.ssh/known_hosts文件，下次再連接同一臺主機的時候則不會再詢問了。（參考如何用ssh key在網絡上暢通無阻）

必要軟件

• Notepad++

  Notepad++比 Windows中的Notepad（記事本）強大，除了可以用來製作一般的純文字說明文件，也十分適合編寫計算機程序代碼。良心軟件，非常好用，實力避坑！

• Haroopad/Typora

  Windows環境下比較好的Markdown文本編輯器，用於編寫博客及修改部分hexo文檔。

環境準備

node.js環境搭建

在nodejs官網下載新版的node.js環境安裝，安裝過程一路next即可，除了下圖的選擇要注意一下：

安裝完按住Win+R打開cmd，運行node -v和npm -v查看node.js和npm的版本信息，出現以下界面則說明安裝成功，否則請檢查前面的安裝過程，看是否有所遺漏：

Git環境搭建

首先下載Git安裝文件：https://git-scm.com/downloads

按照以下步驟安裝：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Ka7YWOwv-1587783326388)(https://cloudyunfan.github.io/images/Git2.jpg)]

和Node.js一樣，大部分情況都只需要保持默認設置，但是出於操作方便考慮，建議PATH選項按照下圖選擇：

上圖選擇的選項的解釋是：出於安全考慮，只有在Git Bash中才能進行Git的相關操作。按照上圖進行的選擇，將會使得Git安裝程序在系統PATH中加入Git的相關路徑，使得你可以在cmd界面下調用Git，不用打開Git Bash了。

同樣，在cmd窗口運行git --version，出現下圖的版本信息則說明安裝成功：

博客正式搭建

github設置

• 創建代碼庫

  在Repository name下填寫yourname.github.io，Description 下填可以寫一些描述，如圖：

  踩坑提醒：

  圖中的yourname必須爲github的用戶名，在這裏就是cloudyunfan，否則在這裏就無法用https://cloudyunfan.github.io直接訪問，而只能用https://cloudyunfan.github.io/yourname.github.io訪問。

• 開啓gh-pages功能

  點擊界面右側的Settings，可以看到庫的setting頁面，向下拖動，直到看見GitHub Pages

  在GitHub Page中選擇master分支：

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-lpoqwiiW-1587783326404)(https://cloudyunfan.github.io/images/master.png)]

  去到你本地想建立項目的文件夾，克隆新建的庫到本地（使用公鑰注意用SSH鏈接）

  $ git clone https://github.com/yourname/yourname.github.io
  

  進入項目文件夾，增加一個index.html文件：

  $ cd username.github.io
  $ echo "Hello World" > index.html
  

  把變更推送到github上：

  $ git add --all
  $ git commit -m "Initial commit"
  $ git push -u origin master
  

  接下來就是可以訪問https://yourname.github.io頁面啦，此頁面出現的是index.html的Hello World。如果可以正常訪問頁面，那麼Github這邊的配置則結束了。接下來講解hexo這邊的配置。

hexo配置

簡介

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。

配置

假設我們在e盤新建了一個文件夾hexo，首先在cmd或MINGW64窗口（Git Bash打開）運行一下命令：

$ cd e:/hexo
$ npm install hexo-cli -g
$ hexo init blog

blog文件夾是我們通過初始化命令hexo init自動建立的。在cmd窗口運行hexo -v，出現下圖的版本信息則說明安裝成功：

$ hexo -v
hexo: 3.8.0
hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.13.0
v8: 6.8.275.32-node.36
uv: 1.23.2
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0i
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

安裝 Hexo 完成後，執行下列命令，Hexo 將會在指定文件夾中新建所需要的文件：

$ hexo init blog
$ cd blog
$ npm install

新建完成後，blog文件夾的目錄如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

接下來，hexo生成靜態文件：

$ hexo g # 或者hexo generate
$ hexo s # 或者hexo server，可以在http://localhost:4000/ 查看

網頁運行http://localhost:4000/ 可以看到如下頁面，則說明配置成功：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-lA4opxtK-1587783326407)(https://cloudyunfan.github.io/images/hexo.png)]

到目前爲止，hexo在本地電腦的安裝配置已經全部結束，接下面講解如何將hexo和github page關聯起來。

踩坑提醒（坑有點多）：

• hexo g生成靜態文件的時候報錯

  $ hexo g
  ERROR Local hexo not found in E:\hexo\blog
  ERROR Try running: 'npm install hexo --save'
  

​ 解決方法：刪除node_modules文件夾 ，執行npm install，詳情可參考https://blog.csdn.net/xcantloadx/article/details/78296227

• hexo g報錯

  $ npm install
  npm WARN engine [email protected]: wanted: {"node":">=6.9.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
  npm WARN deprecated [email protected]: no longer maintained
  npm WARN engine [email protected]: wanted: {"node":">=6.9.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
  npm WARN engine [email protected]: wanted: {"node":">= 6.9.0 <= 11.1.0"} (current: {"node":"4.2.3","npm":"2.14.7"})
  

  仔細看警告，可以發現警告的意思是node.js環境的版本過低，這在安裝的時候沒有問題，可是後續會導致hexo命令失效的問題：

  $ hexo g
  Usage: hexo
  
  Commands:
  help Get help on a command
  init Create a new Hexo folder
  migrate Migrate your site from other system to Hexo
  version Display version information
  
  Global Options:
  --debug Display all verbose messages in the terminal
  --safe Disable all plugins and scripts
  
  For more help, you can use hexo help [command] for the detailed information
  or you can check the docs: http://zespia.tw/hexo/docs/
  

​ 解決方法：下載新版本的node.js安裝

• hexo d的時候找不到部署器（後續部署的坑）

  $ hexo d
  ERROR Deployer not found: git
  

  解決方法：需要提前安裝一個擴展npm install hexo-deployer-git --save

• 安裝webpack出現警告

  $ npm install hexo-cli -g
  C:\Users\yunfa\AppData\Roaming\npm\hexo -> C:\Users\yunfa\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\hexo-cli\node_modules\fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
  

  出現原因：fsevent是mac osx系統的，在win或者Linux下使用了 所以會有警告，忽略即可。

關聯hexo與github page

配置Git個人信息（以前配置過則不用配置）

git config --global user.name "cloudyunfan"
git config --global user.email "[email protected]"

可以通過$ git config --list查看Git配置

配置Deployment

找到路徑e:/hexo/blog/下的_config.yml文件，配置deploy如下

deploy:
  type: git
  repo: [email protected]:cloudyunfan/cloudyunfan.github.io.git #github上的倉庫SSH地址
  branch: master

寫博客

執行以下命令新建博客：

hexo new post "your title"

然後在我的電腦的目錄下e:\hexo\blog\source\ _posts 將會看到 your title.md文件，用MarkDown編輯器編輯文章，運行生成、部署命令：

hexo g   # 生成
hexo d   # 部署

等價於hexo d -g #在部署前先生成命令。部署成功後訪問https://yourname.github.io將可以看到新的文章。

主題配置

Hexo安裝過後,默認的主題是landscape，有兩個比較好的主題推薦給大家。 Yilia 主題是爲 hexo 2.4+製作的主題， 崇尚簡約優雅，以及極致的性能。NexT主題簡潔美觀，是目前Github上Star最高的Hexo主題，支持若干種不同的風格，這個主題確實很成熟，優化、配置、擴展很多都集成了，比較簡單。下面以NexT主題爲例配置主題。

配置NexT主題

安裝主題

Hexo 安裝主題的方式非常簡單，只需要將主題文件拷貝至站點目錄的 themes 目錄下， 再修改配置文件即可。

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

啓用主題

當克隆/下載完成後，注意blog文件夾中有兩個_config.yml文件，分別爲站點配置文件和主題配置文件

.
├── _config.yml # 站點配置文件
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
    ├── landscape
    └── next
         └── _config.yml # 主題配置文件

打開站點配置文件， 找到 theme 字段，並將其值更改爲 next。 啓用 NexT 主題

theme: next

NexT 主題安裝完成後我們將驗證主題是否正確啓用。在切換主題之後、驗證之前， 我們最好先用 hexo clean 來清除 hexo 的緩存。

驗證主題

啓動hexo本地站點並開啓調試模式：

hexo s –debug

使用調試模式的好處是可以將詳細消息記錄到終端和debug.log 文件，在服務啓動的過程，注意觀察終端輸出是否有異常信息，如果碰到問題，這些信息將幫助我們更好的定位錯誤。當終端輸出：

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

我們就可以使用瀏覽器訪問http://localhost:4000，如果出現以下外觀（NexT 默認的 Scheme是Muse），則說明主題安裝成功：

hexo的scheme

Scheme	樣式
Muse	默認 Scheme，這是 NexT 最初的版本，黑白主調，大量留白
Mist	Muse 的緊湊版本，整潔有序的單欄外觀
Pisces	雙欄 Scheme，小家碧玉似的清新
Gemini	與Pisces相似，陰影效果有所區別

# Schemes 註釋掉不用的Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

基礎信息設置

設置主題的語言、博客名字、站點描述、作者暱稱等信息，編輯站點配置文件

# Site
title: 爲夢想加油！！！ #博客名
subtitle: 大柔非柔，至剛無剛
description: 安而後能慮，慮而後能得 #站點描述可以是你喜歡的一句簽名:)
keywords:
author: ** #暱稱
language: zh-CN #設置語言爲簡體中文
timezone:

​ 目前NexT 支持的語言可以參考NexT官網

設定菜單內容

菜單配置包括三個部分，第一是菜單項（名稱和鏈接），第二是菜單項的顯示文本，第三是菜單項對應的圖標。 NexT 使用的是 Font Awesome 提供的圖標， Font Awesome 提供了 600+ 的圖標，可以滿足絕大的多數的場景，同時無須擔心在 Retina 屏幕下圖標模糊的問題。

編輯主題配置文件， 菜單內容的設置格式是：item name: link。其中 item name是一個名稱，這個名稱並不直接顯示在頁面上，她將用於匹配圖標以及翻譯。||運算符後面代表的是圖標名稱，如沒有設置或者設置無效的 Font Awesome 圖標名字，則會顯示問號圖標。

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  schedule: /schedule/ || calendar
  sitemap: /sitemap.xml || sitemap
  commonweal: /404/ || heartbeat
  psychology: /psych/

NexT 默認的菜單項有（斜體表示的頁面要手動創建）

鍵值	設定值	顯示文本（簡體中文）
home	home: /	主頁
archives	archives: /archives	歸檔頁
categories	categories: /categories	分類頁
tags	tags: /tags	標籤頁
about	about: /about	關於頁面
commonweal	commonweal: /404.html	公益 404

設置菜單項的顯示文本

在第一步中設置的菜單的名稱並不直接用於界面上的展示。Hexo 在生成的時候將使用 這個名稱查找對應的語言翻譯，並提取顯示文本。這些翻譯文本放置在 NexT 主題目錄下的languages/{language}.yml文件

（{language} 爲你所使用的語言）。

以簡體中文爲例，若你需要添加一個菜單項，比如 psychology。那麼就需要修改簡體中文對應的翻譯文件languages/zh-CN.yml，在 menu 字段下添加一項：

menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
  search: 搜索
  commonweal: 公益404
  psychology: 心理學

請注意鍵值（如 home）的大小寫要嚴格匹配

設置側欄

默認情況下，側欄僅在文章頁面（擁有目錄列表）時才顯示，並放置於右側位置。 可以通過修改主題配置文件中的 sidebar 字段來控制側欄的行爲。側欄的設置包括兩個部分，其一是側欄的位置， 其二是側欄顯示的時機。

設置側欄的位置，修改 sidebar.position 的值，支持的選項有：

• left - 靠左放置
• right - 靠右放置

sidebar:
  position: left

目前僅 Pisces Scheme 支持 position 配置。影響版本5.0.0及更低版本。

設置側欄顯示的時機

修改 sidebar.display 的值，支持的選項有：

• post - 默認行爲，在文章頁面（擁有目錄列表）時顯示
• always - 在所有頁面中都顯示
• hide - 在所有頁面中都隱藏（可以手動展開）
• remove - 完全移除

sidebar:
  display: post

已知側欄在 use motion: false 的情況下不會展示。 影響版本5.0.0及更低版本。

設置頭像

編輯主題配置文件， 修改字段 avatar， 值設置成頭像的鏈接地址。其中，頭像的鏈接地址可以是：

• 完整的互聯網 URI：http://example.com/avatar.png
• 站點內的地址：將頭像放置主題目錄下的 source/uploads/ （新建 uploads 目錄若不存在） 配置爲：avatar: /uploads/avatar.png或者 放置在 source/images/ 目錄下 配置爲：avatar: /images/avatar.png

avatar: 
  url: http://example.com/avatar.png

添加插件

爲了我們的博客能夠更好的被搜索引擎收錄以及被其他人訂閱，我們可以添加sitemap、baidusitemap和feed插件，切換到你本地的hexo 的blog目錄，在命令行窗口，輸入命令：

$ npm install hexo-generator-feed -save
$ npm install hexo-generator-sitemap -save
$ npm install hexo-generator-baidusitemap -save

修改站點配置文件，增加以下內容：

# Extensions
Plugins: 
- hexo-generator-feed
- hexo-generator-sitemap
- hexo-generator-baidusitemap
# Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
# sitemap
sitemap:
  path: sitemap.xml
# baidusitemap
baidusitemap:
  path: baidusitemap.xml

部署hexo d -g，就可以訪問 https://cloudyunfan.github.io/atom.xml 和 https://cloudyunfan.github.io/sitemap.xml 、 https://cloudyunfan.github.io/baidusitemap.xml 這三個文件了。

參考資料

https://blog.csdn.net/gdutxiaoxu/article/details/53576018

https://www.jianshu.com/p/1c2e9f19d14f

http://theme-next.iissnan.com