創作內容

6 GP

【教學】10分鐘內從安裝Hexo到佈署至GitHub Pages

作者:沙連│2020-07-14 23:18:10│巴幣:12│人氣:1937
Hexo簡單來說,跟WordPress一樣都是建立網站的工具

但是不同的是,WordPress是動態網站,而Hexo則是靜態網站

WordPress有圖形化介面,所以簡單好上手。而Hexo雖然沒有圖形化介面,但是它支援Markdown,所以自由度高

這一個教學只有包含用最短的時間將Hexo網站佈署到GitHub Pages上,所以其他的部分就只能自己去爬文囉

必備工具:
(兩個先按照預設值安裝完成,再進行下列步驟)

可選工具(用於編輯配置檔及欲發表的文章):
  1. Visual Studio Code(推薦)
  2. Notepad++

新的教學文章:Hexo 簡易調教指南個人網站版


前置作業

Step 1: GitHub建立一個專案,名稱為<username>.github.io

然後到專案設定裡面的GitHub Pages,點選Choose a theme,接著按右上角的Select theme

正式安裝

Step 2: 在想要安裝的地方(例如桌面)點右鍵,選擇 Git Bash here

Step 3: 輸入
npm install hexo-cli -g

Step 4: 按順序輸入以下指令
hexo init <資料夾名稱>
cd <資料夾名稱>
npm install

Step 5: 接著輸入以下指令建立網頁並開啟伺服器
hexo g
hexo s

Step 6: 輸入上面顯示的網址 (http://localhost:4000/) 就可以看到網站的樣子

安裝主題

我這裡以ICARUS為範例

大家也可以到 https://hexo.io/themes/ 找自己喜歡的主題

Step 7: 輸入下列指令安裝
git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

Step 8: 接著開啟資料夾裡面的_config.yml,找到theme並修改為
theme: icarus

Step 9: 輸入
hexo clean
清除快取(可以不用),再輸入
hexo g
產生網頁

註:有些主題安裝之後,在產生網頁的時候會有錯誤訊息,只要安裝缺少的插件就解決了

Step 10: 錯誤訊息裡面會有一行指令,將指令複製貼上並執行就可以安裝缺少的插件

Step 11: 再一次輸入
hexo clean
hexo g
hexo s
就OK了

佈署至GitHub Pages


Step 1: 輸入以下指令
npm install hexo-deployer-git --save

<---以下步驟可以跳過--->

Step 2: 輸入下面兩個指令(Github的使用者名稱及註冊時所輸入的Email)
git config --global user.name "<username>"
git config --global user.email "<email address>"

Step 3: 輸入以下指令,再按三下Enter
ssh-keygen -t rsa -C "<email address>"

Step 4: 輸入下列指令,然後複製裡面的內容
cat ~/.ssh/id_rsa.pub

Step 5: 到GitHub的設定,點左邊的 SSH and GPG keys ,再按右上角的New SSH Key
接著輸入標題,將複製的內容貼上後按 Add SSH Key

Step 6: 輸入
ssh -T git@github.com
再輸入yes

如果最後一行出現自己的使用者名稱就代表成功了 (Hi,<username>! …)

<---以上步驟可以跳過--->

Step 7: 打開_config.yml,拉到最底下,找到deploy並修改為
deploy:
type: git
repo: https://github.com/<username>/<username>.github.io
branch: master

Step 8: 輸入
hexo g
再輸入
hexo d
(如果是第一次佈署,會跳出視窗要求登入Github)

Final: 等一分鐘左右再進入 <username>.github.io 就能看到囉

參考資料
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4849277
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:Hexo|教學

留言共 1 篇留言

神櫻
看了之後感覺還是好困難

07-15 06:41

沙連
我這篇跟其他篇比已經精簡許多,只要照步驟走就可以囉。其他部分也只要看教學文就會了07-15 15:54
我要留言提醒:您尚未登入,請先登入再留言

6喜歡★lewopa47894 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:《Lapis Re:Li... 後一篇:【開箱】收藏家AD-72...

追蹤私訊切換新版閱覽

作品資料夾

leo25127更新至1223回
穿越奇幻日常系小說『公爵家的獨生子』更新囉,來看看我們無厘頭的ㄎ一ㄤ少爺怎麼在異世界作威作福吧!看更多我要大聲說昨天18:19


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】