一、介紹
Hexo是一款快速、簡潔且高效的博客框架,支持markdown等語法,另外具有強大的插件系統(tǒng)和眾多的插件,高度可定制。
github是目前最為流行的源碼托管網(wǎng)站之一,我們在創(chuàng)建github賬戶時,會被分配一個靜態(tài)的虛擬服務器(只能伺服靜態(tài)資源,并且每月有流量限制,不過也綽綽有余)。訪問<用戶名>.github.io
這個地址,實際上就是我們的github個人主頁。
二、安裝
npm install -g hexo-cli
三、建站
請執(zhí)行如下命令創(chuàng)建一個工程目錄。
hexo init <folder>
cd <folder>
npm install
你會得到如下目錄:
├── _config.yml
├── package.json
├── scaffolds
├── source
| └── _posts
└── themes
_config.yml
網(wǎng)站的配置信息,您可以在此配置大部分的參數(shù)。
package.json
應用程序的信息。EJS, Stylus 和 Markdown renderer 已默認安裝,您可以自由移除。
scaffolds
模版文件夾。當您新建文章時,Hexo 會根據(jù) scaffold 來建立文件。
Hexo的模板是指在新建的markdown文件中默認填充的內(nèi)容。例如,如果您修改scaffold/post.md中的Front-matter內(nèi)容,那么每次新建一篇文章時都會包含這個修改。
source
資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外,開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析并放到 public 文件夾,而其他文件會被拷貝過去。
themes
主題文件夾。Hexo會根據(jù)主題來生成靜態(tài)頁面。
四、配置
我們可以在_config.yml中修改大部分的配置,其中有些配置是必須要修改的。
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://halzhan.cn # 填入博客地址
root: / # 如果博客地址在子目錄,請將子路徑填入
permalink: :year/:month/:day/:title/
permalink_defaults:
另外一個是站點的基礎配置:
# Site
title: Hal Zhan # 站點標題
subtitle: 不拘一格、Geek # 站點副標題
description:
author: Hal Zhan(風起云涌Hal) # 作者
language: zh-Hans # 編碼(漢字的話使用這個既可以了)
timezone:
其他的配置詳見官方文檔-配置。
完成上述配置后,我們可以使用hexo server
本地伺服站點。如果需要在控制臺中顯示更多debug信息,可以加上--debug
選項。
五、發(fā)布
我們需要在github上預先創(chuàng)建一個空的倉庫,請注意這個倉庫的名稱必須叫做:<用戶名>.github.io
,例如本例中的倉庫名稱叫做:halzhan.github.io
。
我們需要將本地目錄與遠程倉庫聯(lián)系起來。回到根目錄下,執(zhí)行如下命令:
git init
...
git add .
git commit -m "init project"
git remote add origin "git@github.com:HalZhan/halzhan.github.io.git"
git push origin master
注:推薦再創(chuàng)建一個分支(本例中創(chuàng)建了一個hexo分支),用于保存我們的站點源碼,而master分支用于存放最終發(fā)布的站點文件。
git checkout -b hexo
安裝一個模塊:
npm install --save hexo-deployer-git
再回到根目錄下_config.yml文件中,對發(fā)布選項做一些配置:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:HalZhan/halzhan.github.io.git # Git地址(http/https/ssh皆可)
branch: master # 所要發(fā)布到的分支名稱
發(fā)布的話請使用如下命令:
hexo clean && hexo g && hexo d
再次訪問<用戶名>.github.io
,如果一切順利應該可以看到剛剛發(fā)布的站點。
六、主題
github上有許多非常優(yōu)秀的hexo主題,這里推薦一個比較流行的主題,next,首先需要將這個主題下載到我們的項目里:
git clone https://github.com/iissnan/hexo-theme-next.git themes/next
返回到項目根目錄下的_config.yml
文件中,搜索字段theme
,將其值改為next
,然后可以執(zhí)行命令hexo server --debug
本地查看一下效果。
next主題有許多配置選項,我們可以在themes/next
目錄下更改_config.yml
里選項的值。
例如顯示社交鏈接:
social:
GitHub: https://github.com/halzhan || github # github地址
E-Mail: mailto:halzhan163@163.com || envelope # 郵件
Weibo: https://weibo.com/halzhan || weibo # 微博主頁
LinkedIn: https://www.linkedin.com/in/hal-zhan-a0041587/ || linkedin # 領英主頁
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype
顯示查看更多按鈕(首頁文章內(nèi)容截取,這樣就不會在首頁展示全部內(nèi)容)
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150
啟用Gemini風格的next主題:
# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
每種主題都會有許多配置選項,可以自行嘗試修改并查看效果。
七、SEO優(yōu)化
八、常見問題
1. 主題同步
這個問題是比較頭疼的,因為目前hexo主題都是通過git clone的方式克隆到本地來的,然而在提交站點源碼到遠程倉庫時,themes文件夾下的主題文件是不會提交到倉庫里的,因此我們?nèi)绻牧酥黝}文件下的一些設置,這部分設置由于沒有提交會被丟失,這帶來了極大的不便。為此,我們決定采用官方推薦的fork+subtree的方式來管理主題。
- 刪除themes目錄下的next文件夾,并將修改push到github
git add .
git commit -m "delete next"
git push
進入next的github主頁,fork之
待fork完成后綁定next主題為子項目
git remote add -f next git@github.com:HalZhan/hexo-theme-next.git
git subtree add --prefix=themes/next next master --squash
- 更新子項目
git fetch next master
git subtree pull --prefix=themes/next next master --squash
- 從子目錄push到遠程倉庫
git subtree push --prefix=themes/next next master
- 提交并發(fā)布本地修改到遠程倉庫
git add .
git commit -m "next theme"
git push
現(xiàn)在再去遠程倉庫看themes/next/就有內(nèi)容了,并且跟子項目的遠程倉庫可以保持更新,在主項目中修改也可以push到子項目的遠程。這樣就不必擔心主題配置丟失了。