最後更新時間: 2024 年 08 月 02 日
- 想修改 WordPress 網站主題樣式卻因怕改壞而不敢動手嗎?
- 網站流量很大,怕修改網站過程中影響到網站運行嗎?
本篇文章就要帶大家透過 Cloudways 上免費的 Staging 功能,建立一個待發布的開發網站站點,不管你在這個站點上修改什麼,都不會影響到原有的網站哦!
最重要的是,只要在 Cloudways 後台控制,就能將你兩個站點進行同步!讓你在開發站點確定改的東西都無誤之後,再將網站同步到你的運行中網站!
想學怎麼建立 Staging 站點嗎?那就繼續看下去吧!
[likecoin]
Staging Site 是什麼?為什麼我需要建立?
在我們開始以前,首先要幫你的 WordPress 網站建立一個 Staging Site 有一些限制條件,以下先列出來給大家參考:
- 你的網站需要是建立在 Cloudways 平台上的
- 你的網站不可綁定 Jetpack 中的 WordPress.com 快捷登入方式,或是任何其他的第三方登入軟體(因為在 Staging Site 被重新導向的話,就會跳回原有網站),有綁定的話要先取消。
如果你符合以上這兩點條件,那歡迎你繼續看下去,並且跟著我的講解一步一步建立你的 Staging Site 。
不是使用 Cloudways 或者還沒有自己網站怎麼辦
如果你不是使用 Cloudways 架設網站,那可以參考以下一系列的 Cloudways 架設 WordPress 網站的教學哦!
- 【WordPress架站教學#1】透過Cloudways架設你的WordPress網站!每月12美元即可擁有極致效能!
- 【WordPress架站教學#2】透過NameCheap購買網域!首次購買、續約都便宜!
- 【WordPress架站教學#3】在Cloudways中設定WordPress網域、網站SSL憑證!讓你的網站更安全!
Staging Site 是什麼?
在開始建立我們的開發站點之前,首先我們要先來解釋一下什麼是 Staging Site、什麼是 Live Site:
- Live Site:正在運行中的網站、上線中網站,如果你的網站目前只有一個,那個就是所謂的 Live Site,也可稱作 Production Site。
- Staging Site :可稱作模擬環境站點,或是預備站點,可以從 Live Site 同步資料(pull)過來,然後進行修改後,再將其同步(push)到 Live Site 上,這樣就可以無風險去修改內容,絕對不會影響到運行中的網站了!
為什麼我需要建立 Staging Site?
其實 Staging Site最重要的一個功能,就是可以在上面隨意測試、完全不影響 Live Site !
在你測試、設定、調整完所有你要調整的東西,不管是主題、樣式、排版、外掛、任何功能,你只要在 Cloudways 後台點擊「Push」,就能很輕易的將 Staging Site 做好的設定,全部或者部分同步到 Live Site 了!
因此如果你有以下需求,你會非常適合建立一個Staging Site:
- 想要修改網站主題,但很怕改了壞掉會影響運行中的網站
- 想要測試新的外掛,但是怕裝了之後會跟其他外掛衝突導致問題
- 想要修改網站內容或設定,並且希望先放到 Staging Site 上看看效果,再更新到 Live Site
建立 Cloudways Staging Site 的優點
不影響運行中網站
Staging Site 最主要的功能就是:
- 可以從 Live Site 同步一模一樣的網站,建立另一個站點。
- 在 Staging Site 站點做的變更,完全不會影響到 Live Site。
- 當更新內容完畢後,也可以輕鬆將變更同步回去 Live Site。
因此這個功能非常適合想要試用外掛、想要調整主題等有可能會影響到運行中網站的人去做使用!
安全並私有,不被搜尋引擎收錄
Staging Site 在 Cloudways 平台的設計下,他算是一個私有網站,需要輸入 Cloudways 後台中的帳號密碼才能進入網站。
因此就有點像是一個屬於你自己的測試站,你可以到測試站測試任何變更,如果被你設定壞了,從 Live Site 再同步一次資料將 Staging Site 蓋掉即可,完全不用擔心把網站玩壞。
自由在兩站之間同步內容
我看過有些人想要變更主題設定時,他會用備份的方式複製一整個網站,並且在備份網站中先試著調整設定,等待確認都沒問題後,再到原本網站重新再做一次。
Staging Site 可以讓你不需要這麼麻煩!你只要在變更後直接點「Push」,將資料從 Staging Site 同步到 Live Site 就完成變更囉!
Cloudways Staging Site 建立與使用教學
建立 Staging Site 注意事項
要建立Staging Site 要先知道的事項有以下幾點:
- 不可使用第三方登入:你的 WordPress 不可以透過 Jetpack 或者類似的外掛,並利用 WordPress.com 或其他的第三方登入後台方式,因為第三方登入在認證後會將你的網頁重新導向到你的 Live Site,這樣你就會登入不了 Staging Site。
- 同步資料前請先備份:在你將資料從 Staging Site push 至 Live Site 之前,請務必使用 Cloudways 備份功能來備份你的網站(後續步驟中有展示),否則如果出問題你將無法還原到 push 之前的版本。
- 請勿將 Staging Site 變為其他網站使用:如果你想要做的是複製你現在網站,並且把它改成第二個網站的話,請直接使用 Copy Site 功能,如果建立成 Staging Site 哪天你點到 Push/Pull ,不小心把其中一個網站蓋掉,你就會悔不當初了!
開始建立 Cloudways Staging Site
接下來就開始帶大家建立 Cloudways Staging Site 囉!請跟著以下步驟一步一步做下去吧!
建立 Cloudways Staging Site
step 1
登入Cloudways。step 2
點擊 Application。step 3
找到要建立 Staging Site 的 Application ,點擊右邊 Menu。step 4
點擊 Clone App/Create Staging。step 5
選擇在同一個主機上建立 Staging Site,並且點擊 Continue。step 6
等待 Cloudways 幫你建立 Staging Site。step 7
建立完成後就可以看到 Staging Site了,點擊進入 Staging Site 畫面,準備繼續下一步驟。進入 Staging Site 的 Cloudways 管理介面,並登入到 WordPress
step 1
進入到管理介面會看到 staging 的標記,並且底下也會預設開啟密碼保護,意思是你的網站只有你能看到,並不會出現在 Google 搜尋結果中。step 2
點擊 Application Url 可以進入網站。step 3
進到前台後會看到跳出提示窗,提示你要輸入使用者名稱和密碼。step 4
到你後台的管理介面,從紅框這邊取得你的帳號密碼,並複製過去剛剛的網頁進行登入。step 5
登入成功,你會看到一個跟你原本網站一模一樣的畫面,但你會發現網址是 Staging Site 的網址,這就代表 Staging Site 建立成功囉!step 6
在網址後面輸入「/wp-admin」,準備登入 WordPress 後台介面。step 7
輸入跟你的 Live Site 相同的帳號與密碼,點擊登入。step 8
成功登入 Staging Site,可以開始進行任何的變更囉!(不會影響Live Site)測試修改 Staging 資料是否會影響 Live Site
很多朋友做到這步,看到 Staging Site 後台之後,雖然我跟你們說他不會影響到 Live Site ,但是大家可能還是都怕怕的。
因此我就來帶大家測試一下,讓大家可以放心,在 Staging Site 做的任何修改,真的都不會影響到 Live Site!
*注意:如果你修改的內容,是跟第三方平台相關的,那就會影響哦!只有 WordPress 本身設定才不會影響
step 1
登入後進到佈景主題畫面,可以看到目前使用的是Astra Theme。step 2
直接果斷把主題切換成別的主題!step 3
可以看到 Staging Site 的畫面已經因為切換主題一團亂了。step 4
但是Live Site 還是一樣完好如初。如何將資料在 Staging 與 Live Site之間同步
而我們確定可以放心的在 Staging Site 上任意更改東西之後,當我們修改完了,就該來學學怎麼將 Staging Site 與 Live Site 之間做同步了。
首先我們得了解同步有兩種,一種是推(Push),一種是拉(Pull):
- 推(Push):想像一下 Live Site 是正在雲端上運行的那個網站,Staging Site 就好像是你自己的測試站點一樣,當我們要將 Staging Site 上面做的更改同步到 Live Site,基本上就是選擇「推(Push)」,將更改的資料「推」上去。
- 拉(Pull):當我 Staging Site 有一陣子沒更動,而 Live Site 上可能更新了一些文章或者內容,這時我要開始改 Staging Site 之前,就需要先將資料從 Live Site 那邊「拉(Pull)」下來到 Staging Site,再開始進行改動。
那接下來我們就來示範一下如何同步囉!(如果你按照著本篇的順序去做,待會記得先練習Pull,因為剛剛有隨意修改了主題,Push 上去 Live Site 會發生悲劇的!)
從 Live Site 將資料同步到 Staging Site
step 1
首先先進入 Cloudways 後台中,並點入 Staging Site Application 的管理介面,點擊左方 Staging Management 進入 Staging 管理。step 2
可以看到有「Push」跟「Pull」功能,分別是將資料從 Staging 同步到 Live,以及相反。step 3
點擊「Pull」因為我們前面示範有改了 Staging Site,因此我們要先將 Live Site 的資料 Pull 下來蓋過 Staging Site 目前資料,這樣才能在最新的狀態下進行修改,點擊「PULL」準備同步資料。
step 4
把選項都勾選起來,並點擊「Proceed」同步。這兩個選項分別是「檔案」及「資料庫」,一開始使用就是全選就好,如果你之後想要知道進階用法,可以再去研究 WordPress 中資料庫每個 Tables 的差異,你就可以在同步時選擇你要同步哪個部分資料囉!
*對這方面不熟者,就還是每次都同步全部資料吧!
step 5
等待 Cloudways 同步資料完成。step 6
可以看到 Staging Site 又恢復修改主題前的樣子囉,與 Live Site 一模一樣。將 Staging Site 的變更資料同步到 Live Site上
在我們將 Live Site 資料同步到 Staging Site 之後,我們就可以開始變更 Staging Site 上的設定、樣式等等。
而當我們更新完成確認無誤之後,就可以按照以下步驟,將已變更的資料同步到 Live Site 上囉!
*注意:如果你在 Staging 正在變更樣式或資料,就暫時不要去更新 Live Site 的內容哦,因為等 Staging Site 按照以下步驟將資料同步到 Live Site 之後,Live Site 這一段期間的變更是會被覆蓋掉的哦!
以下我會示範給大家看,在 Staging Site 變更完資料之後,如何將資料從 Staging Site 同步到 Live Site !
step 1
首先在 Staging Site 後台,點擊新增文章。step 2
隨意輸入文章標題,並且點儲存草稿(只是為了做一個變更)。step 3
可以看到 Staging Site 多了一篇文章。step 4
回到我們的 Live Site,檢查一下,會發現並沒有剛剛在 Staging Site 上新增的文章。step 5
到 Cloudways Staging Site 的後台,進入 Staging 的管理介面,點擊「Push」準備將資料從 Staging 同步到 Live Site。step 6
一樣勾選檔案跟資料庫全部,並且下方一定要勾選「Yes, please take backup」,並且點擊「Proceed」開始同步。*在將 Staging 的資料蓋過去 Live Site 之前,先將 Live Site 做備份會比較安全,因此必須將最下方那個備份勾選起來哦!
step 7
同步完成之後到 Live Site 看一下,就會發現剛剛新增的那篇草稿文章,成功同步到 Live Site 啦!以上就是如何建立一個 Staging Site , 並且與 Live Site 之間資料還可以輕易地做同步的方法囉!希望對大家能夠有幫助,讓你們不用再怕修改資料時影響到運行中網站了!
想學習更多好用數位工具?
【免費支持】如果這篇文章有幫助到您或想鼓勵我 ,請幫我在下方處綠色的拍手圖示按5下,只要登入Google或FB,不需花費任何經費就能支持我,感謝您!
謝謝分享,這功能超棒,說明也很詳細!!
謝謝你!很高興對你有幫助!
超爆實用,根本開掛
另外3.4節『從 Live Site 將資料同步到 Staging Site』的step6和step7好像有重複
感謝回饋!
謝謝版大的文章分享, 對剛剛搬家到cloudways的me正想換主題,打算來試試staging 功能~~
可以按照文章步驟試試看~在你不確定網站主題是不是你要的之前,很好用~~
oh 這樣對之後要改主題布景的人很有幫助,
這樣就不用害怕傷害原本的網站,
有了分身網站可以盡情設定使用,哈哈。
感謝版大分享^^