看著草稿夾有七篇文章等待我撰寫,就知道有一陣子沒有在 update 近況
感覺好久沒打文章了,我應該神隱一陣子了
我成功用 Hugo 架出我的網站,並部屬到 Github 上
這是我的新網站: minayu.site
還有許多功能還沒 Ready,不過大致上已經做好根基了
該是寫文章來分享一下
由於上班之後,能夠做自己的事的時間很少,在動工之前,我找了兩三周的資料
就是不希望我又像 上次衝動租 Bluehost ,架好網站後發現苗頭不對,所以趕緊搬回這邊 XD
雖然找了很多網站,但是真正施工時,又遇上不少問題
找尋資料
對於 Hugo 還一無所知,Hugo 與 Wordpress 這種 CMS 是不太一樣的系統 我前後參考了幾了網站來了解 Hugo 是一個 靜態網站生產器 一開始覺得很不靠鋪,我也是 wordpress 用戶,少了資料庫的靜態網頁生產器怎麼能媲美功能美滿的 CMS 呢? 後來我錯了, 架好 Hugo 後,我發現我可以離開 Wordpress 的限制,自由的改動網站的外觀,以及添加任何我想要的功能
非常的自由,但要有一個認知就是
所以我看了些比對的文章,像是選個最好的靜態網頁生產器, Jekyll vs Hugo 首先也要記得參觀Hugo 官網,選主題時你會常常在主題頁面中停留 用 Hugo 怎能不看 Hugo 官網呢? 再來我擔心沒有後台我就變成了不會寫文章的手殘 所以我找到了跟 Hugo 與 Github 相容的 CMS: Forestry (可是我昨天實際用過 Forestry,不可否認很好用,但我現在卻正在調查她是不是造成我的網頁掛掉的兇手 ...,等我查明後才會推薦,這讓我的心情很鬱悶) 有機會分下個文章跟大家分享
架設 Hugo
我找了一堆網站,來輔助我架設 Hugo
等到我真的開始實作後,我發現完全架不起來
這份簡報是我歷經千辛萬苦,架了幾十次,跟著架才成功的指南
讚
我是使用Mac
首先安裝 Hugo
$ brew install hugo
如果沒有 brew,可以試試看 這篇文章 裝一下
*註: brew
就是 mac 系統的套件管理系統 Homebrew
, 若是沒有 homebrew,可以找尋安裝指南,幾行指令就搞定!
新建一個網站
hugo new site mysite
此時您的網站已經初始生成
進入網站資料夾
cd mysite
內部的資料夾包刮 content, theme, layout, ....
安裝 Theme
接著就去 Hugo 官網挑挑你愛的主題吧! 我是挑 Tranquilpeak 每個主題點進 Download 都會進到該主題的 Github 那我們就用 Git 指令把主題裝到我們的網站資料夾內
進到主題資料夾安裝
$ cd themes
這邊以 Tranquilpeak 為例
$ git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git
裝好後利用 ls 指令會看到 hugo-Tranquilpeak-theme 資料夾在您眼前
$ ls
hugo-Tranquilpeak-theme
接著看你要使用編譯器,還是手動拉
將一些相關文件從 theme 複製到你的根目錄
將你的主題 theme 資料夾內 "archetyps" 內的檔案複製到你的"archetyps"
這邊是用 hugo-Tranquilpeak-theme 主題
將hugo-Tranquilpeak-theme/archetyps/
內容移動至 mysite/archetyps/
內
將你的主題 theme 資料夾內 exampleSite 內的檔案, 直接取代根目錄的檔案
忘記在哪邊看到,在簡報中是沒有看到這個部分
要順利先將主題的頁面刻出來,就將 exampleSite
內像是 content, static 都直接複製取代掉你的mysite/
中的 content 及 static
將你的主題 theme 資料夾內 exampleSite 內的 config.toml, 直接取代掉根目錄的 config.toml
就是取代mysite/config.toml
中
接下來回到根目錄
將 hugo run 起來 就能看到完整的主題頁面
$ hugo server
先求有再求好
接下來就是您的工作囉~
打開根目錄的 config.toml 檔案, 將參數改一改,改成你要的
將 Wordpress 文章輸出, 轉為,並放入 Hugo
當初要實作時,我參考了一個網站,發現完全不 work
我也實際參觀Hugo migrations的頁面,照著上面的一些功能,也是不 work xD
後來參照from wordpre to hugo 的文章後,使用了Exitwp ,才順利把文章從 xml 轉到 md 檔
Wordpress 後台 Export 你的文章 .xml
[你的wordpress url]/wp-admin/
可以進到 wordpress 的管理員後台
點選 Tools > Export
可以進去 Export 文章的網頁
*若沒有 Export 要去 Plugin 安裝,wordpress.com 都會有,Wordpress.org 可能要安裝套件 Plugin
選擇免費的 Start Export
開始把你的部落格點匯出,完成的檔案會寄信到您的信箱
用外部套件將 Wordpress XML 轉為 Hugo 使用 md
參考網站: from wordpre to hugo, Exitwp
將 exitwp 下載下來
git clone https://github.com/thomasf/exitwp.git
*請注意這個套件的環境為 python 2.7
pip install pip_requirements.txt
或者
pip install
驅動 python 程式來轉檔
python exitwp.py
幸運沒報錯的話,就可以進build
資料夾領取 md 囉~
將轉出的.md 檔放進 hugo 內
這個部分老實說要看不同的主題會有不同的要求,主要看你的 網站資料夾 內的 "archetyps" / themes/你的主題/archetyps/內的.md 檔怎麼定義一篇部落格
將輸出的.md 檔放進 Hugo, 通常會是這幾個資料夾,取決於你的 theme/exampleSite/content 內容
content/blog
content/post
content/posts
確認一下每篇 md 檔有沒有和 archetyps 內.md 規範符合
至少要有 archetyps 內.md 內規定的幾個元素
有可能是
title
layout
或
最後,到根目錄跑一次建置,進入 1313 看一下網頁有沒有問題,就可以準備部署囉!
hugo server
部屬至 Github
將網頁建在哪都可以,AWS, GCP 或其他平台,而我看大部分的人都部屬在 github 上
這部分我自己做的也不是很好,沒辦法建議甚麼 qq
2019.05.19
跟大家說個福音,那就是, 隨著我後來的功力大增,我終於知道怎麼好好的部署至 Github 啦!!!!
傳送門在此: [BLOG] 如何在 GITHUB 上架設 HUGO 網站
當然還是可以繼續往下讀,只是當時不怎麼會弄寫得不怎麼好就是 XD
你可以參考hugo 本身的網站
但我用的方法:這位部落格主提供的方法
在 github 分成兩個 repo,一個是放你 build 網站的程式資料夾(當然你也可以選擇不存)
另外一個則是取名為
這個指令會生成 public 資料夾
接著再按照新開的 repo 上有指南,把 git init 後,往 github repo 推送
應該不用幾分後,進入你的網站
就可以看到你的網站囉!
除了注意一下環境要是 python2.7 外,若想使用 python3 執行
我想可以試試看在 exitwp.py 程式裡,把 print 換成 print() 語法
我有試過,但我忘了有沒有成功
*exitwp 系統說缺少 yaml,可是我執行 pip install yaml 卻說沒有這個套件?
正確的套件是 PyYAML
*theme 內只有 theme.toml 沒有 config.toml?
theme 內的 config.toml 在 範例網站的資料夾內
應該會有個 exampleSite 的 demo 網站\,裡面有 demo 用的 config.toml
*為什麼我 hugo server 後畫面是空白的?
很多教學文章都是說將 theme clone 下來後,把 config.toml 檔改一改就好了
但實際上需要把 exampleSite 內的 archetyps, static 及 content 最好都取代根目錄的資料
(注意不要把 exampleSite 內的 content/post 內容取代掉你的文章)
確認主題可以顯示後,再把你的部落格文章.md 檔放進 content 內
*為什麼我把我的文章放進 content 後跑不出來?
我想這要參考一下 theme 內的 archetyps 怎麼定義為一篇文章
以上大致上是我架站時發生的一些問題
原先以為調查兩三周後可以順利實作,但真正到了實作時又遇上了一些困難,但我的網頁初版還是用了我半天的時間內完成
只不過我昨天手賤 去使用了第三方的網站來讀取我的 github 直接做操作
在我歡樂愉悅的沉浸在這美麗又舒服的操作時,發現他把我很多網頁都搞壞了
偏偏這假日忘了帶電腦回來, 好鬱悶阿 .....