使用hexo與github搭建靜態(tài)博客

前言:本文是一篇簡(jiǎn)單的獨(dú)立博客搭建教程瞒爬,內(nèi)容不夠完善牛柒,在我使用博客的過(guò)程中會(huì)不斷實(shí)踐并進(jìn)行補(bǔ)充务豺。


1.安裝node.js

下載node.js安裝過(guò)程很簡(jiǎn)單。

2.安裝hexo

找個(gè)地方新建個(gè)文件夾誓篱,命名隨意朋贬,我們先假設(shè)將其命名為hexo。在新建的hexo文件夾內(nèi)最上面的路徑顯示框中輸入CMD,然后回車(chē)打開(kāi)命令行程序并且路徑是當(dāng)前文件夾窜骄。

注意:本文中hexo相關(guān)所有命令都要在此站點(diǎn)目錄下锦募。

在命令行界面中執(zhí)行如下命令安裝hexo:

npm install -g hexo

然后輸入如下命令自動(dòng)生成建立網(wǎng)站所需要的文件:

hexo init

然后按照提示,運(yùn)行如下命令安裝node_modules:

npm install

這時(shí)hexo基本的安裝就已經(jīng)完成邻遏,運(yùn)行如下命令啟動(dòng)本地hexo服務(wù):

hexo server

提示服務(wù)啟動(dòng)后在瀏覽器中打開(kāi)http://localhost:4000/進(jìn)行預(yù)覽糠亩,這時(shí)可以看到Hexo已自動(dòng)生成了一篇blog,停止服務(wù)按Ctrl+C准验。

3.新建文章

在上步命令行窗口中執(zhí)行:

hexo new "新建文章標(biāo)題"

該命令會(huì)在\\source_posts目錄下心生成一個(gè).md為后綴的markdown文件赎线。當(dāng)然也可以直接在\\source_posts中新建一個(gè)md文件。用markdown編輯器將其打開(kāi)就可以寫(xiě)文章了糊饱。

markdown編輯器我使用的是markdownpad垂寥。

Atom也不錯(cuò),還可以安裝插件另锋,打字有狂拽酷炫吊炸天的特效矫废。

在寫(xiě)文章時(shí)如果需要使用圖片,可以先把圖片上傳到github中再引用砰蠢。github使用方法在下文。

hexo首頁(yè)默認(rèn)顯示的是文章全文唉铜,如果你想只顯示文章的簡(jiǎn)介台舱,就在文章中你想在首頁(yè)顯示的部分后加上

<!--more-->

4.更換主題

hexo有很多主題可以從這里挑個(gè)

hexo-theme-yilia主題為例潭流,在命令行窗口中執(zhí)行如下命令將主題文件克隆到themes文件夾中:

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

然后打開(kāi)站點(diǎn)配置文件_config.yml竞惋,找到theme 字段,并將其值更改為 yilia灰嫉。然后執(zhí)行

hexo server

并在瀏覽器中打開(kāi)http://localhost:4000/進(jìn)行預(yù)覽拆宛,看是否更換主題成功。

修改部分網(wǎng)站信息比如標(biāo)題讼撒、描述浑厚、語(yǔ)言設(shè)置也是在_config.yml文件中股耽。

5.404網(wǎng)頁(yè)

404頁(yè)面網(wǎng)上有很多模板,推薦使用騰訊的尋子公益404頁(yè)面钳幅。

在/source目錄下新建txt文件物蝙,將下面代碼復(fù)制粘貼到其中

<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8">

然后保存,將其重命名為404.html敢艰。

404網(wǎng)頁(yè)在本地預(yù)覽看不到效果诬乞,上傳到github后可以查看。

6.部署到github

注冊(cè)登錄github官網(wǎng),點(diǎn)擊網(wǎng)頁(yè)右側(cè)加號(hào)New repository钠导。

倉(cāng)庫(kù)名必須與你用戶名對(duì)應(yīng)震嫉,格式為owner_name.github.io,比如我的github名為zhaochenpu,博客的倉(cāng)庫(kù)名就是zhaochenpu.github.io牡属,這樣的庫(kù)每個(gè)用戶名下只能建立一個(gè)票堵。

