使用Hexo搭建個人博客詳細教程

????????用了一段時間的hexo,本著“授人以魚贮竟,不如授人以漁”的理念丽焊,決定整理一篇hexo使用教程,分享大家咕别。

????????hexo是一種快速技健、簡單并且強大的博客框架,你可以通過使用markdown或者其他語言撰寫post(帖子)惰拱,然后hexo引擎將其生成靜態(tài)網(wǎng)頁文件(當然雌贱,官網(wǎng)的說法是“在數(shù)秒內(nèi)生成伴有漂亮主題的靜態(tài)文件”)并以博文的形式顯現(xiàn)出來。

寫在前面?

????????本文定位于面向非專業(yè)人士角度撰寫的科普式教程偿短,有專業(yè)基礎(chǔ)的人可跳過大多步驟欣孤,僅閱讀標*部分

? ? ? ? 另外,附上本人成品個站https://magi.getshell.cn昔逗,如果你也想親力親為經(jīng)營一個屬于自己的個人博客降传,那就繼續(xù)往下看吧^_^

背景

? ??????應(yīng)@JXY邀,要我教他搭建個人博客勾怒,于是也就找了一個足夠的理由來回顧一波如何使用hexo搭建個人博客婆排。既然給別人講東西,那自然要先對講的東西深入了解笔链,不然就是誤人子弟了段只。于是打開hexo官網(wǎng) ,發(fā)現(xiàn)鉴扫!竟然赞枕!被!墻坪创!了炕婶!好吧,后來發(fā)現(xiàn)是9點多被墻了一段時間(貌似是hexo使用的CDN服務(wù)Cloudflare被block了)莱预,介于避免日后再想?yún)⒖脊倬W(wǎng)文檔時無法及時訪問柠掂,索性這次就把官網(wǎng)的一些精華翻譯下來,留作日后參考锁施。

*核心步驟

先看官方給出的安裝步驟

準備篇

首先你要做好準備掌握以下幾項東西:

- git

- nodejs

- bash命令

好吧,這樣講未免顯得門檻略高,其實hexo是一種非常零門檻的工具悉抵,只要你想學肩狂,任何沒有專業(yè)知識的人都能用起來,只要照著做就可以了

環(huán)境搭建篇

第一步:

在電腦安裝git (如果下載不了,可以通過我的網(wǎng)盤下載git )git是一個偉大的版本控制軟件姥饰,它的作用在于作為一個代碼提交工具傻谁,將你編寫的每一行代碼(或文字)存放到一個代碼倉庫,它在其中起到記錄你每一次提交歷史的作用列粪,這樣你就可以對自己的每一次提交歷史有直觀的查看审磁,并且可以對比不同版本之間的區(qū)別,還可以回退到某一個提交歷史節(jié)點岂座,還有balabala很多好處态蒂。

第二步:安裝nodejs

當你安裝好了git以后,可以鼠標右鍵喚出git


方式一

然后你就可以很方便的安裝nodejs了费什,通過如下命令先安裝nvm(此方式適用于專業(yè)人士钾恢,非專業(yè)人士請參考后面下載安裝包的方式二)

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

nvm是nodejs version manager,nodejs版本管理器鸳址,用以在機器上安裝并維護多個node的版本


如果執(zhí)行失敶耱健(看到很多error),也可以通過我網(wǎng)盤的安裝包進行下載 當安裝完成后,通過cmd窗口鍵入nvm稿黍,如果如下圖所示疹瘦,就證明安裝成功了


方式二

如果你想在電腦尚未安裝git的情況下安裝nodejs,或者安裝nvm失敗巡球,你也可以通過傳統(tǒng)的方式安裝nodejs言沐,如下:

訪問nodejs官網(wǎng) 下載,或者通過我的網(wǎng)盤下載 安裝包辕漂,安裝方式如同安裝其他軟件一樣安裝成功后打開cmd窗口呢灶,鍵入node --version,若如下圖所示則證明安裝成功

