????????用了一段時間的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è)人士,鉆研声功,是你的天職烦却。比如博主寫這篇教程也是通過先學習很多知識點,才“負責任”地整理出這篇博文先巴。
參考鏈接:
知識是理應(yīng)無私分享的其爵,而智慧是分享不了的