免費建立一個自己的網站 - WordPress + Cloudflare Pages
本篇要解決的問題
之前有寫過二篇，用免費的資源來建立一個自己的網站：「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 這個項目： 
WordPress 後台出現 Simply Static
點擊 Simply Static Generate，右側就會看見一個大大的「Generate Static Files」按鈕，按下它，就會開始把我們本機 WordPress 上的文章、頁面都轉成 HTML 檔案： 點擊 Generate Static Files
檔案轉好時，下方的「Activity Log」會看到像這樣的訊息： 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 檔案。
以上，希望這種方式可以幫助到想要自己有一個網站的你。
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 檔案。
以上，希望這種方式可以幫助到想要自己有一個網站的你。
- 沒有 WordPress 的後端功能
- 要自己備份
- 可能某一天會收費？
第一個缺點其實很重要，還記得上面說不能使用 WordPress 原有的留言功能嗎？就是因為檔案全部都是靜態的 HTML，不像 WordPress 本身是 PHP 可以執行後端的功能。
WordPress + Cloudflare Pages 的這種方式，比較像是為了資訊呈現而用，或是單純想跟朋友炫耀（咦？）
而因為 WordPress 是建在自己的電腦，如果哪天電腦爆炸或是被外星人抓去做研究，你辛苦經營的站就沒了，所以，得要自行備份電腦中的 WordPress 檔案。
以上，希望這種方式可以幫助到想要自己有一個網站的你。
分享至
成為作者繼續創作的動力吧！
作者的相關文章
Let's Write 的沙龍 的其他內容
- 用 OneDev 在本機架 Git Server 功能
- Google Sheets API，在 Google Apps Script 上的好用部份
- VS Code Pets，一邊寫程式一邊養隻療癒小寵物吧
- 2023 年 3 月第 3 週 - GPT4、Copilot、OpenChatKit、P92、Messenger、LLa
- 簡單的網頁截圖功能 – DOM to Image
- HEIC 格式的圖片怎麼辦？使用 heic2any.js 轉換為 JPEG 或 PNG
你可能也想看
- 「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！
- 如果這個世界有神，那祂一定姓李名相赫｜矮袋鼠律師
- 免費SEO優化電子書, 省下5000元, 一萬七千多字完全免費送!
- 免費部落格架站教學(7) Hexo建立選單頁面
- Publii 免費開源的網站建立器| 0代碼建立部落格 | 從零開始架設網站也可以很簡單
- Google商家帳戶的最佳化新手指南
- 微軟Bing影像建立工具，免費快速AI繪圖
- 還在找增加外部連結的方法？免費外部連結建立報你知！
- 免費脈輪檢測網站-建議可固定一兩個月測驗檢視自身狀況
- 【免費音樂剪接網站】
發表回應
成為會員 後即可發表留言
© 2024 vocus All rights reserved.