手把手教你用Hexo+Github 搭建屬於本身的博客

Android 技術人，但願讓你看到程序猿不一樣的一面，除了分享 Coding，，還有職場心得，面試經驗，學習心得，人生感悟等等。但願經過該公衆號，咱們不僅會敲代碼，咱們還會。。。。。。

閒聊

在大三的時候，一直就想搭建屬於本身的一個博客，但因爲各類緣由，最終都不了了之，剛好最近比較有空，因而就本身參照網上的教程，搭建了屬於本身的博客。

至於爲何要搭建本身的博客了？

哈哈，大概是爲了裝逼吧，同時本身搭建博客的話，樣式的選擇也比較自由，能夠本身選擇，不須要受限於各大平臺。

轉載請註明原博客地址：手把手教你用Hexo+Github 搭建屬於本身的博客

大概能夠分爲如下幾個步驟

1. 搭建環境準備（包括node.js和git環境，gitHub帳戶的配置）
2. 安裝Hexo
3. 配置Hexo
4. 怎樣將Hexo與github page 聯繫起來
5. 怎樣發佈文章
6. 主題 推薦
7. 主題Net的簡單配置
8. 添加sitemap和feed插件
9. 添加404 公益頁面

搭建環境準備

大概能夠分爲如下三步

• Node.js 的安裝和準備
• git的安裝和準備
• gitHub帳戶的配置

配置Node.js環境

1. 下載Node.js安裝文件：

• Windows Installer 32-bit
• Windows Installer 64-bit

根據本身的Windows版本選擇相應的安裝文件，要是不知道，就安裝32-bit的吧- -。 如圖所示：

保持默認設置便可，一路Next，安裝很快就結束了。 而後咱們檢查一下是否是要求的組件都安裝好了，同時按下Win和R，打開運行窗口：

Windows的運行界面

在新打開的窗口中輸入cmd，敲擊回車，打開命令行界面。（下文將直接用打開命令行來表示以上操做，記住哦~） 在打開的命令行界面中，輸入

node -v
npm -v
複製代碼

若是結果以下圖所示，則說明安裝正確，能夠進行下一步了，若是不正確，則須要回頭檢查本身的安裝過程。

配置Git環境

下載Git安裝文件：

GIt官網下載地址：

Git-2.6.3-64-bit.exe

而後就進入了Git的安裝界面，如圖：

Git安裝界面

和Node.js同樣，大部分設置都只須要保持默認，可是出於咱們操做方便考慮，建議PATH選項按照下圖選擇：

Git PATH設置

這是對上圖的解釋，不須要了解請直接跳過 Git的默認設置下，出於安全考慮，只有在Git Bash中才能進行Git的相關操做。按照上圖進行的選擇，將會使得Git安裝程序在系統PATH中加入Git的相關路徑，使得你能夠在CMD界面下調用Git，不用打開Git Bash了。 同樣的，咱們來檢查一下Git是否是安裝正確了，打開命令行，輸入：

git --version
複製代碼

若是結果以下圖所示，則說明安裝正確，能夠進行下一步了，若是不正確，則須要回頭檢查本身的安裝過程。

關於 git的下載即安裝，能夠參考個人這一篇博客： Git下載及配置環境變量

github帳戶的註冊和配置

若是已經擁有帳號，請跳過此步~

第一步: Github註冊

打開https://github.com/，在下圖的框中，分別輸入本身的用戶名，郵箱，密碼。

而後前往本身剛纔填寫的郵箱，點開Github發送給你的註冊確認信，確認註冊，結束註冊流程。

必定要確認註冊，不然沒法使用gh-pages！

第二步: 建立代碼庫

登錄以後，點擊頁面右上角的加號，選擇New repository：

新建代碼庫

進入代碼庫建立頁面：

在Repository name下填寫yourname.github.io，Description (optional)下填寫一些簡單的描述（不寫也沒有關係），如圖所示：

注意：好比個人github名稱是gdutxiaoxu ,這裏你就填 gdutxiaoxu.github.io,若是你的名字是xujun，那你就填 xujun.github.io