nodejs是一個基于谷歌的**V8** Javascript引擎的Javascript運行環(huán)境钉嘹。它利用一個事件驅(qū)動的鸯乃、非阻塞I/O的模型使得其輕量并且高效。另外跋涣,nodejs的包生態(tài)系統(tǒng)npm 是世界上最大的開源庫生態(tài)系統(tǒng)缨睡。

(包生態(tài)系統(tǒng)通俗來講就是,一個會編程的你陈辱,某天寫了一段代碼奖年,覺得其功能可被大家重復(fù)使用,并且很好用沛贪,于是你就把這段代碼打了個包丟到網(wǎng)上陋守,于是大家就都可以通過下載你這個包來使用這個功能了)

V8是谷歌的一個開源高性能Javascript引擎震贵,使用C++編寫,并應(yīng)用于Google Chrome瀏覽器(來自谷歌的開源瀏覽器)水评、Node.js等等猩系。它按照ECMA-262標準實現(xiàn)了ECMAScript,并可運行在windows7及更高版本中燥、macOS10.5及更高版本和使用IA-32寇甸、ARM或者MIPS處理器的linux系統(tǒng)。V8可以單獨運行疗涉,或者被嵌入任何C++程序拿霉。(以上內(nèi)容由本人翻譯自V8官網(wǎng)首頁,如有不準確之處請指正)

p.s. 關(guān)于nodejs和Javascript的關(guān)聯(lián)咱扣,個人理解就是Javascript本來是運行在客戶端(瀏覽器)的腳本語言绽淘,如果想要Javascript腳本在服務(wù)器端運行怎么辦呢,此時就有了nodejs偏窝,由于V8引擎的存在收恢,使得通過Nodejs可以在服務(wù)器端模擬出客戶端的環(huán)境,從而來運行Javascript腳本

安裝篇

在你的電腦有了git和nodejs以后祭往,就可以正式安裝hexo了

接下來你只需要在任何一個地方(比如桌面)右鍵鼠標喚出git bash


然后粘貼這段命令

npm install -g hexo-cli

解釋:這就是通過你剛才安裝的nodejs里自帶的包管理器npm安裝了一個叫做hexo-cli的包(在npm里管這叫模塊module)

npm意思是使用npm執(zhí)行命令

install意思是要通過npm進行安裝模塊行為

-g是對于install動作添加的參數(shù)伦意,意思是global,全局安裝

hexo-cli是你已知需要安裝的模塊名稱 安裝成功后你就可以正式進行使用了

使用篇

此時你可以選電腦上的任何一個目錄(文件夾)作為自己博客的存放地硼补,比如

然后在這里右鍵喚出git bash

這個時候就用到**準備篇**里講的git和bash命令的知識了驮肉,不過不要怕,其實經(jīng)常用的也就那么幾個命令已骇,比如ls(就是list离钝,列出當前目錄的所有文件)、cd(change directory褪储,切換目錄)

首先卵渴,我們通過

hexo init 任意名稱(比如 hexo init blog)

這就是通過剛才安裝的hexo里的hexo init(初始化)命令創(chuàng)建了一個hexo式的文件夾,點進去看看都有什么

當然鲤竹,你鼠標點進去只是在你的windows界面系統(tǒng)你這個當前用戶進入到blog這個目錄了浪读,但git bash還停留在剛才的myblog那個目錄,所以你需要在git bash里鍵入cd blog辛藻,來切換到blog目錄碘橘,你可以再鍵入pwd(print working directory,打印出當前工作目錄)來確認自己是否進到了blog目錄

上述操作如下圖:

然后輸入npm install吱肌,會根據(jù)博客既定的依賴安裝依賴包

Tip: 既然步入程序世界痘拆,理應(yīng)準備一個好用(高效)的文本編輯器,總不能使用windows自帶記事本來編輯這些東西吧氮墨,此處我推薦Atom纺蛆、Visual Studio Code吐葵、Sublime Text都是主流的文本編輯器,具體下載使用請自行查閱

結(jié)構(gòu)解釋篇

