hexo + github 搭建博客詳細教程

網上有太多hexo + github的教程了,但是我跟着人家的教程,漏洞百出,一堆bug。所以我決定自己搞了。
這篇文章默認你已經具備:

如果不會的話建議點開後邊的鏈接學習,後邊的鏈接寫的都想當詳細╰(●’◡’●)╮。

1 創建博客

1.1 安裝hexo

全局安裝hexo-cli
npm install hexo-cli -g
在這裏插入圖片描述
安裝完成就能看到綠框裏的東西了。
治癒那兩個警告不用管它,因爲fsevent是mac osx的,在Windows或者Linux下會有警告,忽略即可。

1.2 創建好博客文件夾

1.創建
有兩種方法:

  1. 進入你要建博客的文件夾
    1. 打開命令行工具。
      • 可以使用gitbash,直接在文件夾裏右鍵→git bash here
      • 也可以使用cmd,在文件夾地址欄輸入cmd回車
    2. hexo init 文件夾名字你創建並初始化一個存放博客代碼的文件夾
      cd 文件夾名字 進入這個文件夾
  2. 進入你要進博客的文件夾
    1. 創建一個放博客代碼的文件夾,然後進入文件夾
    2. 打開命令行工具
    3. hexo init初始化

創建完後我回到E盤看一下,已經有hexoblog這個文件夾了。

2.安裝依賴
進行這一步的時候要確定你已經進入你創建的文件夾裏了。
比如剛纔hexo init hexoblog,cd hexoblog ,現在我的命令行顯示的地址應該是我在E:\hexoblog裏邊。
在這裏插入圖片描述
繼續安裝一些依賴,不知道依賴是什麼沒關係,反正裝上就好。
npm install

2 新建文章

2.1新建文章
現在先不用管什麼花裏胡哨換皮膚啊之類的,現在的首要目的是讓你能看到你的博客,讓你能把它推到github上並且訪問到。
hexo new "文章名"
在這裏插入圖片描述
成功之後會告訴你已經在_post文件夾下創建好了。打開看一下,裏邊的helloworld是默認就有的,你可以先不用管,不想看可以直接刪了。

在這裏插入圖片描述
打開你新建的文件給它寫幾句內容。你不想寫可以先不寫。
在這裏插入圖片描述
2.2 生成靜態頁面
hexo generate
你知道你剛纔寫的文章在文本文件裏,這一步就是把你的文本文件解析爲網頁。
2.3 本地預覽
如果你不想在本地看一下是什麼效果,可以跳過這一步。
hexo server
在這裏插入圖片描述
注意不要關閉命令工具,不要按Ctrl + C,在瀏覽器輸入提示你的地址你就可以看到頁面了,看完之後不需要了,你可以回到命令工具,按Ctrl + C停止後臺服務。

3 部署到github

3.1 下載hexo-deployer-git

使用github的也知道,本地上傳文件給遠程倉庫是需要添加remote,然後自己add commit push等等。但是使用hexo就不用管這些了。hexo可以幫你完成這些繁瑣的工作。
首先你要下載一個幫你完成工作的工具:
npm install hexo-deployer-git --save

3.2 github倉庫。

確定你的github已經配置好SSH祕鑰了。
在github新建一個倉庫,取名用戶名.github.io,其實你可以不叫這個,隨便取一個的。
區別在於,如果你使用用戶名.github.io,那你的頁面訪問的時候就是https://用戶名.github.io,你要是隨便取一個,那就是https://用戶名.github.io/倉庫名/
建好倉庫之後進去,複製SSH鏈接,記住是SSH鏈接不是https鏈接,否則部署時候會失敗。
在這裏插入圖片描述

3.3 修改_config.yml

回到你的博客文件夾,找到_config.yml文件,對其進行修改。用記事本打開,拉到最底下

deploy:
  type: git
  repo: 你剛纔複製的
  branch: master

如果你只推送道github,你就按我給的代碼寫。如果你想同時部署到多個倉庫,那你就按我下圖裏的寫冒號是英文的,冒號後邊有一個空格。注意格式否則會部署失敗。
在這裏插入圖片描述

3.4 部署

hexo deploy
如果你部署失敗了……那應該是你的node版本太新了……卸載從頭再來。
部署完成之後你的github倉庫裏就有東西啦。
在這裏插入圖片描述
點右上角的setting,進去之後下拉找到git pages,那個鏈接就是你的博客鏈接啦。
在這裏插入圖片描述

4.更換主題

主題下載官網:https://hexo.io/themes/
一般好的主題作者都會把用法寫的很詳細,照着做就行了。
如果你更換了,主題。建議你
hexo clean+ hexo deploy
先清除緩存再部署。


╭(●`∀´●)╯鴿了,以後再寫!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章