第三步: . 代碼庫設置

正確建立以後，你將會看到以下界面：

接下來開啓gh-pages功能，點擊界面右側的Settings，你將會打開這個庫的setting頁面，向下拖動，直到看見GitHub Pages，如圖：

Github pages

點擊Automatic page generator，Github將會自動替你建立出一個gh-pages的頁面。 若是你的配置沒有問題，那麼大約15分鐘以後，yourname.github.io這個網址就能夠正常訪問了~ 若是yourname.github.io已經能夠正常訪問了，那麼Github一側的配置已經所有結束了。

到此搭建hexo博客的相關環境配置已經完成，下面開始講解Hexo的相關配置

---

安裝Hexo

在本身認爲合適的地方建立一個文件夾，這裏我以E：/hexo 爲例子講解，首先在E盤目錄下建立Hexo文件夾，並在命令行的窗口進入到該目錄

在命令行中輸入：

npm install hexo-cli -g
複製代碼

而後你將會看到:

可能你會看到一個WARN，可是不用擔憂，這不會影響你的正常使用。 而後輸入

npm install hexo --save
複製代碼

而後你會看到命令行窗口刷了一大堆白字，下面咱們來看一看Hexo是否是已經安裝好了。 在命令行中輸入：

hexo -v
複製代碼

若是你看到了如圖文字，則說明已經安裝成功了。

---

hexo的相關配置

初始化Hexo

接着上面的操做，輸入：

hexo init
複製代碼

而後輸入：

npm install
複製代碼

以後npm將會自動安裝你須要的組件，只須要等待npm操做便可。

首次體驗Hexo

繼續操做，一樣是在命令行中，輸入：

hexo g
複製代碼

而後輸入：

hexo s
複製代碼

而後會提示：

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

在瀏覽器中打開http://localhost:4000/，你將會看到：

到目前爲止，Hexo在本地的配置已經全都結束了。

下面會講解怎樣將Hexo與github page 聯繫起來

---

怎樣將Hexo與github page 聯繫起來

大概分爲如下幾步

• 配置git我的信息
• 配置Deployment

配置Git我的信息

若是你以前已經配置好git我的信息，請跳過這一個 步驟，直接來到

一、設置Git的user name和email：(若是是第一次的話)

git config --global user.name "xujun"
git config --global user.email "gdutxiaoxu@163.com"
複製代碼

二、生成密鑰

ssh-keygen -t rsa -C "gdutxiaoxu@163.com"
複製代碼

配置Deployment

一樣在_config.yml文件中，找到Deployment，而後按照以下修改：

deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master
複製代碼

好比個人倉庫的地址是git@github.com:gdutxiaoxu/gdutxiaoxu.github.io.git，因此配置以下

deploy:
  type: git
  repo: git@github.com:gdutxiaoxu/gdutxiaoxu.github.io.git
  branch: master
複製代碼

---

寫博客、發佈文章

新建一篇博客，執行下面的命令：

hexo new post "article title"
複製代碼

這時候在個人 電腦的目錄下 F:\hexo\source\ _posts 將會看到 article title.md 文件

用MarDown編輯器打開就能夠編輯文章了。文章編輯好以後，運行生成、部署命令：

hexo g   // 生成
hexo d   // 部署
複製代碼

固然你也能夠執行下面的命令，至關於上面兩條命令的效果

hexo d -g #在部署前先生成
複製代碼

部署成功後訪問 你的地址，yourName.github.io（這裏輸入個人地址： gdutxiao.github.io ),將能夠看到生成的文章。

踩坑提醒

• 1）注意須要提早安裝一個擴展：

npm install hexo-deployer-git --save
複製代碼

若是沒有執行者行命令，將會提醒

deloyer not found:git

• 2）若是出現下面這樣的錯誤，

Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists.

則是由於沒有設置好public key所致。 在本機生成public key,不懂的能夠參考個人這一篇博客Git ssh 配置及使用

---

主題推薦

每一個不一樣的主題會須要不一樣的配置，主題配置文件在主題目錄下的_config.yml。有兩個比較好的主題推薦給你們。

Yilia

