這篇文章是從我的個人博客站點(diǎn)中搬過來的罕拂，后面不打算繼續(xù)維護(hù)站點(diǎn)了，所以將之前的文章搬過來备徐。 原文寫于2017年3月12號萄传。

很久以來，都想搭建屬于自己的一個博客蜜猾。折騰了幾天秀菱，對比了 Jekyll 和 Hexo ，由于自己稍微有那么一點(diǎn) Node.js 的基礎(chǔ)蹭睡，而對于 Ruby 比較陌生衍菱，于是就選擇了 Hexo + GitHub 來搭建自己的博客小站。

Hexo簡介

Hexo 是一個快速肩豁、簡潔且高效的博客框架脊串，支持Markdown書寫文章。

前提環(huán)境

• 安裝 Node.js
  Hexo 是基于 Node.js 的清钥，所以需要先安裝 Node.js琼锋。
  到Node.js官網(wǎng)下載相應(yīng)平臺的最新版本，一路Next安裝即可祟昭。我安裝的Node.js版本是: v6.9.1 缕坎。
• 安裝git
  Windows平臺下推薦安裝最新版的Git for Windows，同樣也是一路Next安裝从橘。我安裝的Git for Windows 版本是: 2.12.0.windows.1 念赶。
• 申請GitHub賬戶
  托管自己的博客站點(diǎn)础钠，并作為站點(diǎn)服務(wù)器。
  到GitHub官網(wǎng)申請就行
• 配置ssh
  可以使用https來鏈接GitHub叉谜，但每次都要輸入用戶名和密碼旗吁，且安全性較差。推薦使用ssh方式來與GitHub鏈接停局。具體的配置可以參考我的另一篇博客很钓。

開啟Hexo之旅

注意： 涉及到Hexo的命令最好在Git Bash中操作，否則可能無法正確使用Hexo董栽。

安裝Hexo

前提環(huán)境配置好后码倦，就可以安裝 Hexo 了。

$ npm install -g hexo-cli

或者

$ npm install -g hexo

輸入 hexo 若出現(xiàn) Usage: hexo <command> 表示已經(jīng)安裝成功锭碳。

建立自己的博客站點(diǎn)

博客站點(diǎn)對應(yīng)一個文件夾袁稽，也就是你的站點(diǎn)根目錄。

$ cd <你的站點(diǎn)根目錄>      #最好是一個空的文件夾擒抛，這樣有助于你查看和分析一個Hexo站點(diǎn)的目錄結(jié)構(gòu)
$ hexo init         #此句必須在Git Bash中輸入推汽，否則沒有效果，仍然會跳轉(zhuǎn)到Git Bash下歧沪，需再次cd到<你的站點(diǎn)根目錄>來執(zhí)行 `hexo init`

看到 INFO start blogging with Hexo! 歹撒，則表明已經(jīng)在你的本地新建了一個博客站點(diǎn)。

順便提一下诊胞，此時可以執(zhí)行 hexo --version 可以查看 Hexo 版本暖夭。我的 Hexo 的版本是：3.2.2 。

站點(diǎn)目錄中幾個重要的文件和文件夾：

• _config.yml: 網(wǎng)站的 配置 信息撵孤，您可以在此配置大部分的參數(shù)迈着。
• scaffolds: 模版文件夾.當(dāng)你新建文章時，Hexo 會根據(jù)你指定的模板來建立文章早直。新建文章時寥假，若不指定模板，則使用 post.md 模板來新建文章霞扬。你可以打開具體的模板文件糕韧，根據(jù)自己的需要進(jìn)行修改。
• source：站點(diǎn)的資源文件夾喻圃。其中 _posts 文件夾存放的時你的所有博客萤彩，你也可以在 source 文件夾下增加站點(diǎn)需要用到的其他資源，如圖片文件夾或者其他 html 文件.
• themes：主題文件夾斧拍。默認(rèn)已經(jīng)下載了 landscape 主題,并配置為當(dāng)前使用的主題雀扶。

本地瀏覽

現(xiàn)在你可以在本地啟動站點(diǎn)進(jìn)行瀏覽了。

