搬家到Cloudways+Staging Site +免費的Astra Pro佈景主題

使用 我的聯盟網址 ❐ 註冊 CLOUDWAYS 帳戶，還可以享首二月八折優惠。詳細操作可參考 這篇教學 ❐ 。網站已經在 CLOUDWAYS 可跳過此步驟。

在 CLOUDWAYS 的管理面板中，
❶ 點擊上方〖九宮格〗的圖標，會出現下拉選單。
❷ 從下拉選單中點擊〖 Add-ons 〗。

進入〖 Add-ons 〗頁面之後，在最下方找到〖 Astra 〗，並且點擊右側的〖鉛筆〗圖標。

在彈出的視窗中，點擊綠色按鈕〖 SUBSCRIBE 〗，這時候將會在 CLOUDWAYS 中啟用免費的 Astra Pro 服務，享有一年免費的使用期。一年到期之後，可以停用，或者是以每個月 US$4 的費用，在所有的網站中繼續使用。

回到 CLOUDWAYS 的管理面板，
❶ 在上方選單中點擊〖 ＋ 〗下拉選單。
❷ 點擊〖 Add Server 〗來建立主機。

註：網站已經在 CLOUDWAYS 可直接跳到〖 STEP 10 ⇩ 〗

❶ 選擇網站類型：
從右方的〖三角形下拉選單〗可以選擇需要的網站類型，比如帶有 Astra Pro 的 WordPress 網站、一般的 WordPress 網站、 帶有 WooCommerce 的 WordPress 或 php 網站 … 等等。按照需求選擇就可以了，一般的 WordPress 網站可直接選擇〖 Astra Pro 〗，購物網站就選擇 WooCommerce ，不影響 Astra Pro 的使用。

❷ 填寫《 APPLICATIONS 》名稱：
填寫自己方便識別的網站名稱，可以使用英文或數字，目的用來區分同一個主機裡不同的網站，因為以後可能還會架設其他網站。

❸ 填寫《SERVER》名稱：
填寫自己方便識別的主機名稱，這是用來區分不同的 Server 。因為VPS或雲端主機，用戶可以創建無限的 Server ，每個 Server 都是獨立計費，因此可以選擇不同的規格。

❹ 填寫《PROJECT》名稱：
填寫自己方便識別的團隊名稱，這是用來區分不同的團隊，每個團隊能夠被指派管理不同的主機或網站。

➎ 選擇VPS或雲端主機：
Cloudways提供5個VPS或雲端主機的代管服務，建議新手從DigitalOcean、linode或VULTR開始就可以了。

★TIP ☞ 我的網站目前使用的是 linode 。

➏ 選擇主機規格
左右拉動〖綠色圓點〗來調整主機規格，預設是 2GB 的規格，建議新手從 1GB 開始使用就可以了，如果以後不夠用，隨時都可以自己操作加大規格，費用會從調整後的那個小時計算，完全不用擔心合約問題，將〖綠色圓點〗拉到最左邊的 1GB 就可以了。

★TIP☞我的網站目前使用的是 1GB 的規格，應付一個部落格＋一個 WooCommerce 購物網站是綽綽有餘。

➐ 選擇伺服器位置
從右方的〖三角形下拉選單〗可以選擇伺服器位置，如果主要訪客為台灣，建議選擇亞洲的伺服器，比如東京 Tokyo 、新加坡 Singapore 或首爾 Seoul ，不同的主機提供的伺服器位置不太相同。

★TIP☞我的網站目前使用的是 lonode ，伺服器位置我選東京 Tokyo 。

➑ 確認金額
這個金額已包含〔主機費用〕＋〔Cloudways平台管理費用〕，按小時計費，用多少收多少，無綁約，隨時可停用，月底結算費用，並且在下個月初才會從綁定的信用卡扣款，先使用後付費的概念。

➒ 確認創建
點擊右下角綠色按鈕〖 LAUNCH NOW 〗確認創建主機與網站。

大約需等待 5 分鐘

回到原本網站的 WordPress 後台，安裝 CLOUDWAYS 專屬的搬家外掛〖 Cloudways WordPress Migrator 〗，詳細操作步驟可參考這篇教學 ☞  零失誤 Cloudways 搬家教學 ❐

將網站搬到 CLOUDWAYS 之後，下一步就是設定網站的 DNS ，將網域指向 CLOUDWAYS 的主機，詳細操作步驟可參考這篇教學 ☞  如何在Cloudways設定DNS+各家網域商A紀錄 ❐  

回到 CLOUDWAYS 管理面板，
❶ 點擊上方的〖 Applications 〗進入網站列表。
❷ 在網站列表中找到搬過來的那個網站，點擊右邊的〖︙〗圖標，會展開一個下拉選單。
❸ 點擊〖 Clone App/Creat Staging 〗

