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

|發布於:
2022-08-28
文章目錄

Last updated at — 2022-08-29 14:50

❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

CLOUDWAYS 與熱門的佈景主題 Astra Pro 合作,只要購買 CLOUDWAYS 的任何規格的主機服務,就能免費獲得價值 US$59 的 Astra Pro 。

詳細介紹可看這篇文章 ☞ WordPress主機CLOUDWAYS送 Astra Pro主題,自架站$10起

如果你還沒註冊 Cloudways 帳號,使用 我的聯盟網址❐ 註冊新帳戶購買 CLOUDWAYS 的主機服務,還可以享首二月 8 折優惠!

如果你是第一次架設網站,下面這篇文章會帶你用更簡單快速的方式在 CLOUDWAYS 架設網站+啟用免費的 Astra Pro ☞ 如何在Cloudways架設新網站+免費啟用Astra Pro佈景主題

而現在這篇文章則是給已經在其他主機商擁有自己的網站,想要將網站搬到 CLOUDWAYS ,並且將佈景主題切換或升級到 Astra Pro 的教學。

另外,如果你的網站已經在 CLOUDWAYS ,但是想要把佈景主題切換成 Astra Pro ,或者想要將免費版的 Astra 升級成 Astra Pro ,當然也可以跟著這篇教學。

如何將網站搬到 CLOUDWAYS + 啟用 Astra Pro

activate-astra-pro-for-free-in-cloudways|免費啟用 Astra Pro

以下教學包含註冊 CLOUDWAYS 帳戶 > 啟用 Astra Pro > 創建主機與新網站 > 搬家到 CLOUDWAYS > 創建 Staging Site > 安裝 Astra Pro > 啟用 Astra Pro 密鑰 > 備份網站。

操作時間 30 minutes

❝廣告,是為了讓這裡能夠永續經營,多多包容囉^v^❞

STEP 1 註冊 CLOUDWAYS 帳戶

cloudways-coupon-step2

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

STEP 2 進入 Add-ons

step-2 |免費啟用Astra Pro

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

STEP 3 啟用 Astra Pro - 1

step-3 |免費啟用Astra Pro

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

STEP 4 啟用 Astra Pro - 2

step-4|免費啟用Astra Pro

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

STEP 5 建立主機

STEP-5|免費啟用Astra Pro

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

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

STEP 6 安裝主機與新網站

STEP-6|免費啟用Astra Pro

❶ 選擇網站類型:
從右方的〖三角形下拉選單〗可以選擇需要的網站類型,比如帶有 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 〗確認創建主機與網站。

STEP 7 等待主機與網站創建

STEP-7|免費啟用Astra Pro

大約需等待 5 分鐘

STEP 8 將網站搬到 CLOUDWAYS

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

STEP 9 設定 DNS

step-3-Cloudways-dns-a-record

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

STEP 10 創建 Staging Site

STEP-10

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

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

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

STEP 11 創建 Staging Site -2

STEP-11

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

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

STEP 12 開通 Astra 帳戶 -1

STEP-12 astra pro

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

STEP 13 開通 Astra 帳戶 -2

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

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

STEP 14 開通 Astra 帳戶 -3

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

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

STEP 15 開通 Astra 帳戶 -4

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

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

STEP 16 開通 Astra 帳戶 -5

STEP-16

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

STEP 17 開通 Astra 帳戶 -6

STEP-17 開通 Astra 帳戶 -6

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

STEP 18 開通 Astra 帳戶 -7

STEP-18|開通 Astra 帳戶 -7

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

STEP 19 登入 Astra 帳戶 -1

STEP-19|登入 Astra 帳戶 -1

點〖 Log in 〗登入 Astra 帳戶。

STEP 20 登入 Astra 帳戶 -2

STEP-20|登入 Astra 帳戶 -2

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

STEP 21 登入 Astra 帳戶 -3

STEP-21|登入 Astra 帳戶 -3

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

STEP 22 前往 Astra 下載頁面

STEP-22|前往 Astra 下載頁面

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

STEP 23 下載 Astra Pro

STEP-23|下載 Astra Pro

進入下載頁面之後,陸續點擊下載;因為〖 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 〗就可以了。

STEP 24 下載子主題

STEP-15|免費啟用 Astra Pro

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

STEP 25 登入Staging Site 的 WP 後台 -1

