利用hexo+github+nodejs搭建自我博客的一天


放一張比較喜歡的背景圖鎮樓,偽文藝一波。因為剛剛抱着四個快遞從公司大門走到宿舍,快遞都比我高,坐電梯的時候電梯里面的燈一閃一閃,電梯還搖晃,上演了一波鬼吹燈,驚魂未定。。。

說正題:我喜歡的博客應該是比較簡約的風格,然后自己可以在里面為所欲為的。所以我弄得大概是這一種樣子的。

手機電腦都可以訪問:https://sulishibaobei.github.io。查看效果。 

(1)假裝你已經安裝了node.js,再假裝你已經安裝過git,再假裝你注冊了github賬號。然后創建一個repositories。記住名字要和github用戶名一致。比如我的賬戶名是:sulishibaobei  那么倉庫名就是sulishibaobei.github.io  一定要這樣喲

(2)安裝Hexo .  npm install -g hexo   准備工作就就緒啦  請注意,剛剛看官網,已經變成npm install -g hexo-cli , 其實也是一樣的。  

(3)在本地創建一個文件夾,我的文件夾名叫blog  ,切換到blog內,運行hexo init 。會生成許多文件,大概有:

(4)然后運行hexo generate,生成靜態頁面,相對於上次生成的就會多一個public文件,所以我們就知道靜態頁面在public文件里啦:

(5)開啟本地服務  hexo server  ,此時訪問本地localhost:4000就可以查看了。但是目前還是本地,如何和我們的github連起來呢?

(6)看上面有一個_config.yml文件,打開找到最后的 deploy   將下面這段替換它:

deploy:
  type: git
  repository: https://github.com/sulishibaobei/sulishibaobei.github.io.git

注意:repository記得寫成你自己的倉庫地址喲

(7)然后運行 npm install hexo-deployer-git --save  命令,使用git部署。

(8)運行hexo deploy 部署項目,然后在瀏覽器輸入https://sulishibaobei.github.io 就可以查看啦。

(9)現在看到的頁面還是比較原始的hexo默認生成的,接下來就可以自己動手來改動你想要的樣子了。

首先換成你想要的文件:source 文件里后綴為md的文件,將你想要的內容復制進去就可以啦。想做出別人的那種效果,或者放置圖片什么的,推薦大家去看看md(markdown)語法。就會啦。

http://www.kuqin.com/shuoit/20141125/343459.html  此網友寫的不錯。

如果想一個頁面顯示多條文章,那么再創建一個xxx.md文件就可以,顯示幾個創建幾個

更換個主題,讓博客換成左右的樣子,我用的是yilia,這是由博主litten制作的,還有許多精美主題可以使用。yilia文件在我的源代碼的themes路徑下,默認的是 landscape,你將下載下來的yilia放在themes路徑下,接下來還是打開_config.yml文件 將theme改成如圖所示。

(10)查看效果,記住每次運行的步驟都一樣:hexo clean  ,hexo generate,hexo deploy 三步。

其實可以先在本地查看,開啟hexo server服務,打開Localhost可以看到一樣的效果,因為上面上步效果比較慢。

(11)最后在換換頭像,換換其他的信息。讓你的每個空間看起來都可以點擊。

主要是修改根目錄下的_confit.yml文件和themes下的yilia里面的_config.yml文件。

還有許多博主搭建的都不錯,我不過是在前人得大樹下乘涼而已,謝謝喲

現在已經更換主題為Next;如果想看詳盡的配置請看:http://www.sulishibaobei.com/index20170909/

歡迎訪問http://www.sulishibaobei.com

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM