手把手教你用Hexo+Github 搭建屬於自己的部落格
歡迎關注我的微信公眾號,掃一掃下方二維碼或搜尋微訊號 stormjun,即可關注。 目前專注於 Android 開發,主要分享 Android開發相關知識和一些相關的優秀文章,包括個人總結,職場經驗等。
閒聊
在大三的時候,一直就想搭建屬於自己的一個部落格,但由於各種原因,最終都不了了之,恰好最近比較有空,於是就自己參照網上的教程,搭建了屬於自己的部落格。
至於為什麼要搭建自己的部落格了?
哈哈,大概是為了裝逼吧,同時自己搭建部落格的話,樣式的選擇也比較自由,可以自己選擇,不需要受限於各大平臺。
大概可以分為以下幾個步驟
- 搭建環境準備(包括node.js和git環境,gitHub賬戶的配置)
- 安裝Hexo
- 配置Hexo
- 怎樣將Hexo與github page 聯絡起來
- 怎樣釋出文章
- 主題 推薦
- 主題Net的簡單配置
- 新增sitemap和feed外掛
- 新增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。 在服務啟動的過程,注意觀察命令列輸出是否有任何異常資訊,如果你碰到問題,這些資訊將幫助他人更好的定位錯誤。 當命令列輸出中提示出:
此時即可使用瀏覽器訪問 http://localhost:4000 ,檢查站點是否正確執行。 當你看到站點的外觀與下圖所示類似時即說明你已成功安裝 NexT 主題。這是 NexT 預設的 Scheme —— Muse ![](http://ww4.sinaimg.cn/large/9fe4afa0gw1fan5zwhgvij20lf0bxaaq.jpg) 現在,你已經成功安裝並啟用了 NexT 主題。下一步我們將要更改一些主題的設定,包括個性化以及整合第三方服務。 4)**主題設定** 選擇 Scheme Scheme 是 NexT 提供的一種特性,藉助於 Scheme,NexT 為你提供多種不同的外觀。同時,幾乎所有的配置都可以 在 Scheme 之間共用。目前 NexT 支援三種 Scheme,他們是:INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
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 |
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 |
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開發相關知識和一些相關的優秀文章,包括個人總結,職場經驗等。