Yilia 是爲 hexo 2.4+製做的主題。 崇尚簡約優雅，以及極致的性能。

Yilia地址

NexT

個人網站就是採用這個主題，簡潔美觀。 目前Github上Star最高的Hexo主題，支持幾種不一樣的風格。 做者提供了很是完善的配置說明。

---

Net主題的配置

在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml。 其中，一份位於站點根目錄下，主要包含 Hexo 自己的配置；另外一份位於主題目錄下，這份配置由主題做者提供，主要用於配置主題相關的選項。

爲了描述方便，在如下說明中，將前者稱爲 站點配置文件， 後者稱爲 主題配置文件。

好比個人電腦下的 F:\hexo 目錄下的成爲 站點配置文件，F:\hexo\themes\next 目錄下的成爲主題配置文件。

1）安裝 NexT

Hexo 安裝主題的方式很是簡單，只須要將主題文件拷貝至站點目錄的 themes 目錄下， 而後修改下配置文件便可。具體到 NexT 來講，安裝步驟以下。

下載主題

若是你熟悉 Git， 建議你使用 克隆最新版本 的方式，以後的更新能夠經過 git pull 來快速更新， 而不用再次下載壓縮包替換。

克隆最新版本 下載穩定版本 在終端窗口下，定位到 Hexo 站點目錄下。使用 Git checkout 代碼：

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next
複製代碼

2）啓用主題

與全部 Hexo 主題啓用的模式同樣。 當 克隆/下載 完成後，打開 站點配置文件， 找到 theme 字段，並將其值更改成 next。

啓用 NexT 主題

theme: next
複製代碼

到此，NexT 主題安裝完成。下一步咱們將驗證主題是否正確啓用。在切換主題以後、驗證以前， 咱們最好使用 hexo clean 來清除 Hexo 的緩存。

3）驗證主題

首先啓動 Hexo 本地站點，並開啓調試模式（即加上 --debug），整個命令是 hexo s --debug。 在服務啓動的過程，注意觀察命令行輸出是否有任何異常信息，若是你碰到問題，這些信息將幫助他人更好的定位錯誤。 當命令行輸出中提示出：

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

此時便可使用瀏覽器訪問 http://localhost:4000 ，檢查站點是否正確運行。

當你看到站點的外觀與下圖所示相似時即說明你已成功安裝 NexT 主題。這是 NexT 默認的 Scheme —— Muse

如今，你已經成功安裝並啓用了 NexT 主題。下一步咱們將要更改一些主題的設定，包括個性化以及集成第三方服務。

4）主題設定

選擇 Scheme

Scheme 是 NexT 提供的一種特性，藉助於 Scheme，NexT 爲你提供多種不一樣的外觀。同時，幾乎全部的配置均可以 在 Scheme 之間共用。目前 NexT 支持三種 Scheme，他們是：

Muse - 默認 Scheme，這是 NexT 最初的版本，黑白主調，大量留白
Mist - Muse 的緊湊版本，整潔有序的單欄外觀
Pisces - 雙欄 Scheme，小家碧玉似的清新
Scheme 的切換經過更改 主題配置文件，搜索 scheme 關鍵字。 你會看到有三行 scheme 的配置，將你需用啓用的 scheme 前面
複製代碼

註釋 # 便可。

選擇 Pisce Scheme

#scheme: Muse
#scheme: Mist
scheme: Pisces
複製代碼

5）設置語言

編輯 站點配置文件， 將 language 設置成你所須要的語言。建議明確設置你所須要的語言，例如選用簡體中文，配置以下：

language: zh-Hans
複製代碼

目前 NexT 支持的語言如如下表格所示：

語言	代碼	設定實例
English	en	language: en
簡體中文	zh-Hans	language: zh-Hans
Français	fr-FR	language: fr-FR
Português	pt	language: pt
繁體中文	zh-hk 或者 zh-tw	language: zh-hk
Русский язык	ru	language: ru
Deutsch	de	language: de
日本語	ja	language: ja
Indonesian	id	language: id

6）設置 菜單

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

編輯主題配置文件，修改如下內容：

