Hugo 靜態網站三劍客 Typora + uPic + imgur

​ 最近把部落格換到 Hugo 靜態網站後,有些人陸陸續續來私聊我一些相關事情 有人想要丟到 Github 上面,有的人想丟到 Netlify 上面,因為如果網站都是文字的話其實佔不了太多容量 上面兩個提供的免費方案只要流量不會太大的個人部落格,都可以輕鬆達成任務 而大一點的影片可以丟到 Youtube 之類的網站解決,主要是部落格圖床問題比較多 今天推薦一下全免費的 Hugo 部落格解決方案:Typora + uPic + imgur ​ ​ Typora 如果你在找一款免費卻一點也不輸付費 Markdown 的書寫軟體,Typora 你一定要試試看! 你在試用過一段時間以後一定很難相信這是一款全免費的軟體,因為功能非常完整且專業 還是跨平台的,真的佛!特點如下: ​ 所見即得的即時預覽 界面優雅極簡,無花俏不實的功能,操作時不拖泥帶水,整體流暢 Markdown 語法支援完整,偶而穿插一點 html code 也沒問題 拖曳快速插入圖片以及全自動圖片上傳自定義圖床空間 支援自訂、更換佈景主題 專注模式跟打字機模式,讓你心無旁騖,效率提升 up up ​ 👆 界面極簡,可以專注在寫作上 ​ uPic + imgur 這套 macOS 免費開源輕巧的圖床上傳工具是在 Typora 圖片上傳選項中發現的,安裝非常簡單 有安裝 Homebrew 的人只要一行即可安裝 $ brew cask install upic ​ 沒有的話也可以直接到官方 Github release 網頁手動下載: https://github.com/gee1k/uPic/releases ​ ​...

March 26, 2020 · 1 min · jkgtw

WordPress 搬家 Hugo 的記錄與設定

​ 前兩天終於成功從 WordPress 切換到全靜態網站的 Hugo,切換過程還算順利 切換之後有發現 Telegram 留言板跟 RSS 輸出有點問題,就趕快動手調整一下 Telegram 留言板目前還太陽春,有人在文章下面留言,我居然不會收到通知,忍痛棄用 還是換上 Disqus 的留言板,缺點就是免費版會有個性化廣告投放與追蹤 如果不想要有太個人化的追蹤可以點留言板下面的「Do Not Sell My Data」,然後跳到他們網頁按下「Opt Out」即可 ​ ​ RSS 的部分我來來回回在 Hugo 說明書跟設定檔案調整與測試,目前也算是可以正常全文輸出 整個新站上線之後,大致還算穩定,因為少掉資料庫與 php 等等其他依賴,系統消耗少很多,速度提升整個 up up 以下簡單記錄一下這次 WordPress to Hugo 搬家的過程~ ​ ​ Hugo 環境安裝 macOS 上面安裝非常簡單,如果你有安裝 HomeBrew 的話,只需要一行指令即可完成安裝 $ brew install hugo ​ 安裝完畢後,也只要一行指令即可完成一個簡單網站基礎設定檔與資料夾 $ hugo new site mynewsite ​ 接著切換到該資料夾裡面,即可看見 Hugo 幫你自動建好 config、themes、layouts、content。。等等 再來就是去挑一個你喜歡的主題,Hugo 官網有列出很多但不是全部,我目前選的是 LoveIt 功能非常多,多語系、說明書詳細、可客製化程度高且支援 Darkmode 自動切換。。等等 主題的作者維護也非常勤勞,且最近也積極聽取使用者反饋的建議修改以及增加功能 只要依照 Hugo 說明書跟主題設定檔案,隨著你自己的環境逐條設定過去就可以,整體難度不是很高~...

March 21, 2020 · 2 min · jkgtw

準備從 WordPress 搬到 Hugo 的全靜態網頁

​ 用 WordPress 已經用好幾年了,WordPress 主題跟外掛資源多多,大概你想要的功能大部分都有人寫好了 初期建立時候我還買了幾套佈景主題跟外掛,我安裝的外掛數量應該也算普普通通?最多時候有裝到二十多個 後來精簡到十五個左右,如果再極端一點可以縮到十個左右 雖然 WordPress 這種 CMS 架構非常強大,但缺點就是跟 Windows 系統一樣本體隨著時間越用越腫了。。。 ​ ​ 另外就是 CMS 動態網頁的最佳化實在有夠難,有數據庫、php 然後又有 html + css + js,對於我這種非網頁工程師 看到 Google PageSpeed Insights 分數低,就算看著谷歌給的優化建議,也還是無從下手,而感到無力。。。 但是不可否認 CMS 架構在搭建、使用跟訪客交互上有明顯優勢 ​ 後來偶然在某個網頁看見介紹 Hugo,可以使用 Markdown 的寫作方式,讓 Hugo 快速渲染出全靜態的網頁 因為是全靜態網頁,沒有數據庫之類需要資料查詢、傳送。。等等,所以整體網站的加載速度會超快! 而靜態網頁本體缺少與訪客交互的功能,像是每篇文章底下的留言板,但這個留言功能也有外掛來實現 看到 Hugo 社群比較多人用的第三方留言板有 Disqus 或者 Facebook 留言,這些都能被無縫整合到 Hugo 裡面 ​ 所以前幾個禮拜沒有考慮太多,就用著閒餘時間慢慢看看與摸索 Hugo 的說明文件 再挑了一個開發活躍且看的順眼的簡約主題,終於在前幾天把大部分資料都順利轉換成 Hugo 了~ ​ 再來說說目前部落格從 WordPress 切換過去 Hugo 之後的損失 比較明顯的就是目前所有留言都無法搬過去,因為都是存在伺服器本地上的資料庫 Hugo 全靜態架構沒有數據庫的存在,所以只能全部放棄,之後會採用 Telegram Comment Bot 的留言板(?)...

March 19, 2020 · 1 min · jkgtw