使用Hexo + Github Pages搭建個(gè)人獨(dú)立博客

https://www.cnblogs.com/dushao/p/5999593.html

一:hexo系統(tǒng)環(huán)境配置

要使用Hexo函筋,需要在你的系統(tǒng)中支持Nodejs以及Git,如果還沒有,那就開始安裝吧皮官!

安裝Node.js

下載Node.js

參考地址:安裝Node.js

安裝Git

下載地址:http://git-scm.com/download/

安裝Hexo

$ cdd:/hexo$ npm install hexo-cli -g$ hexo init blog$ cd blog$ npm install$ hexo g# 或者h(yuǎn)exo generate$ hexo s# 或者h(yuǎn)exo server混弥,可以在http://localhost:4000/ 查看

這里有必要提下Hexo常用的幾個(gè)命令:

1磕仅、hexo generate (hexo g) 生成靜態(tài)文件磕洪,會在當(dāng)前目錄下生成一個(gè)新的叫做public的文件夾/

2、hexo server (hexo s) 啟動本地web服務(wù)凿试,用于博客的預(yù)覽

hexo deploy (hexo d)

3排宰、部署播客到遠(yuǎn)端(比如github, heroku等平臺)

另外還有其他幾個(gè)常用命令:

$ hexonew"postName"#新建文章$ hexonewpage"pageName"#新建頁面

常用簡寫

$ hexo n == hexo new$ hexo g == hexo generate$ hexo s == hexo server$ hexo d == hexo deploy

常用組合

$ hexo d -g#生成部署$ hexo s -g#生成預(yù)覽

現(xiàn)在我們打開http://localhost:4000已經(jīng)可以看到一篇內(nèi)置的blog了似芝。

目前我安裝所用的本地環(huán)境如下:(可以通過hexo -v查看)

hexo: 3.2.0hexo-cli: 1.0.1os:Windows_NT6.3.9600win32x64http_parser: 2.5.2node: 4.4.1v8: 4.5.103.35uv: 1.8.0zlib: 1.2.8ares: 1.10.1-DEVicu: 56.1modules: 46openssl: 1.0.2g

Hexo主題設(shè)置

這里以主題yilia為例進(jìn)行說明。

安裝主題

$ hexo clean$ git clonehttps://github.com/litten/hexo-theme-yilia.git themes/yilia

啟用主題

$ cd themes/yilia$ git pull$ hexo g# 生成$ hexo s# 啟動本地web服務(wù)器

現(xiàn)在打開http://localhost:4000板甘,會看到我們已經(jīng)應(yīng)用了一個(gè)新的主題党瓮。

二:Github Pages設(shè)置

什么是Github Pages

GitHub Pages?本用于介紹托管在GitHub的項(xiàng)目,不過盐类,由于他的空間免費(fèi)穩(wěn)定寞奸,用來做搭建一個(gè)博客再好不過了。

每個(gè)帳號只能有一個(gè)倉庫來存放個(gè)人主頁在跳,而且倉庫的名字必須是username/username.github.io枪萄,這是特殊的命名約定。你可以通過http://username.github.io?來訪問你的個(gè)人主頁猫妙。

這里特別提醒一下瓷翻,需要注意的個(gè)人主頁的網(wǎng)站內(nèi)容是在master分支下的。

創(chuàng)建自己的Github Pages

注冊GitHub及使用Github Pages的過程已經(jīng)有很多文章講過割坠,在此不再詳述,可以參考:

如何搭建一個(gè)獨(dú)立博客——簡明Github Pages與Hexo教程

在這里我創(chuàng)建了一個(gè)github repo叫做?dushao103500.github.io創(chuàng)建完成之后彼哼,需要有一次提交(git commit)操作,然后就可以通過鏈接http://dushao103500.github.io?訪問了剪菱。(現(xiàn)在還沒有內(nèi)容孝常,別著急)

三:部署Hexo到Github Pages

