Cloudways主機使用以及FileZilla上傳設定

「Cloudways真的不是只給WordPress用的，我親手試過，非WordPress網站也能搞定！」

發布日期：2025/12/10

這篇文章記錄了我從課程學習到實際架站的過程，最後選擇Cloudways主機，並分享如何在非WordPress網站上傳檔案時解決卡關，包含Cloudways的架構、FileZilla設定、Application與public_html的關聯，以及快取清除的小技巧。這不是教科書，而是我自己摸索後的心得，讓你少走彎路。內容包含：

為什麼選Cloudways：
- 多網站架設、速度快、客服回應快
- 相較Godaddy基礎版更靈活
Cloudways的架構：
- Server：帳號底下的主機
- Application：每個網站的空間
WordPress與非WordPress差異：
- WordPress：一鍵安裝，超新手友善
- 非WordPress：需要建立Custom App，才能找到上傳位置
FileZilla設定與上傳：
- 找到Master Credentials裡面的資訊
- 找到applications → Application資料夾 → public_html
- 把index.html和資料夾放進去
快取問題與解法：
- Cloudways後台的Varnish快取需要清除
- 瀏覽器快取也要記得清

緣起以及Cloudways的選擇

會找到Cloudways這個主機的時機點，必須要追溯到這個網站其實做到快差不多的時候。

自從人生開始進行不同領域的跨領域學習以後，就一直很想要自己架一個部落格來整理學習的過程和學到的東西。

因緣際會下，後來就在Hahow認識到了吳哲宇老師，並且購買了老師在Hahow開的「動畫互動網頁程式入門(HTML/CSS/JS)」，因為想要做個人部落格的關係，比較沒有多人一起協作的問題，所以決定挑戰自己，用比較傳統的html、CSS和JS並且搭配使用Codepen的知識來架設網站。

一方面也是訓練自己網頁前端跟一部分後端的基本能力，讓自己有一個機會可以踏入程式設計，後來也因為老師的課程非常紮實，結果真的出師了自己把網站架出來。

這裡就不得不認真推一下吳哲宇老師的線上課程了，他會讓你從以往對於那種傳統型網頁的認知，幫助你理解新型的瀑布流的網頁架構，拆解設計的樣子，甚至幫你引入很多很棒的工具像是Bootstrap來協助你更輕鬆地建立網站。

老師本身不只是一個工程師，同時也是一個設計師。讓你不只做出網站，而是做出一個可以用而且好看的網站。

幾乎每個人都可以在上完課以後，建立一個屬於自己的網站，就算是在現行的AI盛行下，讓自己具備有足夠的能力可以修改AI跑出來的Code，只能說真的是滿有價值的一堂課。

底下我們有課程的連結，有需要的朋友可以跳到下面傳送門，直接連到老師在Hahow的課程喔！

而在Hahow網站設計課程快結束時，因為總是要幫網站找一個家放，老師就有在課程中推薦幾個不錯的主機可以上傳網站，但那個時候就只有先稍微記在心裡面而已，沒有真的說很認真在考慮比較主機，畢竟從上完課到真正做出網站隔了一陣子。

不過真的要說，其實很久很久以前也有做過個人網站，只不過那個時候是用Yahoo的免費空間，然後做了一個看起來就很廉價的網站當作電腦課的作業，那個空間有特別弄使用者的UI介面，只要點一點就可以上傳了，操作非常地簡單。

但是現在其實已經沒有類似這樣的空間了。

因為現在都是主機，僅僅會提供IP位置而沒有使用者的UI介面，此時就須要透過特定的軟體來做上傳，還好這個部分吳哲宇老師當時的課程有教，還算是有點概念。

不過，等到真正要開始挑選主機時才發現，其實那一堂課其實是在好幾年前錄好的課程。時隔這麼多年，就資訊科技來說的話一定差異有點大，所以在主機推薦上我只有學了上傳檔案的方法，至於推薦的主機我決定多看看多比較。

而後來為了想要架可以方便團隊管理的Wordpress網站，購買了Wordpress的線上課程，那一堂課中剛好也有推薦主機Cloudways和Gandi的網域購買。

因為這一堂課程錄製的時間比較近，在課程內容中同時也有比較Cloudways跟其他的主機的差異，加上有手把手的設定與教學，而且Cloudways主機可以允許多個網站的架設，這一點是Godaddy網站最基礎收費的版本做不到的。

因此筆者就毫不猶豫地選擇了Cloudways主機，不過想當然，Cloudways的收費是比Godaddy基礎版本收費貴一些，這個部分就讀者針對自己的需求斟酌囉。

關於Cloudways主機為什麼會是目前多數人選擇的主機，網路上有許多的比較以及文章，這邊就不多做贅述囉。筆者這邊比較看重的是，可以允許多個網站架設、速度快、線上客服回應快的這幾個優點。

遇到的問題

一般購買Cloudways主機過後，只要登入就可以開始進行主機相關的設定。

