Git Pages + Hexo 搭建個(gè)人博客

這段時(shí)間弄了一哈個(gè)人博客怠益,感覺挺有意思的仪搔,于是邊學(xué)邊做了一哈記錄,就有了這篇博客蜻牢。

GitHub Pages

1.進(jìn)入Github賬號烤咧, 建立一個(gè)名字為username.github.io(其中username為你自己的用戶名)形式的倉庫

  1. 將剛建立的倉庫克隆至本地:
  1. 測試一下GitHub Pages是否順利運(yùn)行

    • 上傳一個(gè)內(nèi)容為“Hello World”的html文件

      $ cd username.github.io
      # 注意這里的username為你的用戶名
      $ echo "Hello World" > index.html
      $ git add --all
      $ git commit -m "測試"
      $ git push -u origin master
      
  • 打開https://username.github.io這個(gè)網(wǎng)站(注意username為你的用戶名),如果試一下情況則表示成功了:

部署hexo

安裝

在安裝Hexo之前需要安裝以下程序:

  • Git
  • Node.js

由于之前在建立Git Pages時(shí)已經(jīng)安裝好了git bash抢呆,所以接下來就需要安裝Node.js了

安裝Node.js

由于我的電腦是win10系統(tǒng)煮嫌,所以我選擇用安裝包進(jìn)行安裝

  • 進(jìn)入https://nodejs.org/en/這個(gè)網(wǎng)站進(jìn)行下載,我選擇的是左邊的穩(wěn)定版

  • 注意在安裝過程中記得選add to path選項(xiàng)添加至環(huán)境變量

安裝Hexo

由于之前在安裝時(shí)已將nvm添加至環(huán)境變量抱虐,所以可以直接通過nvm命令安裝Hexo

$ npm install -g hexo-cli

可能要等一段時(shí)間才會(huì)安裝成功昌阿,我的就等了20s。恳邀。宝泵。

部署

成功安裝之后,就可以開始Hexo的部署了轩娶!

啟動(dòng)hexo

首先創(chuàng)建項(xiàng)目文件夾,我自己的文件夾名字是hexo_blog

$ hexo init hexo_blog
$ hexo install
$ hexo server

之后用瀏覽器打開localhost:4000出現(xiàn)以下畫面說明Hexo服務(wù)正常啟動(dòng):

部署hexo至GitHub Pages

修改部署配置

打開上一步創(chuàng)建的hexo_blog文件夾框往,其中有一個(gè)名為_config.yml的文件鳄抒,修改以下配置:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

修改為:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/JasonLmile/jasonlmile.github.io.git
  branch: master

注意!R住许溅!上面那個(gè)repo的值應(yīng)該是你之前建立的那個(gè)GitHub Pages項(xiàng)目的地址!1妗贤重!

進(jìn)行部署
  • 先安裝hexo-deployer-git

    $ npm install hexo-deployer-git
    
  • 進(jìn)行部署

    $ hexo deploy
    

    完成之后瀏覽器打開GitHub Pages項(xiàng)目的地址https://username.github.io,發(fā)現(xiàn)跟你之前啟動(dòng)本地服務(wù)器后訪問localhost:4000的效果是一樣的清焕,這代表部署成功了2⒒取狈谊!

Hexo設(shè)置

主要設(shè)置

通過修改_config.yml配置文件對博客進(jìn)行修改适滓,常用的參數(shù)有如下幾種:

  • title:網(wǎng)站標(biāo)題
  • subtitle:網(wǎng)站副標(biāo)題
  • description:網(wǎng)站描述
  • anthor:作者名稱
  • language:網(wǎng)站使用語言

主題修改

可能你會(huì)認(rèn)為默認(rèn)的主題不太好看即寡,沒關(guān)系链烈,你可以在https://hexo.io.themes/中尋找自己喜歡的主題牡辽,克隆至本地進(jìn)行配置屎篱。以目前最火的一個(gè)主題next為例:

  • 進(jìn)入之前建立的hexo項(xiàng)目文件夾(我建立的叫hexo_blog)盈罐,執(zhí)行:

    $ cd themes
    $ git clone https://github.com/iissnan/hexo-theme-next
    
  • 更改配置文件_config.yml

    將以下內(nèi)容:

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: landscape
    

    改為

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: hexo-theme-next
    

    其中theme的值為你下載至本地的主題名字

  • 執(zhí)行以下命令驻右,在本地進(jìn)行調(diào)試:

    $ hexo clean 
    $ hexo generate
    $ hexo server
    

    這三條命令分別有以下功能:

    • hexo clean:清空及刪除public文件夾
    • hexo generate:生成靜態(tài)文件
    • hexo server:啟動(dòng)本地服務(wù)器進(jìn)行調(diào)試

    這時(shí)候訪問http://localhost:4000/會(huì)發(fā)現(xiàn)博客主題已經(jīng)變了:

    之后可通過hexo deploy命令部署至Github上

主題設(shè)置

