我一直很想把我的部落格從 Medium 搬家。因為我發現只要我寫的文章被 Medium 判斷是廢文，他就會完全不給 Google 搜尋引擎檢索。這讓我很不開心。我會寫在 Medium 就是因為我認為這個平台的 SEO 做得十分優秀，寫在上面的文章很容易被搜尋引擎排在前面。舉例來說，先前偷偷調查室友醫生到底賺多少錢，寫了一篇醫生的等級，莫名其妙蠻多人看的。這篇文章告訴會告訴你，我如何弄一個簡單且具備基本功能的 WordPress 網站。
https://medium.com/@lichi-chen/醫生的等級-2b65880eca92
但有些我覺得很讚的文章，像是瀏覽器截圖，就完全沒被檢索到。
https://lichi-chen.medium.com/瀏覽器截圖-359ee55f751
Medium 這樣忽冷忽熱的行為讓我受不了想要分手。於是就開始找尋下一個適合寫文章的地方。首要目標是要可以搜尋的到，並且編輯介面友善，最好可以方便的使用手機編輯。最後經過一番掙扎，選擇了常見的自建主機中的老牌 WordPress 。雖然目前有很多很新很酷的 Static Stie Generator，效能上也比 WordPress 優秀 ，但我已經到了非常怕麻煩，不敢勇於嘗試新工具的年紀了。
WordPress 感覺資源很多，我想弄一個最簡單版本的，沒想到還真不是很容易，花了一些時間。此篇紀錄目前我的做的一些設定。如果你想要弄一個簡單的 WordPress 網站，可以供您參考。目前有的功能如下。
- Amazon SES SMTP 寄信功能
- 自訂網址與網站域名
- 圖片最佳化
- 利用 S3 存放靜態資源
- Content delivery network
- Google search index
- Google analytics
取個網站名稱
首先要幫自己的 blog 取個名字。我發現會紅的好像都是四個字，像是艾莉莎莎或是理科太太。因此這次我想到的四個字是遊目騁懷。雖然很難唸看起來不會紅，但我還是用了。這四個字是在高中的時候，某個校內的大石塊刻印上看到的，因為寫得很潦草，我看了三年才看懂他在寫什麼。出自王羲之蘭亭集序。
是日也，天朗氣清，惠風和暢。仰觀宇宙之大，俯察品類之盛。所以遊目騁懷，足以極視聽之娛，信可樂也。
我覺得很適合這個網站名稱，這個網站拿來紀錄一些自己的所見所聞。後來發現，要會紅的名稱不僅要四個字，最後兩個字最好要疊字才行。可惡，好像沒辦法紅了。
我怎麼挑選 WordPress 主機廠商
目前坐雲主機的商機五花八門。為了求個順利，我使用目前世界最大，最多人使用的雲廠商，也是我最熟悉的 AWS 。我就怕貪小便宜用了便宜的雲廠商，到時候故障或是很難設定，絕對更加痛苦。越多人使用的服務，就越容易被抓到難用的地方，也越容易修復這些問題後而更加完善。
接下來我就研究了 AWS 如果要在上面跑 WordPress 的話該怎麼做。這時可以看到搜尋 AWS WordPress 的第一個搜尋結果，會叫你使用 Lightsail 這個服務。但我仔細想想， EC2 理論上也是虛擬主機的服務，究竟他跟 Lightsail 哪個比較經濟實惠呢?
EC2
研究了一下發現 EC2 雖然看似較貴，但搭配三年份的 Reserved Instance 方案購買的話，大約可以節省 62% 的 instance running 費用。計算下來使用 EC2 reserved instance 比較便宜。
| Instance name | On-Demand hourly rate | vCPU | Memory | Storage | Network performance |
|---|---|---|---|---|---|
| t3a.micro | $0.0102 | 2 | 1 GiB | EBS Only | Up to 5 Gigabit |
| Volume Type | Price |
|---|---|
| General Purpose SSD (gp3) – Storage | $0.088/GB-month |
| General Purpose SSD (gp3) – IOPS | 3,000 IOPS free and $0.0055/provisioned IOPS-month over 3,000 |
| General Purpose SSD (gp3) – Throughput | 125 MB/s free and $0.044/provisioned MB/s-month over 125 |
https://aws.amazon.com/ec2/pricing/on-demand/
試算綁三年的話，在愛爾蘭地區的機器，搭配 10G 的儲存空間，一個月的價錢大約是：
0.38(0.0102*24*30)+0.088*10 = 3.67072 USD
因為搭配 W3TC (下面會介紹) ，把主要的圖片跟影片都放到 S3 ，所以儲存空間可以很小。
Lightsail
$5
USD/mo
1 GB Memory
1 Core Processor
40 GB SSD Disk
2 TB Transfer
https://aws.amazon.com/lightsail/pricing/
接著就可以真的去開機器了。
Bitnami AMI
這次為了減少安裝的繁瑣步驟，採用免訂閱費的 bitnami AMI (Debian 為底)。免訂閱費的意思是 AMI 的供應商本身不收取費用，只需要付錢給 AWS 。AMI 裝完後裡面有個開箱即用的 WordPress 網站。包括 php ， apache ， mariaDB 都幫你裝好了。但缺點就是都裝在同一台機器裡面，故障的話會一起無法使用。只要做好每日備份，應該就沒問題了，不過在壞掉的時候還是會需要一些時間復原。AWS 怎麼會壞掉? 不用意外，所有東西都會壞掉的，連他們自己家技術長也這麼說。
Bitnami AMI 裡面的 WordPress 登入用的帳號密碼，可以在 EC2 設定內的 get system logs 找到。或是直接 ssh 進去機，家目錄下也有存放密碼的檔案。帳戶名稱為 user ，可以透過這組帳戶密碼登入 WordPress 。找不到登入頁面嗎? 在 URL path 加上 /admin 即可。
https://docs.bitnami.com/aws/faq/get-started/find-credentials/
Bitnami 提供了一些好用的指令，可以讓你簡單的重啟或查看狀態。
sudo /opt/bitnami/ctlscript.sh status
sudo /opt/bitnami/ctlscript.sh start
sudo /opt/bitnami/ctlscript.sh restart apache
sudo /opt/bitnami/ctlscript.sh stop
sudo /opt/bitnami/ctlscript.sh restart關於發信功能，我用了 Amazon SES 的設定。使用第三方發信服務的好處是，比起用 EC2 直接發信，比較不容易跑到收件者的垃圾信箱。我之前已經在 SES 弄好一組 email identity ，因此就在生成一組 SMTP credential 給 WordPress 使用即可，沒遇到太多問題。使用的 plugin 為 WP Mail SMTP 。如果你對這個步驟有疑問，可以留言讓我知道，順便激勵我寫這方面的文章。
跟隨 plugin 所引導填入 endpoint: email-smtp.us-east-1.amazonaws.com ，與對應的 SES SMTP username/password ，就可以發信了。
我確認收件端收到的 SPF/DKIM/DMARC 都通過了，就不管上述 plugin 裡面的警告訊息了。
Domain 設定
自己的 blog 當然要有自己的 domain (e.g, blog.lichi-chen.com) 才看起來厲害。這些我都在 Route53 設定。為了方便記憶，連 EC2 機器都給他域名了。
CloudFront: blog.lichi-chen.com
Origin (EC2): blog-origin.lichi-chen.com
Static resources (CloudFront created by W3TC plugin): blog-cdn.lichi-chen.com
原本並沒有意料到會需要新增一個 Static resources 的域名，但因為 W3TC 選擇 CloudFront and S3 的時候，不知怎麼就突然建一個 CDN 給你，還無法換掉，無奈只好硬是給它取個名字了。不然 image url 域名會是預設醜醜的。
我發現在 EC2 上可以使用 bitnami 提供的內建小工具申請 blog-origin.lichi-chen.com 的 certificate 。這小工具不錯，不僅可以輕易的申請 Let’s Encrypt TLS/SSL certificate，還能自動續約，超適合懶人。
https://docs.bitnami.com/aws/faq/administration/generate-configure-certificate-letsencrypt/
以下開始 plugin 的介紹。我認為以下這些功能都很重要，有的話心情會好很多。
Image Optimization
當圖片太大的時候，常常會對手機的爛網路使用者不太友善。比較好的做法是 server 端產生一組多張解析度不一的同一圖片的縮圖，依照客戶端裝置發起各類圖片的請求決定要回應哪一張。
我找了一個看起來還算熱門的 image 相關 plugin 可以做到這個功能。記得要在 W3TC (稍後會介紹) 首次上傳之前先啟用，不然這個 plugin 會添加一些靜態資源到磁碟，之後又要再跑一次 W3TC 的上傳。
實際上傳圖片後，也可以發現確實類似的效果。多個解析度都有了。
AIOSEO
把 og-image 弄好。在 Facebook 上面 share 才有漂亮的照片。可以用這個線上網站 preview 。
https://socialsharepreview.com/
S3 與 CloudFront
這是我最喜歡的功能。當你的 blog 有一堆圖片的時候，一般來說都會存在 disk 裡面。但使用 S3 之後，就可以解放磁碟空間，將圖片都放到 S3 。我使用的是 W3 Total Cache (W3TC) Plugin ，可以將靜態資源，例如圖片，影片，css，js 等等不常變動的東西放到 S3 。不僅比 EC2 穩定，便宜又節省 disk 空間。
我在設定 W3 Total Cache 有遇到問題。有個警告訊息 ，叫我加入以下的 wp-config.php 設定檔中。
Append the following in wp-config.php
/** Enable W3 Total Cache */
define('WP_CACHE', true); // Added by W3 Total Cache我發現不能直接加在檔案最後面。不然警告仍然不會消失。我測試是加在設定 site url 的後面，可以消除該警告訊息。
初次設定的時候需要手動將目前尚未推到 S3 的靜態資源推上去。因為這樣，最好把 theme 還有各種 plugin 都定案，這樣只要安裝一次就好。
完畢後，接下來上傳到 WordPress 文章中的圖片都會自動被推到 S3 。以下圖片中的那些按鈕都可以按，會觸發一個新視窗來指示，你可以用來上傳目前已有的靜態資源到 S3。
都放到 S3 了就順便用個 CloudFront CDN ，也就是弄個 cache 。如果哪天網站紅起來了會比較省錢。CloudFront 搭配 S3 要設定 OAC (Origin Access Control) ，不然會 S3 會回應 403 錯誤。其中一個步驟是貼上 bucket policy 到對應的 S3 bucket。
要設定一組 access key id / secret access key ， W3TC 會幫你建立一個 CloudFront distribution 出來，不用自己建立。但我沒找到他是怎麼綁定 distribution ，也不知道如何修改。
這裡開始架構會變得有點雜。
SyntaxHighlighter Evolved
這個 Plugin 可以用來排版程式語言。當你要在文章裡面打 code 的時候，雖然內建已經有 code 的段落可以添加，但就是不怎麼好看，因為 code 段落僅僅幫你把自行轉換成 monospace 等寬字型。如果要上色的話，還是得另外安裝 plugin 。
要上色的程式碼片段，要選擇插入一個 SyntaxHighlighter Code 的段落。接著選擇要的程式語言種類。
上色的效果還不錯，至少顏色相當的清楚。
Google search console
我的目標是可以讓以後查自己寫過的文章的時候都可以從 Google 找到。所以需要 Google 可以找到我的網站。我直接利用 jetpack 生成 sitemap 並提交到 Google Search Console 。
我發現 JetPack 會建議我設定一個 Static host name 。不然的話很容易域名會變成 ip address 。此問題常出現在發送的信件中，以及建立 sitemap 的時候。
Google Analytics
最後就是使用 Google Analytics 做統計了。這服務可以讓你很清楚的知道，你的網站使用者從哪來，哪幾頁比較熱門等等的分析資料。使用的 plugin 是 Google Analytics for WordPress by MonsterInsights 。設定很簡單，裝完之後有種大才小用的感覺。 唯一卡住的地方是找不到 Google Analytics 在哪裡新增 property 。原來是在左下角的 Admin 。
Email Subscription
由於 WordPress 不像是其他平台，會有 app 自動推播。這時最好要有個功能可以讓用戶追隨你新發表的文章。我使用 JetPack 的 subscription 功能，在首頁新增一個 subscribtion 頁面。雖然介面陽春，不過堪用。
Redirect HTTP to HTTPS
現在 HTTPS 明顯地比 HTTP 流行，熱門，且安全。建議所有網站都走 HTTPS 為佳。我使用 CloudFront 內建的功能將 HTTP 使用 301 response 轉址到 HTTPS 的版本。
Favicon
可以給他個 Logo 。這個在 Theme 的 Custumize 設定裡面。要先在某個頁面加一個 Site Logo 。
接下來，就可以在右邊的設定，啟用 Use as site icon 。
以上就是我目前認為最必要的幾個 WordPress 功能了。這篇是寫給未來的我如果要幫別人架設部落格的話可以留意的。
Leave a Reply