網上有太多hexo + github的教程了,但是我跟着人家的教程,漏洞百出,一堆bug。所以我決定自己搞了。
這篇文章默認你已經具備:
-
已經安裝了gitbash
-
會使用gitbas 👉 Git Bash詳細教程
-
已經配置好SSH 👉 SSH keys配置
-
已經安裝 👉 Node.jsNode.js安裝配置
-
會使用npm 👉 npm超詳細入門 源管理 | 常用指令 | 下載 | 淘寶源卸載
如果不會的話建議點開後邊的鏈接學習,後邊的鏈接寫的都想當詳細╰(●’◡’●)╮。
1 創建博客
1.1 安裝hexo
全局安裝hexo-cli
npm install hexo-cli -g
安裝完成就能看到綠框裏的東西了。
治癒那兩個警告不用管它,因爲fsevent是mac osx的,在Windows或者Linux下會有警告,忽略即可。
1.2 創建好博客文件夾
1.創建
有兩種方法:
- 進入你要建博客的文件夾
- 打開命令行工具。
- 可以使用gitbash,直接在文件夾裏右鍵→git bash here
- 也可以使用cmd,在文件夾地址欄輸入cmd回車
hexo init 文件夾名字
你創建並初始化一個存放博客代碼的文件夾
cd 文件夾名字
進入這個文件夾
- 打開命令行工具。
- 進入你要進博客的文件夾
- 創建一個放博客代碼的文件夾,然後進入文件夾
- 打開命令行工具
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
先清除緩存再部署。
╭(●`∀´●)╯鴿了,以後再寫!