主要是通過theme文件夾下的_config.yml文件進(jìn)行設(shè)置(M谎F鹛琛涡贱!注意這個(gè)和之前的_config.yml文件同名但是不同位置

首頁顯示摘要

enable的值由false改為true就可以在首頁只顯示文章摘要了。默認(rèn)顯示前150個(gè)字惹想,但是你可以通過在發(fā)布的文章中添加>來指定摘要的內(nèi)容问词,只顯示這個(gè)符號前面的文字。

添加標(biāo)簽界面

新建一個(gè)頁面命名為tags

$ hexo new page tags

這時(shí)會(huì)發(fā)現(xiàn)在項(xiàng)目下source文件夾下會(huì)出現(xiàn)一名為tags的新建文件夾勺馆,對該文件夾里的index.md文件進(jìn)行編輯:

---
title: tags
date: 2019-03-04 20:38:08
type: tags
comments: false
---

添加分類界面

添加標(biāo)簽界面類似戏售,先新建一個(gè)名為categories的界面:

$ hexo new page tags

編輯categories下的index.md為:

---
title: categories
date: 2019-03-04 20:36:29
type: categories
comments: false
---

添加評論系統(tǒng)

next主題本身就集成了Valine評論系統(tǒng),不過需要leancloud賬號才能使用草穆。所以首先你需要注冊一個(gè)賬號:

點(diǎn)我注冊9嘣帧!

注冊完之后需要先創(chuàng)建一個(gè)應(yīng)用:

創(chuàng)建之后悲柱,點(diǎn)開該應(yīng)用锋喜,進(jìn)入設(shè)置->安全中心,將web安全域名改為你的博客域名豌鸡。然后進(jìn)入設(shè)置->應(yīng)用Key復(fù)制App IDApp Key的值嘿般,填入主題配置文件中:

再將文件中enable的值改為true。部署之后博客就可以評論了涯冠。

添加閱讀次數(shù)

next主題同樣提供了leancloud的統(tǒng)計(jì)閱讀次數(shù)的功能炉奴。我們只需要打開之前創(chuàng)建的leancloud應(yīng)用(注意ACL權(quán)限設(shè)置為無限制),點(diǎn)開 存儲(chǔ)->數(shù)據(jù)->創(chuàng)建Class 創(chuàng)建一個(gè)名稱為Counter的class蛇更,之后再修改主題配置文件即可瞻赶。

image

最后曬一下自己的博客把,雖然只有兩篇文章??

參考:

文檔|Hexo

主題配置——Next使用文檔

為你的Hexo加上評論系統(tǒng)-Valine——BlueLzy's Blog

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末派任,一起剝皮案震驚了整個(gè)濱河市砸逊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌掌逛,老刑警劉巖师逸,帶你破解...
    沈念sama閱讀 219,188評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異豆混,居然都是意外死亡篓像,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評論 3 395
  • 文/潘曉璐 我一進(jìn)店門崖叫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來遗淳,“玉大人,你說我怎么就攤上這事心傀∏担” “怎么了?”我有些...
    開封第一講書人閱讀 165,562評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長养叛。 經(jīng)常有香客問我种呐,道長,這世上最難降的妖魔是什么弃甥? 我笑而不...
    開封第一講書人閱讀 58,893評論 1 295
  • 正文 為了忘掉前任爽室,我火速辦了婚禮,結(jié)果婚禮上淆攻,老公的妹妹穿的比我還像新娘阔墩。我一直安慰自己,他們只是感情好瓶珊,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評論 6 392
  • 文/花漫 我一把揭開白布啸箫。 她就那樣靜靜地躺著,像睡著了一般伞芹。 火紅的嫁衣襯著肌膚如雪忘苛。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,708評論 1 305
  • 那天唱较,我揣著相機(jī)與錄音扎唾,去河邊找鬼。 笑死南缓,一個(gè)胖子當(dāng)著我的面吹牛胸遇,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播汉形,決...
    沈念sama閱讀 40,430評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼狐榔,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了获雕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,342評論 0 276
  • 序言:老撾萬榮一對情侶失蹤收捣,失蹤者是張志新(化名)和其女友劉穎届案,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體罢艾,經(jīng)...
    沈念sama閱讀 45,801評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡楣颠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了咐蚯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片童漩。...
    茶點(diǎn)故事閱讀 40,115評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖春锋,靈堂內(nèi)的尸體忽然破棺而出矫膨,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,804評論 5 346
  • 正文 年R本政府宣布侧馅,位于F島的核電站危尿,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏馁痴。R本人自食惡果不足惜谊娇,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望罗晕。 院中可真熱鬧济欢,春花似錦、人聲如沸小渊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,008評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽粤铭。三九已至挖胃,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間梆惯,已是汗流浹背酱鸭。 一陣腳步聲響...
    開封第一講書人閱讀 33,135評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留垛吗,地道東北人凹髓。 一個(gè)月前我還...
    沈念sama閱讀 48,365評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像怯屉,于是被迫代替她去往敵國和親蔚舀。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評論 2 355

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