_config.yml:主配置文件(博客寫到一半時突然獲知YAML原來是一種新型的配置文件語言桥氏,是一種比JSON還簡潔和強大的格式折联,而yml則是這種配置文件的后綴)

package.json:應(yīng)用數(shù)據(jù),EJS识颊、Stylus和Markdown渲染器已默認安裝,當然你也可以卸載掉它們奕坟,如果你想

scaffolds(腳手架):當你新建一篇帖子時祥款,hexo會基于這個里面的模板生成一個文件

source(源):這是你放置網(wǎng)站內(nèi)容的地方,hexo會忽略隱藏文件或者以下劃線 _ 開頭的文件夾月杉,除了_post這個目錄刃跛。可渲染的文件苛萎,例如markdown文件桨昙、HTML文件會被hexo處理并放入public(發(fā)布)目錄,其他文件將會被原樣拷貝過去腌歉。

themes(主題):Hexo會結(jié)合主題的網(wǎng)頁內(nèi)容和你的博文生成靜態(tài)站點

當你第一次hexo init之后生成的一系列文件其實包含了hexo最核心的一些東西蛙酪,其中包含如上所介紹的,包括主配置文件_config.yml翘盖、source目錄里的_post(帖子)里放了一篇示例博文“hello-world.md”桂塞、themes里提供了默認主題landscape、scaffolds里提供了post文件的初始模子馍驯。這一切就足以讓你快速體驗如何部署一個博客在放在網(wǎng)上提供別人來訪問阁危。

博客部署

那么博文已經(jīng)有了,怎么把它放到網(wǎng)上讓所有人都能訪問呢汰瘫,這時候你需要把它部署到服務(wù)器狂打,并提供訪問地址,理論上來講混弥,你可能需要租服務(wù)器趴乡,并把博客丟上去,然后還要配域名剑逃,因為你總不可能讓別人通過IP地址訪問你的博客浙宜,這樣看來,還有balabala很多事情要做蛹磺,涉及到web應(yīng)用部署發(fā)布的一系列知識粟瞬。

但是一般hexo的使用都是聯(lián)合Github Pages 或者Coding Pages 一起使用的,Github和Coding都是在線代碼倉庫萤捆,(二者的區(qū)別在于前者是國際的裙品,后者是國內(nèi)的)可以遠程寄存你的代碼或文件俗批,他們都各自提供了一種叫Pages的服務(wù),可以使得你的**用戶名同名倉庫**可以作為域名對外公布訪問市怎,這樣你相當于擁有了一個免費個人網(wǎng)站岁忘,并且還不需要注冊域名和備案。

有了這個技術(shù)区匠,我們就可以通過git把本地生成的博客靜態(tài)文件(public目錄里的)上傳到這個倉庫里干像,然后別人就可以通過訪問這個倉庫的方式來訪問你的博客(只要你的代碼結(jié)構(gòu)符合網(wǎng)站基本結(jié)構(gòu))

快速上手篇

所以一切都配置好之后(按照個性化配置好你的_config.yml文件),你發(fā)布一篇博客到網(wǎng)上只需要三步:

第一步:創(chuàng)建博文

在你的博客主目錄下通過git bash鍵入hexo new 博客標題

第二步:按照hexo的渲染方式將你的博文渲染成靜態(tài)文件

繼上一步之后驰弄,hexo g(完整命令是hexo generate麻汰,即生成文件的意思)

第三步:按照_config.yml里配置的發(fā)布方式,將public里的靜態(tài)文件上傳至你的線上代碼倉庫(Github或Coding)

hexo d(完整命令是hexo deploy戚篙,即發(fā)布的意思)

僅此而已五鲫,這時打開瀏覽器,輸入符合你pages的域名岔擂,看看自己的博客是不是顯現(xiàn)出來了位喂。

后記

其實hexo本身還是有不少的東西,如果想要成為一名高級玩家乱灵,需要你自己去進一步了解學習塑崖,本文僅初步安裝做如此介紹,后續(xù)如果有精力的話痛倚,我會再繼續(xù)出其他關(guān)于hexo其他配置的使用教程弃舒。

