免費建立一個自己的網站 - WordPress + Cloudflare Pages
2023/04/13閱讀時間約 7 分鐘
本篇要解決的問題
之前有寫過二篇，用免費的資源來建立一個自己的網站：「Netlify + GitLab」、「Publii + GitHub Pages」，不過後來有朋友反應說，Publii 要收 $$ 了，而 August 本身為這個站製作的 Demo 頁，也都是用 GitHup Pages，所以就一直沒有再去找其它的替代品。
直到最近才發現一個好東西：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 的留言功能的，要用留言必須要找其它的第三方工具來使用。
如果怕漏了關閉文章的留言功能，可以安裝「Disable Comments」這個外掛，就能直接設定讓網站中的留言功能全部關閉。
安裝 Simply Static 產出靜態檔案
我們電腦上的 WordPress 都建好了一個段落後，接著就是要把裡面的文章及頁面轉成靜態的 HTML 檔案，才能夠放上 Cloudflare Pages。
Cloudflare Pages 的 官方文件 上，推薦使用的就是 Simply Static 這個外掛。
在 WordPress 安裝好 Simply Static 後，後台左側選單，就會看見 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 的檔案：
還記得我們用了 Simply Static 這個外掛，產出了一個壓縮檔嗎？這邊的上傳檔案，就是要上傳那一整包。
點擊「從電腦中選取」後，再點擊「上傳壓縮檔」，選擇我們剛剛得到的壓縮檔，它就會自動上傳然後部署啦，我們再等它跑一下，再讓子彈飛一會兒……上傳完成，就會看到像這樣的畫面：
最後，我們只要點擊「部署網站」，我們專屬的網站就完成啦~
之後如果有更新檔案需要再傳上去，就進到 Cloudflare Pages 上，點擊專案，再點擊「建立新部署」就可以了：
優點及缺點
最後，想整理一下使用 WordPress + Cloudflare Pages 來建立免費網站的這種方法，使用到現在覺得的優點、缺點。
優點
- 免費（夠直接）
- 介面操作簡單（有中文）
- 有 Cloudflare 全球性的 CDN 當後盾，頁面速度不會慢到哪去
缺點
- 沒有 WordPress 的後端功能
- 要自己備份
- 可能某一天會收費？
第一個缺點其實很重要，還記得上面說不能使用 WordPress 原有的留言功能嗎？就是因為檔案全部都是靜態的 HTML，不像 WordPress 本身是 PHP 可以執行後端的功能。
WordPress + Cloudflare Pages 的這種方式，比較像是為了資訊呈現而用，或是單純想跟朋友炫耀（咦？）
而因為 WordPress 是建在自己的電腦，如果哪天電腦爆炸或是被外星人抓去做研究，你辛苦經營的站就沒了，所以，得要自行備份電腦中的 WordPress 檔案。
以上，希望這種方式可以幫助到想要自己有一個網站的你。
8會員
16內容數
留言0
查看全部