這個步驟是因為將網站切換到 Astra 佈景主題，還需要重新設計，在設計的過程中，可能會影響訪客瀏覽。但是 CLOUDWAYS 提供 Staging Site 的功能，可以作為臨時網站進行設計，如此就無需關閉網站，訪客也可以繼續瀏覽原本的佈景主題，等到 Astra 佈景主題都設計完成了之後，再將設計好的 Staging Site 推送到原本的正式網站（ Live Site ）。

註：網站的佈景主題已經是 Astra 免費版的，在啟用 Astra Pro 之後，如果有需要大幅度設計或變更功能，也可以創建 Staging Site ，避免影響訪客使用。

❶ 從下拉選單中選擇〖需要放置 Staging Site 的主機〗
❷ 一定要勾選〖 Create as Staging 〗，這樣設計好的網站才能被推送到 〖 Live Site 〗
❸ 點擊〖 CONTINUE 〗開始創建 Staging Site 。

註：視網站尺寸而影響創建的時間，可能需等待數分鐘，網站越大需要的時間會越長。

等待創建 Staging Site 的時間可以先到註冊 CLOUDWAYS 的 E-mail 信箱中收信，找到一封主旨為〖 Get started with Astra Pro on Cloudways 〗的信件。

在信件中，點擊綠色按鈕〖 ASTRA DASHBOARD 〗，將帶領前往 ASTRA 的註冊頁面。

在註冊頁面中，填寫自己的 E-mail 信箱來註冊 ASTRA 帳戶，再點擊右下方藍色按鈕〖 Get New Password 〗。

接著會出現這個畫面，告訴你到信箱收信，並且設定密碼之後才能登入。

這時候信箱會收到一封從 ASTRA 寄來的密碼設定信件。

信件中包含了註冊的 E-mail 信箱，這就是登入 ASTRA 帳戶的帳號，點擊下方一長串的網址，就能連接到重設密碼的頁面。

在密碼設定頁面中輸入自訂的密碼，密碼的要求比較嚴格，必須要至少〖一個大寫英文＋一個小寫英文＋一個數字＋一個特殊符號〗，加總至少 12 個字符。

點〖 Log in 〗登入 Astra 帳戶。

帳號是〖 STEP 14 〗註冊 Astra 帳戶的 Email 信箱，密碼是〖 STEP 17 〗所自訂的密碼，接著點擊右下方藍色按鈕〖 Log In 〗。

登入之後，會看到類似 WordPress 後台的介面，點擊左上方的〖 Brainstorm Force – Store > Visit Site 〗，前往 Astra 的帳戶管理介面。

進入 Astra 帳戶頁面後，
從上方的選單中〖 ACCOUNT 〗下拉選單選擇〖 Downloads 〗，進入下載頁面。

進入下載頁面之後，陸續點擊下載；因為〖 Astra Child Theme 〗會進入下一個頁面才能下載，所以最後再點擊它。
❶ Astra Theme —父主題
❷ Astra Pro Addon Plugin – Version 3.9.1 — Pro 進階版外掛
❸ Astra Child Theme —子主題

下載後先放著，〖 STEP 29 ⇩ 〗才需要使用。 註：如果網站已經有安裝免費版的 ASTRA Theme 和 Astra Child Theme ，那麼，就只需要下載〖 Astra Pro Addon Plugin – Version 3.9.1 〗就可以了。

點擊〖 Astra Child Theme 〗之後，會跳轉到下載的頁面，點擊黃色按鈕〖 Generate 〗即可下載。

這時候 Staging Site 應該已創建完成，回到 CLOUDWAYS 的管理頁面，
❶ 點擊右邊的《www》
❷ 再從〖下拉選單〗選擇剛剛創建的 Staging Site ，就能進入網站的管理頁面。

註：請注意， Staging Site 的名稱會在原本的名稱前面加上〖 Staging 〗， 右邊也會有〖 Staging 〗的 logo ，避免點錯，示範的 Staging Site 名為《 Staging-MiriamMibao 》。

進入 Staging Site 的管理頁面中，
❶ 先確認是 Staging Site 的管理頁面
❷ 點擊〖 另開分頁的圖標〗，將會前往 Staging Site 的首頁。因為 Staging Site 預設是有密碼保護，避免訪客誤入，所以會彈出一個需要輸入帳號密碼的視窗。
❸ 〖 Username 〗是網站密碼保護的〖使用者名稱〗
❹ 〖 Password 〗是網站密碼保護的〖密碼〗
➎ 如果覺得每次都要輸入帳號密碼很麻煩的話，可以把它從預設的〖 Enable 〗切換到〖 Disable 〗

進來之後是 Staging Site 的首頁的網址，只要在網址列中，首頁網址的後面加上〖 admin 〗或〖 wp-admin 〗，就可以前往 WordPress 控制台。

❶ Staging Site 的 WordPress 後台登入帳號就是原本網站的登入帳號。
❷ Staging Site 的 WordPress 後台登入密碼就是原本網站的登入密碼。
❸ 如果有需要，可從下方的下拉選單，選擇〖繁體中文〗。
❹ 點擊〖 Log In 〗登入。

