5分鐘搭建Hexo個(gè)人博客

寫在前面的話

很早以前就想要搭建一個(gè)個(gè)人的博客,奈何只是一個(gè)前端切圖仔,對(duì)于后端和數(shù)據(jù)庫(kù)接口上手存在一定的難度,于是一拖拖了很久,今天無意中發(fā)現(xiàn)了使用Hexo搭建個(gè)人博客很快就能用了,而且托管在github平臺(tái)也不需要自己去買服務(wù)器域名和維護(hù),一舉數(shù)得,非常nice,記錄了一下搭建Hexo個(gè)人博客的步驟,盡可能的寫的詳細(xì)一點(diǎn)~

準(zhǔn)備工作步驟

1:GitHub上面新建一個(gè)倉(cāng)庫(kù),用來放自己的博客
2:安裝git工具,生成SSH添加到GitHub
3:本地環(huán)境搭建,安裝node 和npm
4:本地初始化Hexo項(xiàng)目并且運(yùn)行
5:Hexo主題
6:部署到github
7:生成markdown文件,寫文章并且發(fā)布

言歸正傳,開始我們的寫作步驟吧

一:在GitHub上面新建一個(gè)倉(cāng)庫(kù),用來放自己的博客

1:新建一個(gè)倉(cāng)庫(kù)
創(chuàng)建一個(gè)和你用戶名相同的倉(cāng)庫(kù),后面加.github.io后綴,必須要同名哦,不然后面會(huì)出現(xiàn)頁(yè)面404的情況,點(diǎn)擊create respository按鈕創(chuàng)建。

2:安裝git工具,生成SSH添加到GitHub
安裝git工具這里就不多說了,安裝完成之后,在桌面上git bash進(jìn)入命令行,輸入GitHub用戶名和郵箱驗(yàn)證。

yourname輸入你的GitHub用戶名
youremail輸入你GitHub的郵箱

查看輸入是否正確


3:然后創(chuàng)建SSH,一路回車

ssh-keygen -t rsa -C "xxxx7537@qq.com"(你的郵箱)

這個(gè)時(shí)候可以看到在磁盤里面生成了私人密鑰和公共密鑰了


4:在GitHub上設(shè)置密鑰
在GitHub的setting中,找到Deploy keys的設(shè)置選項(xiàng),點(diǎn)擊新建一個(gè)密鑰,把id_rsa.pub里面的信息復(fù)制進(jìn)去,id_rsa.pub打開方式可以使用瀏覽器打開。


新建密鑰成功,到這里github倉(cāng)庫(kù)和密鑰問題就OK了。


二:Hexo搭建個(gè)人博客-框架的本地安裝和運(yùn)行

1:Hexo的官網(wǎng)
https://hexo.io/

2:安裝node 和npm
hexo基于node.js,本地需要安裝node 和npm,安裝步驟就不多說了
查看一下是否有版本號(hào),有的話則安裝成功。

3:全局安裝 hexo

npm  i  hexo-cli -g

4:初始化一個(gè)項(xiàng)目

hexo  init blog

這時(shí)候可以看到在d盤里面生成了一個(gè)文件夾。



5:進(jìn)入項(xiàng)目文件夾,安裝依賴文件

cd  blog
npm  install

6:運(yùn)行,并且在瀏覽器打開,就可以看到博客頁(yè)面了

hexo server

http://localhost:4000

三:更換一個(gè)自己喜歡的主題

1:博客主題的安裝
主題這一塊可以選擇自己喜歡的,以下是以一個(gè)Anisina主題為例,這里有很多主題可以選擇:傳送門:https://hexo.io/themes/。比如選一個(gè)主題:https://github.com/haojen/hexo-theme-Anisina,打開鏈接,進(jìn)入到GitHub里面,有詳細(xì)的安裝教程。


2:安裝主題命令輸入

git clone https://github.com/Haojen/hexo-theme-Anisina.git themes/Anisina

3:打開_config.yml文件夾,更改主題名字

4:再次啟動(dòng),就可以看到更換的主題了。




OK,搭建好了自己喜歡的主題風(fēng)格了,接下來需要部署了。

四. 部署到github

1:在配置文件里面填寫倉(cāng)庫(kù)地址
在項(xiàng)目里面找到 _congif.yml文件,找到 deploy 字段,把以下代碼放進(jìn)去,填寫第一步新建的倉(cāng)庫(kù)地址。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: <你的倉(cāng)庫(kù)地址> # https://github.com/wangxiaoting666/wangxiaoting666.github.io.git
branch: master

2:安裝一個(gè)推送工具,將本地項(xiàng)目推到倉(cāng)庫(kù)上。

npm install hexo-deployer-git --save

3:然后執(zhí)行以下命令
清除了你之前生成的東西,也可以不加。

hexo clean

4:hexo generate 生成靜態(tài)文件,可以用 hexo g縮寫

hexo  g

可以看到在目錄里面生成了一個(gè)靜態(tài)的文件,生成好的public文件夾就直接當(dāng)成靜態(tài)網(wǎng)站進(jìn)行部署即可。

5: 部署

hexo deploy

注意這里需要輸入GitHub用戶名和密碼哦


圖片.png

6:查看倉(cāng)庫(kù),已經(jīng)將項(xiàng)目放在倉(cāng)庫(kù)里面了


這個(gè)時(shí)候就可以訪問了,已經(jīng)把靜態(tài)文件都托管在GitHub了,查看分配的地址:https://wangxiaoting666.github.io/

五:開始寫文章

1:新建一個(gè)markdown文件

hexo new newpapername

在source_posts里面生成了markdown文件夾,用來寫文章了,記住要使用markdown格式書寫文章博客。


2:當(dāng)你寫完的時(shí)候,再輸入命令

hexo clean
hexo g
hexo d

就可以看到新增的自己的文章了


3:如果要再寫一篇,可以再生成一個(gè)md文件進(jìn)行書寫

hexo new test

4:好了,自己的博客搭建起來了,后面會(huì)慢慢的往里面增加一些文章,以及接入評(píng)論系統(tǒng),統(tǒng)計(jì)文章閱讀量,代碼高亮,圖床等功能。

參考文檔:https://blog.csdn.net/sinat_37781304/article/details/82729029

最后編輯于
?著作權(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)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

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