Hexo博客搭建四步曲

一、準(zhǔn)備工作

1.1下載安裝以下文件:node.js/GitForWindows/npm

? node.js(最新版本的node.js已經(jīng)集成了npm模塊,無(wú)需單獨(dú)安裝)

(1)下載鏈接:https://nodejs.org/en/download
(2)安裝教程:http://www.cnblogs.com/zhouyu2017/p/6485265.html

? Git For Windows(版本控制軟件)

下載鏈接:https://git-for-windows.github.io/
安裝教程:https://www.cnblogs.com/vitah/p/3612473.html
1.2注冊(cè)GitHub(類(lèi)似于服務(wù)器,用來(lái)部署你的項(xiàng)目):
注冊(cè)鏈接:https://github.com/
使用教程:https://www.cnblogs.com/zfanlong1314/p/3715490.htm
1.3安裝Hexo:

Hexo是一個(gè)簡(jiǎn)單、快速、強(qiáng)大的基于 Github Pages 的博客發(fā)布工具

(1)使用Git Bash執(zhí)行以下命令(鼠標(biāo)右鍵可找到git bash):$ npm install -g hexo
(2)初始化Hexo(先在本地新建hexo文件夾,然后在此文件夾內(nèi)右鍵“git bash”),執(zhí)行以下代碼:$ hexo init
(3)執(zhí)行以下代碼后,通過(guò)localhost:4000網(wǎng)址查看你自己的網(wǎng)頁(yè)效果:先$ hexo g,再$ hexo s

目錄說(shuō)明:


image.png
1.4注冊(cè)簡(jiǎn)書(shū):

作為博客文章內(nèi)容中圖片所對(duì)應(yīng)的圖片服務(wù)器,與.md文件語(yǔ)法相關(guān)

注冊(cè)鏈接:http://www.itdecent.cn/
使用:直接將圖片拖拽至文章正文,便生成了圖片路徑,在編寫(xiě)博客正文時(shí)可直接調(diào)用。

二、環(huán)境配置

2.1創(chuàng)建github倉(cāng)庫(kù):

(1)新建一個(gè)名為你的用戶名.github.io的倉(cāng)庫(kù),比如說(shuō),如果你的github用戶名是test,那么你就新建test.github.io的倉(cāng)庫(kù)(必須是你的用戶名,其它名稱無(wú)效),將來(lái)你的網(wǎng)站訪問(wèn)地址就是 http://test.github.io。每一個(gè)github賬戶最多只能創(chuàng)建一個(gè)這樣可以直接使用域名訪問(wèn)的倉(cāng)庫(kù);
(2)注意事項(xiàng):

a.注冊(cè)的郵箱一定要驗(yàn)證,否則不會(huì)成功;
b.倉(cāng)庫(kù)名字必須是:username.github.io,其中username是你的用戶名;
c.倉(cāng)庫(kù)創(chuàng)建成功不會(huì)立即生效,需要過(guò)一段時(shí)間,大概10-30分鐘,或者更久,我的等了半個(gè)小時(shí)才生
效;

注:創(chuàng)建成功后,默認(rèn)會(huì)在你這個(gè)倉(cāng)庫(kù)里生成一些示例頁(yè)面,以后你的網(wǎng)站所有代碼都是放在這個(gè)倉(cāng)庫(kù)里啦。

2.2搭橋到github:

(1)回到gitbash中,配置github賬戶信息(YourName和YourEail都替換成你自己的):

$ git config --global user.name "liuxianan"http:// 你的github用戶名,非昵稱
$ git config --global user.email  "[xxx@qq.com](mailto:xxx@qq.com)"http:// 填寫(xiě)你的github注冊(cè)郵箱

(2)配置SSH-key
為什么要配置這個(gè)呢?因?yàn)槟闾峤淮a肯定要擁有你的github權(quán)限才可以,但是直接使用用戶名和密碼太不安全了,所以我們使用ssh key來(lái)解決本地和服務(wù)器的連接問(wèn)題。
用git bash執(zhí)行如下命令:

$ cd ~/. ssh #檢查本機(jī)已存在的ssh密鑰

如果提示:No such file or directory 說(shuō)明你是第一次使用git。

ssh-keygen -t rsa -C "郵件地址"

