Note

[筆記] 使用 Google 服務和 WordPress,用一個下午架設個人網站

在這個自媒體的時代下,個人網站是個必備,周遭朋友也有不少人有架設,就趁周六下午閒暇時間,從零到有來嘗試看看。

本篇介紹的方法是採用 Google Cloud Platform + Google Domains + WordPress.org ,大概一年會花 600~1200 台幣 (還不確定),我大概花了 4~5 hr ,完成一切步驟,我會在本篇整理網路上可以找到的資源,再加以補充。

另外,這不一定是最省錢或最有效率的方法,但這是我做過功課最方便的方法,如果有其他更好的方式,或任何錯誤,都歡迎補充給我。

先備知識

架設網站,有以下五個重點,網域、虛擬機、DNS、SSL 認證、管理系統,只要完成每一項,網頁就大功告成了,日後就要好好經營管理就可以了。

  1. 網域: 網域就是你的門牌號碼,需要藉由輸入類似像 geneyao.com 的字串,讓網路上的其他人順利進入你的網頁,你的門牌越簡潔好記,就像住在市中心一樣,會讓人更容易瀏覽到你的網頁,也因為這點網域會因為名字價格有所不同,也會被人買走。
  2. 虛擬機: 簡單來說就是網站的運算資源,網頁總是需要東西在背後運算,當然你也可以用自己的主機來架設你的網頁,但 Google Cloud Platform 有別人寫好的套件,只要花點錢,就可以省下很多時間,並獲得穩定的運算資源。
  3. DNS: 可以將你用虛擬機架好的網站連結起來,有點像掛門牌一樣,透過輸入你購買的網域,順利連結到你的網站。
  4. SSL 認證: 完成上述基本上就可以讓人連到你的網站,但你的網頁沒有經過認證,會讓瀏覽器覺得你是危險的網頁,因此而阻饒大家的瀏覽,這是就需要 SSL 安全認證。
  5. 管理系統:最後網頁弄好就是需要一個好好的管理系統,設計你的外觀,管理你的文章,監控你的流量,這是用 Google Cloud Platform 內建的 WordPress 套件,他是一個開源免費好用的開源網站管理系統,全世界有近 40% 的網站都是用這套系統做的。

下面我會依序匯集在網路上找到的資源,由於其他人寫的已經非常完整,我會在卡住或覺得比較重要的地方加以補充。

一、網域

  • 使用平台: Google Domains
  • 花費: 一年 12 美金,約等於一年 360 台幣左右

首先要將你的網域買下來,讓大家可以透過你的網域 (ex. geneyao.com),而非 IP (ex. 34.80..*),連到你的網站。

Google Domain 雖然不是最便宜,但它整合了很多服務,不用額外花錢,版面簡潔好用,再加上我虛擬機也是在 Google Cloud Platform,因此就單純點,全部都在 Google 買服務。

  1. 註冊 Google Domain 帳號
  2. 購買網域

二、虛擬機

  • 使用平台: Google Cloud Platform
  • 花費: 一年 1800 ~ 3000 台幣 or 一個月 150~250 台幣 (前四個月免費,可能更高或更低,日後有實際數據再補上)
    2021/09/20 補充: 目前 2021/08 為 239 元 (台幣)

1. 啟動虛擬機

Follow 這篇的 Step 1 ~ Step 8,主要這邊是用 WordPress with NGINX and SSL Certified by Bitnami and Automattic ,這個基本上已經幫我們裝好全部我們架網業需要的東西,只要五分鐘就有一個基本的網頁,從 Deployment Manager 就可以進去 WordPress 的後台管理了 。
完成後,我會把以下釘選起來之後比較方便:

2. 進入虛擬機的 Terminal
從 Deployment Manager> 部屬作業,點選SSH,就可以連上虛擬機的 Terminal:

這樣就可以進去虛擬機的 Terminal ,就可以在裡面下指令操作了

3. 移除 Banner