在 WordPress 控制台中，從左邊選單找到
❶ 〖外觀〗
❷ 〖佈景主題〗
❸ 〖安裝佈景主題〗

❶ 點擊上方按鈕〖上傳佈景主題〗
❷ 接著下方會出現上傳的區塊，點擊〖選擇檔案〗

❶ 從彈出的視窗中，找到剛剛在 Astra 官網下載的〖 astra.3.9.1 〗的 ZIP 檔案。
❷ 選取之後點擊右下方的按鈕〖打開〗

點擊按鈕〖立即安裝〗

《父主題》安裝好之後先不要啟用，因為要啟用的是《子主題》，點擊〖前往 [佈景主題] 頁面〗。

重複〖 STEP 30 〗、〖 STEP 31 〗、〖 STEP 32 〗的步驟，但是選擇〖 astra-child 〗的 ZIP 檔案。

安裝完成之後，會進入子主題已安裝完成的畫面，點擊〖啟用〗。

接著會轉到佈景主題的頁面，只要看到〖目前使用的佈景主題： Astra Child 〗，就代表子主題已正常啟用。

❶ ~ ❷ 一樣在左邊選單找到〖外掛〗 > 〖已安裝的外掛〗。
❸ 點擊〖上傳外掛〗> 〖選擇檔案〗
❹ 從彈出的視窗中，找到剛剛在 Astra 官網下載的〖 astra-addon-plugin-3.9.1 〗的 ZIP 檔案。
➎ 選取之後點擊右下方的按鈕〖打開〗> 再點擊按鈕〖立即安裝〗

點擊按鈕〖啟用外掛〗

啟用後跳轉到外掛列表頁面，上方會出現一條訊息，點擊〖 activate 〗前往外掛頁面準備輸入密鑰。

註：如果要使用《 Astra 進階版》的外掛，必須先啟用密鑰。

回到剛剛在〖 STEP 13 ⇪ 〗所註冊的 Astra 帳戶，或直接前往 Astra 帳戶的 Licenses 頁面 ❐ ，或者在 Astra 帳戶頁面中，從上方的選單中〖 ACCOUNT 〗下拉選單選擇〖 Licenses 〗，進入下載頁面。

在〖 Licenses 〗頁面中，
❶ 在〖 License Details 〗的區塊中，【Status: active】表示 Astra Pro 還在有效授權使用期；【 Expires: September 24, 2022 】代表密鑰效期。
大家可以發現，居然只有一個月？這是 Astra 的密鑰保護機制，每個月都會自動生成新的密鑰，所以，密鑰效期也會每個月自動延長一個月。也因為每個月都會產生新的密鑰，舊的密鑰也會失效，但是並不會影響已經設計好的網站，不過，為了獲得 Astra 的更新，所以還是會建議每個月都要回來複製新的密鑰。

❷ 找到〖 Astra Pro – Complimentary For CloudWays 〗，複製下方一串英文數字就是【 密鑰 】。

回到剛剛在〖 STEP 39 〗 的〖 Astra Options 〗的頁面，在 Astra 進階版授權的區塊中，
❶ 貼上剛剛在 Astra 〖 Licenses 〗頁面中複製的那串【 密鑰 】
❷ 再點擊按鈕【啟用授權】

出現綠色的【 Active! 】代表密鑰已啟用

在〖 Astra Options 〗中，第二個區塊是〖 可使用的 Astra 進階版模組 〗，這裡是 ASTRA Pro 才有的附加模組。

所有的組件都非常實用，所以可以直接點擊右上方的灰色按鈕【啟用全部】，一鍵啟用所有的進階版 模組，接著就可以開始設計網站了。

回到 CLOUDWAYS 管理介面，
❶ 從〖 Apps 〗的下拉選單中，選取【原本的網站】，也就是〖 Live Site 〗
❷ 在左邊的選單中點擊【 Backup And Restore 】
❸ 點擊按鈕【 TAKE BACKUP NOW 】

Staging Site 的 Astra 佈景主題都設計完成之後，接下來就是關鍵時刻，要將 Staging Site 推送到 Live Site （原本的網站），在這之前，一定要先備份 Live Site ，避免失誤！建議使用 CLOUDWAYS 的備份服務，如果發生失誤需要回復，比較不會出問題。

註：備份大約等待數分鐘，建議備份完成後確認【 Last Backup Date 】的時間（這裡的時間是 UTC ，加 8 個小時才是台灣時間）

〖 Live Site 〗備份完成之後，
❶ 從〖 Apps 〗的下拉選單中，選取〖 Staging Site 〗，請確認有切換到 Staging Site 的頁面。
❷ 點擊【 Staging Management 】
❸ 點擊【 PUSH 】按鈕，就會把在 Staging Site 設計好的 Astra Pro 推送到 Live Site ，也就是真實的網站。