使用Hexo和GithubPage搭建個人主頁

個人博客:http://lixiaohui.live

0. 說在前面的話(必看)

0.1. 思路總覽

使用hexo搭建Github page的思路如下:

其中我們把網(wǎng)站整個本體上傳到xiaohuilee.github.iohexo分支;由hexo生成的靜態(tài)文件上傳到master分支镊掖,hexo分支的內(nèi)容用于維護Github Page本體丘喻,master分支的內(nèi)容用于渲染Github Page。

0.2. 需要的必備兩個前提條件:

0.2.0. NodeJS

hexo是基于Node搭建的一套輕網(wǎng)絡(luò)框架话告,安裝依賴包以及安裝Hexo都需要用到node兼搏,為此Node是必須的。從官網(wǎng)下載并安裝Nodejs沙郭,直接下一步即可佛呻。

0.2.1. Git Bash

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.

下載鏈接在這里:

linux下的安裝(引用自官方文檔):

Debian/Ubuntu
For the latest stable version for your release of Debian/Ubuntu

sudo apt-get install git

For Ubuntu, this PPA provides the latest stable upstream Git version

sudo add-apt-repository ppa:git-core/ppa 
sudo apt update;sudo apt install git

Fedora

yum install git (up to Fedora 21)
dnf install git (Fedora 22 and later)

Arch Linux

pacman -S git

1. 第一次安裝搭建Github Page

1.1. 創(chuàng)建repository

在github建立一個名為username.github.io的repository。
其中username為Github賬號名病线,比如我的是xiaohuilee.github.io吓著。

1.2. git clone你的博客項目地址

git clone https://github.com/XiaohuiLee/xiaohuilee.github.io.git

1.3. 切換分支

進入clone的項目目錄,注意此時是在master分支送挑,而master分支平常放生成的博客頁面夜矗,所以我們現(xiàn)在創(chuàng)建一個hexo分支,用來管理hexo相關(guān)文件让虐。

git checkout -b hexo

1.4. 安裝hexo紊撕,以及相關(guān)擴展依賴

建議把npm安裝源改為國內(nèi)的,淘寶就有提供赡突,這樣能提高安裝速度对扶。命令:npm config set registry https://registry.npm.taobao.org区赵。

npm install -g hexo-cli

把當(dāng)前文件夾的文件都移到外面去(包括.git倉庫目錄)

hexo init // 初始化

初始化完成后馬上把文件移回來(一般只會有README.MD文件和.git目錄)
注意:hexo init要求當(dāng)前目錄是一個空目錄,否則git bash會報錯浪南。

npm install // 安裝依賴
npm install hexo-deployer-git --save // 安裝deployer擴展

1.5. 改變博客主題

我這里用的是:huno笼才。


首先克隆huno的github倉庫到本地。

git clone https://github.com/letiantian/huno.git themes/huno

1.6. 修改_config.yml文件

在根目錄xiaohuilee.github.io下有配置文件_config.yml络凿,里面存儲的是Hexo的一些配置信息骡送,使用vim _config.yml打開編輯。

1.6.1. 修改主題

找到theme一行絮记,修改成如下:

theme: huno

注意theme:后面的空格不能省略摔踱。

1.6.2. 修改部署方式和部署目標(biāo)

deploy:
type: git
repo: https://github.com/XiaohuiLee/xiaohuilee.github.io.git
branch: master

1.6.3. 修改自己的個人信息

此外其他相關(guān)配置信息都改成你自己的,比如author這些怨愤。

1.6.4. 啟用圖片資源文件夾

對于那些想要更有規(guī)律地提供圖片和其他資源以及想要將他們的資源分布在各個文章上的人來說派敷,Hexo也提供了更組織化的方式來管理資源。這個稍微有些復(fù)雜但是管理資源非常方便的功能可以通過將config.yml文件中的 post_asset_folder 選項設(shè)為 true 來打開撰洗。

當(dāng)資源文件管理功能打開后篮愉,Hexo將會在你每一次通過hexo new [layout] <title>命令創(chuàng)建新文章時自動創(chuàng)建一個文件夾。這個資源文件夾將會有與這個 markdown 文件一樣的名字差导。將所有與你的文章有關(guān)的資源放在這個關(guān)聯(lián)文件夾中之后试躏,你可以通過下列標(biāo)簽引用方式來引用它們,這樣你就得到了一個更簡單而且方便得多的工作流设褐。