$ hexo server       #也可以簡寫為 `hexo s`,并且可以加上參數(shù) `--debug`,這樣在調(diào)試狀態(tài)下啟動站點(diǎn)，你可以看到啟動站點(diǎn)所處理的文件以及后臺處理請求的詳細(xì)信息

看到 INFO Start processing 愚墓，表明已經(jīng)成功啟動站點(diǎn)予权。接下來，我們按照提示浪册，打開瀏覽器扫腺，在瀏覽器地址欄中輸入 http://localhost:4000，你將會看到屬于自己的博客小站了村象，看著熟悉的 Hello World,是不是很激動啊笆环。不過，此時的興奮還有點(diǎn)早厚者，因?yàn)楝F(xiàn)在的博客只有你自己看得到躁劣，還無法在互聯(lián)網(wǎng)上瀏覽，也就是說你想要讓廣大博友看到你的博客库菲，你還需要將你的站點(diǎn)部署到網(wǎng)絡(luò)服務(wù)器中账忘。最簡便的方法還是將其托管到GitHub。

注意： hexo server 是會監(jiān)視文件的變化的熙宇，也就是你的博客內(nèi)容更改后闪萄，只需要在瀏覽器頁面中刷新即可看到最新的內(nèi)容。 帶參數(shù) -s 則不會監(jiān)視文件的變化奇颠，一般用于生成環(huán)境。本篇博客默認(rèn)這一步是以 hexo server 來啟動站點(diǎn)的放航。若你發(fā)現(xiàn)瀏覽器頁面刷新后看到的結(jié)果不是期望中的烈拒，則可嘗試重啟站點(diǎn)。

部署到GitHub

在你的GitHub中新建一個Repository广鳍，注意名稱為 <你的GitHub用戶名>.github.io (當(dāng)然荆几，也可以為其他名稱，只不過這樣的話赊时，GitHub將會將改Repository當(dāng)作普通的倉庫來處理吨铸，需要你新建一個名為 gh-pages的Branch, 或者在Repository的 Settings 中將 GitHub Pages 下面的 Source 設(shè)置為 master branch; 同樣后面的 _config.yml 的配置也需要更改)

回到本地配置你的站點(diǎn)根目錄下的 _config.yml 文件。

配置 deploy 項(xiàng)為：

deploy:
    type: git
    repository: git@github.com:<你的GitHub用戶名>/<你的GitHub用戶名>.github.io.git
    branch: master

注意祖秒，如果你沒有配置ssh連接GitHub的話诞吱，repository 配置為https方式。

配置好后竭缝，還需要安裝 hexo-deployer-git 包房维。

$ npm install hexo-deployer-git --save

之后即可執(zhí)行以下命令，將站點(diǎn)部署到GitHub:

$ hexo deploy       #也可以簡寫為 `hexo d`

看到提示 INFO Deploy done: git, 表明已將你的博客站點(diǎn)成功部署到GitHub抬纸。登錄你的GitHub咙俩，進(jìn)入相應(yīng)的Repository，可以看到已經(jīng)提交了很多的目錄和文件湿故。

是不是迫不及待了阿趁！在瀏覽器地址欄中輸入 <你的GitHub用戶名>.github.io ,正如意料中的一樣膜蛔，你將會看到自己的博客頁面。此時的博客就是部署在互聯(lián)網(wǎng)上的了脖阵，有網(wǎng)絡(luò)的地方均能瀏覽你的文章皂股。

站點(diǎn)配置

為了使博客更加個性化，你需要做一些配置独撇。

在進(jìn)行配置之前屑墨，先明確兩個概念。

Hexo 通過兩套配置文件來控制你的站點(diǎn)的樣式纷铣、內(nèi)容等卵史，文件名均為 _congif.yml。其中一個位于站點(diǎn)根目錄下搜立，包含的是Hexo本身的配置以躯，我們將其稱為 站點(diǎn)配置文件；另一個位于主題目錄下（<站點(diǎn)根目錄>/themes/<主題名>/, 默認(rèn)使用的主題是 landscape）,用來控制與主題相關(guān)的配置啄踊，我們將其稱為 主題配置文件忧设。

語言配置

你可能發(fā)現(xiàn)你的博客除了博文外到處都是看起來似乎很高端的英文，而你的博客主要是面對國內(nèi)用戶的颠通，那么你可以設(shè)置博客所使用的語言址晕。打開站點(diǎn)配置文件（路徑為：<站點(diǎn)根目錄>/_config.yml）

