【Hexo搭建獨(dú)立博客全紀(jì)錄】（三）使用Hexo搭建博客

tags: Hexo；Github
categories: 前端工具
歡迎點(diǎn)擊我的博客原文

每周一篇的頻率更新博客，今天【Hexo搭建獨(dú)立博客全紀(jì)錄】系列終于進(jìn)入正題：使用Hexo搭建博客，我搭建博客是跟著網(wǎng)上的教程一步一步做的，在此基礎(chǔ)上結(jié)合官方文檔，構(gòu)成本文的內(nèi)容。

參考資料：

前言

使用github pages服務(wù)搭建博客的好處有：

  1. 全是靜態(tài)文件，訪問速度快；
  2. 免費(fèi)方便，不用花一分錢就可以搭建一個自由的個人博客，不需要服務(wù)器不需要后臺；
  3. 可以隨意綁定自己的域名，不仔細(xì)看的話根本看不出來你的網(wǎng)站是基于github的；
  4. 數(shù)據(jù)絕對安全，基于github的版本管理，想恢復(fù)到哪個歷史版本都行；
  5. 博客內(nèi)容可以輕松打包、轉(zhuǎn)移、發(fā)布到其它平臺；
  6. 等等；

準(zhǔn)備工作

在開始一切之前，你必須已經(jīng)：

本文所使用的環(huán)境：

  • Windows7
  • node.js@6.9.4 —— git命令行輸入node -v
  • git@2.8.1.windows.1 —— git命令行輸入git version
  • hexo@3.3.1 —— git命令行輸入hexo -v或hexo version

搭建github博客

創(chuàng)建倉庫

新建一個名為你的用戶名.github.io的倉庫，比如說，如果你的github用戶名是test，那么你就新建test.github.io的倉庫（必須是你的用戶名，其它名稱無效），將來你的網(wǎng)站訪問地址就是 http://test.github.io 了，是不是很方便？

由此可見，每一個github賬戶最多只能創(chuàng)建一個這樣可以直接使用域名訪問的倉庫。

幾個注意的地方：

  1. 注冊的郵箱一定要驗證，否則不會成功；
  2. 倉庫名字必須是：username.github.io，其中username是你的用戶名；

創(chuàng)建成功后，以后你的博客所有代碼都是放在這個倉庫里啦。

配置SSH key（配置過的請?zhí)^）

這一步驟在【Hexo搭建獨(dú)立博客全紀(jì)錄】（一）使用Git和Github4.1和4.2中也已講過，如果在前面已經(jīng)配置過SSH key，則可以跳過此步驟。

為什么要配置這個呢？因為你提交代碼肯定要擁有你的github權(quán)限才可以，但是直接使用用戶名和密碼太不安全了，所以我們使用ssh key來解決本地和服務(wù)器的連接問題。

創(chuàng)建SSH Key

查看是否已經(jīng)有ssh密鑰：
打開用戶主目錄"C:\Users\Administrator.hp-PC"，
看看有沒有.ssh目錄。

  • 如果有，再看看這個目錄下有沒有id_rsa和id_rsa.pub這兩個文件。如果有，可以直接跳至下一小節(jié)“Github中添加SSH Key”
  • 如果已經(jīng)有ssh密鑰，想要重新生成ssh密鑰，需要清理原有ssh密鑰：
$ mkdir key_backup
$ cp id_rsa* key_backup
$ rm id_rsa*
  • 如果沒有，打開命令行，輸入命令ssh-keygen -t rsa –C “youremail@example.com”。此處的郵箱地址，你可以輸入自己的郵箱地址。在回車中會提示你輸入一個密碼，這個密碼會在你提交項目時使用，如果為空的話提交項目時則不用輸入。這個設(shè)置是防止別人往你的項目里提交內(nèi)容。

由于我本地此前運(yùn)行過一次，所以本地有，如下所示：

id_rsa是私鑰，不能泄露出去，id_rsa.pub是公鑰，可以放心地告訴任何人。由于之前使用Github客戶端，因此還有g(shù)ithub_rsa和github_rsa.pub兩個文件。known_hosts文件如果沒有暫時不管。

驗證是否連接成功，連接成功顯示Hi baoyuzhang! You've successfully authenticated, but GitHub does not provide shell access.。如下：

Github中添加SSH Key

登錄github，點(diǎn)擊個人頭像打開"settings"，再打開"SSH and GPG keys"頁面，然后點(diǎn)擊"New SSH Key"，填上任意title，在"Key"文本框里黏貼id_rsa.pub文件的內(nèi)容，點(diǎn)擊 Add Key，你就應(yīng)該可以看到已經(jīng)添加的key。如下：


使用hexo博客框架

Hexo官方使用文檔：https://hexo.io/zh-cn/docs/

本文使用的命令和官方文檔不太一樣，但意思相同，達(dá)到的效果也相同。初學(xué)者建議跟著本文一步一不做。

hexo簡介

a.hexo是什么

Hexo是一個簡單、快速、強(qiáng)大的基于 Github Pages 的博客框架，支持Markdown格式，有眾多優(yōu)秀插件和主題。