{% asset_img slug [title] %}

比如:

{% asset_img example.jpg This is an example image %}

1.7. 編寫第一篇博文

hexo new "your blog title"

然后會在source/_posts下建立一個your-blog-title.md的文件颠蕴,你可以編輯此文件書寫你想寫的博客內(nèi)容(Markdown格式)。
然后生成博客Html文件以及啟動本地測試的服務(wù)器络断。

hexo generate & hexo server

終端會提示:

INFO  Generated: js/jquery.min.js
INFO  Generated: images/background-cover.jpg
INFO  52 files generated in 2.25 s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

打開瀏覽器并訪問http://localhost:4000就可以看到自己的博客了裁替。
到此為止项玛,我們已經(jīng)在本地測試成功編寫博客文章貌笨,接下來我們需要把整個網(wǎng)站內(nèi)容(src)部署到github上。

1.8. 部署到github

使用命令:

hexo generate -d 

終端會嘗試生成網(wǎng)站靜態(tài)文件并彈出github用戶登錄窗口以供身份認證襟沮,輸入github用戶名和密碼就可以了锥惋。成功提示如下:

Branch 'master' set up to track remote branch 'master' from 'https://github.com/XiaohuiLee/xiaohuilee.github.io.git'.
To https://github.com/XiaohuiLee/xiaohuilee.github.io.git
   d8b8f18..95710ab  HEAD -> master
INFO  Deploy done: git

1.9. 將網(wǎng)站本體提交到Github。

這是為了保持多終端編寫博客功能的必要條件开伏。

git add .
git commit -m 'hexo init'
git push -u origin hexo

注意上傳至hexo分支

1.10. 此時可以在瀏覽器輸入xiaohuilee.github.io來訪問你的博客膀跌。

至此你的博客已經(jīng)成功搭建!

2. 在其他電腦上如何編寫博客并保持同步固灵。

2.1. clone自己Github上的博客倉庫

需要注意的是clone的應(yīng)該是hexo分支捅伤。

2.2. 安裝必備環(huán)境

npm install -g hexo-cli
npm install
npm install hexo-deployer-git --save

2.3. 正常博客書寫發(fā)布流程即可。

注意不要使用hexo init命令巫玻,因為倉庫中已存在丛忆。

hexo new "Another post"
//編寫完后
hexo generate -d
//部署完后記得把自己本體也上傳至hexo分支
git add .
git commit -m 'hexo updated from another pc'
git push -u origin hexo

完祠汇。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市熄诡,隨后出現(xiàn)的幾起案子可很,更是在濱河造成了極大的恐慌,老刑警劉巖凰浮,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件我抠,死亡現(xiàn)場離奇詭異,居然都是意外死亡袜茧,警方通過查閱死者的電腦和手機菜拓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來惫周,“玉大人尘惧,你說我怎么就攤上這事〉莸荩” “怎么了喷橙?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長登舞。 經(jīng)常有香客問我贰逾,道長,這世上最難降的妖魔是什么菠秒? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任疙剑,我火速辦了婚禮,結(jié)果婚禮上践叠,老公的妹妹穿的比我還像新娘言缤。我一直安慰自己,他們只是感情好禁灼,可當(dāng)我...
    茶點故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布管挟。 她就那樣靜靜地躺著,像睡著了一般弄捕。 火紅的嫁衣襯著肌膚如雪僻孝。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天守谓,我揣著相機與錄音穿铆,去河邊找鬼。 笑死斋荞,一個胖子當(dāng)著我的面吹牛荞雏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼凤优,長吁一口氣:“原來是場噩夢啊……” “哼羡疗!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起别洪,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤叨恨,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后挖垛,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體痒钝,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年痢毒,在試婚紗的時候發(fā)現(xiàn)自己被綠了送矩。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡哪替,死狀恐怖栋荸,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情凭舶,我是刑警寧澤晌块,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站帅霜,受9級特大地震影響匆背,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜身冀,卻給世界環(huán)境...
    茶點故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一钝尸、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧搂根,春花似錦珍促、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至隙咸,卻和暖如春沐悦,著一層夾襖步出監(jiān)牢的瞬間成洗,已是汗流浹背五督。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留瓶殃,地道東北人充包。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親基矮。 傳聞我的和親對象是個殘疾皇子淆储,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,930評論 2 361

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