一、安裝hexo
1.安裝
$ npm install hexo-cli -g? 制定一個目錄? 默認(rèn)會安裝在執(zhí)行命令的對應(yīng)的文件夾
$ hexo init blog
$ cd blog
$ npm install
2.Demo生成以及預(yù)覽
執(zhí)行命令hexo generate生產(chǎn)靜態(tài)頁面撬码。 執(zhí)行命令hexo server啟動本地預(yù)覽服務(wù)。
然后在瀏覽器中訪問http://localhost:4000/,此時圾浅,已經(jīng)看到了一個漂亮的博客狸吞。
二刺彩、站點配置文件說明與修改
站點配置文件是 your-hexo-site 目錄下的 _config.yml 文件傍药,配置文件中基本都有配置項的說明或者參考官方配置說明。以下說幾個常用的配置:
基本配置
title: hexo ? ? ? ? #博客的標(biāo)題
description:? ? ? ? ? ? #簡介
author: matt ? #作者
language: zh-Hans? ? ? #語言段标,該設(shè)置使用的是next主題的簡體中文
timezone: Asia/Shanghai #時區(qū)配置
URL顯示以及主題配置
permalink: posts/:year/:month/:day/:title.html
theme: next
打賞配置?
reward_comment: 堅持原創(chuàng)技術(shù)分享,您的支持將鼓勵我繼續(xù)創(chuàng)作炉奴!
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
圖片必須加后綴名逼庞,類型一定要對? 也可以用七牛存儲相關(guān)圖片
所有的配置,冒號:后面都必須有空格瞻赶。有幾個需要特殊說明的項目:
permalink:默認(rèn)的文章鏈接是以:http://localhost/2016/11/29/you-title/的格式赛糟,個人喜歡在末尾加.html有動態(tài)頁面的感覺,于是就修改為以上配置砸逊。 默認(rèn)情況下配置文件中沒有打賞配置璧南,改內(nèi)容是手動添加的。
三师逸、主題選擇及下載
在官方網(wǎng)站有很多主題預(yù)覽司倚,選擇自己喜歡的進(jìn)行下載。我選擇的是NexT主題字旭,根據(jù)官方的開始使用和主題配置進(jìn)行配置主題对湃。
在終端窗口下,定位到 Hexo 站點目錄下遗淳。使用 Git checkout 代碼:
$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
啟用主題需要在站點配置文件中修改默認(rèn)配置theme: landscape => theme: next拍柒。其他配置請根據(jù)NexT的主題設(shè)定進(jìn)行配置。
四屈暗、添加分類和標(biāo)簽
1.添加分類
$ hexo new page categories
確認(rèn)站點配置文件里有category_dir: categories 確認(rèn)主題配置文件里有categories: /categories 編輯站點的source/categories/index.md拆讯,添加: *
title: categories
date: 2016-11-29 11:49:50
type: "categories"
comments: false
2.添加標(biāo)簽
$ hexo new page tags
確認(rèn)站點配置文件里有tag_dir: tags 確認(rèn)主題配置文件里有tags: /tags *
title: tags
date: 2016-11-29 11:49:50
type: "tags"
comments: false
之后需要在主題中開啟對應(yīng)的配置選項脂男。
五、文章寫作
在 your-hexo-site 目錄下執(zhí)行下系列語句种呐,生成一個名為 title 的空文章宰翅。
$ hexo new "title"
可以看到提示生成了一個title.md,博客內(nèi)容是用markdown語法寫的爽室≈希可以使用編輯器的插件,也可以在線編輯阔墩,還有專門的編輯器嘿架。我的mac使用的是 Mou。
每篇文章都有標(biāo)頭啸箫,格式如下:
title: postName? ? ? ? ? #文章頁面上的顯示名稱耸彪,可以任意修改,不會出現(xiàn)在URL中
date: 2016-11-29 15:30:16 #文章生成時間忘苛,一般不改蝉娜,當(dāng)然也可以任意修改
categories:? ? ? ? ? ? ? #文章分類目錄,可以為空扎唾,注意:后面有個空格
tags:? ? ? ? ? ? ? ? ? ? #文章標(biāo)簽召川,可空,多標(biāo)簽請用格式[tag1,tag2,tag3]稽屏,注意 ":" 后面有個空格
---這里開始使用markdown格式輸入你的正文扮宠。
添加分類與標(biāo)簽的另一種形式:
tags:
- tag1
- tag2
categories: xxx
文章摘要西乖,在需要顯示摘要的地方添加如下代碼:
以上是摘要
<!-- more -->
以下是全文
more以上的內(nèi)容既是文章的摘要狐榔,在主頁顯示,more以下的內(nèi)容點擊 “閱讀全文” 連接打開获雕。
六薄腻、添加站內(nèi)搜索
添加站內(nèi)搜索可以參考插件主頁和插件說明,根據(jù)說明進(jìn)行安裝:
$ npm install hexo-generator-search --save
配置,到主題的根目錄打開 _config.yml 文件添加一下內(nèi)容:
search:
path: /search.xml
field: all
教程要求在站點配置文件中填入届案,但是填寫后就會報錯庵楷,所以不確定是否應(yīng)該在主題根目錄下配置。
七楣颠、最后
網(wǎng)絡(luò)上有很多部署到git的教程尽纽,自行參考。執(zhí)行命令hexo generate后會在目錄下生產(chǎn)public文件夾童漩,該文件夾是hexo生產(chǎn)的靜態(tài)文件弄贿。可以部署發(fā)布到自己建的web服務(wù)器矫膨。以下列一些常用命令:
hexo new "postName"? ? ? #新建文章
hexo new page "pageName" #新建頁面
hexo generate? ? ? ? ? ? #生成靜態(tài)頁面至public目錄
hexo server? ? ? ? ? ? ? #開啟預(yù)覽訪問端口(默認(rèn)端口4000差凹,'ctrl + c'關(guān)閉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