STEP-25|登入Staging Site 的 WP 後台 -1

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

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

STEP 26 登入Staging Site 的 WP 後台 -2

STEP-26|登入Staging Site 的 WP 後台 -2

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

STEP 27 登入Staging Site 的 WP 後台 -3

STEP-27|登入Staging Site 的 WP 後台 -3

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

STEP 28 登入Staging Site 的 WP 後台 -4

STEP-28|登入Staging Site 的 WP 後台 -4

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

STEP 29 安裝佈景主題

STEP-29|安裝佈景主題

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

STEP 30 上傳父主題-1

STEP-30|上傳父主題-1

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

STEP 31 上傳父主題-2

STEP-31|上傳父主題-2

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

STEP 32 上傳父主題-3

STEP-32|上傳父主題-3

點擊按鈕〖立即安裝〗

STEP 33 上傳子主題-1

STEP-33|上傳子主題-1

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

STEP 34 上傳子主題-2

STEP-18|免費啟用 Astra Pro

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

STEP 35 啟用子主題

STEP-20

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

STEP 36 確認子主題已啟用

STEP-21|免費啟用 Astra Pro

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

STEP 37 安裝 Astra 進階版外掛-1

STEP-37|安裝 Astra 進階版外掛-1

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

STEP 38 安裝 Astra 進階版外掛-2

STEP-38|安裝 Astra 進階版外掛-2

點擊按鈕〖啟用外掛〗

STEP 39 安裝 Astra 進階版外掛-3

STEP-39|安裝 Astra 進階版外掛-3

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

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

STEP 40 取得 Astra Pro 密鑰-1

STEP-40|取得 Astra Pro 密鑰-1

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

STEP 41 取得 Astra Pro 密鑰-2

STEP-41|取得 Astra Pro 密鑰-2

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

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

STEP 42 啟用 Astra Pro 密鑰

STEP-42|啟用 Astra Pro 密鑰

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

STEP 43 確認 Astra Pro 密鑰已啟用

STEP-43|確認 Astra Pro 密鑰已啟用

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

STEP 44 啟用 Astra 進階版模組

STEP-14|免費啟用 Astra Pro

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

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

STEP 45 備份 Live Site

STEP-45|備份 Live Site

回到 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 個小時才是台灣時間)

STEP 46 Staging 推送到 Live

STEP-46|Staging 推送到 Live

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

搬家到 CLOUDWAYS +啟用免費一年的 Astra Pro 的介紹就到這囉!任何問題都歡迎在下方留言板討論唷!

更多CLOUDWAYS教學文章
好嘛好嘛...臨走前幫我拍拍手嘛
如果你願意免費幫助我,請在下方圓形按鈕幫我拍拍手。
最多可以按5下,那就幫我按5下吧!
算我求你啦啦啦~~~
謝謝你、我愛你❤
臉書或Google帳號就可以快速登入喲...
文章目錄
最新留言
▍關於作者|MiriamMibao温唯
2019.02.11,我開始了這裡…
非網頁程式背景的 me 硬要WordPress架站一切自己來,所有的細節,從0開始,自己架站會遇到的問題,遇到了才知道!一路走來跌跌撞撞,摸索過國內外能夠解決問題的資料,是不是該好好紀錄這一段跌跌撞撞的探索日記?
或許,也能帶給你們一些幫助...
文章中所推薦或提及的架站產品或服務,部分是聯盟合作所提供的,如果你透過我所提供的聯盟網址去購買,我也能獲得收益,雖然金額很少,但是,你們的隨手點擊與購買,就能讓我繼續經營下去,提供更多免費的 WordPress 架站教學。
以下歡迎留言討論囉!
我只想當個旁觀者,有新的留言請通知我(按一下輸入Email信箱)
想Fallow哪種留言?
0 留言板
Inline Feedbacks
查看所有留言

Copyright ©miriammibao.com all rights reserved|Designed by MiriamMibao温唯 Since 2014.

-
Cloudways專屬折扣☞註冊輸入折扣碼
MMM8
,獲得首二月8折優惠!
Cloudways專屬折扣☞輸入折扣碼
享首二月8折優惠!
miriam wei design wp logo-4 circlemiriam wei design wp logo sticky
0
對文章有任何疑問或想法嗎?歡迎一起討論唷!x