1. 首頁
  2. »
  3. 網站架設
  4. »
  5. 主機
  6. »
  7. Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站

Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站

2020/04/29

梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
  先前梅干已分享過,許多免費的HTML靜態網頁空間,但有了空間後,就得自行設計好網頁,再將網頁上傳到免費的網頁空間,雖然靜態網頁無論在開啟的速度,還是主機架構也單純許多,但比較美中不足的是,不像具有資料庫型的動態網站,來的那麼的靈活,因此大部分架站都會選用WordPress,除了在架設上相當的簡單外,再來就是擁有豐富的資源與管理後台,但有用WordPress架的朋友,都有共通的經驗,就是當網站上線後,一定得裝快取,而安裝快取其實目的,就是要將動態網頁再變成靜態網頁,如此一來才有助於網頁的開啟速度,與降低主機的負擔。

  對於許多朋友來說,網站的架構並非那麼的複雜,或許這時候有更好的選擇,那就是使用hugo來架設,而它最大的優點就是,在網站上線前,會將有的檔案編譯成靜態網頁後再上線,雖然hugo很方便也很好用,但不像WordPress有後台的管理介面可用,因此在編輯文章時,需用文字編輯器來進行編寫,但現在透過Netlify CMS,只需五分鐘,立即就可打造一個具有後台管理介面的hugo網站,同時也省去了自行架設hugo編輯器,因此當網站架構,不用太複雜的朋友,不妨可試試netlify CMS 吧!


netlify CMS
Step1
首先在進入netlify cms的網站後,點一下「GET STARTED」鈕。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step2
接著點hugo下方的「Deploy to netlify」鈕。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step3
接著會需要綁定GitHub的帳號,因為檔案會儲存會在GitHub中。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step4
接著登入Github帳號。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step5
登入完畢後,再按下方的「Authorize netlify」鈕。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step6
再按「Save & Deploy」。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step7
這時就會開始進行發佈。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step8
點一下進入log畫面後,當看到Site is live就表示已發布完畢,再按右上的「Preview」預覽鈕。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step9
而這就是它內建的佈景版型,當然不喜歡,都可再自行修改。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step10
接著也綁定自己的網域與啟用免費的SSL(而這邊的設定可參考此文章https://www.minwt.com/free/22193.html)。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step11
當綁定完畢後,就可看到網址不再落落長,同時還有SSL安全憑證。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step12
當要進入管理後台時,只需在網址後方,輸入admin,再填入Github的帳密。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step13
而這就是它的管理畫面,相當的精簡,讓你可以透過視覺化介面,新增文章與頁面。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step14
而這邊編輯的部分,就與一般的部落格或是WordPress一樣。
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站
Step15
在發佈完畢後,回到前台,就可看到剛所發佈的文章,相當的簡易好用,因此當下回有架站的需求,不坊可試試netlify cms吧!
梅問題-Netlify CMS 五分鐘,打造具有後台的Hugo靜態網站