language: zh-CN

設(shè)置完成后，瀏覽器中刷新頁面顿锰，查看效果谨垃。 注意看首頁右邊部分的 ARCHIVES 已經(jīng)改為了 歸檔, ARTICLES RéCENTS 已經(jīng)改為了 最新文章。

細(xì)心的你可能會發(fā)現(xiàn)硼控，頁面最頂部左邊的菜單仍然還是英文刘陶。將其改為中文的方法是: 打開主題配置文件，更改以下參數(shù)的名字：

menu:
  Home: /
  Archives: /archives

更改后為：（當(dāng)然牢撼，你可以改為任何你喜歡的名字）

menu:
  首頁: /
  歸檔: /archives

你也可以增加其他的菜單匙隔，指向的地址可以是站點(diǎn)的某個文件或者其他任何可訪問的網(wǎng)址。如增加一個跳轉(zhuǎn)到 百度 的菜單：

menu:
    ...
    百度: http://www.baidu.com

再次刷新頁面熏版，即可看到修改后的效果纷责。

標(biāo)題、作者等配置

現(xiàn)在打開你的博客站點(diǎn)纳决，首頁你會看到一個很明顯的 Hexo, 將網(wǎng)頁拖到最下腳會看到左邊有作者的名字碰逸，你可以修改站點(diǎn)配置文件中的以下參數(shù)：

title: <網(wǎng)站標(biāo)題>
subtitle: <網(wǎng)站副標(biāo)題>
description: <網(wǎng)站描述>
author: <你的名字>  

刷新頁面，看看你的設(shè)置吧阔加！

開始撰寫你的博客

此時你的站點(diǎn)下就只有一篇 Hello World 的博文饵史，你肯定希望將自己的經(jīng)驗(yàn)、想法和心得與別人分享，那么我們開始撰寫自己的博客吧胳喷。

$ hexo new "我的文章標(biāo)題"

執(zhí)行以上命令后湃番，會在 站點(diǎn)根目錄/source/_post/下新建一篇以你輸入的標(biāo)題命名的博客，為 *.md 格式的文件吭露。使用任意文本編輯器或者專業(yè)的 Markdown 編輯器打開該文件吠撮，之后你就可以使用 Markdown 語法書寫博客了。 （如果你還不熟悉Markdown語法讲竿，建議你先花一點(diǎn)時間學(xué)習(xí)一下泥兰，常用的標(biāo)簽就幾個，比較簡單题禀。Markdown入門可以看我的另一篇博客

博客撰寫完成后鞋诗，重啟站點(diǎn)（hexo s），即可在首頁中看到你的博客迈嘹，對自己的作品滿意了就可以部署（hexo d）到GitHub削彬。這就是每一篇博客從無到有再到發(fā)布的全過程。

到此秀仲，你的博客小站基本搭建完畢了融痛。剩下的工作就是專心撰寫博客，生產(chǎn)高質(zhì)量的文字內(nèi)容神僵。

趕快把網(wǎng)址廣播給你的小伙伴雁刷，分享你的喜悅吧！保礼！

要說明的幾個問題

hexo deploy

執(zhí)行 hexo deploy 時安券，包含了兩個步驟，一個時在本地生成靜態(tài)文件氓英，另外一個步驟時將生成的靜態(tài)文件提交到你配置的GitHub中。
查看站點(diǎn)根目錄鹦筹，可以看到多了兩個文件夾：

• public: 生成的靜態(tài)文件铝阐。該文件夾已經(jīng)是靜態(tài)的，不依賴于 Hexo铐拐，也就是說你可以將該文件夾拷貝部署到任何服務(wù)器中徘键。
• .deploy_git: 為 public 文件夾的一個副本，只是該文件夾為一個連接到GitHub的Git版本庫遍蟋。

若你只想在本地生成靜態(tài)文件吹害，而不同步到GitHub，可以執(zhí)行：

$ hexo generate   #可以簡寫為 hexo g

參數(shù)配置

配置配置文件中虚青，所有的參數(shù) : 后面均需要有一個空格它呀，否則啟動站點(diǎn)時將不能讀取配置文件，從而無法瀏覽配置效果。

一定要注意參數(shù)是區(qū)分大小寫的纵穿。

語言配置

語言配置中下隧，給出的參數(shù)值 zh-CN 為 中文簡體的意思。 為什么是這個值呢谓媒？你可以打開 <你的站點(diǎn)根目錄>/themes/landscape/languages 文件夾淆院，可是看到有許多個 *.yml 文件，這些文件的名字就可以作為 language 參數(shù)的值 （后綴名.yml不需填寫）句惯， 換句話說土辩，你可以設(shè)置 zh-CN 外的其他值，只不過這樣的話，你的博客站點(diǎn)使用的將是其他國家或地區(qū)的語言渣淳。

站點(diǎn)重啟

在Git Bash 中帮辟，按下 ctrl+c 停止之前啟動的站點(diǎn)，再次執(zhí)行 hexo s 重啟站點(diǎn)辕棚。

新建博客

可以直接在 站點(diǎn)根目錄/source/_post 文件夾下新建 *.md 文件來新建博客，但推薦使用 hexo new [博客使用的模板] <博客的標(biāo)題> 命令 來新建博客邓厕。這樣做的好處是逝嚎，一方面你可以使用默認(rèn)或者自定義的模板，自動為新建的博客增加說明信息详恼；另一方面是补君，若你開啟了資源文件管理功能，新建博客后會在與 *.md 文件同級的目錄下新建一個與博客標(biāo)題同名的文件夾昧互，用于存放該博客用到的資源挽铁，如圖片等。

需要注意敞掘，使用 hexo new 來創(chuàng)建新博客時叽掘，若博客的標(biāo)題中含有空格，需要使用雙引號 " 將其包起來玖雁，而新建的 *.md 文件名稱則將空格使用 - 進(jìn)行代替更扁，資源文件夾同樣如此（若開啟的話），但打開 *.md 文件赫冬，其說明參數(shù) title 則保持原樣浓镜。

博客的說明信息

剛打開你新建的博客時，你會看到如下的內(nèi)容：

---
title: 我的第一篇博客
date: 2017-03-10 14:50:31
tags:
---

這寫內(nèi)容是根據(jù)你的模板生成的（默認(rèn)的模板為 站點(diǎn)根目錄/scaffolds/post.md）劲厌，你可以根據(jù)自己的需要進(jìn)行修改膛薛。

生成靜態(tài)文件后，這些內(nèi)容不會出現(xiàn)在你的博客上补鼻，但他們是你的本篇博客的元數(shù)據(jù)（如果你不知道這個詞的意思哄啄，請自行百度）雅任，說明了該篇博客的基本信息。你可以為博客添加如下一些說明：

- title: [博客的標(biāo)題]
- date: [創(chuàng)作時間]
- categories：[分類] 
- tags: [標(biāo)簽]

categories 和 tags 都是以Markdown列表的形式列出增淹，二者的區(qū)別是：categories是你的博客的分類椿访，默認(rèn)給出的列表其含義從上到下范圍逐漸變小，如

categories:
- 編程
- C++
- 泛型

表示的是虑润，該篇博客屬于的類別為 編程 > C++ > 泛型成玫。
而tags是你的博客的關(guān)鍵字，沒有順序之分拳喻。

博客的這些說明信息哭当，雖然不會出現(xiàn)在你的博客內(nèi)容上，但他們會出現(xiàn)在你的頁面中冗澈，如分類和標(biāo)簽均會出現(xiàn)在頁面的右邊钦勘，便于你對博客進(jìn)行管理。

博客中圖片的引用亚亲。

若你的博文中需要用到圖片彻采，則在 站點(diǎn)根目錄/source 下新建一個 images 文件夾，用于存放你的圖片捌归，然后在博客中通過 [圖片上傳失敗...(image-cb9512-1527432544395)] 的方式引用圖片肛响。

當(dāng)然，將圖片統(tǒng)一放在 iamges 文件夾惜索，可能不是最好的方法特笋，因?yàn)槟愕牟┛驮黾樱玫降膱D片會越來越多巾兆，將所有圖片都放在同一個文件夾猎物，無論是圖片命名還是對圖片的管理，都非常不方便角塑。針對這個問題蔫磨，Hexo為我們提供了另外一個簡單可行的方法：開啟資源文件管理功能。

