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

閱讀時間約 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 這個項目:
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 檔案。
以上,希望這種方式可以幫助到想要自己有一個網站的你。
9會員
19內容數
沙龍到底是…做什麼用的勒?
留言0
查看全部
發表第一個留言支持創作者!
Let's Write 的沙龍 的其他內容
探索如何使用 OneDev 在本機快速架設 Git Server。本文詳細介紹了安裝 OneDev 和 Docker 的步驟,並提供了實用的圖片和說明,幫助你輕鬆在本機建立和管理 Git Server。
探索 Google Sheets API 在 Google Apps Script 上的實用操作和技巧。本文詳細解釋了試算表和工作表的操作、好用函式和原始碼分享,是想要深入了解 Google Sheets API 應用的理想指南。
探索如何在 VS Code 中養一隻療癒的小寵物。本文將指導你安裝和使用 vscode-pets 擴充功能,讓可愛的寵物陪伴你一同寫程式。你可以選擇不同類型和顏色的寵物,甚至改變它們的遊玩場景,為你的編程時光增添樂趣和舒適。
2023 年 3 月第 3 週:OpenAI GPT-4 降臨。微軟推出 Microsoft 365 Copilot,Office AI 助手。FBI 首長:中國可透過 TikTok 控制數據 影響對台論述。IG 業配行情及技巧。
這篇文章教你如何使用 DOM to Image 進行網頁截圖。內容包括如何安裝和使用 DOM to Image,注意事項,以及一個實用的 Demo 和原始碼。文章還探討了 Notion AI 生成的文章,並在最後提供了一個關於生成式 AI 影響的彩蛋。
這篇文章教你如何使用 heic2any.js 來轉換 HEIC 格式的圖片。內容包括 HEIC 格式的介紹、如何使用 heic2any.js、處理從 iPhone 上傳的 HEIC 格式圖片,以及處理 API 回應的 HEIC Base64 格式圖檔的方法。文章提供了實用的 Demo 和原始碼。
探索如何使用 OneDev 在本機快速架設 Git Server。本文詳細介紹了安裝 OneDev 和 Docker 的步驟,並提供了實用的圖片和說明,幫助你輕鬆在本機建立和管理 Git Server。
探索 Google Sheets API 在 Google Apps Script 上的實用操作和技巧。本文詳細解釋了試算表和工作表的操作、好用函式和原始碼分享,是想要深入了解 Google Sheets API 應用的理想指南。
探索如何在 VS Code 中養一隻療癒的小寵物。本文將指導你安裝和使用 vscode-pets 擴充功能,讓可愛的寵物陪伴你一同寫程式。你可以選擇不同類型和顏色的寵物,甚至改變它們的遊玩場景,為你的編程時光增添樂趣和舒適。
2023 年 3 月第 3 週:OpenAI GPT-4 降臨。微軟推出 Microsoft 365 Copilot,Office AI 助手。FBI 首長:中國可透過 TikTok 控制數據 影響對台論述。IG 業配行情及技巧。
這篇文章教你如何使用 DOM to Image 進行網頁截圖。內容包括如何安裝和使用 DOM to Image,注意事項,以及一個實用的 Demo 和原始碼。文章還探討了 Notion AI 生成的文章,並在最後提供了一個關於生成式 AI 影響的彩蛋。
這篇文章教你如何使用 heic2any.js 來轉換 HEIC 格式的圖片。內容包括 HEIC 格式的介紹、如何使用 heic2any.js、處理從 iPhone 上傳的 HEIC 格式圖片,以及處理 API 回應的 HEIC Base64 格式圖檔的方法。文章提供了實用的 Demo 和原始碼。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
免費SEO優化電子書, 省下5000元, 一萬七千多字完全免費送! SEO優化電子書目錄 【SEO基礎知識】 什麼是SEO? SEO搜尋引擎的運作原理 【關鍵字研究】 SEO關鍵字研究的方法有哪些? SEO關鍵字分析工具 在進行關鍵字研究時,使用一些專門的關鍵字分析工具可以幫
Thumbnail
本篇介紹:設定about與categories、tags相關獨立頁面,讓自己的文章利於統整與搜尋。
Thumbnail
用不慣 Wordpress 嗎? 還在找免費開源的WP替代嗎? 那就不要錯過這篇關於 Publii 的介紹! 就算你不會寫程式也對代碼一竅不通,也能夠透過Publii來自己架設一個屬於自己的網站! 而且重點是完全免費! 
Thumbnail
它能夠提供洗鞋店的關鍵資訊,幫助客戶找到我們。而且無需花費大量廣告費,它是完全免費的。與社交媒體相比,它更容易吸引陌生客戶,提高曝光度。此外,它還提供方便的導航功能,引導客戶更容易親自來到店面。
Thumbnail
Microsoft Bing影像建立工具已經推出一段時間,之前看到不少實測文章,雖然可調整選項不多,應該說是幾乎沒有,但是產生的圖片品質不錯,也有1024*1024的解析度。這次來試用看看,用中文描述的產出結果,還不錯!
Thumbnail
少且精實的外部連結能為網站帶來加乘效益,反之,多且鬆散的外部連結則會為網站增添負擔。而客座投稿正正是能讓外部連結精實為數不多的方法之一,因此還在煩惱外部連結建立的你,不如試試看客座投稿吧!
#脈輪 #資源分享 #脈輪檢測 https://www.eclecticenergies.com/....../chakras/chakratest 建議可一段時間回來測驗檢視自己狀況
Thumbnail
【免費音樂剪接網站】 在剪接影片,或要教課時,音樂不需太長,只需要其中的一部分要怎麼辦呢? 寶哥有用影片解說怎麼用,超簡單的唷,點照片影片! 剪接網址:https://mp3cut.net/tw/
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
免費SEO優化電子書, 省下5000元, 一萬七千多字完全免費送! SEO優化電子書目錄 【SEO基礎知識】 什麼是SEO? SEO搜尋引擎的運作原理 【關鍵字研究】 SEO關鍵字研究的方法有哪些? SEO關鍵字分析工具 在進行關鍵字研究時,使用一些專門的關鍵字分析工具可以幫
Thumbnail
本篇介紹:設定about與categories、tags相關獨立頁面,讓自己的文章利於統整與搜尋。
Thumbnail
用不慣 Wordpress 嗎? 還在找免費開源的WP替代嗎? 那就不要錯過這篇關於 Publii 的介紹! 就算你不會寫程式也對代碼一竅不通,也能夠透過Publii來自己架設一個屬於自己的網站! 而且重點是完全免費! 
Thumbnail
它能夠提供洗鞋店的關鍵資訊,幫助客戶找到我們。而且無需花費大量廣告費,它是完全免費的。與社交媒體相比,它更容易吸引陌生客戶,提高曝光度。此外,它還提供方便的導航功能,引導客戶更容易親自來到店面。
Thumbnail
Microsoft Bing影像建立工具已經推出一段時間,之前看到不少實測文章,雖然可調整選項不多,應該說是幾乎沒有,但是產生的圖片品質不錯,也有1024*1024的解析度。這次來試用看看,用中文描述的產出結果,還不錯!
Thumbnail
少且精實的外部連結能為網站帶來加乘效益,反之,多且鬆散的外部連結則會為網站增添負擔。而客座投稿正正是能讓外部連結精實為數不多的方法之一,因此還在煩惱外部連結建立的你,不如試試看客座投稿吧!
#脈輪 #資源分享 #脈輪檢測 https://www.eclecticenergies.com/....../chakras/chakratest 建議可一段時間回來測驗檢視自己狀況
Thumbnail
【免費音樂剪接網站】 在剪接影片,或要教課時,音樂不需太長,只需要其中的一部分要怎麼辦呢? 寶哥有用影片解說怎麼用,超簡單的唷,點照片影片! 剪接網址:https://mp3cut.net/tw/