Hexo
hexo是一個基于Node.js的簡單,快速,強(qiáng)大的靜態(tài)博客框架,可以方便的生成靜態(tài)網(wǎng)頁托管在github上,作者是來自臺灣的 Tommy Chen。特點(diǎn):
- 不可思議的快速 ─ 只要一眨眼靜態(tài)文件即生成完成
- 支持 Markdown
- 僅需一道指令即可部署到 GitHub Pages 和 Heroku
- 已移植 Octopress 插件
- 高擴(kuò)展性、自訂性
- 兼容于 Windows, Mac & Linux
配置環(huán)境
1.安裝Node.js ,用來生成靜態(tài)頁面的。到Node.js官網(wǎng)下載相應(yīng)平臺的最新版本,一路安裝即可。npm是隨同Node.js一起安裝的包管理工具,能解決Node.js代碼部署上的很多問題
2.安裝Git,把本地的hexo內(nèi)容提交到github上去,需要和Hexo建立連接,下面會有說到
3.申請GitHub,是用來做博客的遠(yuǎn)程創(chuàng)庫、域名、服務(wù)器之類的,github賬號沒有的話直接申請就行了,跟一般的注冊賬號差不多,SSH Keys,看你自己了,可以不配制,不配置的話以后每次對自己的博客有改動提交的時候就要手動輸入賬號密碼,配置了就不需要了,怎么配置我就不多說了,網(wǎng)上有很多教程
安裝Hexo
Node和Git都安裝好后,即可開始安裝Hexo 具體可以查看Hexo中文文檔
$ npm install -g hexo
這里可能安裝失敗,可能權(quán)限不夠,在命令前加 sudo
。
安裝成功以后,就可以創(chuàng)建blog。首先創(chuàng)建一個文件夾,如MyBlog,這是你的博客根目錄,用于存放hexo的配置文件,然后進(jìn)入MyBlog里初始化Hexo。
$ hexo init
需要等待一段時間,成功后會顯示:INFO Start blogging with Hexo!
這時的MyBlog 目錄下有以下這些文件
.
├── _config.yml
├── node_modules
├── package.json
├── source
├── scripts
├── scaffolds
| ├── drafts
| ├── posts
| └── page
└── themes
- _config.yml:全局配置文件,大多數(shù)的設(shè)置都在這里 配置項都需要空一格
- node_modules: node的一些模塊組件
- package.json:應(yīng)用程序數(shù)據(jù),指明hexo的版本等信息,類似于一般軟件中的關(guān)于按鈕
- scaffolds:layout模板文件目錄,其中的md文件可以添加編輯 drafts:草稿文章 posts:發(fā)布文章
- scripts:擴(kuò)展腳本目錄,這里可以自定義一些javascript腳本
- source:文章源碼目錄,該目錄下的markdown和html文件均會被hexo處理。該頁面對應(yīng)repo的根目錄,404文件、favicon.ico文件,CNAME文件等都應(yīng)該放這里,該目錄下可新建頁面目錄
- themes:主題文件目錄
_config.yml 用到的比較多
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site 站點(diǎn)信息:定義標(biāo)題,作者,語言
title: 這里是你博客的標(biāo)題
subtitle: 子標(biāo)題
description: 個人介紹
author: 筆名
language: zh_CN
timezone: Asia/Shanghai
# URL Url訪問路徑
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
# Directory 文件目錄:正文的存儲目錄
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing 寫博客配置:文章標(biāo)題,文章類型,外部鏈接
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
# Category & Tag 目錄和標(biāo)簽:默認(rèn)分類,分類圖,標(biāo)簽圖
default_category: uncategorized
category_map:
tag_map:
# Date / Time format 時間和日期格式:
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination 分頁設(shè)置:每頁顯示數(shù)量
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions 插件和皮膚:換皮膚,安裝插件
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape 默認(rèn)主題
# Deployment 部署配置:github發(fā)布,type類型為git
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
接下來就是配置_config.yml,以及一些 Hexo 指令操作
Hexo常用命令
hexo new postName #新建文章 在source/_posts 下生成
hexo new page pageName #新建頁面 在source/pageName 下生成
hexo deploy #將.deploy目錄部署到GitHub 簡寫指令:hexo d
hexo generate #生成靜態(tài)頁面至public目錄 簡寫指令:hexo g
hexo server #開啟預(yù)覽訪問端口(默認(rèn)端口4000,'ctrl + c'關(guān)閉server)簡寫指令hexo s
hexo clean #清除所有靜態(tài)頁面和緩存數(shù)據(jù)
默認(rèn)在source/_posts 存在了hello-world.md 可以直接輸入 hexo generate
生成靜態(tài)網(wǎng)頁
這時目錄下多了 public
這是生成靜態(tài)網(wǎng)頁內(nèi)容目錄。可以輸入 hexo clean
清除
生成靜態(tài)網(wǎng)頁后,就能啟動本地服務(wù),可以進(jìn)行文章預(yù)覽調(diào)試,輸入 hexo server
默認(rèn)是4000端口,在服務(wù)器啟動期間,Hexo 會監(jiān)視文件變動并自動更新,您無須重啟服務(wù)器。如果是第二次會提示,Port 4000 has been used. Try other port instead
這時可以輸入指定的端口 hexo server -p xxxx
如 7681 輸出:
INFO Start processing
INFO Hexo is running at http://localhost:7681/. Press Ctrl+C to stop.
瀏覽器輸入http://localhost:7681 就可以預(yù)覽頁面
這是正常的情況,可能中間會有一些錯誤提示
Hexo Server 錯誤
Hexo 3.0 把服務(wù)器獨(dú)立成了個別模塊,您必須先安裝 hexo-server才能使用,需要執(zhí)行命令:
$ npm install hexo-server --save
頁面顯示白板和Cannot GET
原因:
由于2.6以后就更新了,我們需要手動配置些東西,我們需要輸入下面三行命令,看情況添加 sudo
$ npm install hexo-renderer-ejs --save
$ npm install hexo-renderer-stylus --save
$ npm install hexo-renderer-marked --save
部署到github
在github建立與你用戶名對應(yīng)的倉庫,倉庫名必須為【your_user_name.github.io】。然后建立關(guān)聯(lián)
npm install hexo-deployer-git --save
在 _config.yml
配置文件中修改參數(shù),在文件最下面,一個正確的部署配置中至少要有 type 參數(shù),例如:
type: git
repo: <repository url> 庫(Repository)地址
branch: [branch] 分支名稱。如果您使用的是 GitHub 或 GitCafe 的話,程序會嘗試自動檢測。
message: [message] 自定義提交信息 (默認(rèn)為 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})
Hexo 提供了快速方便的一鍵部署功能,讓您只需一條命令就能將網(wǎng)站部署到服務(wù)器上。
hexo deploy
執(zhí)行這條命令后會生成一個隱藏文件夾.deploy_git
,可以輸入ls -a
打開查看,hexo會將生成的public文件夾復(fù)制到.deploy_git文件夾中
文章
sources/_posts
目錄下打開默認(rèn)的Hello-Word.md
,文章一般頭部格式:
title: xxxx #文章的標(biāo)題,這個才是顯示的文章標(biāo)題,其實(shí)文件名不影響
date: 2015-09-01 20:33:26 #用命令會自動生成,也可以自己寫,所以文章時間可以改
categories: xxx #自定義文章的分類
tags: xxx #tag,為文章添加標(biāo)簽,方便搜索
---
注意點(diǎn)
- 如果在博客文章列表中,不想全文顯示,可以增加 ``, 后面的內(nèi)容就不會顯示在列表。
- Markdown標(biāo)題標(biāo)準(zhǔn)寫法寫法需要在"#"和后面字符之間加一個空格,如果不加空格 有些引擎就解析不了
Markdown
- Windows下可以使用 MarkdownPad2
- Mac 建議使用 Mou 這款免費(fèi)且十分好用的 Markdown 編輯器
- Web 端上,推薦簡書這款產(chǎn)品
插件
可以在package.json
中查看已經(jīng)安裝的插件
添加RSS
$ npm install hexo-generator-feed --save
然后,到博客目錄 /public 下,會有atom.xml生成 再到_config.yml 里配置一下
feed:
type: atom #type 表示類型, 是 atom 還是 rss2.
path: atom.xml #path 表示 Feed 路徑
limit: 20 #limit 最多多少篇最近文章
添加Sitemap
Sitemap 的提交主要的目的,是要避免搜索引擎的爬蟲沒有完整的收錄整個網(wǎng)頁的內(nèi)容,所以提交 Sitemap 是能夠補(bǔ)足搜索引擎的不足,進(jìn)而加速網(wǎng)頁的收錄速度,達(dá)到搜尋引擎友好的目的。
$ npm install hexo-generator-sitemap --save
同樣在_config.yml 里配置一下
sitemap:
path: sitemap.xml
#path 表示 Sitemap 的路徑. 默認(rèn)為 sitemap.xml.
對于國內(nèi)用戶還需要安裝插件 hexo-generator-baidu-sitemap, 顧名思義是為百度量身打造的. 安裝
$ npm install hexo-generator-baidu-sitemap --save
然后在_config.yml里配置一下
baidusitemap:
path: baidusitemap.xml
添加搜索
$ npm install hexo-generator-search
其他插件
主題
默認(rèn)的是landscape,這里有大量的主題列表
安裝喜歡的主題
$ git clone <repository> themes/themeName
需要在_config.yml 中更改theme: themeName 更改主題后需要重新 hexo g
生成頁面
在主題的_config.yml文件里面可以修改頭像,友情鏈接等等,配置需要展示的頁面元素,一般里面都會有介紹
評論
在Hexo中,默認(rèn)使用的評論是國外的Disqus,不過因為國內(nèi)的”網(wǎng)絡(luò)環(huán)境”問題,我們改為國內(nèi)的多說評論系統(tǒng)。
需要設(shè)置 short_name:字段,這個字段為你多說填寫的站點(diǎn)名字,比如我的域名:chenao0727github.duoshuo.com,那么我的short_name: chenao0727github
404頁面
GitHub Pages 自定義404頁面非常容易,直接在根目錄下創(chuàng)建自己的404.html就可以。但是自定義404頁面僅對綁定頂級域名的項目才起作用,GitHub默認(rèn)分配的二級域名是不起作用的,使用hexo server在本機(jī)調(diào)試也是不起作用的。