開站第一篇先介紹這個網站建置的方式,這是透過 Hexo 產生靜態網頁,發行到 GitHub 網站上。
Hexo 是一個產生靜態網頁工具程式,以 Makedown 語法撰寫文章內容,可以在本機端產生網頁與瀏覽,一鍵發行到 GitHub 上。
目前會在 Evernote 撰寫文章,使用 VSCode 來調整 Makedown 語法與執行 Hexo 指令。
安裝與使用步驟
檢查本機環境
1 | node -v |
建議使用 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 | hexo new page "Page Title" |
瀏覽新產生的頁面
http://localhost:4000/Page-Title
安裝 Git 部署套件
1 | npm install hexo-deployer-git --save |
部署到 Github
修改 _config.yml 發行的網址,取代下面最後一行
1 | # Deployment |
執行部署
1 | hexo d |
產生完成即部署網站
1 | hexo g -d |
瀏覽 GitHub 的網站
https://blog.robinks.net
切換主題
切換主題步驟
https://www.youtube.com/watch?v=5ROIU_9dYe4&feature=emb_logo
安裝到本機
1 | git clone https://github.com/huweihuang/hexo-theme-huweihuang.git ./hexo-huweihuang |
線上教學
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