1. 程式人生 > >手把手教你用Hexo+Github 搭建屬於自己的部落格

手把手教你用Hexo+Github 搭建屬於自己的部落格

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

閒聊

在大三的時候,一直就想搭建屬於自己的一個部落格,但由於各種原因,最終都不了了之,恰好最近比較有空,於是就自己參照網上的教程,搭建了屬於自己的部落格。

至於為什麼要搭建自己的部落格了?

哈哈,大概是為了裝逼吧,同時自己搭建部落格的話,樣式的選擇也比較自由,可以自己選擇,不需要受限於各大平臺。

大概可以分為以下幾個步驟

  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環境

根據自己的Windows版本選擇相應的安裝檔案,要是不知道,就安裝32-bit的吧- -。 如圖所示:

保持預設設定即可,一路Next,安裝很快就結束了。 然後我們檢查一下是不是要求的元件都安裝好了,同時按下Win和R,開啟執行視窗:

Windows的執行介面

在新開啟的視窗中輸入cmd,敲擊回車,開啟命令列介面。(下文將直接用開啟命令列來表示以上操作,記住哦~) 在開啟的命令列介面中,輸入

node -v
npm -v

如果結果如下圖所示,則說明安裝正確,可以進行下一步了,如果不正確,則需要回頭檢查自己的安裝過程。

配置Git環境

下載Git安裝檔案:

然後就進入了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註冊

然後前往自己剛才填寫的郵箱,點開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.

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

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

怎樣將Hexo與github page 聯絡起來

大概分為以下幾步

  • 配置git個人資訊
  • 配置Deployment

配置Git個人資訊

如果你之前已經配置好git個人資訊,請跳過這一個 步驟,直接來到

1、設定Git的user name和email:(如果是第一次的話)

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

2、生成金鑰

 ssh-keygen -t rsa -C "[email protected]"

配置Deployment

同樣在_config.yml檔案中,找到Deployment,然後按照如下修改:

deploy:
  type: git
  repo: [email protected].com:yourname/yourname.github.io.git
  branch: master

比如我的倉庫的地址是[email protected]:gdutxiaoxu/gdutxiaoxu.github.io.git,所以配置如下

deploy:
  type: git
  repo: [email protected].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 #在部署前先生成

踩坑提醒

  • 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+製作的主題。 崇尚簡約優雅,以及極致的效能。 ![](http://ww1.sinaimg.cn/large/9fe4afa0gw1fan5rjp5buj20rx0fugqf.jpg) [Yilia地址](https://litten.github.io/) **NexT** 我的網站就是採用這個主題,簡潔美觀。 目前Github上Star最高的Hexo主題,支援幾種不同的風格。 作者提供了非常完善的配置說明。 ![](http://ww2.sinaimg.cn/large/9fe4afa0gw1fan5pvehngj20rs0h6dj6.jpg)

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 ![](http://ww4.sinaimg.cn/large/9fe4afa0gw1fan5zwhgvij20lf0bxaaq.jpg) 現在,你已經成功安裝並啟用了 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, 值設定成頭像的連結地址。其中,頭像的連結地址可以是:
地址
站點內的地址 將頭像放置主題目錄下的 source/uploads/ (新建uploads目錄若不存在) 配置為:avatar: /uploads/avatar.png 或者 放置在 source/images/ 目錄下 , 配置為:avatar: /images/avatar.png
頭像設定示例
avatar: http://example.com/avtar.png
9)**設定 作者暱稱** 編輯 站點配置檔案, 設定 author 為你的暱稱。 10)**站點描述** 編輯 站點配置檔案, 設定 欄位為你的站點描述。站點描述可以是你喜歡的一句簽名:) [net主題的官方文件地址](http://theme-next.iissnan.com/getting-started.html)

新增外掛

新增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
配完之後,就可以訪問 https://gdutxiaoxu.github.io/atom.xml 和 https://gdutxiaoxu.github.io/sitemap.xml ,發現這兩個檔案已經成功生成了。

新增404 頁面

GitHub Pages有提供製作404頁面的指引:[Custom 404 Pages](https://help.github.com/articles/creating-a-custom-404-page-for-your-github-pages-site/) 直接在根目錄下建立自己的404.html或者404.md就可以。但是自定義404頁面僅對繫結頂級域名的專案才起作用,GitHub預設分配的二級域名是不起作用的,使用hexo server在本機除錯也是不起作用的。 推薦使用[騰訊公益404](http://www.qq.com/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>

參考部落格

我的git系列參考教程

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