以Wordpress為架構的網站，就必須要先架設好Wordpress所需要的環境。而Cloudways最為人稱讚的地方就在於，相關的環境架設只要一個按鈕並且等待安裝就好，就不用再自己煩惱那個Wordpress的安裝環境應該要怎麼辦，真的是非常非常地新手友善。

我自己對於Wordpress網站架設的新手，也都會推薦可以使用Cloudways。

Cloudways後來做了一波改版，他的新版介面長這樣，筆者自己也花了一段時間適應

而在Cloudways架設Wordpress環境前，首先必須要先來理解Cloudways本身主機的架構以及對應的名稱。

前面有說過，Cloudways的主機內部可以允許有複數的網站，而為了方便管理，不同的帳號底下可以有複數的主機，因此每一個帳號底下會有不同的Server。

然後每一個網站可以放置的空間被稱之為Applications，一個網站會對應一個Application，你可以針對不同Application的網站購買相對應的網域。

一般來說，如果是對於Wordpress網站想要建立一個空間的話，就是先建立一個新的Application，當然非Wordpress網站的話也是相同的步驟。

最一開始，可以快速點新版介面中的Flexible，這個是可以最快速進到Servers還有Applications頁面的地方。他在新版介面中也會標示你這個帳號裡面有多少的Server、多少的Application。

新版介面裡面Flexible的位置

點進去Flexible以後，就可以看到Servers還有Applications，筆者因為這個Server裡面已經有一個自己的個人網站，以及另一個有在管理的個人網站，所以目前裡面是有東西的。

一般如果是新買的Server的話，裡面應該是空白沒有東西的。

進入Flexible以後的畫面

因為我們這個時候要增加一個新的可以放網站的地方，因此我們要點選右上角的「+ Add Application」，點選了以後他就會要你選擇放置Application的主機。

在這個地方選擇自己購買的主機，如果有複數主機的話就選擇要放置網站資料的Application要安放的主機名稱。

Add Application裡面選擇主機的畫面

選擇好了主機以後，接下來就會進到設定的頁面，此時只要選擇Wordpress的版本(他前面有一個Wordpress的符號)，並且給Application一個名稱就好，最後點選「+Add Application」。

Application的設定頁面長相

因為環境設定本身需要一點時間，所以在等待的過程中他會有UI介面告訴你，現在是在設定環境。

建設環境時候的畫面右邊，他會告訴你他真的有在做事情

新版的Cloudways他還很好心的會用Email通知你，他已經建立好了Application的環境了，你可以開始使用。

這個時候我們可以重新回到Application的頁面，就會發現我們在這個主機已經架好一個Wordpress的環境了，他會以你命名的名稱顯示在上面。

Application頁面上新增加的名稱

點進去對應的Application後，就可以看到這個Wordpress網站、由Cloudways暫時提供的網域(之後可以購買網域變成永久的網域)，以及各種對於這個網站的相關主機設定。

對應Application裡面可以看到的資訊畫面

接下來的話我們就可以直接進到Wordpress的後台來進行網站設計與內容建構。

那麼，問題來了。

因為今天筆者的網站不是以Wordpress來做建構，而是利用Codepen線上編輯完下載下來以後，利用Sublime Text稍微修改以後會有得到的html、CSS跟JS的內容，想要再把他放到主機上面。

呃...那在這個情況下我要把我的檔案放到哪裡去？

正所謂，沒有什麼問題是餵google或是問AI解決不了的，遇到這種情況當然就要上去狠狠地搜尋一下。

但筆者發現，因為Cloudways主機目前被認為是Wordpress很適配的主機，因此絕大多數討論Cloudways的設定都與Wordpress為架構的網站有關。而針對筆者這類非Wordpress為架構的網站上傳檔案來說，著墨的都不多。

看來只能自己研究了呢。

解決的方法以及相關的設定

Cloudways雖然是主機代管介面，但本質上終歸是個主機，所以基本上整個流程應該還是比照一般主機的方式上傳檔案，這個肯定是沒有問題的。

因為筆者自己習慣使用的是FileZilla，所以後續這邊都會採用FileZilla的介面來做說明。

首先點選Cloudways裡面自己的帳戶所購買的主機，在下方的介面中選擇Master Credentials。即可以在畫面中找到主機的IP位置(Public IP)，以及使用者的帳戶名稱(Username)、密碼(Password)，這些是等一下要輸入在FileZilla裡面的資訊，這樣他才知道要把資料傳到哪裡去。

可以在圖中紅色框框的地方找到相關的資訊，先記錄下來我們後面會用到。使用者的名稱跟密碼都是可以自己修改的。

接著我們回到FileZilla的地方，開始進行設定。筆者自己不太習慣用快速連線，一般都還是會建立站台相關的資訊。這邊我們選「檔案」→「站台管理員」

FileZilla的介面其實滿友善使用者的，而且很多都可以透過直觀像是拖曳的方式，誠心推薦

