這篇文章將會一步一步的帶領著你創建屬於自己的博客。
廢話少說,立刻進入主題吧。
作者配置
- Windows 10
- hexo 3.1.1
- Sublime Text 2
預安裝程序
安裝Hexo
安裝好Git和Node.js後,接下來就安裝建立博客的主角了,首先打開Git Bash:
然後輸入如下命令安裝Hexo:
npm install hexo-cli -g
此處需要點耐心等待它安裝完成。
安裝完成後會顯示如下信息:
npm WARN optional dep failed, continuing fsevents@1.0.6
C:\Users\ZeRo\AppData\Roaming\npm\hexo -> C:\Users\ZeRo\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo
hexo-cli@0.2.0 C:\Users\ZeRo\AppData\Roaming\npm\node_modules\hexo-cli
├── abbrev@1.0.7
├── minimist@1.2.0
├── bluebird@3.1.1
├── tildify@1.1.2 (os-homedir@1.0.1)
├── chalk@1.1.1 (escape-string-regexp@1.0.4, supports-color@2.0.0, ansi-styles@2.1.0, strip-ansi@3.0.0, has-ansi@2.0.0)
├── hexo-util@0.5.1 (html-entities@1.2.0, highlight.js@9.1.0, camel-case@1.2.2)
└── hexo-fs@0.1.5 (escape-string-regexp@1.0.4, graceful-fs@4.1.2, chokidar@1.4.2)
可以使用以下指令查看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/fancybox_sprite@2x.png
INFO Generated: fancybox/fancybox_sprite.png
INFO Generated: fancybox/fancybox_overlay.png
INFO Generated: fancybox/fancybox_loading@2x.gif
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便可以了。
祝大家能順利的創建出屬於自己的博客。