然后連續(xù)3次回車(chē),最終會(huì)生成一個(gè)文件在用戶目錄下,打開(kāi)用戶目錄,找到.ssh\id_rsa.pub文件,記事本打開(kāi)并復(fù)制里面的內(nèi)容,打開(kāi)你的github主頁(yè),進(jìn)入個(gè)人設(shè)置 -> SSH and GPG keys -> New SSH key:


image.png

將剛復(fù)制的內(nèi)容粘貼到key那里,title隨便填,保存。

2.3域名綁定:

看個(gè)人需求,域名也很便宜,3-6塊,活動(dòng)時(shí)1塊一年。如果不想綁定域名,就用默認(rèn)的 xxx.github.io 來(lái)訪問(wèn),如果想個(gè)性一點(diǎn),可以考慮入手一個(gè)域名。具體的域名綁定配置請(qǐng)參考以下博客,再次不做過(guò)多講述:

域名綁定網(wǎng)址:https://blog.csdn.net/wgshun616/article/details/81019739

三、裝飾博客

不同的人,對(duì)自身博客主題風(fēng)格的要求都不一樣,所以在基礎(chǔ)博客框架搭建成功后,接下來(lái)就是對(duì)博客整體進(jìn)行布局調(diào)整,將現(xiàn)有的博客風(fēng)格改裝成自己想要的主題風(fēng)格。頁(yè)面的排版布局、顏色色調(diào)、網(wǎng)站圖標(biāo)、新增內(nèi)容等等,這些都是可以在原始主題風(fēng)格下進(jìn)行修改的,改主題內(nèi)部布局文件即可。

3.1博客主題:

選主題鏈接:https://www.zhihu.com/question/24422335
修改主題:
(1)下載主題:進(jìn)入hexo/theme下,打開(kāi)git bash窗口,從上面選取的主題倉(cāng)庫(kù),下載主題:

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

(2)配置主題:修改_config.yml中的theme: landscape改為theme: yilia,然后重新執(zhí)行hexo g來(lái)重新生成。如果出現(xiàn)一些莫名其妙的問(wèn)題,可以先執(zhí)行hexo clean來(lái)清理一下public的內(nèi)容,然后再來(lái)重新生成和發(fā)
布。

3.2添加相關(guān)主題插件(根據(jù)個(gè)人所需):

日歷插件:http://note.youdao.com/noteshare?id=80986bdd81eefe233016ebfecf6e295a&sub=FADE2DB590FD480190B297CA8F807C7C
訂閱插件:http://blog.csdn.net/u011303443/article/details/52333695
統(tǒng)計(jì)插件:https://crane-yuan.github.io/2016/03/25/Hexo-05-add-site-statistics/
音樂(lè)插件:http://blog.csdn.net/u013384788/article/details/74079890)
注:插件較多,根據(jù)個(gè)人需求進(jìn)行添加,在此不做過(guò)多說(shuō)明,網(wǎng)上教程較多。

3.3修改主題布局色調(diào):

參看以下鏈接:http://www.javait.club/2017/11/16/HexoArticleStyle/

四、寫(xiě)博客(MarkDown)

4.1寫(xiě)博客的工具:

在線的:http://mahua.jser.me/
本地的:markdown編輯器
在線和本地均可:有道云和簡(jiǎn)書(shū)都可以
案例:

image.png

4.2Markdown語(yǔ)法:

參考鏈接:http://www.itdecent.cn/p/191d1e21f7ed

4.3Hexo常用命令:
hexo new "postName" #新建文章
hexo new page "pageName" #新建頁(yè)面
hexo generate #生成靜態(tài)頁(yè)面至public目錄
hexo server #開(kāi)啟預(yù)覽訪問(wèn)端口(默認(rèn)端口4000,'ctrl + c'關(guān)閉server)
hexo deploy #部署到GitHub
hexo help  # 查看幫助
hexo version  #查看Hexo的版本

用的最多的就是:hexo g(編譯)、hexo d(部署到github)。

4.4Hexo發(fā)布博客流程:
(1)進(jìn)入博客文件目錄,創(chuàng)建.md博客文件,按照markdown語(yǔ)法進(jìn)行編寫(xiě);(博客文件目錄:hexo/source/_posts)
(2)編譯并發(fā)布博客:在當(dāng)前目錄下,右鍵git bash,然后依次執(zhí)行編譯(hexo g)和部署(hexo d),發(fā)布以完成的博客到git hub。
(3)訪問(wèn)自己的博客網(wǎng)址:www.javait.club

最終效果圖:


image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容