本篇要解決的問題
直到最近才發現一個好東西:Cloudflare Pages,一個有提供免費額度的靜態網站及網址的線上佛心工具(好長的稱號),而且官方文件還提供怎麼放由 WordPress 建立的網頁,知道了以後就一直想來踹踹看。
眼尖的朋友可能會發現,之前本站中的 Let’s 週報不見啦,其實就是用 WordPress + Cloudflare Pages 的方式,搬到了新建的一個子網域,以後 Let’s 週報都會集中這:
Cloudflare Pages 本身就有提供一個免費的網域,不一定要自己有租網域才可以使用。
如果你對 WordPress 有一點熟(不熟也可以看
基本介紹),但不知道要怎麼用 WordPress 來建立一個屬於自己的網站的話,可以看這篇。
這篇沒有程式碼,單純就是外掛裝一裝、按鈕點一點,檔案拉一拉,就好了,就是這麼的樸實無華~
本機安裝、建立 WordPress
因為是要免費的用 WordPress 來建立網站,就不用去花 $$ 找外部主機,直接拿個人電腦就行。
關於如何用本機安裝及建立 WordPress,本站之前就有寫過筆記文了,這邊不再重寫,請點擊下方文章觀看:
本機安裝好後,就可以開始找佈景主題、安裝外掛、建立頁面或文章。
本站之前也有寫過推薦對 SEO 有利的外掛,可以參考:
本段最後要注意的有二點。
網址把參數去掉
因為我們不是把整個 WordPress 的程式放進 Cloudflare Pages 上,而是把所有的文章及頁面轉成 HTML 檔後匯入,所以網址的部份不能夠有參數,不然匯出時會有錯誤。
而在 WordPress 的後台中:設定 > 永久連結,預設就會是有參數的,看到有「?」的符號就是有參數,必須選擇別種沒有「?」符號的網址格式,才能再下一步匯出時順利成功。
不支援留言功能
WordPress 本身有提供留言功能,但是!But!西卡西!最後我們要放上 Cloudflare Pages 上的,是靜態的 HTML 檔案,這是不支援 WordPress 的留言功能的,要用留言必須要找其它的第三方工具來使用。
安裝 Simply Static 產出靜態檔案
我們電腦上的 WordPress 都建好了一個段落後,接著就是要把裡面的文章及頁面轉成靜態的 HTML 檔案,才能夠放上 Cloudflare Pages。
在 WordPress 安裝好 Simply Static 後,後台左側選單,就會看見 Simply Static 這個項目:
WordPress 後台出現 Simply Static
點擊 Simply Static > Generate,右側就會看見一個大大的「Generate Static Files」按鈕,按下它,就會開始把我們本機 WordPress 上的文章、頁面都轉成 HTML 檔案:
檔案轉好時,下方的「Activity Log」會看到像這樣的訊息:
點擊裡面的「Click here to download」,會下載一包壓縮檔,裡面就是我們所有的頁面檔案,而且連分類頁、標籤頁、分頁、Sitemap 等都會有,是不是很簡單很方便。
檔案放上 Cloudflare Pages,網站建立完成
拿到的網站的壓縮檔後,最後一步就是要把檔案放上 Cloudflare Pages 上。
先進到 Cloudflare Pages 的官方頁面:
如果還沒有註冊會員,就點「Sign up」,有註冊過的就點「Log in」。
註冊成為 Cloudflare 的會員是免費的,裡面除了這篇講的 Pages 功能,還有很多好用而且可免費使用的佛心功能,推推~
登入後,Pages 的頁面上有一個「建立專案」的按鈕,點擊它:
接著會看到上傳的方式有三種,我們選擇最簡單的「直接上傳」,點擊直接上傳那個區塊的「上傳資產」:
點擊上傳資產後,要先取一個「專案名稱」,其實,這就是在取網址的名稱,這個網址名稱就是以後大家看了這篇後,把照著做出來的網站傳 LINE 給朋友圈炫耀時用的(喂~),總之就是可以讓全宇宙看到的網址:
截圖可以看到,August 把專案名稱取叫「free-wordpress」時,下方就出現一行「您的專案將部署到 free-wordpress.pages.dev」,free-wordpress.pages.dev 就是我們透過 Cloudflare Pages 所產生出的免費網址。
取好名稱後按下「建立專案」,讓它跑一下,讓子彈飛一會兒……下一步,就是要選擇放上 Cloudflare Pages 的檔案:
選擇要放上 Cloudflare Pages 的檔案
還記得我們用了 Simply Static 這個外掛,產出了一個壓縮檔嗎?這邊的上傳檔案,就是要上傳那一整包。
點擊「從電腦中選取」後,再點擊「上傳壓縮檔」,選擇我們剛剛得到的壓縮檔,它就會自動上傳然後部署啦,我們再等它跑一下,再讓子彈飛一會兒……上傳完成,就會看到像這樣的畫面:
最後,我們只要點擊「部署網站」,我們專屬的網站就完成啦~
之後如果有更新檔案需要再傳上去,就進到 Cloudflare Pages 上,點擊專案,再點擊「建立新部署」就可以了:
優點及缺點
最後,想整理一下使用 WordPress + Cloudflare Pages 來建立免費網站的這種方法,使用到現在覺得的優點、缺點。
優點
- 免費(夠直接)
- 介面操作簡單(有中文)
- 有 Cloudflare 全球性的 CDN 當後盾,頁面速度不會慢到哪去
缺點
- 沒有 WordPress 的後端功能
- 要自己備份
- 可能某一天會收費?
第一個缺點其實很重要,還記得上面說不能使用 WordPress 原有的留言功能嗎?就是因為檔案全部都是靜態的 HTML,不像 WordPress 本身是 PHP 可以執行後端的功能。
WordPress + Cloudflare Pages 的這種方式,比較像是為了資訊呈現而用,或是單純想跟朋友炫耀(咦?)
而因為 WordPress 是建在自己的電腦,如果哪天電腦爆炸或是被外星人抓去做研究,你辛苦經營的站就沒了,所以,得要自行備份電腦中的 WordPress 檔案。
以上,希望這種方式可以幫助到想要自己有一個網站的你。