起飛吧!使用 Frontity 在本機建立你的第一個 WordPress 靜態網站

WordPress 的速度一直都是許多人心中的夢魘,雖然有很多最佳化的方法,但速度提升仍然有他的瓶頸。所以近年來許多開發者紛紛把目標轉向靜態網站 (Static Website)。除了有靜態網站的 framework 像是 GatsbyJS 以外,還有許多以靜態網站為主打的網站託管服務 (Web Hosting)冒出,像是前年 (2019) 贊助 WordCamp Taipei 2018 的 Shifter,另外還有同樣是靜態網站託管服務的 Strattic ,再再都顯示靜態網站在 WordPress 市場的發展性。

而近日 WordPress 市場上的另一個大新聞就是,Frontity 這個以 WordPress 為基礎的開源靜態網站 framework 融資了 1百萬美元,而背後的金主就包含了 Automattic,也讓人期待靜態網站在 WordPress 生態的發展。

Frontity 是以 React 來開發的,官網有相當完整的範例教大家怎麼進行架設和開發,我們就自己來動手試試看吧!

第一步:建立一個新的 Frontity 專案

frontity 有自己的 CLI 工具,請在命令列輸入以下工具來建立一個新的 frontity 專案。請將 my-app 取代為自己的專案名稱

npx frontity create my-app

安裝的過程會詢問你要使用哪一個主題,目前有兩個可以選,一個是預設的 Mars,另一個是 TwentyTwenty,我們先選擇 Mars

frontity select theme

選擇好佈景主題後,會安裝相關的套件,並且詢問你是否要收到 frontity 更新的資訊,如果要的話請輸入你的 email,就完成安裝啦!

frontity finish installation

完成安裝後,請切換到你的專案目錄,這邊是 ucheng-frontity

cd ucheng-frontity

這個是預設的專案目錄結構

frontity defatul project hierachy

第二步:啟動伺服器

要正常瀏覽網頁,必須先啟動開發的伺服器,請在你的專案目錄下輸入:

npx frontity dev

這個指令會啟動伺服器,同時會偵測你在 packages 目錄下的所有改動,執行指令後會自動在你的瀏覽器開啟測試站網址 http://localhost:3000,預設會顯示frontity 測試站的內容。

frontity default mars theme

第三步:連線到你的網站

預設啟動 frontity 專案時,會顯示 frontity 測試站的內容,如果要顯示自己網站的內容,請打開 frontity.settings.js 這個檔案。將 api 改為自己的網址,https://yoursite/wp-json。

Frontity%20WordPress%20d31385fdd2cc453b851eb6d9ee17a007/Untitled%204.png

接著再到瀏覽器重新整理畫面,即可看到內容改為自己網站的內容了。

frontity blog content

結論

以上就是如何在本機中建立你的第一個 Frontity 專案,實際瀏覽起來速度真的是飛快。接下來就是要嘗試來修改佈景主題了。

Font Resize