在命令行窗口中執(zhí)行:

hexo generate

這個(gè)命令會(huì)在站點(diǎn)目錄下生成public文件夾,其中包含網(wǎng)站的html湃望、css等文件换衬。

其他人大多是使用git上傳,我采用的是github客戶端上傳证芭,其實(shí)都差不多瞳浦。使用git的hexo可以參考如下教程Hexo搭建Github靜態(tài)博客

因?yàn)榫W(wǎng)絡(luò)原因废士,github下載和安裝的過(guò)程可能很慢叫潦,有時(shí)還會(huì)失敗,重試下就好了官硝。

安裝并登陸了github客戶端后矗蕊,點(diǎn)擊左上角的加號(hào),在彈出的界面中點(diǎn)clone,選擇前面創(chuàng)建的庫(kù)克隆到本地。

然后我們將hexo站點(diǎn)目錄下的public文件夾內(nèi)所有文件復(fù)制粘貼到本地的庫(kù)文件夾中氢架,這時(shí)github客戶端中就會(huì)顯示有chenges,在summary框中輸入摘要傻咖,點(diǎn)擊Commit按鈕,如果是第一次提交點(diǎn)擊左上角的publish按鈕岖研,之后的代碼提交時(shí)publish按鈕會(huì)變成sync按鈕卿操。

然后打開(kāi)github網(wǎng)頁(yè)刷新查看,github網(wǎng)站上有時(shí)更新很慢孙援,等到庫(kù)中顯示的是最新代碼后害淤,在瀏覽器中打開(kāi)zhaochenpu.github.io(將名字換成你的)查看。

之后每次博客有新的改動(dòng)需要部署到github時(shí)拓售,就在hexo站點(diǎn)根目錄下進(jìn)入命令行窥摄,執(zhí)行:

hexo g

生成靜態(tài)文件

或者

hexo s -g

進(jìn)行預(yù)覽加生成靜態(tài)文件

然后將生成的public文件夾內(nèi)所有文件復(fù)制粘貼到庫(kù)文件夾內(nèi)覆蓋,再用github客戶端同步到github础淤。

當(dāng)然你也可以直接在本地的庫(kù)文件夾中執(zhí)行hexo的安裝和其他配置崭放,然后將public文件夾內(nèi)所有文件粘貼到庫(kù)文件夾根目錄下哨苛,在github客戶端中的Repository settings中添加忽略的文件,只上傳需要的文件莹菱。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末移国,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子道伟,更是在濱河造成了極大的恐慌迹缀,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蜜徽,死亡現(xiàn)場(chǎng)離奇詭異祝懂,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)拘鞋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)砚蓬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人盆色,你說(shuō)我怎么就攤上這事灰蛙。” “怎么了隔躲?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵摩梧,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我宣旱,道長(zhǎng)仅父,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任浑吟,我火速辦了婚禮笙纤,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘组力。我一直安慰自己省容,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布燎字。 她就那樣靜靜地躺著腥椒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪轩触。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,785評(píng)論 1 314
  • 那天家夺,我揣著相機(jī)與錄音脱柱,去河邊找鬼。 笑死拉馋,一個(gè)胖子當(dāng)著我的面吹牛榨为,可吹牛的內(nèi)容都是我干的惨好。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼随闺,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼日川!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起矩乐,我...
    開(kāi)封第一講書(shū)人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤龄句,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后散罕,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體分歇,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年欧漱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了职抡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡误甚,死狀恐怖缚甩,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情窑邦,我是刑警寧澤擅威,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站奕翔,受9級(jí)特大地震影響裕寨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜派继,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一宾袜、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧驾窟,春花似錦庆猫、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至恩急,卻和暖如春杉畜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背衷恭。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工此叠, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人随珠。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓灭袁,卻偏偏與公主長(zhǎng)得像猬错,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子茸歧,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

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