Hexo+Github Page搭建個(gè)人博客

什么是Hexo?Hexo 是一個(gè)快速崎淳、簡(jiǎn)潔且高效的博客框架堪夭。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內(nèi)拣凹,即可利用靚麗的主題生成靜態(tài)網(wǎng)頁(yè)森爽。堪稱在座各位喜歡Markdown的優(yōu)雅人士博客建站神器喲嚣镜!

1. Quick Start

1.1 創(chuàng)建存放Github Pages的倉(cāng)庫(kù)

Github Pages 是面向用戶爬迟、組織和項(xiàng)目開(kāi)放的公共靜態(tài)頁(yè)面搭建托管服務(wù),站點(diǎn)可以被免費(fèi)托管在 Github 上菊匿,你可以選擇使用 Github Pages 提供的域名 github.io 或者自定義域名來(lái)發(fā)布站點(diǎn)付呕。

需要Github賬號(hào),請(qǐng)登錄https://github.com/ 注冊(cè)跌捆。
登錄了自己的github賬號(hào)后徽职,可以安裝下圖一樣,創(chuàng)建自己的GitHub Pages倉(cāng)庫(kù)名[參考https://pages.github.com/ ]佩厚,[PS] 倉(cāng)庫(kù)名repository name需要約定為: 你的賬號(hào)名.github.io

創(chuàng)建Github Pages

創(chuàng)建好博客項(xiàng)目倉(cāng)庫(kù)后姆钉,可以通過(guò)git命名下載到本地,并編輯一下README.md從本地提交到GitHub,這樣做主要是使本地文件與Github關(guān)聯(lián)起來(lái)育韩,方便后面hexo deploy,直接部署博客內(nèi)容到GitHub進(jìn)行更新克蚂。

$ git clone https://github.com/yourGithubName/yourGithubName.github.io
$ vim README.md
# REAMME.md上可以簡(jiǎn)單寫(xiě)一些博客介紹啥的
$ git config --global user.email "you@example.com"
$ git config --global user.name "Your Name"
$ git add ./
$ git commit -m 'test'
$ git push -u origin master
Username for 'https://github.com': Builder34
Password for 'https://Builder34@github.com':

1.2 Hexo安裝

安裝 Hexo 相當(dāng)簡(jiǎn)單。然而在安裝前筋讨,您必須檢查電腦中是否已安裝下列應(yīng)用程序:

$ npm install -g hexo-cli

1.3 Hexo初始化

安裝 Hexo 完成后,我們可以在本地新建一個(gè)文件夾如:builder34.github.io(這個(gè)目錄是我們Github Pages博客項(xiàng)目的目錄),假如我的文件夾路徑為/home/test/builder34.github.io悉罕,建站初始化命令可以如下:

$ cd /home/test/builder34.github.io
$ hexo init ./
$ npm install

$ hexo generate

下面介紹幾個(gè)常用的hexo命令(括號(hào)里面的命令為縮寫(xiě)形式赤屋,效果一樣):
1. hexo generate(hexo g) #生成靜態(tài)文件,會(huì)在當(dāng)前目錄下生成一個(gè)新的叫做public的文件夾
2. hexo new "postTitle" #新建博客文章
3. hexo new page "pageTitle" #新建1個(gè)頁(yè)面
4. hexo server(hexo s) #啟動(dòng)本地web服務(wù)預(yù)覽(加參數(shù)--debug,用于調(diào)試壁袄,如:hexo s --debug)
5. hexo deploy(hexo d) #部署播客到遠(yuǎn)端(比如Github,coding,heroku等平臺(tái))

在命令行中輸入hexo s --debug后类早,運(yùn)行成功后,可以在瀏覽器中輸入:http://localhost:4000看到自己新建的博客了嗜逻。

1.4 更改主題

一般我們初始化博客的文件夾后涩僻,文件結(jié)構(gòu)大概如下:

$ ll
total 1352
-rw-r--r--    1 builder34  staff    32B  4 14 01:34 README.md
-rw-r--r--    1 builder34  staff   2.3K  6 25 10:40 _config.yml
-rw-r--r--    1 builder34  staff    32K  6 26 15:50 db.json
-rw-r--r--    1 builder34  staff   458K  6 26 15:56 debug.log
drwxr-xr-x  293 builder34  staff   9.2K  6 25 10:42 node_modules
-rw-r--r--    1 builder34  staff   110K  6 22 23:59 package-lock.json
-rw-r--r--    1 builder34  staff   564B  6 22 23:59 package.json
drwxr-xr-x   14 builder34  staff   448B  6 25 10:40 public
drwxr-xr-x    5 builder34  staff   160B  4 17 23:12 scaffolds
drwxr-xr-x    3 builder34  staff    96B  6 25 10:57 source
drwxr-xr-x    6 builder34  staff   192B  6 25 11:33 themes

themes文件夾是我們博客主題的存放地方,下面我推薦一個(gè)主題:BlueLake

$ cd themes/
$ git clone https://github.com/chaooo/hexo-theme-BlueLake.git ./BlueLake
$ npm install hexo-renderer-jade@0.3.0 --save
$ npm install hexo-renderer-stylus --save

(該主題更細(xì)致的配置栈顷,請(qǐng)登錄上面這個(gè)github網(wǎng)址逆日,閱讀README.md進(jìn)行定制化配置)

在Hexo配置文件($your_blog_path/_config.yml)中把主題設(shè)置修改為BlueLake。

theme: BlueLake

完成配置后萄凤,執(zhí)行下面語(yǔ)句室抽,重新打開(kāi)http://localhost:4000 可以看到博客以一個(gè)新的主題展現(xiàn)了

$ hexo g
$ hexo s --debug

1.5 hexo部署到Github

配置$your_blog_path/_config.yml文件的Deployment:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/your_githubName/your_githubName.github.io.git

通過(guò)下面的命名進(jìn)行博客靜態(tài)頁(yè)面的生成,以及部署到遠(yuǎn)端Github Pages

#刪除靜態(tài)文件,即 public 文件
$ hexo clean
#生成靜態(tài)文件,即 public 文件
$ hexo generate
#部署到遠(yuǎn)程站點(diǎn)
$ hexo deploy
#也可以使用組合命令(替代上面2條命令):生成靜態(tài)命令并部署到遠(yuǎn)程站點(diǎn)
$ hexo deploy -g
git提交部署錯(cuò)誤
使用 hexo deploy 命名部署到github失敗靡努,報(bào)上面的錯(cuò)誤時(shí)坪圾,安裝下面的插件即可解決:
$ npm install hexo-deployer-git --save

至此,Hexo+Github Pages構(gòu)建個(gè)人博客網(wǎng)站已經(jīng)基本完成了惑朦∈扌梗可以通過(guò)網(wǎng)頁(yè)訪問(wèn)自己的博客地址如:https://builder34.github.io

2.設(shè)置博客自定義域名

進(jìn)入自己博客的repository倉(cāng)庫(kù),通過(guò)類似如下的頁(yè)面進(jìn)行設(shè)置:


進(jìn)入Github Pages設(shè)置

進(jìn)入了settings頁(yè)面后漾月,往下拉直到看到Github Pages模塊:

設(shè)置Github Pages

所填的自定義域名是需要自己已經(jīng)在萬(wàn)網(wǎng)上注冊(cè)的了已日,并且如果勾選了 Enforce HTTPS 的話,你的域名是需要ssl證書(shū)的喲栅屏。

3.注意事項(xiàng)

3.1 上傳README.md并防止被渲染成文章

#在博客根目錄下,新建或編輯你的README.md文件
$ vim README.md
$ mv README.md ./sources
#修改_config.yml文件,設(shè)置不渲染的文件
$ vim _config.yml
skip_render: README.md

3.2 每次hexo deploy后Github Pages自定義域名會(huì)被重置的問(wèn)題

需要在sources目錄下新建CNAME文件(注意為全大寫(xiě)無(wú)后綴的文件哦),文件內(nèi)容為你需要映射到的自定義域名:

$ vim CNAME
blog.monbuilder.top

$ mv CNAME ./sources
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末堂鲜,一起剝皮案震驚了整個(gè)濱河市栈雳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缔莲,老刑警劉巖哥纫,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異痴奏,居然都是意外死亡蛀骇,警方通過(guò)查閱死者的電腦和手機(jī)厌秒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)擅憔,“玉大人鸵闪,你說(shuō)我怎么就攤上這事∈钪睿” “怎么了蚌讼?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)个榕。 經(jīng)常有香客問(wèn)我篡石,道長(zhǎng),這世上最難降的妖魔是什么西采? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任凰萨,我火速辦了婚禮,結(jié)果婚禮上械馆,老公的妹妹穿的比我還像新娘胖眷。我一直安慰自己,他們只是感情好狱杰,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布瘦材。 她就那樣靜靜地躺著,像睡著了一般仿畸。 火紅的嫁衣襯著肌膚如雪食棕。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,292評(píng)論 1 301
  • 那天错沽,我揣著相機(jī)與錄音簿晓,去河邊找鬼。 笑死千埃,一個(gè)胖子當(dāng)著我的面吹牛憔儿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播放可,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼谒臼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了耀里?” 一聲冷哼從身側(cè)響起蜈缤,我...
    開(kāi)封第一講書(shū)人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎冯挎,沒(méi)想到半個(gè)月后底哥,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年趾徽,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了续滋。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡孵奶,死狀恐怖疲酌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情拒课,我是刑警寧澤徐勃,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站早像,受9級(jí)特大地震影響僻肖,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜卢鹦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一臀脏、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧冀自,春花似錦揉稚、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至驻呐,卻和暖如春灌诅,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背含末。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工猜拾, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人佣盒。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓挎袜,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親肥惭。 傳聞我的和親對(duì)象是個(gè)殘疾皇子盯仪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

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