開啟網頁,會發現左下有個 Banner ,在 Terminal 下這些指令可以移除 Banner:
$ sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1
$ sudo /opt/bitnami/ctlscript.sh restart apache
$ sudo /opt/bitnami/ctlscript.sh restart nginx

4. 自訂網域

讓你的網站跟你得網域對接,在 Terminal 下這指令:
sudo nano apps/wordpress/htdocs/wp-config.php
把 WP_SITEURL 與 WP_SITE 修改成這樣,htpps://geneyao.com 的部分則是在上一個不步驟你購買的網域名稱:

5. 改為靜態 IP

從 VPC 網路 > 外部 IP 位址,將類型改為靜態

6. 連上現在的網頁

以上虛擬機的部分就完成了,已經可以透過 IP ,連到自己的網頁,和進入 WordPress 後臺管理了。

可以從 Deployment Manager > 部屬作業 的 Site address 和 Admin URL 分別連到自己當前的網站和後台,進入後台只要使用 Admin user 和 Admin password 就可以進路後台管理自己的頁面。

三、DNS

  • 使用平台: Google Domains
  • 花費: 0 (已經包含在網域的服務)

處理完網域和虛擬機後,就下來就是要透過 DNS 將你的網域和你的網站對接起來,也就是說完成這步驟,就可以投過你的網域連結到你的網站。

到 Google Domains 點選 DNS ,在已註冊主機和自訂資源紀錄,依照圖上更改成你網域和虛擬機 IP 的位子。

四、 SSL 安全認證

  • 使用平台: Google Cloud Platform
  • 花費: 0 (已經包含在虛擬機的服務)

完成上述工作基本上你的網頁已經可以順利使用網域連到你的網站,但你的網頁會在瀏覽器顯示不安全,甚至阻擋他人連進來,這部分完成後就會如下圖,你的網址右邊就不會顯示不安全,而是一鎖頭的 icon ,也會讓他人順利連進你的網頁。

  • 參考網站:
  1. Generate And Install A Let’s Encrypt SSL Certificate For A Bitnami Application (官方文件)
  2. 在GCP上安裝WordPress with NGINX and SSL Certified by Bitnami and Automattic,並設定Let’s Encrypt SSL憑證
  3. WordPress + GCP + SSL:給你最完整的免費網站架設教學

先藉由虛擬機連上 Terminal:

再根據參考網站第二篇文章的 「3. 申請SSL憑證」、「4. 設定定期更新SSL憑證」,在 Terminal 下指令,就可以完成 SSL 憑證,讓大家可以順利連進你的網站。

  • 9/20 補充:
    如果遇到沒有自動更新的狀況可以下以下指令自動更新 SSL:’
    $ sudo /opt/bitnami/ctlscript.sh stop nginx
    $ sudo /opt/bitnami/letsencrypt/lego --tls --email="EMAIL-ADDRESS" --domains="DOMAIN" --path="/opt/bitnami/letsencrypt" renew
    $ sudo /opt/bitnami/ctlscript.sh start nginx

五、WordPress 網站管理系統

  • 使用平台: WordPress.org
  • 花費: 0 (開源的後台管理系統)

可以從 Deployment Manager > 部屬作業 的 Site address 和 Admin URL 分別連到自己當前的網站和後台,進入後台只要使用 Admin user 和 Admin password 就可以進路後台管理自己的頁面。

或是藉由有你的網域 (ex. geneyao.com) 瀏覽你的網頁,也可已透過 網域/wp-admim (ex. geneyao.com/wp-adim) ,使用 Admin user 和 Admin password 就可以進路後台管理自己的頁面。

WordPress 後台:

經過從後台調整後,網頁就完成了:

結語

這篇目的主要是紀錄自己從零到有的架站過程,如有錯誤或不清楚得地方請見諒,也可以告訴我,祝褔大家架站愉快!

6 thoughts on “[筆記] 使用 Google 服務和 WordPress,用一個下午架設個人網站”

  1. Howdy! Do you know if they make any plugins to help with Search Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not
    seeing very good success. If you know of any please share.

    Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *