使用 Hexo 產生靜態網站,並部署在 GitHub Pages 上,可用於產生個人網站或形象網站。

安裝環境

開啟 CmdGit Bash,輸入指令安裝 Hexo

1
npm install hexo-cli -g

建立環境

安裝完 Hexo 後,建立一個資料夾,並進入該資料夾進行 Hexo 初始化,網站的內容都將儲存在此處。

1
hexo init

安裝相依套件。

1
npm install

到此 Hexo 就已經安裝好了,網站資料夾內會產生 Hexo 架構檔案,可以啟動 server 查看網站。

1
hexo server

開啟瀏覽器進入預設路徑 http://localhost:4000/

停止 server 只需在 CLI 執行中斷命令 Ctrl + C

部署網站到 GitHub Pages

先在 GitHub 上創建一個資料庫名稱為 <username>.github.io.git

<username> 代表你的 GitHub 用戶名

回到 CLI 安裝 hexo-deployer-git

1
npm install hexo-deployer-git --save

編輯網站目錄下 _config.yml 文件,找到 deploy 填寫部署網站相關資料。

yaml 檔案中 : 後面需要保持一個空格

1
2
3
4
deploy:
type: git
repo: https://github.com/<username>/<username>.github.io.git
branch: master

同時在 skip_render 填寫要忽略渲染的檔案,並在網站資料夾內 source 目錄下新增 README.md 檔案對應。

1
skip_render: README.md

部署網站到 GitHub 上

1
hexo clean && hexo deploy --generate

部署完成後就可以到網站上查看結果 <username>.github.io

檔案架構

產生完 Hexo 檔案後大致有以下檔案

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
  • _config.yml

網站配置檔案,設置網站基本設定。

  • package.json

應用程式資料,包含使用的一些相依套件。

  • scaffolds

新增文章時使用的架構資料夾,Hexo 會根據 scaffolds 來建立檔案。

  • source

來源資料夾,存放網站的內容,Markdown 和 HTML 檔案在產生時會經過渲染到 Public 資料夾,而其他的檔案會直接拷貝過去。

  • themes

主題資料夾,Hexo 會根據主題來產生靜態檔案。

參考資料