Hexo 架設部落格

開站第一篇先介紹這個網站建置的方式,這是透過 Hexo 產生靜態網頁,發行到 GitHub 網站上。

Hexo 是一個產生靜態網頁工具程式,以 Makedown 語法撰寫文章內容,可以在本機端產生網頁與瀏覽,一鍵發行到 GitHub 上。

目前會在 Evernote 撰寫文章,使用 VSCode 來調整 Makedown 語法與執行 Hexo 指令。

安裝與使用步驟

檢查本機環境

1
2
node -v
git version

建議使用 Node.js 10.0 以上版本,git  2.2 以上版本

安裝 hexo 命令

1
npm install -g hexo-cli

建立目錄 init

1
hexo init test

產生網站頁面 generate

1
hexo g

啟動網站 server

1
hexo s

瀏覽本機網站
http://localhost:4000

新增文章 new

1
hexo new post "Post Title"

也可以簡化

1
hexo new "Post Title"

每次增修檔案或內容,均需要再產生一次才能瀏覽

1
hexo g

瀏覽新產生的文章
http://localhost:4000/2020/12/23/Post-Title
(網址中有包含今天日期)

新增草稿文章 new draft

1
hexo new draft "Draft Title"

草稿不能瀏覽

新增頁面 new page

1
2
hexo new page "Page Title"
hexo g

瀏覽新產生的頁面
http://localhost:4000/Page-Title

安裝 Git 部署套件

1
npm install hexo-deployer-git --save

部署到 Github
修改 _config.yml 發行的網址,取代下面最後一行

1
2
3
4
5
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/your_name/your_repo.git

執行部署

1
hexo d

產生完成即部署網站

1
hexo g -d

瀏覽 GitHub 的網站
https://blog.robinks.net


切換主題

所有主題 https://hexo.io/themes/

切換主題步驟
https://www.youtube.com/watch?v=5ROIU_9dYe4&feature=emb_logo

安裝到本機

1
2
3
git clone https://github.com/huweihuang/hexo-theme-huweihuang.git ./hexo-huweihuang
cd hexo-huweihuang
npm install

線上教學

Hexo教程第一期 简介
https://youtu.be/PsXWbI2Mqu0

Hexo教程第二期 安装与使用
https://youtu.be/xvIRGmKWpFM

Hexo教程第三期 写作
https://youtu.be/HLJ9jJy7CMg

Hexo教程第四期 Front Matter
https://youtu.be/Rl48Yk4A_V8

Hexo教程第五期 配置文件
https://youtu.be/A0Enyn70jKU

Hexo教程第六期 命令
https://youtu.be/mgdXi5npArQ

Hexo教程第七期 部署
https://youtu.be/B0yVJ46CTR8


參考資料

Hexo 官方繁體說明文件
https://hexo.io/zh-tw/docs/index.html