這一步恐怕是最關(guān)鍵的一步了,讓我們把在本地web環(huán)境下預(yù)覽到的博客部署到github上茫因,然后就可以直接通過http://dushao.github.io訪問了。不過很多教程文章對這個(gè)步驟語焉不詳驰贷,這里著重說下。

首先需要明白所謂部署到github的原理

1次兆、之前步驟中在Github上創(chuàng)建的那個(gè)特別的repo(dushao103500.github.io)一個(gè)最大的特點(diǎn)就是其master中的html靜態(tài)文件锹锰,可以通過鏈接http://dushao103500.github.io來直接訪問。

2园蝠、Hexo -g 會生成一個(gè)靜態(tài)網(wǎng)站(第一次會生成一個(gè)public目錄)渺蒿,這個(gè)靜態(tài)文件可以直接訪問茂装。

3少态、需要將hexo生成的靜態(tài)網(wǎng)站易遣,提交(git commit)到github上。

明白了原理侨歉,怎么做自然就清晰了为肮。

使用hexo deploy部署

hexo deploy可以部署到很多平臺肤京,具體可以參考這個(gè)鏈接. 如果部署到github,需要在配置文件_config.xml中作如下修改:

deploy:? type:git? repo:git@github.com:jiji262/jiji262.github.io.git? branch:master

然后在命令行中執(zhí)行

hexod

即可完成部署棋枕。

踩坑提醒

(1)注意需要提前安裝一個(gè)擴(kuò)展:

$ npminstallhexo-deployer-git--save

(2)如果出現(xiàn)下面這樣的錯(cuò)誤:

Permission denied (publickey).fatal: Couldnotread from remote repository.Please make sure you have the correct access rightsandthe repository exists.

則是因?yàn)闆]有設(shè)置好public key所致重斑。

在本機(jī)生成public key(參考github幫助):

#ssh-keygen -t rsa -b4096-C"xxx@xxx.com"

然后在#user_id/.ssh目錄下會生成兩個(gè)文件肯骇,id_rsa.pub和id_rsa.

然后登陸github笛丙,在SSH設(shè)置頁面添加上剛才的public key文件也就是id_rsa.pub的內(nèi)容即可胚鸯。

使用git命令行部署(optional)

不幸的是,上述命令雖然簡單方便,但是偶爾會有莫名其妙的問題出現(xiàn)形耗,因此辙浑,我們也可以追本溯源例衍,使用git命令來完成部署的工作。

clone github repo

$ cdd:/hexo/blog$ git clonehttps://github.com/jiji262/jiji262.github.io.git .deploy/jiji262.github.io

將我們之前創(chuàng)建的repo克隆到本地硼一,新建一個(gè)目錄叫做.deploy用于存放克隆的代碼般贼。

創(chuàng)建一個(gè)deploy腳本文件