github: https://github.com/hexojs/hexo

Hexo中文官網(wǎng)： https://hexo.io/zh-cn/

b.hexo原理

由于github pages存放的都是靜態(tài)文件，博客存放的不只是文章內(nèi)容，還有文章列表、分類、標(biāo)簽、翻頁等動態(tài)內(nèi)容，假如每次寫完一篇文章都要手動更新博文目錄和相關(guān)鏈接信息，相信誰都會瘋掉，所以hexo所做的就是將這些md文件都放在本地，每次寫完文章后調(diào)用寫好的命令來批量完成相關(guān)頁面的生成，然后再將有改動的頁面提交到github。

安裝

a.注意事項

安裝之前先來說幾個注意事項：

  1. 很多命令既可以用Windows的cmd來完成，也可以使用git bash來完成，但是部分命令會有一些問題，為避免不必要的問題，建議全部使用git bash來執(zhí)行；
  2. hexo不同版本差別比較大，網(wǎng)上很多文章的配置信息都是基于2.x的，所以注意不要被誤導(dǎo)；
  3. hexo有2種_config.yml文件，一個是根目錄下的全局的_config.yml，一個是各個theme下的_config.yml。為了描述方便，在以下說明中，將前者稱為 站點(diǎn)配置文件， 后者稱為 主題配置文件。

b.安裝Hexo

在git bush輸入以下命令：

$ npm install -g hexo

初始化

a.初始化

在電腦的某個地方新建一個名為hexo的文件夾（名字可以隨便取），比如我的是E:\web\github\test\hexo，由于這個文件夾將來就作為你存放博客代碼的地方，所以最好不要隨便放。

hexo會自動下載一些文件到這個目錄，包括node_modules，目錄結(jié)構(gòu)如下圖：

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

b.生成靜態(tài)文件

執(zhí)行以上命令之后，hexo就會在public文件夾生成相關(guān)html文件，這些文件將來都是要提交到github上你的用戶名.github.io的倉庫上去的：

c.本地預(yù)覽

hexo s是開啟本地預(yù)覽服務(wù)，打開瀏覽器訪問 http://localhost:4000 即可看到內(nèi)容，Ctrl+C停止本地預(yù)覽。

若瀏覽器一直在轉(zhuǎn)圈但是就是加載不出來，或執(zhí)行hexo s命令出現(xiàn)以下提示：

這一般情況下是因為4000端口占用的緣故，因為4000這個端口太常見了，解決端口沖突問題請參考這篇文章：

http://blog.liuxianan.com/windows-port-bind.html

第一次初始化的時候hexo已經(jīng)幫我們寫了一篇名為 Hello World 的文章，默認(rèn)的主題比較丑，打開時就是這個樣子：

更改主題

既然默認(rèn)主題很丑，那我們別的不做，首先來替換一個好看點(diǎn)的主題。

這里我推薦使用使用量排名第一的主題NexT。更換NexT主題可以參考NexT 官方使用文檔，點(diǎn)擊開始使用一步一步操作。下面做一個示范，并且下周寫的優(yōu)化設(shè)置的文章，也是基于NexT主題，可以跟著我一步一步來做。

a.下載主題

b.啟用主題

打開根目錄下站點(diǎn)配置文件_config.yml， 找到 theme 字段，并將其值更改為 next。

到此，NexT 主題安裝完成。下一步我們將驗證主題是否正確啟用。

c.驗證主題

在切換主題之后、驗證之前， 我們最好使用 hexo clean 來清除 Hexo 的緩存，以免出現(xiàn)一些莫名其妙的問題。然后重新執(zhí)行hexo g來重新生成。

![Uploading 2017-05-12_165136_400081.png . . .]

使用hexo s本地預(yù)覽，如果你的博客變?yōu)橄聢D的樣子，則安裝NexT主題成功：

上傳到github

a.配置站點(diǎn)配置文件

打開根目錄下站點(diǎn)配置文件_config.yml，配置有關(guān)deploy的部分：

b.安裝插件

此時，直接使用hexo d部署到github，將出現(xiàn)如下錯誤：

這是因為需要安裝如下插件：

c.部署到github

其它命令不確定，hexo d部署這個命令一定要用git bash，否則會提示Permission denied (publickey).

中間好長的安裝過程，然后安裝成功：

這時，打開https://你的用戶名.github.io/，出現(xiàn)下圖，則表示部署到github成功：

再打開github倉庫，已經(jīng)有了內(nèi)容：

基本配置

我們自己的博客出現(xiàn)Hello World并不是我們想要的，那么我們來進(jìn)一步配置，將它真正我們自己的博客。

打開根目錄下站點(diǎn)配置文件_config.yml，設(shè)置如下內(nèi)容：

參數(shù) 描述
title 網(wǎng)站標(biāo)題
subtitle 網(wǎng)站副標(biāo)題
description 網(wǎng)站描述
author 您的名字
language 網(wǎng)站使用的語言
timezone 網(wǎng)站時區(qū)。Hexo 默認(rèn)使用您電腦的時區(qū)。

