WP Offload S3 Lite是Wordpress的好夥伴,
已經有自己的主機,為什麼還要建立圖庫專用主機呢?

把海量圖片放到Amazon S3主機,可以獲得下列好處:

  • 減少對主機的請求 – 因為主機不需要提供圖片,可以減少頁面加載時間。
  • 更便宜的價格 – 如果主機費用和儲存空間有關,S3的價格肯定比主機價格便宜。
  • 獨立的圖庫 – 因為圖片和網站分離,所以搬家或複製WordPress網站更簡單。基本上只是移動PHP文件,幾乎不佔用任何空間。

那麼 WP Offload S3 Lite搭配Cloudflare 能產生什麼好處呢?

  • S3資料傳輸流量
  • S3資料請求數量

以上這兩點佔S3費用大宗,如果搭配CDN服務,將可以大大降低S3資料傳輸流量。


那麼我們就開始動手吧!以下教學不含WP Offload S3 Lite(擇日再補)。

步驟一:建立S3 bucket

bucket的命名一定要以您的網域名為主,例如:images.XXX.com,如果原有的bucket名稱非網域名也別擔心,建立新的bucket並且複製原檔案過去即可。

" data-srcset="https://images.insideout.com.tw/wp-content/uploads/2018/07/31213738/201807310-200x132.png 200w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31213738/201807310-300x198.png 300w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31213738/201807310.png 395w" data-sizes="auto" data-orig-sizes="(max-width: 395px) 100vw, 395px" title="【WordPress】WP Offload S3 Lite搭配Cloudflare 2">


步驟二:設定Cloudflare DNS

  • 用cname指向S3網域名 images.insideout.com.tw.s3-ap-northeast-1.amazonaws.com

Tips:下列兩個網址等價

  • bucket網址 https://s3-ap-northeast-1.amazonaws.com/images.insideout.com.tw/
  • Cname指向網址 https://images.insideout.com.tw.s3-ap-northeast-1.amazonaws.com

" data-srcset="https://images.insideout.com.tw/wp-content/uploads/2018/07/31214745/201807311-200x14.png 200w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31214745/201807311-300x21.png 300w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31214745/201807311-400x28.png 400w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31214745/201807311-600x43.png 600w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31214745/201807311-768x55.png 768w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31214745/201807311-800x57.png 800w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31214745/201807311.png 972w" data-sizes="auto" data-orig-sizes="(max-width: 972px) 100vw, 972px" title="【WordPress】WP Offload S3 Lite搭配Cloudflare 3">


步驟三:設定WP Offload S3 Lite

設定至新Bucket

" data-srcset="https://images.insideout.com.tw/wp-content/uploads/2018/07/31215208/201807312-200x50.png 200w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31215208/201807312-300x76.png 300w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31215208/201807312-400x101.png 400w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31215208/201807312.png 420w" data-sizes="auto" data-orig-sizes="(max-width: 420px) 100vw, 420px" title="【WordPress】WP Offload S3 Lite搭配Cloudflare 4">

原圖片的網址 https://s3‑ap‑northeast‑1.amazonaws.com/images.insideout.com.tw/…

" data-srcset="https://images.insideout.com.tw/wp-content/uploads/2018/07/31215336/201807313-200x69.png 200w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31215336/201807313-300x104.png 300w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31215336/201807313-400x139.png 400w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31215336/201807313-600x208.png 600w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31215336/201807313.png 666w" data-sizes="auto" data-orig-sizes="(max-width: 666px) 100vw, 666px" title="【WordPress】WP Offload S3 Lite搭配Cloudflare 5">

變更後的圖片網址 https://images.insideout.com.tw/…

" data-srcset="https://images.insideout.com.tw/wp-content/uploads/2018/07/31215512/201807314-200x80.png 200w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31215512/201807314-300x119.png 300w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31215512/201807314-400x159.png 400w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31215512/201807314-600x239.png 600w, https://images.insideout.com.tw/wp-content/uploads/2018/07/31215512/201807314.png 664w" data-sizes="auto" data-orig-sizes="(max-width: 664px) 100vw, 664px" title="【WordPress】WP Offload S3 Lite搭配Cloudflare 6">

恭喜成功,省錢又快速的Wordpress網站!

相關文章

【WordPress】邁向95分 Google PageSpeed
【WordPress】WP Offload S3 Lite搭配Cloudflare
【WordPress】SiteNavigationElement 網站導航架構標記
【WordPress】Search Console Missing author updated
【WordPress】浮動FB粉絲專頁側邊欄
【WordPress】美美的中文字體 Google font - Avada、OnePress、Screenr、2015、The Box
【WordPress】OceanWP換上GoogleFont思源黑體

請用訂閱代替掌聲

*免費電子書
**訂閱Youtube頻道
***訂閱電子報
****追蹤IG
*****追蹤FB粉專