不過,`大道至簡`状原,看穿事物的本質(zhì)聋呢,即能快速掌握其核心。hexo說白了就是一個基于nodejs的工程颠区,它定義了自己的一套文件格式削锰,你只要按照一系列模板進行個性化編輯,并添加個人用戶內(nèi)容毕莱,然后使用它的一套命令器贩,就可以把這些文件渲染成瀏覽器可訪問的格式。剩下的就是關(guān)乎WEB原理的東西了朋截。

本文中后部可能略去了一些詳細的操作步驟蛹稍,不過整體性上應(yīng)該達到了教學的目的,希望讀者都可以借助互聯(lián)網(wǎng)自己完成剩余的部分部服。

END

過程中由于`天時·地利·人和`都不同唆姐,所以可能遇到與我教程中所寫不同的情況,但作為一個非專業(yè)人士廓八,只要你肯耐著性子折騰奉芦,這些東西你也玩得轉(zhuǎn)赵抢,而如果作為一個專業(yè)人士,鉆研声功,是你的天職烦却。比如博主寫這篇教程也是通過先學習很多知識點,才“負責任”地整理出這篇博文先巴。

參考鏈接:

hexo官方文檔

nodejs官網(wǎng)

V8引擎官網(wǎng)

npm官網(wǎng)

廖雪峰Javascript教程?

阮一峰的網(wǎng)絡(luò)日志

YAML語言教程

Hexo源碼

知識是理應(yīng)無私分享的其爵,而智慧是分享不了的

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市伸蚯,隨后出現(xiàn)的幾起案子醋闭,更是在濱河造成了極大的恐慌,老刑警劉巖朝卒,帶你破解...
    沈念sama閱讀 206,126評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異乐埠,居然都是意外死亡抗斤,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2 382
  • 文/潘曉璐 我一進店門丈咐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來瑞眼,“玉大人,你說我怎么就攤上這事棵逊∩烁恚” “怎么了?”我有些...
    開封第一講書人閱讀 152,445評論 0 341
  • 文/不壞的土叔 我叫張陵辆影,是天一觀的道長徒像。 經(jīng)常有香客問我,道長蛙讥,這世上最難降的妖魔是什么锯蛀? 我笑而不...
    開封第一講書人閱讀 55,185評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮次慢,結(jié)果婚禮上旁涤,老公的妹妹穿的比我還像新娘。我一直安慰自己迫像,他們只是感情好劈愚,可當我...
    茶點故事閱讀 64,178評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著闻妓,像睡著了一般菌羽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上由缆,一...
    開封第一講書人閱讀 48,970評論 1 284
  • 那天算凿,我揣著相機與錄音份蝴,去河邊找鬼。 笑死氓轰,一個胖子當著我的面吹牛婚夫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播署鸡,決...
    沈念sama閱讀 38,276評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼案糙,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了靴庆?” 一聲冷哼從身側(cè)響起时捌,我...
    開封第一講書人閱讀 36,927評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎炉抒,沒想到半個月后奢讨,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,400評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡焰薄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2 323
  • 正文 我和宋清朗相戀三年拿诸,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片塞茅。...
    茶點故事閱讀 37,997評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡亩码,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出野瘦,到底是詐尸還是另有隱情描沟,我是刑警寧澤,帶...
    沈念sama閱讀 33,646評論 4 322
  • 正文 年R本政府宣布鞭光,位于F島的核電站吏廉,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏惰许。R本人自食惡果不足惜迟蜜,卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望啡省。 院中可真熱鬧娜睛,春花似錦、人聲如沸卦睹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽结序。三九已至障斋,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背垃环。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1 260
  • 我被黑心中介騙來泰國打工邀层, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人遂庄。 一個月前我還...
    沈念sama閱讀 45,423評論 2 352
  • 正文 我出身青樓寥院,卻偏偏與公主長得像,于是被迫代替她去往敵國和親涛目。 傳聞我的和親對象是個殘疾皇子秸谢,可洞房花燭夜當晚...
    茶點故事閱讀 42,722評論 2 345

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