免費建立一個自己的網站 – WordPress + Cloudflare Pages

免費建立一個自己的網站 - WordPress + Cloudflare Pages
免費建立一個自己的網站 - WordPress + Cloudflare Pages

本篇要解決的問題

之前有寫過二篇,用免費的資源來建立一個自己的網站:「Netlify + GitLab」、「Publii + GitHub Pages」,不過後來有朋友反應說,Publii 要收 $$ 了,而 August 本身為這個站製作的 Demo 頁,也都是用 GitHup Pages,所以就一直沒有再去找其它的替代品。

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

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

如果你對 WordPress 有一點熟(不熟也可以看 基本介紹),但不知道要怎麼用 WordPress 來建立一個屬於自己的網站的話,可以看這篇。

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


本機安裝、建立 WordPress

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

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

如何用 MAMP 在本機安裝 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
WordPress 後台出現 Simply Static

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

點擊 Generate Static Files
點擊 Generate Static Files

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

Activity Log 訊息
Activity Log 訊息

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


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

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

先進到 Cloudflare Pages 的官方頁面:

https://pages.cloudflare.com/

如果還沒有註冊會員,就點「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 的檔案
選擇要放上 Cloudflare Pages 的檔案

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

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

上傳完成
上傳完成

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

網站建立完成
網站建立完成

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

建立新部署
建立新部署

優點及缺點

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

優點

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

缺點

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

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

WordPress + Cloudflare Pages 的這種方式,比較像是為了資訊呈現而用,或是單純想跟朋友炫耀(咦?)

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

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

Summary
免費建立一個自己的網站 - WordPress + Cloudflare Pages
Article Name
免費建立一個自己的網站 - WordPress + Cloudflare Pages
Description
探討如何免費建立自己的網站,結合 WordPress 和 Cloudflare Pages。文章涵蓋從本機安裝 WordPress、產出靜態檔案,到將檔案部署到 Cloudflare Pages 的完整流程,並探討其優點和缺點。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

2 Comments
最舊
最新
Inline Feedbacks
看所有留言
Ocean
Ocean
5 月 之前

最重要的是每一次更新,都要手动传一次档案?