安裝:
一肯适、安裝Homebrew
Mac上已經(jīng)安裝了ruby環(huán)境框舔,只需要輸入
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
二刘绣、安裝node.js
sudo brew install node
三纬凤、安裝Hexo
Hexo是基于node.js的博客系統(tǒng)停士,這里安裝就可以了绢馍。
sudo npm install -g hexo
npm install hexo-renderer-ejs --save
npm install hexo-renderer-stylus --save
npm install hexo-renderer-marked --save
安裝完成后舰涌,找一個(gè)放blog的目錄
cd ~/Blog
然后執(zhí)行初始化
hexo init
然后可以直接預(yù)覽hello word.md
hexo g
hexo s
=> [info] Hexo is running at localhost:4000/. Press Ctrl+C to stop.
g是generate, s是server你稚,還有d是deploy(部署)推薦用首字母刁赖,方便快捷。
四鸡典、創(chuàng)建Blog Repository
在自己的Github彻况,點(diǎn)擊New repository
創(chuàng)建Blog的倉(cāng)庫(kù),記住勾選README良蛮。
這里有特別需要注意的地方:如果你想要能通過(guò) username.github.io的方式訪問(wèn)你的博客主頁(yè)悍赢,倉(cāng)庫(kù)名必須為 username.github.io左权,username為你的用戶(hù)名。你也可以用其他方式命名你的blog倉(cāng)庫(kù)胸囱,比如就叫blog烹笔,但是這樣在訪問(wèn)的時(shí)候抛丽,域名就是username.github.io/blog (blog為倉(cāng)庫(kù)名)亿鲜。所以還是推薦使用第一種方式命名,github推薦的也是這種方式饶套。
創(chuàng)建完畢妓蛮。點(diǎn)擊倉(cāng)庫(kù)右上角的Settings標(biāo)簽蛤克,進(jìn)入設(shè)置頁(yè)构挤,檢查GitHub Pages
這一項(xiàng)筋现。如果你的倉(cāng)庫(kù)命名是推薦方式,則會(huì)像下圖一樣彻犁,Source一欄是灰色的汞幢。否則會(huì)有兩個(gè)分支選擇:master branch微谓、gh-pages branch豺型,hexo默認(rèn)會(huì)使用gh-pages branch,所以如果你這里是master branch钓辆,會(huì)出現(xiàn)blog主頁(yè)沒(méi)有內(nèi)容的問(wèn)題前联。
五似嗤、安裝hexo的git插件
npm install hexo-deployer-git --save
六届宠、建立映射關(guān)聯(lián)
進(jìn)入你的Blog目錄豌注,修改_config.yml
文件,配置一些東西每聪。
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
branch: gh-pages ## branch這一行默認(rèn)不寫(xiě)熊痴,如果你需要特別指定聂宾,可以在這里加上
repository: https://github.com/aoshiwenrou/aoshiwenrou.github.io.git
這里repository的地址可以是https的系谐,也可以是git的,只不過(guò)git需要SSH證書(shū)鄙煤,一般用https就可以了梯刚,如果出現(xiàn)443錯(cuò)誤薪寓,替換成git。
然后在Blog目錄下
hexo g -d
生成靜態(tài)文件并且部署出去锥腻,不出意外瘦黑,已經(jīng)可以外網(wǎng)訪問(wèn)了奇唤。
這個(gè)命令這里說(shuō)一下:
hexo g :部署到github咬扇,也就是你有什么修改,用這個(gè)命令提交到服務(wù)器
hexo s :打開(kāi)hexo本地服務(wù)演顾,此時(shí)可以在本地進(jìn)行預(yù)覽
hexo d :發(fā)布
一般可以組合使用hexo g -d钠至,部署并發(fā)布胎源,或者h(yuǎn)exo s -d涕蚤。不過(guò)一般還是推薦先g,然后s佑钾,進(jìn)行本地預(yù)覽休溶,沒(méi)有問(wèn)題再進(jìn)行d
寫(xiě)文章
在Blog目錄下,創(chuàng)建
hexo new 文章題目
然后用Markdown編寫(xiě)兽掰,寫(xiě)好后save孽尽。
hexo g
hexo s
生成,然后在本地localhost:4000預(yù)覽一下艇拍,如果沒(méi)有問(wèn)題卸夕,就可以發(fā)布了婆瓜。
hexo d
所有的文章都是放在Blog/source/_posts/
目錄下的廉白,可以隨時(shí)編輯修改。
小技巧:hexo new 的時(shí)候院溺,推薦使用英文名珍逸,例如我這篇文章就叫
build blog site with hexo and github in maxOS
(英文很水聋溜,輕點(diǎn)吐槽),這樣你的文章鏈接就不會(huì)出現(xiàn)一堆中文轉(zhuǎn)義漱病。然后在你文章的頂部進(jìn)行配置杨帽,設(shè)置title為中文(默認(rèn)會(huì)有這兩行嗤军,并且title為文件名型雳,我這里默認(rèn)就是build blog site with hexo and github in maxOS
)山害,這樣在你的blog列表中,顯示的就是你的中文title冤荆,就像你現(xiàn)在在文章中看到的,我的標(biāo)題就是mac下基于Hexo-Github的Blog搭建
title: mac下基于Hexo-Github的Blog搭建 date: 2017-05-16 10:16:18
優(yōu)化
一乌妒、訪問(wèn)速度
由于Google被墻撤蚊,大部分主題中引用的jquery都會(huì)因?yàn)槌瑫r(shí)(可以Blog目錄下搜索google)损话,而造成頁(yè)面訪問(wèn)很慢丧枪,這里需要將jquery改為百度的
<script src="http://apps.bdimg.com/libs/jquery/2.0.3/jquery.min.js"></script>
二、RSS訂閱
輸入命令
$ npm install hexo-generator-feed --save
然后在_config.yml中忘闻,添加
rss: /atom.xml
feed:
type: atom
path: atom.xml
limit: 20
三恋博、搜索支持
現(xiàn)在在百度和Google是搜不到你的網(wǎng)站的债沮,為了讓搜索引擎搜索到,需要做一些工作缺厉。
搜索引擎入口
添加sitemap.xml:
首先輸入:
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
npm install hexo-baidu-url-submit --save
前兩個(gè)插件用于生成sitemap隧土,后一個(gè)插件用于主動(dòng)推送鏈接到百度(防止百度爬蟲(chóng)抓取失敗曹傀,導(dǎo)致百度搜不到您的博客,這里有一篇關(guān)于百度無(wú)法爬取Github Pages靜態(tài)網(wǎng)站解決方案)皆愉。
然后在_config.yml
文件中添加
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
## BaiduUrlSubmit: http://hui-wang.info/2016/10/23/Hexo插件之百度主動(dòng)提交鏈接/
baidu_url_submit: ##主動(dòng)推送新文章到百度
count: 3 ## 比如3,代表提交最新的三個(gè)鏈接
host: blog.darkangel7.com ## 在百度站長(zhǎng)平臺(tái)中注冊(cè)的域名
token: your_token ## 請(qǐng)注意這是您的秘鑰家淤, 請(qǐng)不要發(fā)布在公眾倉(cāng)庫(kù)里!
path: baidu_urls.txt ## 文本文檔的地址瑟由, 新鏈接會(huì)保存在此文本文檔里
##同時(shí)要檢查這里有沒(méi)有URL值歹苦,必須包含是百度站長(zhǎng)平臺(tái)注冊(cè)的域名,比如
# URL
url: http://blog.darkangel7.com
root: /
permalink: :year/:month/:day/:title/
##最后殴瘦,加入新的deployer蚪腋,如
deploy:
- type: git
repository: git@github.com:DarkAngel7/Blog-Hexo.git
- type: baidu_url_submitter ## 百度鏈接主動(dòng)推送
先驗(yàn)證網(wǎng)站所有權(quán)辣吃,下載html,mv到Blog/themes/yourtheme/source目錄下神得,執(zhí)行
hexo g -d
驗(yàn)證成功后哩簿,添加百度自動(dòng)推送腳本,最好在head.ejs
中添加百度自動(dòng)推送的代碼羡玛,至于head.ejs
文件位置宗苍,在你使用的theme文件夾下搜索吧讳窟。
谷歌的話,在抓取
-站點(diǎn)地圖
里面添加就好谋右。
這樣主動(dòng)推送與自動(dòng)推送結(jié)合补箍,能很好的提高您文章的曝光率啸蜜。
四衬横、評(píng)論功能
可以使用多說(shuō)來(lái)提供評(píng)論功能冕香。首先后豫,在_config.yml
文件中添加
# Duoshuo
duoshuo_shortname: yoursite.doushuo.com
然后挫酿,搜索themes文件夾下愕难,你使用的theme文件目錄下的commemt.ejs
(不同的theme可能位置不同猫缭,請(qǐng)自行尋找)。修改如下:
<div id="comment" class="comments-area">
<% if(config.duoshuo_shortname) { %>
<! -- 多說(shuō)的代碼 -->
<% } %>
</div>
如果報(bào)關(guān)于data-thread-key的錯(cuò)誤芝加,則改成下面這樣:
<div class="ds-thread" data-thread-key="<%= page.path %>" data-title="<%= page.title %>" data-url="<%= page.permalink %>"></div >
五藏杖、分享功能
可以在Blog目錄下搜索post/share
,一般在article.ejs
文件中蝌麸,或者post.ejs
文件中艾疟,然后替換
<%- partial('post/author') %>
為百度分享提供的代碼蔽莱。
六、個(gè)人信息完善
網(wǎng)站的信息一般都在Blog/_config.yml
中修改兽间。
關(guān)于Theme嘀略,去官方提供的主題列表中選個(gè)現(xiàn)成的,按照里面的方法pull下來(lái)帜羊,如light主題
$ git clone git://github.com/tommy351/hexo-theme-light.git themes/light
然后在_config.yml
配置文件中設(shè)置:
theme: light
關(guān)于主題的優(yōu)化讼育,一般在themes/yourtheme/_config.yml
中配置。
寫(xiě)在最后
本文參考<a >Dark Angel的博客</a>饥瓷,他的文章還提到了付費(fèi)購(gòu)買(mǎi)域名痹籍,及域名與github綁定的內(nèi)容,有需要的可以參考