開站第一篇先介紹這個網站建置的方式,這是透過 Hexo 產生靜態網頁,發行到 GitHub 網站上。
Hexo 是一個產生靜態網頁工具程式,以 Makedown 語法撰寫文章內容,可以在本機端產生網頁與瀏覽,一鍵發行到 GitHub 上。
目前會在 Evernote 撰寫文章,使用 VSCode 來調整 Makedown 語法與執行 Hexo 指令。
安裝與使用步驟
檢查本機環境
建議使用 Node.js 10.0 以上版本,git 2.2 以上版本
安裝 hexo 命令
建立目錄 init
產生網站頁面 generate
啟動網站 server
瀏覽本機網站
http://localhost:4000
新增文章 new
1
| hexo new post "Post Title"
|
也可以簡化
每次增修檔案或內容,均需要再產生一次才能瀏覽
瀏覽新產生的文章
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
|
執行部署
產生完成即部署網站
瀏覽 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