在站台管理員的介面，按照我們前面在Cloudways裡面找到的資訊，按照下圖的位置依序填入，其他設定保持不變。連線完成以後，我們就可以在FileZilla的介面右邊，找到遠端站台的資料夾。

要填入IP、使用者以及主機密碼的畫面

選擇連線以後，就可以在畫面的右邊看到Cloudways主機內部的資料，而左邊的部分是本機資料夾，這個部分因為機密的關係，所以請容許筆者使用方塊擋起來。

右邊紅色框框的地方，就是我們Cloudways主機裡面的資料夾們

當連線好了以後問題又來了：「所以我還是不知道要把資料上傳到哪裡啊！」

別急，且聽筆者慢慢道來。我們再回到Cloudways的視窗中，來到Application的地方。先前我們說過Cloudways可以允許在同一台主機裡面有複數網站的存在，那確切來說的話他要怎麼區分不同的網站？其實靠的就是Application。

許多網站上的Wordpress教學都會教，如果今天想要在同一台主機再用第二個Wordpress網站的話，只要再重複一次「+Add Application」的步驟就可以了，Application的地方就會出現兩個Wordpress網站。

但是我們今天不是要Wordpress網站，而是想要一個空白的位子讓我們可以上傳檔案，那這個部分應該要怎麼做才對？

一般非Wordpress的網站中，可能就會需要PHP的設定、MySQL、Stack等等的環境建置，所以現在如果我們想要找一個地方去放置我們的網頁檔案跟資料夾，我們還是要創建一個新的Application。

只是不同於Wordpress架構的網站，我們這一次在「+ Add Application」之中，我們要選擇安裝的是PHP底下的「Custom App」。

按照前面我們說過的步驟等待安裝好了以後，就會像前面我們建置Wordpress環境的時候會看到相同長相的APP，但是icon略有不同，這就是代表不同的環境，此時你就完成了我們後續可以上傳網站資料的Application了。

選擇圖中紅色框框，就是安裝一般主機會有的非Wordpress的環境需求設定

這一張圖最上方跟最下方的Application是Wordpress環境，而中間的則是一般非Wordpress的環境，我們要放網站的位置會在中間的Applicaiton之中

我們在Cloudways裡面選擇剛剛安裝好的Application，在「Access Details」裡面可以找到「Database」，其中他的「DB name」就是我們等一下在FileZilla裡面要找的資料夾名稱。

圖中我們可以看到，我們在Application資料夾裡面的名稱就是「hbbbkjbrka」，也是等等我們要在FileZilla裡面找的資料夾名稱，同時也是上傳的目標資料夾

確認好以後，重新連線一次FileZilla，在遠端站台主機裡面可以找到applications的資料夾，點開以後就能發現裡面有一個「hbbbkjbrka」的資料夾。

點進去這個資料夾以後，可以找到一個叫做「public_html」的資料夾，這個資料夾就是我們要放網頁檔案們的地方了。

public_html資料夾其實就是整個網站的資料夾，我們可以把所有需要的網站以相對連結的方式在這個資料夾裡面做安排跟整理

一開始打開public_html資料夾，裡面會看到只有一個index.php檔，而這個檔案的內容其實就是整個application他的預設首頁。我們可以透過Application中Access Details裡面的「Application URL」，來看預設網頁長成什麼樣子。

筆者原先的那個資料夾已經把index.php檔案刪除了，為了確保圖文並茂(?)，這邊就又再安裝了一個新的Application，讓讀者可以看一下index.php的位置

如果index.php在這裡面，而預設的暫時網域位置也是指向這裡的話，那就表示我們網站的首頁檔index.html也要放在這個路徑之下，因此我們丟網站的資料夾就是public_html囉。而FileZilla的上傳方式就是從左邊的資料夾(可能是自己架站的時候建立的頁面資料夾)，拖曳到右邊就可以完成上傳了。

整個步驟非常的簡單與直觀。

筆者這一個網站最後在public_html呈現出來的樣貌，基本上他要抓就是會抓index檔名來當成首頁呈現，所以這個檔案不能放在資料夾裡面

上傳資料非即時更新的處理方法

筆者一開始在摸索Cloudways的時候就有因為這件事情吃過苦頭，因為那時候對於Cloudways的資料夾結構不太熟悉，所以就算好不容易找到public_html資料夾跟裡面的index.php時，也不是很確定這個資料夾就是要上傳的目標資料夾。後來把心一橫想說就把index.php刪掉，看看暫時網域是否就連不進去。

結果，出乎意料的居然還是可以讀到？？？

當時心裡就想說：「不對啊，按照邏輯來說應該index.php就是暫時網域會抓的首頁才對。」自己測試了許久加上瘋狂查google，終於明白可能是因為Cloudways後台的快取問題。

解決的方法是，到Cloudways的「Server」中，找到「Manage Services」，裡面有個「Varnish」，選擇掃帚圖案的「Purge」就可以完成快取的清除。上傳以後就能比較快看到自己做的修正囉！