iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 29
1
Modern Web

透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 系列 第 29

把 HackMD 當成網站後台

把 HackMD 當成網站後台

前面已經分享了如何完全透過網頁的操作,就可以把 VuePress 網站給架設起來,還可以修改文章與發新文章,不過如果未來網站要交給非工程人員管理的話,操作 GitHub 對於他們可能有些太複雜了。

今天來分享另一個也很客家的模式,用 HackMD 這個服務來當作網站的後台使用,不但介面容易上手得多,同時也達到額外備份內容的效果呢!


授權 HackMD 讀寫 GitHub 儲存庫

既然要能新增修改,那當然不能隨便阿貓阿狗都能對我們的網站上下其手囉,所以是必須有經過正式的設定與授權才能讀寫儲存庫的。

要開始設定之前,我們要先開一個新的筆記:

打開筆記之後選擇 從 GitHub 拉取 的按鈕

就可以進入授權的流程囉,接著就先登入你的 GitHub 帳號吧!

登入完成後就可以看到授權的選項囉,這時候有兩個選項可以選,上面的就是整個帳號的所有儲存庫都授權給 HackMD 讀寫,不過如果這組 HackMD 帳號是要交給其他人代管的,我想還是只授權個別儲存庫比較好喔。


修改儲存庫的文件內容

而授權完成之後,網頁會再次跳轉回到 HackMD 的頁面上,這時候我們就可以選擇要讀取哪個儲存庫、哪條分支的哪個檔案囉,因為我們希望我們的改動會就直接呈現在網站上,所以分支選 master 就好囉。

選擇檔案是有下拉選單的,可以選擇要進行修改的文件。

因為是第一次的拉取,就等於是在 HackMD 建立新檔案,所以版本對照就會呈現下圖這樣,代表 HackMD 內容的右邊區塊是空白的。

載入之後就可以在編輯區看到文件的內容啦!
也可以自由的編輯處理,這邊就試著把標題給改掉看看。

修改完成後,就可以點擊右上角的 選項 選單,選擇 版本與 GitHub 同步

因為這時候我們是要把修改上傳回去 GitHub ,所以我們選 推送變更
版本的名稱與描述可以在下方的欄位填上,也方便日後追蹤管理,輸入完成之後就按下 推送 吧!



又回到 GitChub Actions 囉

而經過版本推送之後,還記得網站是怎麼更新成新內容的嗎?
當然就又是透過 GitHub Actions 來實作的 CI/CD 流程囉!

可以看到,我剛剛修改的標題,已經確實的出現在頁面上囉

如果是要發表新文章的話,就不用先引入儲存庫文章了,直接開新的筆記來書寫就可以囉,書寫完成就一樣點擊右上角的 選項 選單,選擇 版本與 GitHub 同步
在檔案的欄位輸入新的檔名,就會變成新增檔案囉!


上一篇
不會程式也能用 VurPress 玩 JAMStack 架設網站(2)
下一篇
Netlify CMS : 完全就是為了 JAMstack 而設計的 CMS 系統
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30

尚未有邦友留言

立即登入留言