使用Hexo框架10分鐘搭建個人部落格

和喆發表於2020-08-18

首先是先給大家打個招呼

最近看網上看到了很多的的關於搭建部落格的影片,我自己也學著自己搭建了一個部落格"我自己的部落格連結"(歡迎大家來我的部落格跟我深入交流),今天我把搭建的過程記錄下來寫成部落格,留下一個紀念,也可以順便幫助那些想要搭建個人部落格的小夥伴們,幫助他們搭建屬於自己的部落格主頁啦,那麼廢話不多說,現在就開始吧。


環境搭建與安裝

第一步:安裝node.js
nodejs下載地址
在這裡插入圖片描述
進入連結地址後點選下載長期支援版。

在這裡插入圖片描述
進入後按照你們自己的系統選擇安裝包,我這裡==使用的是win10系統==,不過mac系統的也可以繼續看下去,因為==這兩個系統在下文將會使用到的指令非常的相像==,我也會指出那些不一樣的地方

下載完之後進行安裝,node.js的安裝非常簡單,只需要一直點選下一步就好了

注意在最後時,==安裝完成會你會注意到給出的兩個地址==,在安裝包其中它不僅下載了==node.js本身==,還安裝了一個是==npm包管理器==,而這個它是下文我們使用hexo搭建部落格必須使用到的東西。


win + R 開啟執行,輸入cmd 進入終端

輸入node, 如果安裝成功則會顯示其版本號在這裡插入圖片描述在這裡插入圖片描述


那麼到這裡可能你們會有疑問了,為什麼要下載node.js,上面幹這麼多事情有什麼用呢??!這是因為hexo是在node.js上生成的,所以當我們真正的要開始安裝hexo的時候,前面這兩個東西是必不可少的


接下來我們就會使用到剛剛安裝的npm包管理器來下載hexo了,由於國內映象源的速度很慢,所以我們先使用npm來安裝一個==cnpm==,這是一個淘寶的映象源,使用說明可以看這裡連結。不過我也會在下面說怎麼下載。

在終端裡輸入 :

npm install -g cnpm --registry=https//registry.npm.taobao.org

在這裡插入圖片描述
敲擊Enter鍵即可開始下載了。

當安裝好cnpm,可以使用上面測試node.js和npm那樣的方法,輸入cnpm
在這裡插入圖片描述
這樣的話cnpm也安裝好了,接下來就藉助cnpm來安裝hexo了

在終端輸入

cnpm install -g hexo-cli

敲擊Enter鍵後就會開始下載。

在這裡插入圖片描述

當安裝完成後,我們繼續使用

hexo -v

來驗證一下安裝是否成功在這裡插入圖片描述
好了hexo部落格已經安裝好了,我們已經離成功不到一半的距離了

那麼我們接下來就要為我們的部落格建立一個新的資料夾來存放我們所有的配置檔案和部落格文章了。

輸入

    md blog

即可在當前目錄下建立一個叫blog的資料夾,當然你如果想要去其他的名字,把blog改掉就好了。在這裡插入圖片描述
這時開啟資料夾,找到剛才的目錄,你就可以找到剛剛建立的blog資料夾

在這裡插入圖片描述

當然更簡單的方法,就直接在檔案管理器裡面右鍵新建資料夾即可建立。


初始化部落格

終端裡輸入

cd blog

進入剛剛新建的資料夾

window 系統裡直接輸入


hexo init

如果是mac系統則輸入

sudo hexo init

回車即可開始初始化

初始化完成後

Window系統輸入

dir

檢視一下安裝初始化完成後,資料夾內都生成了什麼東西
在這裡插入圖片描述
而mac系統輸入

ls -l

即可檢視

這些東西我們也可以在檔案管理器中直接看到
在這裡插入圖片描述

這些都是hexo為你自動生成的一些最基礎的部落格框架的東西

啟動hexo部落格

這時候我們一切都準備好了以後,在blog資料夾目錄下終端輸入

hexo s

即可啟動hexo
==(tips: hexo s 即為 hexo server)==
你會看到以下
在這裡插入圖片描述
這時它就自動為你在本地4000的埠上面啟動了hexo,這時候複製該網址,輸入到瀏覽器裡面就可以訪問到我們剛生成的部落格。
部落格介面
這個時候你的部落格就已經搭建好了。

並且上面自己附帶了一篇文章叫Hello world,裡面教你瞭如何新建文章和一些基本操作。

新建文章的語法是:在終端cd到部落格的資料夾的目錄內輸入

hexo new "你的部落格名字"

在這裡插入圖片描述
這時候它會提示你的這篇新文章的目錄地址,上圖即為

    \blog1\source\_posts\我的第一篇部落格.md

進入到資料夾內,找到剛才的目錄在這裡插入圖片描述
直接雙擊開啟它,我這裡是使用的vscode

在這裡插入圖片描述
hexo裡面的部落格使用的是markdown語法,直接在這裡面寫部落格就可以了!!

當然想要寫部落格還要了解一些markdown的基本語法,大家可以直接去菜鳥教程裡的markdown教程去學習

生成部落格與釋出

當我們寫完部落格了,儲存完之後,你登陸localhost:4000的埠網址,你會發現你的文章並沒有在上面,因為我們還沒有生成你剛寫的部落格,也沒有上傳。

最基本的上傳文章(或修改更新部落格設定)的步驟為:

    hexo clean

先清理掉hexo之前的快取(這一切操作都在終端 blog資料夾目錄下輸入)

    hexo g

hexo g即為hexo generate 為生成,產生之意。它會把我們剛寫好的文章生成到部落格裡面去。

在這裡插入圖片描述
你可以看見自己剛寫的那篇文章已經生成了。

這時候我們在使用

hexo s

就可以看到我們剛寫的那篇文章啦。

在這裡插入圖片描述
但是在localhost這個埠裡面只有我們自己能訪問,當然我們的部落格寫出來肯定是要讓別人看的,不然為什麼要寫部落格,這個localhost的埠只是供我們平時測試使用的。

如果大家想看怎麼把我們的部落格免費的託管到github上去,讓別人也可以訪問到我們的部落格的話,可以來看我這篇文章如何把個人部落格託管到GitHub上去

謝謝大家,如果這篇文章幫助到了你們,我很開心

相關文章