手把手教你使用Hexo快速地搭建博客

這篇文章將會一步一步的帶領著你創建屬於自己的博客。
廢話少說,立刻進入主題吧。

作者配置

Windows 10
hexo 3.1.1
Sublime Text 2

預安裝程序

Node.js
Git
Markdown編輯器,作者使用了Sumlime這個軟件
進入網頁後,選擇適合自己系統的戴點下載。

安裝Hexo

安裝好Git和Node.js後,接下來就安裝建立博客的主角了,首先打開Git Bash:

然後輸入如下命令安裝Hexo:

npm install hexo-cli -g

此處需要點耐心等待它安裝完成。

安裝完成後會顯示如下信息:

npm WARN optional dep failed, continuing [email protected]
C:\Users\ZeRo\AppData\Roaming\npm\hexo -> C:\Users\ZeRo\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
[email protected] C:\Users\ZeRo\AppData\Roaming\npm\node_modules\hexo-cli
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected])

可以使用以下指令查看Hexo的版本信息。

hexo -v

會顯示出和下面類似的信息:

hexo: 3.1.1
os: Windows_NT 10.0.10240 win32 ia32
http_parser: 2.5.0
node: 4.2.4
v8: 4.5.103.35
uv: 1.7.5
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2e

接下來便可以開始創建博客了!

Hexo的使用

創建博客

假設在D盤上有一個文件夾blog,那麼首先使用Git Bash進入目錄下,然後使用命令為我們初始化博客目錄:

cd d:/blog

hexo init

創建成功後提示以下信息:

INFO  Install dependencies
WARN  Failed to install dependencies. Please run 'npm install' manually!

看到第二行提示要運行npm install:

npm install

安裝完成後,在blog目錄下的文件結構為下:

.
├── _config.yml
├── node_modules
├── package.json
├── scaffolds
├── source
└── themes

至此,博客的整體已經建立好了。

發佈新文章

在blog目錄下,輸入:

hexo new "Hello World"

然後會提示我們新建文章的位置路徑:

INFO  Created: D:\blog\source\_posts\Hello-World.md

進入文件夾裏找到Hello-World.md文件,然後使用Markdown的編輯器打開,我們可以看得到裏面已經有內容了:

---
title: Hello World
date: 2016-01-14 20:07:02
tags:
---

在---之間的稱為文章配置,如名字所意,title為文章標題等等。
有興趣了解的人可以到Hexo的官網查看文檔,有中文的哦。

接下來我們需要在---的底下輸入內容:

---
title: Hello World
date: 2016-01-14 20:07:02
tags:
---
# 標題一
## 標題二

保存後便可以進行下一步了。

生成頁面

文章寫好後的下一步,當然就是生成頁面了。
首先在Git Bash上進入blog的目錄下,然後輸入命令,使.md檔案轉換成.html靜態頁面:

cd d:/blog

hexo generate

hexo generate也可以簡寫成hexo g

顯示的信息如下:

INFO  Files loaded in 411 ms
INFO  Generated: js/script.js
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: fancybox/[email protected]
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/[email protected]
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/blank.gif
INFO  Generated: css/style.css
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: 2016/01/14/Hello-World/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2016/index.html
INFO  Generated: archives/2016/01/index.html
INFO  Generated: index.html
INFO  28 files generated in 1.67 s

那麼博客的建立就到此為止了!什么?還沒看到效果就完成了?別急,還有最後的一步!

頁面預覽

由於Hexo是一個非常棒的工具,所以連服務器也幫我們完成了。我們只需要把Server啟動便可以了:

hexo server

hexo server可以簡寫為s

我們會看到一條提示:

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

打開你的瀏覽器,訪問http://0.0.0.0:4000/試試吧!
如果想關閉伺服器,在Git Bash下按下Ctrl+C便可以了。
祝大家能順利的創建出屬於自己的博客。