如何用 hexo 創建部落格

第一步: 下載 node.js

可以到 node.js 下載最新的版本
下一步*n 安裝成功

第二步: github 設定

因為我是用 github pages
所以會需要用到 github 來公開網站

在 github 創建一個新的 repository

名字取作你的帳號 .github.io 例如: kuoleo0903.github.io
然後其他都留預設就可以了

第三步: 安裝 hexo

以我的位置為例我想建立在桌面
初始看到的畫面是這樣的

MINGW64 ~
~       //這邊可以輸入指令

然後我們輸入

MINGW64 ~
$ cd Desktop

所以路徑會顯示像下面那樣

MINGW64 ~/Desktop
$ 

可以到 Hexo的官網
或用底下的指令

// 安裝 hexo
npm install hexo-cli -g

// 可以先用 cd 指令進入你想要放置網頁資料夾的位置
// 創建一個叫做 blog 的網頁專案
hexo init blog  // blog 的地方可以自訂名字

// 進入剛創的資料夾
cd blog

// 加載 npm
npm install

第四步: 去Hexo theme 找自己喜歡的主題

不同的 theme 操作的步驟會不一樣所以請看各個 theme 的 github read me 進行操作

基於我慘痛的經驗先提醒一下各位

想看就打開它

建議(?)做到一小個段落就先跳到第五步看一下
如果有出現黃色的報錯(前提你沒有自己更換 bash 中字的顏色)
那妳還可以 crtl + z 不用找 bug 和重做一遍工

以 redeifine 為例

首先進入 redefine 的 github ，會看到可以 clone/npm 該專案的指令
先用 git bash 進入 blog 資料夾
然後輸入 npm 的指令（因為之後更新比較簡單

MINGW64 ~/Desktop/blog
$ npm install hexo-theme-redefine@latest

如果之後要更新主題也是用這條指令喔

然後我們要啟用他
先到 blog/_config.yml 中的 99 行將 theme 設為 redefine

theme: redefine

網頁有很多可以自訂的地方通常 github 中的 read me 會有
這邊使用 redifine 的 read me 作為範例

或是在 read me 中找官方連去看更詳細的說明一樣以 redefine 作為範例

補充: blog的文章要用 `markdown` 寫並放入 `/source/_posts`

依舊是網路上一堆教學因此就不做教學了

第五步: (不一定要但建議(?

可以先在自己的主機端打開一次網頁
照我個人的測試是不用先 hexo generate 一次的
在撰寫的同時可以直接重新整理網頁就可以看到當下寫完的樣子了
記得要先用 bash 進到 blog 的資料夾喔

// 在本機開啟網頁 通常都是 4000 port
hexo server     //或 hexo s

如果在 bash 中有黃色的報錯然後你找不出來那你一定是沒有聽我的話打開那個摺疊標籤
回去看看吧孩子然後努力找錯誤 ~~如果你會通靈那另當別論~~

第六步: 把網頁交給 github

首先要先到 _config.yml 中的最下方 deploy 中輸入 github 的帳號和你要上傳到哪個repo

deploy:  
  type: git  
  repo: https://github.com/username/username.github.io
  branch: main
  token: ''
  name: username
  email: youremail@gmail.com
  ignore_hidden: false
  ignore_pattern: regexp

記得把 username 和 youremail 改成自己的喔

上傳前要先把網頁檔案生成完畢等等丟到 github 上面才能顯示出來

// 生成網頁檔案
hexo generate   //或 hexo g

// 丟到github
hexo deploy     //或 hexo d

在 hexo deploy 這步可能會要求你輸入 github 帳密如果平常有在用 git 的應該不用再輸入一次
關於 git 的教學網路上很多我就不多說ㄌ

關於更新你的 post

如果要更新 post 的話要先清除生成的網頁檔案
因此要在 bash 中做以下動作

// 刪除網頁檔案
hexo clean

// 生成網頁檔案
hexo generate   //或 hexo g

// 丟到github
hexo deploy     //或 hexo d

只是多了一個 hexo clean 而已其他都跟上一步一樣

謝謝你看到這裡~ 有問題歡迎在底下留言問我歐

Leo's Site