免費建立一個自己的網站 - WordPress + Cloudflare Pages
Tags: beginners, tutorial, wordpress, cloudflare
Published: 2023-04-13 12:59:31

## 本篇要解決的問題

之前有寫過二篇，用免費的資源來建立一個自己的網站：「[Netlify + GitLab](https://www.letswrite.tw/netlify-gitlab/)」、「[Publii + GitHub Pages](https://www.letswrite.tw/publii-github-pages/)」，不過後來有朋友反應說，Publii 要收 $$ 了，而 August 本身為這個站製作的 Demo 頁，也都是用 GitHup Pages，所以就一直沒有再去找其它的替代品。

直到最近才發現一個好東西：Cloudflare Pages，一個有提供免費額度的靜態網站及網址的線上佛心工具（好長的稱號），而且官方文件還提供怎麼放由 WordPress 建立的網頁，知道了以後就一直想來踹踹看。

眼尖的朋友可能會發現，之前本站中的 Let's 週報不見啦，其實就是用 WordPress + Cloudflare Pages 的方式，搬到了新建的一個子網域，以後 Let's 週報都會集中這：

<https://weekly.letswrite.tw/>

Cloudflare Pages 本身就有提供一個免費的網域，不一定要自己有租網域才可以使用。

如果你對 WordPress 有一點熟（不熟也可以看 [基本介紹](https://www.letswrite.tw/wordpress-basic/)），但不知道要怎麼用 WordPress 來建立一個屬於自己的網站的話，可以看這篇。

這篇沒有程式碼，單純就是外掛裝一裝、按鈕點一點，檔案拉一拉，就好了，就是這麼的樸實無華~

---

## 本機安裝、建立 WordPress

因為是要免費的用 WordPress 來建立網站，就不用去花 $$ 找外部主機，直接拿個人電腦就行。

關於如何用本機安裝及建立 WordPress，本站之前就有寫過筆記文了，這邊不再重寫，請點擊下方文章觀看：

[如何用 MAMP 在本機安裝 WordPress](https://www.letswrite.tw/mamp-wordpress/)

本機安裝好後，就可以開始找佈景主題、安裝外掛、建立頁面或文章。

本站之前也有寫過推薦對 SEO 有利的外掛，可以參考：

- [WordPress SEO 有幫助的 3 + 4 個外掛](https://www.letswrite.tw/wordpress-plugin-seo/)
- [WordPress SEO 有幫助的 2 個外掛](https://www.letswrite.tw/wordpress-plugin-seo-2/)

本段最後要注意的有二點。

### 網址把參數去掉

因為我們不是把整個 WordPress 的程式放進 Cloudflare Pages 上，而是把所有的文章及頁面轉成 HTML 檔後匯入，所以網址的部份不能夠有參數，不然匯出時會有錯誤。

而在 WordPress 的後台中：設定 > 永久連結，預設就會是有參數的，看到有「?」的符號就是有參數，必須選擇別種沒有「?」符號的網址格式，才能再下一步匯出時順利成功。

### 不支援留言功能

WordPress 本身有提供留言功能，但是！But！西卡西！最後我們要放上 Cloudflare Pages 上的，是靜態的 HTML 檔案，這是不支援 WordPress 的留言功能的，要用留言必須要找其它的第三方工具來使用。

如果怕漏了關閉文章的留言功能，可以安裝「[Disable Comments](https://tw.wordpress.org/plugins/disable-comments/)」這個外掛，就能直接設定讓網站中的留言功能全部關閉。

---

## 安裝 Simply Static 產出靜態檔案

我們電腦上的 WordPress 都建好了一個段落後，接著就是要把裡面的文章及頁面轉成靜態的 HTML 檔案，才能夠放上 Cloudflare Pages。

Cloudflare Pages 的 [官方文件](https://developers.cloudflare.com/pages/how-to/deploy-a-wordpress-site/) 上，推薦使用的就是 [Simply Static](https://tw.wordpress.org/plugins/simply-static/) 這個外掛。

在 WordPress 安裝好 Simply Static 後，後台左側選單，就會看見 Simply Static 這個項目：

![WordPress 後台出現 Simply Static](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gij9g2bjq8fxbhnczd9f.png)

點擊 Simply Static > Generate，右側就會看見一個大大的「Generate Static Files」按鈕，按下它，就會開始把我們本機 WordPress 上的文章、頁面都轉成 HTML 檔案：

![點擊 Generate Static Files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vycprt9o11xgow8ja0at.png)

檔案轉好時，下方的「Activity Log」會看到像這樣的訊息：

![Activity Log 訊息](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gl4nr5q0zc04ozuub6eb.png)

點擊裡面的「Click here to download」，會下載一包壓縮檔，裡面就是我們所有的頁面檔案，而且連分類頁、標籤頁、分頁、Sitemap 等都會有，是不是很簡單很方便。

---

## 檔案放上 Cloudflare Pages，網站建立完成

拿到的網站的壓縮檔後，最後一步就是要把檔案放上 Cloudflare Pages 上。

先進到 Cloudflare Pages 的官方頁面：

<https://pages.cloudflare.com/>

如果還沒有註冊會員，就點「Sign up」，有註冊過的就點「Log in」。

註冊成為 Cloudflare 的會員是免費的，裡面除了這篇講的 Pages 功能，還有很多好用而且可免費使用的佛心功能，推推~

登入後，Pages 的頁面上有一個「建立專案」的按鈕，點擊它：

![點擊 建立專案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmqid7rjctty9g76nryd.png)

接著會看到上傳的方式有三種，我們選擇最簡單的「直接上傳」，點擊直接上傳那個區塊的「上傳資產」：

![點擊 上傳資產](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dr9pdiahurkor5wxxlh9.png)

點擊上傳資產後，要先取一個「專案名稱」，其實，這就是在取網址的名稱，這個網址名稱就是以後大家看了這篇後，把照著做出來的網站傳 LINE 給朋友圈炫耀時用的（喂~），總之就是可以讓全宇宙看到的網址：

![輸入網址名稱](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxgmpc4gz8via3yowi39.png)

截圖可以看到，August 把專案名稱取叫「free-wordpress」時，下方就出現一行「您的專案將部署到 free-wordpress.pages.dev」，free-wordpress.pages.dev 就是我們透過 Cloudflare Pages 所產生出的免費網址。

取好名稱後按下「建立專案」，讓它跑一下，讓子彈飛一會兒……下一步，就是要選擇放上 Cloudflare Pages 的檔案：

![選擇要放上 Cloudflare Pages 的檔案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnlbdng1y4xwxcxqanmt.png)

還記得我們用了 Simply Static 這個外掛，產出了一個壓縮檔嗎？這邊的上傳檔案，就是要上傳那一整包。

點擊「從電腦中選取」後，再點擊「上傳壓縮檔」，選擇我們剛剛得到的壓縮檔，它就會自動上傳然後部署啦，我們再等它跑一下，再讓子彈飛一會兒……上傳完成，就會看到像這樣的畫面：

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8d7c77u5u2ud0mppsv8i.png)

最後，我們只要點擊「部署網站」，我們專屬的網站就完成啦~

![網站建立完成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obxcadka2ty4jq3hk5zr.png)

之後如果有更新檔案需要再傳上去，就進到 Cloudflare Pages 上，點擊專案，再點擊「建立新部署」就可以了：

![建立新部署](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3urfba69g6ixkpqtgqn.png)

---

## 優點及缺點

最後，想整理一下使用 WordPress + Cloudflare Pages 來建立免費網站的這種方法，使用到現在覺得的優點、缺點。

### 優點

- 免費（夠直接）
- 介面操作簡單（有中文）
- 有 Cloudflare 全球性的 CDN 當後盾，頁面速度不會慢到哪去

### 缺點

- 沒有 WordPress 的後端功能
- 要自己備份
- 可能某一天會收費？

第一個缺點其實很重要，還記得上面說不能使用 WordPress 原有的留言功能嗎？就是因為檔案全部都是靜態的 HTML，不像 WordPress 本身是 PHP 可以執行後端的功能。

WordPress + Cloudflare Pages 的這種方式，比較像是為了資訊呈現而用，或是單純想跟朋友炫耀（咦？）

而因為 WordPress 是建在自己的電腦，如果哪天電腦爆炸或是被外星人抓去做研究，你辛苦經營的站就沒了，所以，得要自行備份電腦中的 WordPress 檔案。

以上，希望這種方式可以幫助到想要自己有一個網站的你。