其中，description主要用于SEO，告訴搜索引擎一個關(guān)于您站點(diǎn)的簡單描述，通常建議在其中包含您網(wǎng)站的關(guān)鍵詞。author參數(shù)用于主題顯示文章的作者。

配置完成后，重新部署，會發(fā)現(xiàn)如下變化：

2017-05-12_173441.png

但文章內(nèi)容還不是我們自己的呀，下面來寫我們自己的博客。

寫博客

新建文章

執(zhí)行hexo new '文章名'，hexo會幫我們在..\hexo\source\_posts下生成相關(guān)md文件：

打開這個文件就可以開始寫博客了，默認(rèn)生成如下內(nèi)容：

當(dāng)然你也可以直接自己新建md文件，用這個命令的好處是幫我們自動生成了時間。一般完整格式如下：

---
title: postName #文章頁面上的顯示名稱，一般是中文
date: 2013-12-02 15:30:16 #文章生成時間，一般不改，當(dāng)然也可以任意修改
categories: 默認(rèn)分類 #分類
tags: [tag1,tag2,tag3] #文章標(biāo)簽，可空，多標(biāo)簽請用格式，注意:后面有個空格
description: 附加一段文章摘要，字?jǐn)?shù)最好在140字以內(nèi)，會出現(xiàn)在meta的description里面
---

以下是正文

刪除hello-world.md，同時刪除public文件夾下的hello-world文件夾：

將編寫好的文章保存，重新生成和部署就可以啦！

新建頁面

假如我新建一個名字為about的頁面：

在source文件夾下，將生成about文件夾：

部署后將在public文件夾生成一個新的html頁面：hexo\public\about\index.html，通過訪問https://用戶名.github.io/about/訪問這個頁面：

你可以通過編輯index.html，添加自己的簡歷等其他你想加入的內(nèi)容。但注意，它是新建了一個html頁面，不是文章，不會出現(xiàn)在博文目錄。

至此，博客的基本功能已經(jīng)全部實(shí)現(xiàn)，下面的高級配置，讓你更加方便快捷的寫博客！

高級配置

現(xiàn)在，Hexo根目錄結(jié)構(gòu)如下圖：

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

下面介紹的幾個是會經(jīng)常用到的：

_config.yml

網(wǎng)站配置信息，也就是本文所稱的站點(diǎn)配置文件，可以在此配置大部分的參數(shù)。基本配置在前面基本已經(jīng)設(shè)置過了。

scaffolds

模版文件夾。新建文章時，Hexo 會根據(jù) scaffold 來建立文件。

Hexo的模板是指新建的markdown文件中默認(rèn)填充的內(nèi)容。例如，在使用hexo new 文章名時，默認(rèn)生成的md文件會包含如下內(nèi)容：

默認(rèn)內(nèi)容是哪里來的呢？就在scaffold/post.md中保存：

假如對每篇博客我都需要添加分類categories，每次都手動添加太麻煩，我希望每次默認(rèn)生成都有categories:，那么就可以在scaffold/post.md中添加：

保存后，每次新建一篇文章時都會包含post.md中的內(nèi)容。

當(dāng)然，你也可以在scaffolds文件夾下創(chuàng)建自己的博客模板，我創(chuàng)建一個名為blog的模板：

通過如下命令調(diào)用我創(chuàng)建的blog模板新建文章：

在_posts中生成md文件：

public

該文件夾中的內(nèi)容將被最終push到github倉庫中。

source

資源文件夾是存放用戶資源的地方。除_posts 文件夾之外，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析并放到 public 文件夾，而其他文件（如剛剛生成的about文件夾）會被拷貝到 public 文件夾。

為github倉庫添加readme

既然 source 文件夾中的內(nèi)容將全部被推送到 public 文件夾，public 文件夾中的內(nèi)容又將被最終push到github倉庫中，那么如果我們想要為github倉庫添加readme.md，只要在 source 文件夾中創(chuàng)建就好了：

部署到github，就有readme了，但我們發(fā)現(xiàn)，README.md已經(jīng)被解析為README.html，顯示的全是html代碼，并不是我們想要的文檔格式的內(nèi)容：

為了解決這個問題，我們回到source文件夾，將README.md重命名為README.MDOWN，再部署到github：

source文件夾中，.md會被解析為html，并放到 public 文件夾被push到github，但.MDWN不會被解析。

themes

主題文件夾，下載的主題都保存在此文件夾下。Hexo 會根據(jù)主題來生成靜態(tài)頁面。

最終效果

點(diǎn)擊查看最終效果

搭的這個博客只是為了寫這篇文章，我真正的博客在這里喲！

Hexo常用命令

常見命令

hexo new "postName" #新建文章
hexo generate #生成靜態(tài)頁面至public目錄
hexo server #開啟預(yù)覽訪問端口（默認(rèn)端口4000，'ctrl + c'關(guān)閉server）
hexo deploy #部署到GitHub
hexo help  # 查看幫助
hexo version  #查看Hexo的版本

縮寫：

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

組合命令：

hexo s -g #生成并本地預(yù)覽
hexo d -g #生成并上傳
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容