hexo generatecp -R public/* .deploy/jiji262.github.iocd .deploy/jiji262.github.iogit add .git commit -m “update”git push origin master

簡單解釋一下奥吩,hexo generate生成public文件夾下的新內(nèi)容,然后將其拷貝至jiji262.github.io的git目錄下腮介,然后使用git commit命令提交代碼到j(luò)iji262.github.io這個(gè)repo的master branch上叠洗。

需要部署的時(shí)候灭抑,執(zhí)行這段腳本就可以了(比如可以將其保存為deploy.sh)抵代。執(zhí)行過程中可能需要讓你輸入Github賬戶的用戶名及密碼,按照提示操作即可案腺。

Hexo 主題配置

每個(gè)不同的主題會需要不同的配置救湖,主題配置文件在主題目錄下的_config.yml涎才。

以我們使用的yilia主題為例耍铜,其提供如下的配置項(xiàng)theme\yilia_config.yml:

# Headermenu:主頁: /? 所有文章: /archives# 隨筆: /tags/隨筆# SubNavsubnav:? github:"dushao103500"? weibo:"DanD逆光之處是暖傷"? rss:"#"? zhihu:"#"#douban: "#"#mail: "dushao1314@foxmail.com"#facebook: "#"#google: "#"#twitter: "#"#linkedin: "#"rss:/atom.xml# Contentexcerpt_link:morefancybox:truemathjax:true# Miscellaneousgoogle_analytics:''favicon:/favicon.png#你的頭像urlavatar:""#是否開啟分享share:true#是否開啟多說評論棕兼,填寫你在多說申請的項(xiàng)目名稱 duoshuo: duoshuo-key#若使用disqus,請?jiān)诓┛蚦onfig文件中填寫disqus_shortname靶衍,并關(guān)閉多說評論duoshuo:true#是否開啟云標(biāo)簽tagcloud:true#是否開啟友情鏈接#不開啟——#friends: false#是否開啟“關(guān)于我”茎芋。#不開啟——#aboutme: false#開啟——aboutme:我是誰,我從哪里來涛酗,我到哪里去商叹?我就是我剖笙,是顏色不一樣的吃貨…

四:其他高級使用技巧

綁定獨(dú)立域名

購買域名

在你的域名注冊提供商那里配置DNS解析请唱,獲取GitHub的IP地址點(diǎn)擊籍滴,進(jìn)入source目錄下,添加CNAME文件

$ cd source/$ touch CNAME$ vim CNAME# 輸入你的域名$ git add CNAME$ git commit -m"add CNAME"

使用圖床

使用七牛云存儲

自己在github上搭建的圖床晚岭,需要首先注冊七牛賬號使用坦报。

添加插件

添加sitemap和feed插件

$ npminstallhexo-generator-feed$ npminstallhexo-generator-sitemap

修改_config.yml片择,增加以下內(nèi)容

# ExtensionsPlugins:-hexo-generator-feed-hexo-generator-sitemap#Feed Atomfeed:? type:atom? path:atom.xml? limit:20#sitemapsitemap:? path:sitemap.xml

配完之后骚揍,就可以訪問http://dushao103500.github.io,發(fā)現(xiàn)已經(jīng)成功生成了嘲叔。

添加404公益頁面

GitHub Pages有提供制作404頁面的指引:Custom 404 Pages硫戈。

直接在根目錄下創(chuàng)建自己的404.html或者404.md就可以。但是自定義404頁面僅對綁定頂級域名的項(xiàng)目才起作用汁胆,GitHub默認(rèn)分配的二級域名是不起作用的霜幼,使用hexo server在本機(jī)調(diào)試也是不起作用的辛掠。

推薦使用騰訊公益404

添加about頁面

$ hexonewpage"about"

之后在\source\about\index.md目錄下會生成一個(gè)index.md文件回挽,打開輸入個(gè)人信息即可千劈,如果想要添加版權(quán)信息,可以在文件末尾添加:

本文鏈接:"><%=post.title%>
作者:杜少
出處:http://jiji262.github.io/
本文基于知識共享署名-相同方式共享 4.0國際許可協(xié)議發(fā)布墙牌,歡迎轉(zhuǎn)載喜滨,演繹或用于商業(yè)目的虽风,但是必須保留本文的署名杜少及鏈接寄月。

添加Fork me on Github

獲取代碼,選擇你喜歡的代碼添加到hexo/themes/yilia/layout/layout.ejs的末尾即可厂抖,注意要將代碼里的you改成你的Github賬號名忱辅。

添加支付寶捐贈按鈕及二維碼支付

支付寶捐贈按鈕

在D:\hexo\themes\yilia\layout_widget目錄下新建一個(gè)zhifubao.ejs文件,內(nèi)容如下:

打賞他


添加完該文件之后耕蝉,要在D:/hexo/themes/yilia/_config.yml文件中啟用崔梗,如下所示,添加zhifubao

widgets:- category- tag- links- tagcloud- zhifubao- rss

二維碼捐贈

首先需要到這里獲取你的支付寶賬戶的二維碼圖片垒在,支付寶提供了自定義功能,可以添加自定義文字扔亥。

我的二維碼掃描捐贈添加在about頁面场躯,當(dāng)然你也可以添加到其它頁面,在D:\hexo\blog\source\about下有index.md打開旅挤,在適當(dāng)位置添加

歡迎您捐贈本站踢关,您的支持是我最大的動力!![][http://7xsxyo.com1.z0.glb.clouddn.com/2016/04/15/FoJ1F6Ht0CNaYuCdE2l52F-Fk9Vk202.png]

可以讓圖片居中顯示粘茄,注意將圖片鏈接地址換成你的即可签舞。

添加百度站內(nèi)搜索

點(diǎn)擊進(jìn)入,點(diǎn)擊其它工具->站內(nèi)檢索->現(xiàn)在使用->新建搜索引擎->查看代碼,將代碼里的id值復(fù)制搂鲫,打開/d/hexo/themes/jacman/_config.xml,配置成如下即可。

baidu_search:## http://zn.baidu.com/? enable:true? id:"1433674487421172828"## e.g."783281470518440642"for your baidu search id? site:http://zhannei.baidu.com/cse/search ## your can change to your site instead of the default

使用不蒜子添加訪客統(tǒng)計(jì)

詳情參考搞定你的網(wǎng)站計(jì)數(shù)赊舶,具體做法很簡單,就是在你的themes/your themes/layout/_partial/footer.ejs底部加入這段腳本

然后在``中間添加如下統(tǒng)計(jì)信息即可

本站總訪問量次, 訪客數(shù)

不蒜子的官方服務(wù)網(wǎng)站是不蒜子,目前最大的弊端就是不開放注冊捶牢,所以對于運(yùn)行了一段時(shí)間的網(wǎng)站,不蒜子的數(shù)據(jù)都是從1開始驯耻,沒辦法設(shè)置斋枢,只有等后期開放注冊之后描姚,登入網(wǎng)站才能對統(tǒng)計(jì)計(jì)數(shù)進(jìn)行設(shè)置朝扼。

至此榛斯,Hexo+Github Pages搭建個(gè)人博客完成

快去告訴你們的小伙伴吧

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末王凑,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌垒拢,老刑警劉巖奔垦,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鸵贬,死亡現(xiàn)場離奇詭異地沮,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進(jìn)店門瓦灶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事桨踪。” “怎么了?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長呢袱。 經(jīng)常有香客問我蚯涮,道長遭顶,這世上最難降的妖魔是什么张峰? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任铣揉,我火速辦了婚禮粥喜,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘箭窜。我一直安慰自己毯焕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布婆咸。 她就那樣靜靜地躺著倔丈,像睡著了一般宏邮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上渔呵,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天,我揣著相機(jī)與錄音弟断,去河邊找鬼咏花。 笑死,一個(gè)胖子當(dāng)著我的面吹牛阀趴,可吹牛的內(nèi)容都是我干的昏翰。 我是一名探鬼主播苍匆,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼棚菊!你這毒婦竟也來了浸踩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤窍株,失蹤者是張志新(化名)和其女友劉穎民轴,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體球订,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡后裸,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了冒滩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片微驶。...
    茶點(diǎn)故事閱讀 40,133評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖开睡,靈堂內(nèi)的尸體忽然破棺而出因苹,到底是詐尸還是另有隱情,我是刑警寧澤篇恒,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布扶檐,位于F島的核電站,受9級特大地震影響胁艰,放射性物質(zhì)發(fā)生泄漏款筑。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一腾么、第九天 我趴在偏房一處隱蔽的房頂上張望奈梳。 院中可真熱鬧,春花似錦解虱、人聲如沸攘须。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽于宙。三九已至,卻和暖如春艰匙,著一層夾襖步出監(jiān)牢的瞬間限煞,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工员凝, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留署驻,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像旺上,于是被迫代替她去往敵國和親瓶蚂。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評論 2 355

推薦閱讀更多精彩內(nèi)容