配置站點(diǎn)文件圃伶，將參數(shù) post_asset_folder 設(shè)置為 true ：

post_asset_folder: true

這樣設(shè)置以后质帅，每一次通過 hexo new 新建博客時都會在與 *.md 文件同級的目錄下自動創(chuàng)建一個與博客標(biāo)題同名的文件夾，用于存放該博客用到的圖片等資源文件留攒。 要注意的是博客中引用圖片的時候，其相對路徑直接為圖片的名稱即可嫉嘀，不需包含圖片所在的文件夾名炼邀。如，通過

hexo new "firstblog"

來新建博客剪侮，則 _post 文件夾目錄如下：

.
|—— firstblog
|—— firstblog.md
|.

若你想在博客中加入一個 test.jpg 的圖片拭宁，則先將 test.jpg 放入 firstblog 文件夾中洛退，然后在 firstblog.md 文件中這樣引用：

[圖片上傳失敗...(image-784769-1527432544396)]

而不是：

[圖片上傳失敗...(image-7231bc-1527432544396)]    #這真是一個坑，不過如果你看一下Hexo生成的靜態(tài)文件的目錄結(jié)構(gòu)杰标，你就會明白為什么要這樣引用了兵怯。

如果你足夠細(xì)心，那么你可能會發(fā)現(xiàn)腔剂，使用這種方式引用圖片媒区，僅能在博客正文中正常顯示，而在博客站點(diǎn)的首頁中無法加載圖片掸犬。我會在另一篇博客中談這個問題袜漩。

設(shè)置文章在首頁顯示的長度

如果你不想在首頁顯示你的整篇博客，可以在你的博客文件中加入 `` 標(biāo)識湾碎，該標(biāo)識之前的內(nèi)容將會作為文章的摘要在首頁中顯示宙攻，并且點(diǎn)擊摘要下方的 Read More （你也可以在主題配置文件中將其改寫為 閱讀全文） 會跳轉(zhuǎn)到博客全文。

碰到問題怎么辦

搭建博客的過程中肯定會遇到很多問題介褥，不要著急座掘，去 Hexo 官網(wǎng)和 GitHub中 Hexo 的 Issues 看看，說不定那里就有你碰到的問題的解決方法柔滔。并且很多 Issues 中溢陪，都有一些博友安利自己的博客，你可以點(diǎn)進(jìn)去看看廊遍，學(xué)習(xí)一下別人的經(jīng)驗(yàn)嬉愧，取長補(bǔ)短。

關(guān)于主題（theme）

新建的站點(diǎn)默認(rèn)使用的主題 landscape,風(fēng)格極簡喉前，你不一定喜歡没酣。你可以到官網(wǎng)的主題中淘自己喜歡的主題，下載下來卵迂，放到 themes 文件夾中裕便，并在 站點(diǎn)配置文件 中進(jìn)行配置即可。

一種方法是：

• 在官網(wǎng)的主題頁面中见咒，定位自己喜歡的主題偿衰，記住名字

• 到 Hexo 官網(wǎng)的GitHub中，進(jìn)入頁面 /source/_data/themes.yml 點(diǎn)擊進(jìn)入, 根據(jù)主題名搜索到你需要的主題改览，復(fù)制其 link 值

• 在 Git Bash 中：

  $ cd 站點(diǎn)根目錄
  $ git clone <主題的link值> themes/<主題名>

更改站點(diǎn)配置文件：

theme: <主題名>

重啟站點(diǎn)下翎，即可看到新更換的主題了。

站點(diǎn)的進(jìn)一步改進(jìn)

按照本文一步一步構(gòu)建的站點(diǎn)宝当，還屬于比較簡陋的小屋视事，還有許多地方需要改進(jìn)，或者調(diào)整配置文件庆揩。包括但不限于：

• 頁面的樣式俐东、布局
• 網(wǎng)站的訪問量統(tǒng)計
• 文章評論
• 站內(nèi)搜索
• 社交平臺分享
• RSS 訂閱
• 音樂播放
• 文章打賞
• ...

參考：
Hexo官方網(wǎng)站