設定菜單內容，對應的字段是 menu。 菜單內容的設置格式是：item name: link。其中 item name 是一個名稱，這個名稱並不直接顯示在頁面上，她將用於匹配圖標以及翻譯。

菜單示例配置

menu:
  home: /
  archives: /archives
  #about: /about
  #categories: /categories
  tags: /tags
  #commonweal: /404.html
複製代碼

若你的站點運行在子目錄中，請將連接前綴的 / 去掉

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} 爲你所使用的語言）。

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

menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
  search: 搜索
  commonweal: 公益404
  something: 有料
複製代碼

設定菜單項的圖標，對應的字段是 menu_icons。 此設定格式是 item name: icon name，其中 item name 與上一步所配置的菜單名字對應，icon name 是 Font Awesome 圖標的 名字。而 enable 可用於控制是否顯示圖標，你能夠設置成 false 來去掉圖標。

菜單圖標配置示例

menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat
複製代碼

在菜單圖標開啓的狀況下，若是菜單項與菜單未匹配（沒有設置或者無效的 Font Awesome 圖標名字） 的狀況下，NexT 將會使用 做爲圖標。

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

7）** 側欄**

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

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

left - 靠左放置
right - 靠右放置
複製代碼

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

sidebar:
  position: left
複製代碼

設置側欄顯示的時機，修改 sidebar.display 的值，支持的選項有：

post - 默認行爲，在文章頁面（擁有目錄列表）時顯示
always - 在全部頁面中都顯示
hide - 在全部頁面中都隱藏（能夠手動展開）
remove - 徹底移除
sidebar:
  display: post
複製代碼

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

8）設置 頭像

編輯 站點配置文件， 新增字段 avatar， 值設置成頭像的連接地址。其中，頭像的連接地址能夠是：

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

頭像設置示例

avatar: http://example.com/avtar.png
複製代碼

9)設置 做者暱稱

編輯 站點配置文件， 設置 author 爲你的暱稱。

10)站點描述

編輯 站點配置文件， 設置

字段爲你的站點描述。站點描述能夠是你喜歡的一句簽名:)

net主題的官方文檔地址

---

添加插件

添加sitemap和feed插件

切換到你本地的hexo 目錄CIA，在命令行窗口，屬兔如下命令

npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save
複製代碼

修改_config.yml，增長如下內容

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
#sitemap
sitemap:
  path: sitemap.xml
複製代碼

再執行如下命令，部署服務端

hexo d -g
複製代碼

配完以後，就能夠訪問 gdutxiaoxu.github.io/atom.xml 和 gdutxiaoxu.github.io/sitemap.xml ，發現這兩個文件已經成功生成了。

---

添加404 頁面

GitHub Pages有提供製做404頁面的指引：Custom 404 Pages 直接在根目錄下建立本身的404.html或者404.md就能夠。可是自定義404頁面僅對綁定頂級域名的項目才起做用，GitHub默認分配的二級域名是不起做用的，使用hexo server在本機調試也是不起做用的。

推薦使用騰訊公益404

個人404頁面配置以下

<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="https://www.qq.com/404/search_children.js"
        charset="utf-8" homePageUrl="gdutxiaoxu.github.io"
        homePageName="回到個人主頁">
</script>

</body>
</html>
複製代碼

---

參考博客

Hexo主頁

史上最詳細的Hexo博客搭建圖文教程

個人git系列參考教程

• Git下載及配置環境變量
• Git 命令行教程及實例教程
• Git ssh 配置及使用
• git ssh 配置多個帳戶
• Git config 使用說明
• Git 配置別名 —— 讓命令變得更簡單
• git 設置 mergetool，difftool 爲 BeyondCompare
• git 補丁 - diff 和 patch 使用詳解

轉載請註明原博客地址：手把手教你用Hexo+Github 搭建屬於本身的博客

歡迎關注個人微信公衆號，掃一掃下方二維碼或搜索微信號 stormjun，便可關注。 目前專一於 Android 開發，主要分享 Android開發相關知識和一些相關的優秀文章，包括我的總結，職場經驗等。