一、安裝hexo
1.安裝
$ npm install hexo-cli -g? 制定一個目錄? 默認會安裝在執(zhí)行命令的對應的文件夾
$ hexo init blog
$ cd blog
$ npm install
2.Demo生成以及預覽
執(zhí)行命令hexo generate生產(chǎn)靜態(tài)頁面。 執(zhí)行命令hexo server啟動本地預覽服務。
然后在瀏覽器中訪問http://localhost:4000/,此時,已經(jīng)看到了一個漂亮的博客。
二、站點配置文件說明與修改
站點配置文件是 your-hexo-site 目錄下的 _config.yml 文件,配置文件中基本都有配置項的說明或者參考官方配置說明。以下說幾個常用的配置:
基本配置
title: hexo ? ? ? ? #博客的標題
description:? ? ? ? ? ? #簡介
author: matt ? #作者
language: zh-Hans? ? ? #語言,該設置使用的是next主題的簡體中文
timezone: Asia/Shanghai #時區(qū)配置
URL顯示以及主題配置
permalink: posts/:year/:month/:day/:title.html
theme: next
打賞配置?
reward_comment: 堅持原創(chuàng)技術分享,您的支持將鼓勵我繼續(xù)創(chuàng)作!
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
圖片必須加后綴名,類型一定要對? 也可以用七牛存儲相關圖片
所有的配置,冒號:后面都必須有空格。有幾個需要特殊說明的項目:
permalink:默認的文章鏈接是以:http://localhost/2016/11/29/you-title/的格式,個人喜歡在末尾加.html有動態(tài)頁面的感覺,于是就修改為以上配置。 默認情況下配置文件中沒有打賞配置,改內(nèi)容是手動添加的。
三、主題選擇及下載
在官方網(wǎng)站有很多主題預覽,選擇自己喜歡的進行下載。我選擇的是NexT主題,根據(jù)官方的開始使用和主題配置進行配置主題。
在終端窗口下,定位到 Hexo 站點目錄下。使用 Git checkout 代碼:
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
啟用主題需要在站點配置文件中修改默認配置theme: landscape => theme: next。其他配置請根據(jù)NexT的主題設定進行配置。
四、添加分類和標簽
1.添加分類
$ hexo new page categories
確認站點配置文件里有category_dir: categories 確認主題配置文件里有categories: /categories 編輯站點的source/categories/index.md,添加: *
title: categories
date: 2016-11-29 11:49:50
type: "categories"
comments: false
2.添加標簽
$ hexo new page tags
確認站點配置文件里有tag_dir: tags 確認主題配置文件里有tags: /tags *
title: tags
date: 2016-11-29 11:49:50
type: "tags"
comments: false
之后需要在主題中開啟對應的配置選項。
五、文章寫作
在 your-hexo-site 目錄下執(zhí)行下系列語句,生成一個名為 title 的空文章。
$ hexo new "title"
可以看到提示生成了一個title.md,博客內(nèi)容是用markdown語法寫的??梢允褂镁庉嬈鞯牟寮部梢栽诰€編輯,還有專門的編輯器。我的mac使用的是 Mou。
每篇文章都有標頭,格式如下:
title: postName? ? ? ? ? #文章頁面上的顯示名稱,可以任意修改,不會出現(xiàn)在URL中
date: 2016-11-29 15:30:16 #文章生成時間,一般不改,當然也可以任意修改
categories:? ? ? ? ? ? ? #文章分類目錄,可以為空,注意:后面有個空格
tags:? ? ? ? ? ? ? ? ? ? #文章標簽,可空,多標簽請用格式[tag1,tag2,tag3],注意 ":" 后面有個空格
---這里開始使用markdown格式輸入你的正文。
添加分類與標簽的另一種形式:
tags:
- tag1
- tag2
categories: xxx
文章摘要,在需要顯示摘要的地方添加如下代碼:
以上是摘要
<!-- more -->
以下是全文
more以上的內(nèi)容既是文章的摘要,在主頁顯示,more以下的內(nèi)容點擊 “閱讀全文” 連接打開。
六、添加站內(nèi)搜索
添加站內(nèi)搜索可以參考插件主頁和插件說明,根據(jù)說明進行安裝:
$ npm install hexo-generator-search --save
配置,到主題的根目錄打開 _config.yml 文件添加一下內(nèi)容:
search:
path: /search.xml
field: all
教程要求在站點配置文件中填入,但是填寫后就會報錯,所以不確定是否應該在主題根目錄下配置。
七、最后
網(wǎng)絡上有很多部署到git的教程,自行參考。執(zhí)行命令hexo generate后會在目錄下生產(chǎn)public文件夾,該文件夾是hexo生產(chǎn)的靜態(tài)文件??梢圆渴鸢l(fā)布到自己建的web服務器。以下列一些常用命令:
hexo new "postName"? ? ? #新建文章
hexo new page "pageName" #新建頁面
hexo generate? ? ? ? ? ? #生成靜態(tài)頁面至public目錄
hexo server? ? ? ? ? ? ? #開啟預覽訪問端口(默認端口4000,'ctrl + c'關閉server)
hexo deploy? ? ? ? ? ? ? #將.deploy目錄部署到GitHub
hexo help? ? ? ? ? ? ? ? #查看幫助
hexo version? ? ? ? ? ? #查看Hexo的版本
以下是命令的簡寫:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
生成,部署也可以這樣寫:
hexo d -g