hexo评论_【前端简历加分】hexo框架搭建个人博客站点,手把手教学
最近,粉絲們?cè)诮鹁陪y十期間也是不斷的面試,有比較多的畢業(yè)生說(shuō)我在這個(gè)期間出多一些面試題,上幾期都是傾向于面試文章,這期出一次簡(jiǎn)歷加分項(xiàng)操作,使用hexo框架搭建個(gè)人博客。
作為應(yīng)屆畢業(yè)生或者1-3年工作經(jīng)驗(yàn)的程序員擁有自己的個(gè)人博客站點(diǎn),絕對(duì)是簡(jiǎn)歷的加分項(xiàng),然而學(xué)習(xí)的成本確實(shí)非常的低,只要幾十分鐘就能搭建好自己的個(gè)人博客。
閑話不多說(shuō),下面我們就開(kāi)始動(dòng)手來(lái)搭建自己的博客吧!
安裝Node環(huán)境
首先我們?cè)诒緳C(jī)要安裝Node環(huán)境,我們可以直接來(lái)到Node.js官網(wǎng):https://nodejs.org/en/,直接點(diǎn)擊下圖下載。
下載后,直接雙擊,然后就是一直下一步下一步的傻瓜式操作。這里要注意的是:有的人的電腦可能已經(jīng)安裝好Node環(huán)境,已經(jīng)安裝好的可以通過(guò)在cmd窗口執(zhí)行下面的命令查看Node版本:
node?-v若是在Node版本為10以下的要更新一下自己的Node版本,因?yàn)镹ode10以下版本的執(zhí)行安裝hexo的時(shí)候會(huì)報(bào)錯(cuò),并且它會(huì)明確的提示你版本不匹配的報(bào)錯(cuò)信息。
安裝完后,再次檢驗(yàn)一下cmd窗口分別輸入輸入下面兩條命令:
node?-vnpm?-v
安裝完Node環(huán)境后,就是安裝Git,安裝Git很簡(jiǎn)單,這里就直接略過(guò)了,在Git官網(wǎng)下載:https://git-scm.com/downloads,然后也是傻瓜式一步一步的操作。
安裝hexo
首先,在自己的本地中新建一個(gè)文件夾用來(lái)存放hexo的代碼,我這里就直接在E:\MyBlog下進(jìn)行安裝hexo。
在E:\MyBlog目錄下,右擊打開(kāi)Git Bash,接著在Gir Bash中執(zhí)行:npm install -g hexo命令,當(dāng)看到下圖所示表示安裝完成,第一次可能等的時(shí)間會(huì)比較長(zhǎng):
接著在執(zhí)行:hexo init,初始化hexo項(xiàng)目,實(shí)際是從github中拉取項(xiàng)目:
當(dāng)hexo初始化完后,你就能看你當(dāng)前目錄下多出了很多有關(guān)hexo項(xiàng)目的文件:
這些目錄中,其中比較重要的文件和文件夾是:source和themes文件夾,以及_config.yml文件:
接下來(lái)執(zhí)行:npm install和hexo g,使用npm源安裝所依賴的組件和編譯生成靜態(tài)頁(yè)面。
執(zhí)行完上面的命令后,你會(huì)發(fā)現(xiàn)項(xiàng)目多了一個(gè)public文件夾,該文件夾就是用于存放靜態(tài)頁(yè)面的地方,該文件夾下的靜態(tài)頁(yè)面都是根據(jù)配置文件動(dòng)態(tài)生成的,所以只要修改配置文件_config.yml中的配置信息,就可以使生成的靜態(tài)頁(yè)面發(fā)生改變:
最后就是啟動(dòng)hexo,通過(guò)執(zhí)行命令:hexo s,就會(huì)出現(xiàn)如下的頁(yè)面:
它已經(jīng)明確的告訴你,訪問(wèn)本地4000端口,在瀏覽器輸入:http://localhost:4000,若是出現(xiàn)了下面的頁(yè)面說(shuō)明本地搭建成功:
我們現(xiàn)在能看到的就是hexo默認(rèn)的主題,該主題信息存儲(chǔ)在themes下的landscape文件夾中。
若是想要修改這個(gè)默認(rèn)主題,比如上面圖片中大大的Hexo字體,我們要修改為我們自己的博客名稱,首先打開(kāi)MyBlog目錄下的配置文件_config.yml:
在這個(gè)配置文件有很多的配置信息,我們可以先找到title以及author這兩個(gè)字段修改形成我們自己的信息。
接著執(zhí)行:hexo clean和hexo g,hexo clean:表示清除原來(lái)的緩存,它會(huì)直接把原來(lái)編譯生成的靜態(tài)文件夾public直接刪除;hexo g:又會(huì)再次根據(jù)配置文件生成靜態(tài)頁(yè)面。
最后,我們?cè)俅螁?dòng)項(xiàng)目(hexo s),訪問(wèn)http://localhost:4000:
我們Hello World的文章?lián)Q成我們自己的文章,這個(gè)文章就是位于我們前面所講的source/_posts文件夾下:
我們只要把這個(gè)md替換成我們自己文章的md就可以了,然后再依次執(zhí)行下面三條命令:
hexo?cleanhexo?g
hexo?s
下面我們來(lái)看看效果:
這樣就好看很多,另外要注意的是要想在上圖的右邊紅色框內(nèi)顯示提交的主題,要在你的文章內(nèi)加入標(biāo)題,它就會(huì)自動(dòng)識(shí)別:
---title:?我以為我對(duì)Mysql事務(wù)很熟,直到我遇到了阿里面試官
---
另外,藍(lán)色框內(nèi)的顯示的提交的時(shí)間,點(diǎn)擊可以跳轉(zhuǎn)到提交的分類記錄中:
分類但是,還是感覺(jué)這個(gè)主題很丑,這時(shí)候就要用到hexo官方的主題庫(kù):https://hexo.io/themes/ ,在這里可以選擇自己預(yù)覽自己的主題庫(kù):
這里我選擇一個(gè)比較高大上(騷)的主題,點(diǎn)擊紅色框內(nèi)就是預(yù)覽該主題,點(diǎn)擊藍(lán)色框就會(huì)跳轉(zhuǎn)到該主題的github源碼地址。
若是想要使用該主題,必須要把該主題下載下來(lái),首先點(diǎn)擊藍(lán)色框進(jìn)入該主題的github地址,復(fù)制該github地址,然后需要執(zhí)行下面的命令:
git?clone?https://github.com/volantis-x/hexo-theme-volantis.git?themes/volantis它表示把主題源碼下載到themes主題文件夾下的volantis文件夾下。下載完后,要修改MyBlog目錄下的配置文件_config.yml中的下面字段的配置:
最后在執(zhí)行hexo clean、hexo g和hexo s命令,就可以在瀏覽器看到效果:
是不是感覺(jué)瞬間高大上,牛逼了很多,這樣一個(gè)自己博客逼格就出來(lái)了,不需要自己寫(xiě)界面和后臺(tái),所以直接使用hexo來(lái)搭建個(gè)人技術(shù)博客還是非常方便的,基本的需求都能滿足。
此時(shí)。在本次部署好之后就可以將代碼推向github倉(cāng)庫(kù),但是在推向github之前,你的MyBlog文件夾必須與你的遠(yuǎn)程倉(cāng)庫(kù)相關(guān)聯(lián),這個(gè)關(guān)聯(lián)的方法在這一篇[(一)深入淺出圖解Git,入門到精通(保姆級(jí)教程)]已經(jīng)講過(guò)了,這里就不再做詳細(xì)的贅述了,就是將你的本地的.ssh/id_rsa文件中的key復(fù)制到遠(yuǎn)程倉(cāng)庫(kù)中的SSH Keys。
當(dāng)你的本地倉(cāng)庫(kù)與遠(yuǎn)程倉(cāng)庫(kù)關(guān)聯(lián)后,就在遠(yuǎn)程倉(cāng)庫(kù)創(chuàng)建一個(gè)如下圖所示的倉(cāng)庫(kù),倉(cāng)庫(kù)名必須是:你的用戶名+".github.io":
最后還要在MyBlog文件夾下的_config.yml配置文件中配置如下的信息:
這樣子就可以使用下面四條命令,就可以將你本地的代碼推向遠(yuǎn)程倉(cāng)庫(kù)了:
npm?install?hexo-deployer-git?--savehexo?clean
hexo?generate
hexo?deploy
最后在你的瀏覽器輸入:http://+"你的用戶名"+.github.io,就可以訪問(wèn)你自己的個(gè)人博客了,例如我個(gè)人的博客站點(diǎn)是:http://liduchang.github.io,最后的效果:
到此,使用hexo框架搭建個(gè)人博客的教程就已經(jīng)結(jié)束了,最后有一點(diǎn)要說(shuō)明一下的是:除了MyBlog下的配置文件_config.yml文件可以修改,還有themes/volantis文件夾下的_config.yml配置文件也是可以修改的,這個(gè)可以自己去研究。
然后每次修改完,也是執(zhí)行下面四條命令:
hexo?cleanhexo?g
hexo?s
hexo?d
我覺(jué)得主題信息可以選擇比較簡(jiǎn)單的,因?yàn)槎际腔谂渲眯畔⑦M(jìn)行配置的,假如太復(fù)雜的博客主題,你還要去它的github的源碼地址中去研究它每一個(gè)配置字段的含義或者看他的注解,會(huì)花費(fèi)大量的時(shí)間,我覺(jué)得沒(méi)必要。
經(jīng)過(guò)多用戶的訪問(wèn)測(cè)試顯示,有的人手機(jī)無(wú)法訪問(wèn),有的人手機(jī)可以訪問(wèn),有的人電腦無(wú)法訪問(wèn),有的人電腦可以訪問(wèn),具體原因不太清楚,若是有人知道原因的,可以在評(píng)論區(qū)告訴我原因,不甚感激。
最后說(shuō)一句,你的面試官能不能看到你搭建的站點(diǎn)就得看命了,很可能訪問(wèn)不了,哈哈哈哈,好了這一期到這里就結(jié)束了,我們下一期見(jiàn),歡迎訪問(wèn)我的個(gè)人站點(diǎn):https://liduchang.github.io/。
總結(jié)
以上是生活随笔為你收集整理的hexo评论_【前端简历加分】hexo框架搭建个人博客站点,手把手教学的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 计算机里的东西太多,电脑里的东西太多,怎
- 下一篇: nessus安装_Nessus忘记密码怎