進度條

【WordPress 架站】虛擬主機購買、網域綁定、https與 Email設定 2020 - 2021 - 以 Bluehost 為例

需要架設一個 WordPress 網站嗎?要不要考慮 Bluehost 試試看?

作者: 進度條編輯群 更新日期:

此文章也有影片介紹,可以搭配影片一起學習!

01. WordPress 虛擬主機購買與網域綁定 - 以 Bluehost 為例 (所屬課程)

02. 架設多站台與設定子網域, 強制使用https與建立公司網域 Email - 以Bluehost 為例 (所屬課程)

03. [補充][不推薦] 使用 Web hosting 架設 Laravel 網站(一), 上傳專案與設定 .htaccess (所屬課程)


以下正式開始文章


本文要介紹的是如何在 Bluehost 上建立自己的 WordPress 網站,會以註冊 -> 網域(Domain) -> 網站上線這樣的步驟向各位示範與介紹。看圖文如果有疑惑可以參考上方影片,影片都是連續動作錄影。

下一篇則會包含「子網域多站台」架設、「公司網域 Email 設定」、「PHP 版本選擇」、「強制 https 導向與 .htaccess 設定」

 

 

首先不曉得大家知不知道什麼叫做架設網站?

 

其實架設網站就是讓別人遠端連線到「你的電腦」,「你的電腦」提供特定的回應給他。這個特定的回應就是 HTML 文章格式。簡單來講就跟 Excel 檔一樣,是一種特別格式的文檔。因為 HTML 是一門技術,也不是所有使用 WordPress 的同學都需要會。因此有興趣的同學可以看我們HTML CSS JavaScript jQuery 課程的介紹。

 

WordPress 是一個用 PHP 語法製作的網站程式,他有很多的檔案,基本上都是 .php 檔組成的。.php 檔需要讓特定的程式讀取後才能發揮作用,就像 .xlsx 檔案要用微軟的 Excel 程式開啟才能看一樣。.php 檔需要經過 PHP 這支同名的"執行程式"執行過後才會執行吐出結果。也就是說如果你今天想要執行 WordPress 網站程式,「你的電腦」需要 PHP 這隻執行程式。利用 PHP 去執行 WordPress 程式後的結果就是吐出 HTML 的文字,所以一般情況下使用 WordPress 我們就不需要麻煩的自己去學習如何寫 HTML。

 

但是如果你想要完全控制你的網站的顯示畫面的話,學習 HTML, CSS, JavaScript, jQuery 是必要的,但是這是進階玩法,所以初碰 WordPress 的人應該先熟悉如何用滑鼠玩網站。

 

先不論技術,其實大部分的時候我們不希望別人真的訪問到我們平時使用的電腦,畢竟一不小心「網頁瀏覽紀錄」就被別人看到。色色的網站紀錄是一回事,如果儲存的銀行帳號密碼有任何的風險被人知道,即使加密權限之類保護得很好,也不是根本上的零風險。要零風險就是那台電腦是完全的獨立網站電腦,不是工作或是日常生活用的電腦。「理論上」如果完全沒有個人資料,就不用怕遺失個人資料。

 

但是即使現在電腦都很便宜,買一台獨立的電腦在家裡讓人家訪問也是覺得浪費錢浪費電,更不用說如果每日訪問量也就小貓兩三隻。此外讓別人訪問需要一個固定的 IP ,IP 就跟地址門牌一樣,網址 Domain name 其實只是一個別名而已。想要的話,同一個 Domain name URL 實際上訪問的 ip 是可以每分每秒的改變的。(不過一般的 WordPress 站台不會做這樣的事情)

 

用實例名詞解釋一下:

URL => https://progressbar.tw/posts/289    
Domain => progressbar.tw
 

 

 

所以「建議」架設一個 WordPress 站台你需要

1. 一台獨立的電腦

2. 電腦裡面需要 PHP

3. WordPres 要求 MySQL 或是 MariaDB 這樣的資料庫程式,所以該電腦必須要能訪問資料庫。

4. 可以被訪問的固定 IP

 

 

以上看起來很複雜,但是 Bluehost 這樣的 Web hosting 虛擬主機服務商都幫你處理好了,所以前面講這麼多也只是先讓你大概有點感覺什麼是架站,前面即使完全看不懂也沒關係。如果你看得懂,恭喜你。在未來網站越做越大的時候可以考慮使用像 Linode VPS 虛擬專屬主機這樣子的服務。我們的 WordPress 課程則是不管架設在 Web hosting 虛擬主機 還是 VPS 虛擬專屬主機都有教學,有需要的話可以考慮看看。

 

 

 

 

接下來就是介紹一下 Bluehost 
 

 

Bluehost 他是一個老牌的 Web Hosting 服務提供商,他的商譽還不錯,好用度普通,速度不快、規格不高,但是便宜。 CP 值上面沒辦法說最高,但是可以當作是一個基準點,如果 CP 值比 Bluehost 高,那就可以算是一個好服務,比 Bluehost 低基本上就不用考慮了。

 

很多人可能不太同意 Bluehost 的商譽好,但那是過度嚴苛了,他基本上也沒有騙你錢,付費後就可以使用,答應給你的也都包含,這麼多年下來也都是這個等級的服務。其實租用服務商最怕的是不穩定,所謂的不穩定除了一般定義的服務掛點外,其實就是服務不值那個價錢。Bluehost 其實很少負面評價是他的服務不值他的價錢,而是很多人想要「極致的速度快感」但 Bluehost 做不到。我們是覺得一分錢一分貨,同價位的每隔一陣子都會有挑戰者出現,號稱便宜又快,最後不是漲價就是沒落了。畢竟成本就是那樣,商業就是要賺錢才能永續經營。

 

所以我們這邊是把 Bluehost 歸類為給新手的推薦,因為如果你有強烈的效能需求,學一下 Linux 架站直上 VPS 才是解決所有問題的方法。 當然我們剛好也有 Linux VPS 的課程教學 ( 整篇工商這樣行嗎!? ),可以參考看看啊!

 

 

補充一下

Linux 雲端伺服器,用 AWS 暸解 Apache 與 Nginx 這課程屬於 WordPress 課程中 VPS 章節的再進階內容。所以如果你現階段看的就頭痛的話,Bluehost 類型的 Web hosting 是你最好的選擇。

 

當然提到 Bluehost 的話就不能不提到他在 WordPress.org 上面的推薦名單裡面。這份推薦名單應該跟贊助貢獻度有關,不過這也是另一方面證明 Bluehost 是有一定規模的公司。

 

最後就是 Bluehost 也藉由聯盟行銷的推廣,讓 WordPress 社群上有許多相關的資源,所以基本上你在操作上有問題並不會陷入沒人可問的情況。雖然大部分時候你應該要直接問 Bluehost 的客服,畢竟是你是付錢租用他們的服務。但是即使英文有障礙,直接把關鍵字貼上 Google ,也是會有一定程度的中文資訊的,不真的一定會走到要問英文客服的地步。

 

 

既然提到了聯盟行銷,就還請各位使用我們進度條的聯盟行銷連結。

(Bluehost 沒有專屬特價,所有連結都是一樣價錢。推廣會算在最後一個點擊的,請點我進入 Bluehost!! )

 

Bluehost 的聯盟行銷推廣回饋對我們來說是一種鼓舞,內容豐富的文章都是必須要積年累月的經驗加上願意分享的心,推廣回饋讓我們願意提供更多的免費資源(當然付費的課程資源是更多且更有價值的內容)。 雖然一直講回饋感覺有點太商業,但是網路上關於 Bluehost 的 WordPress 資源相當完整,正是因為有利可圖,生態圈才會形成。說真的,如果要氣長,合理的報酬是要有的,大家應該也看很多斷尾的優秀部落格了吧!?

 

 

接下來就開始註冊吧!

 

 

1. 進入Bluehost

首先進入 Bluehost 官網 

 

 

 

 

2. 進入方案頁面

點擊 Get Started 按鈕,每個頁面會有點不太一樣,也可能顯示 Choose Plan。每個宣傳期可能也會使用不同的圖片,不用在意點下去就可以。

 

 

 

 

3. 選擇方案

進入到選擇方案的頁面,它的推薦方案是 CHOICE PLUS,但是一般其實 PLUS 版本就夠用了,我們一般會推薦至少要可以架設 Multiple Site 的方案,也就是多站台。CHOICE PLUS 多的是 免費的自動備份 Automated Backup 與 Domain Privacy。

(注意上面顯示的是 3年約的價錢,年數低的價錢會再高一些。大約每少一年,每月會多出1塊美金,以此圖的 PLUS 來講,只購買一年會是 7.95 每月,Basic 會是 5.95 每月)

 

 

 

因為 Automated Backup 而多 1 美元每月算是合理的價錢(續約價是差 3 美元),因為這個功能加價沒什麼問題。多 Domain Privacy 這個功能對我而言就沒有用了。Domain Privacy 這個功能很有用的,但是這並不是對虛擬主機有用,而是對網域有用。

 

 

一般的虛擬主機在註冊的時候會問你要不要順便購買網域,你可以選擇不要購買。我們後面也是示範把在其他服務商註冊的網域跟 Bluehost 的虛擬主機連再一起。所以其實虛擬主機服務商其實是嘗試在一次的服務中賣你兩個服務,分別是「網域註冊」與「虛擬主機註冊」。Domain Privacy 這個服務是用來隱藏你註冊網域的時候提供的真實資料,通常是「網域註冊」的時候會附贈的服務。所以如果你不是在 Bluehost 註冊網域,那 CHOICE PLUS 方案多的 Domain Privacy 你根本沒辦法使用。因此分開註冊的情況下你要考慮的其實只有備份功能對你有沒有用。至於分開註冊的優缺點我會在後面的步驟補上。

 

延伸閱讀與註冊服務商推薦:[不是工程師] 在想網站用怎樣的網域名稱(Domain Name)嗎?不妨從行銷面來看吧!

 

 

至於 PRO 版本即使特價也不太便宜,所以我們通常不會特別推薦,他已經到達 VPS 的價格等級。即使他說他有特別優化,只要他還是虛擬主機就是有一定的強度限制。 此外如果你只是想要一個站台玩玩看的話, Basic 也是很好的,不過基於新手也可能會有練習的需求,所以多站台是比較方便的選擇。

 

 

補充知識


一般我們會講正式上線的網站叫做 Production 或是有些會簡寫 Prod。這個網站是正式對外的網站,所以不太能有停機的情況。但是我們常常會修改網站,很怕把正式網站改壞。所以比較正式的做法是無論你是怎麼樣去修改你的網站,修改的內容都不會直接放在 Production 站台,而是會先放在一個完全一樣的測試站台上面,這個測試站台我們一般叫做 Staging 站台。


Staging 有時候也不是完全不能被陌生客訪問到,但可能會影響到 Production 站台的 SEO 所以可能架好後就先把它關掉,或是進入維修模式,要測試的時候再打開它。所以他是可以有「網域」指向的,比方說叫他 test. [你的網域] 之類的。這時候多站台功能就滿有用的。


多站台在行銷上做拋棄式網站也有用處,不過如果你只是交個作業報告所以要網站,選擇 Basic 方案也不錯。
 

 

 

 

4. 選取方案

確定方案,點擊該方案的 Select 以後進到下一頁

(依照自己需求選擇即可,不過我們的影片是使用 Plus 方案進行。)

 

 

5. 網域選擇

這邊有兩個選項,看是要新購買網域還是使用既有網域

 

 

a. 左邊的 Create a new domain.

如果你沒有網域 domain 又覺得另外註冊麻煩,那你可以選擇這個方案。

好處:

(1) 免費一年的網域註冊費用,不太確定購買三年方案是不是送三年,應該不是。

(2) 後面不需要設定網域,直接可用

 

壞處:

 (1) 網域註冊費用是不可以退的,所以如果你之後有機會在 30天內取消,那這筆錢會先被扣掉才扣款,金額沒有很明確說是多少。

(2) 即使正常使用但是卻碰到比方說升級到 VPS 或是有其他站台在其他服務商,雖然可以使用但是就必須要進到 Bluehost 管理,如果要擺脫掉 Bluehost 就必須要在新的服務商註冊至少一年延伸合約。
 


只要網域註冊商幫你註冊後,網域就是由他幫你管理,你不能說在 Bluehost 註冊後看到 Gandi 比較便宜或是有你要的配套服務,就直接讓 Gandi 幫你續約。你必須要在 Bluehost 辦理轉出,Gandi 辦理轉入。然後因為這時轉入的服務商沒賺到錢又要提供你服務很虧,無論你租用還剩多少時間,所以它會要求你轉入的時候要至少再續約 1年。

此外,對於服務商來說轉出就是掉客戶,所以很多不會做到完美,再加上網域除了兩家服務商外,還有真正管理網域的服務機構這段,以 .tw 來說就是 twnic 財團法人台灣網路資訊中心 ,所以大部分情況是會有網站中斷的問題。我們之前試過一個測試用的網域在匿名的兩家服務商中間交換(可能是我們操作不當,所以不具名),中間該域名有四天是沒辦法使用的,即使兩邊都相當快速,斷掉 12 小時的可能性也是有的。所以直接選擇好用的網域註冊商是有意義的。
 

 

 

(3) Bluehost 沒有在 twnic 註冊,所以他不能賣 .tw 與 .com.tw 的網域。此外還有很多的國家的網域他可能都不能賣,所以選項其實沒有很多。

 

.tw / .com.tw 可以註冊的服務商有

1. Gandi 
2. 遠振
3. Godaddy
4. 其他的台灣服務商 (其他沒有接觸過所以擺這邊)
 
其中台灣的服務商包含「遠振」都會開台灣的發票,Gandi 在台灣有分公司也會開,都可以打統編所以報帳方便。
GoDaddy 寫文章的當下應該是沒有發票,但是未來會不會改也不一定,也不見得可以打統編。
 

 

 

b. 右邊的 Use a domain you own

已經有網域的同學就在這邊輸入你的網域,務必要檢查清楚有沒有打錯,不然後面會比較麻煩,不過如果你是用多站台的話就沒關係。

好處,壞處其實就是上面提到的相反,所以就不再多打一遍了,接下來會是以這個方式繼續進行。我們當然是推薦彈性比較高的這個方式。
 

 

輸入完以後就按下 Next 

 

 

 

 

6. 填寫註冊資料

照著填寫即可,optional 是選填的意思,所以沒事不要填。除了Email 外,你真的很不想填真的資料,可以自己斟酌,大致上他都不會用到(不保證)。

 

地址英文不知道的話,可以看郵局的「中文地址英譯」。

 

電話 +886 是台灣的區碼,你選其他 Country 的話,他會自動選擇其他的區碼。

電話目前是用不到,不過有一些其他服務商在帳號安全上有用到 one time password (一次性密碼簡稱 OTP) 登入,簡單來說就是簡訊驗證。但是也有一些服務商是使用 Email 做 OTP。不保證未來會不會有用處。

如果是行動電話的話, +886 後面要去掉 0 ,變成 +886 912 345 678,填寫不需要空格。Ext 分機沒有就不用填。

 

 

 

 

7. 選擇租用長度

1年~3年可以選擇,價錢不一樣,一開始看到的價錢會是一次 3年的價錢。建議沒有把握就買 12 個月即可。不過要注意的是,一個 Domain 只能申請一次新帳號與新帳號優惠金額。

 

下面 Package Extras 我通常都是全部不勾,因為這些服務會強化對服務商的相依賴程度,以後想要換服務商就不太容易了。當然這些功能有需要願意付錢使用的話也相當好,要注意的是金額也是以月和年計算的,不是買斷。

 

最下面的 Total 是總金額,確認無誤的話就繼續往下。

 

 

8. 填寫信用卡資訊

接下來要填寫信用卡,沒有信用卡無法購買,可以使用 VISA 與 Master Card 和 美國運通。JCB 可能無法,請確認一下發卡行。


 

 

 

9. 打勾遵守政策,提交內容

打勾遵守政策,並且檢查一下上面填寫內容,最後點擊 submit

最後記得要打勾確認自動續約和其他的政策,不打勾無法進行,但是可以之後取消自動續約,所以不用擔心。

 

 

 

10. 購買成功,建立帳號

如果都成功的話,會進入成功畫面,點擊進入 Create your account, 剛剛我們已經提供了 Domain 與 Email ,但是沒有還沒有填寫密碼。

 

11. 填寫密碼

在 Create Password 與 Retype Password 上面填入一樣的密碼,請自己決定。沒有很明確說怎樣的密碼才能通過,但是多半要同時包含

(a) 8個字元以上

(b) 同時包含英文大小寫

(c) 數字

(d) 特殊符號,可選用 @#$%
 

因為這個動作我沒辦法測試很多次,其他特殊符號能不能用我不清楚,有些公司不給使用。因為早期寫得不好的程式,密碼沒有經過加密再存進資料庫,如果允許「單、雙引號」或是「分號」等語法有可能會造成 SQL injection的風險,儘管現在新的程式多半內建都不會有這問題,但還是有一些程式設計師「習慣」屏蔽這些符號。


(e) *選用英文單字與有意義的英文句子在很多判斷上會認為是不安全的。

      不是不能用,只是如果上面寫的都有做到卻還是被判斷不安全,

      有可能是這個原因

輸入完畢確定都相同,密碼強度也夠,就按下 Create Account

 

 

 

12. 登入帳號

就是很一般的登入,可以用 Domain name 或是 Email 登入,記得選 Hosting Login,我們的服務是 Hosting。

 

 

 

 

13. 建立第一個站台

進去以後他就開始問你一連串的問題,說實在我覺得管太多,看似客製化其實只是想多賣你商品。所以我就選擇 No help needed,但其實無論選哪個流程可能都要跑到底。

隨著大家註冊的時間點不同,這段流程顯示的可能不同,基本上就是一路 Skip 到選擇佈景主題的部分即可。真的看不懂可以讓 Google 頁面翻譯幫你。

 

(a) 問你需不需要幫忙,選哪個結果一樣

 

(b) 問你想要架設什麼類型的網站,當然是想要多賣你點額外內容,如果沒辦法避開的話先選 Blog。可以避開就點選 Skip。

 

(c) 接下來的選項有可能因為你前面的答案會有變化(也可能沒有),不想回答就跳過。

 

(d) 問你對建立網站是否有信心,大概是想抓菜鳥。

 

 

(e) 網站的標題與敘述,這算是比較重要的資訊,因為會被寫入 WordPress 的資料庫內,但是不填事後也可以改。所以也可以先跳過。

 

如果上面有填寫,請點 continue ,沒寫的話可以先跳過。

 

 

 

14. 選擇佈景主題

不知道為何他不給選 WordPress 預設的年份樣式(2020, 2019 之類的),真的想要的話需要先把網站裝好再自行安裝。這邊因為選不到年份樣式。所以建議大家選擇一樣 WordPress 母公司 Automattic 公司的 Storefront 即可,比較不會幫你亂裝什麼,就算安裝了,也絕對符合 WordPress 的應用。

即使你心中已經決定了,也這麼建議,畢竟新的服務商還是會先玩一下,等比較熟悉後再重新製作成你理想的網站即可。

 

(a) 選擇免費的佈景主題。

(b) 選擇 Storefront

 

(c) 滑鼠滑上去後即有選擇按鈕,點選後即完成這階段,會進入 Bluehost 的後台。

 

 

 

15. 進入 Bluehost 後台

一進去就可以看到左邊有很多主選單,剛進去會在 Home,Home 頁會顯示你的站台列表,目前只有一個,你會發現它名稱長得很奇怪。因為我們目前還沒有設定 DNS。

 

如果你今天是跟著網站租用一起購買網域,那 DNS 設定是不需要的,網站直接就設定好。

 

如果這時候它設定剛建立出來的網站是你的網域的話,因為還沒設定 DNS ,所以一定會連不上,所以他用他自己的 DNS 指向了一個暫時的網域給你。讓你能訪問。

因此我們這時候要做的事情就是設定 DNS。

 

不過先讓我們看一下網站現在長怎樣。

 

(a) Home 頁面,可以看到奇怪的暫時網址

 

(b) 點擊 MySites,真正管理網站的選單大多會在 MySites

目前只有一個站台,點擊網址名稱可以訪問該站台。

 

(c) 點進去會看到奇怪的網址,但是可以連線正常訪問。

 

 

 

 

16. 更新 Domain 的 Name Servers

修改網域的 Name Servers,讓 Bluehost 可以控制。

 

(a) 回來 Bluehost,點擊主選單的 Domains,進來後可以看到網域,按下Manage。

 

(b) 進去後會看到 Name Servers,底下有兩個網域,這就是我們的目標,接下來要去網域註冊商修改,讓這個網域使用 Bluehost 的 Name Servers。改完後DNS Record 的控制權就會在 Bluehost 底下。

 

(c) 進到你註冊網域的網域註冊商後台,我們用 Gandi 所以畫面是 Gandi 的,但是每一家都會有這樣的功能,要稍微找一下,英文一樣叫做 Name Servers。

 

(d) 按下修改

 

(e) 選擇外部,Gandi 預設是三組,Bluehost是兩組,我也看過四組的,但是無論是幾組,除了第一組以外都是備用,所以 Bluehost 提供兩組就只要寫兩組即可,不用跟預設一樣的數量

 

(f) 儲存後就轉交給 Bluehost了,一般來說還要寫 DNS Record,但是 Bluehost 預設已經幫你寫好了,所以這邊不需要多做什麼。

 

 

 

 

17. 修改 WordPress 設定

Bluehost 有把它的介面跟 WordPress 站台的資料庫做連結,所以可以直接在他的頁面修改資料庫的內容而不用進到 WordPress 的 Admin 畫面。

之前為了讓暫定網址發揮作用,除了 DNS 上的設定外,WordPress 內部有兩個跟網域相關很重要的值,一個是 Site Url 另外一個是 Host 值,這兩個值都要設對,WordPress Admin 才進得去。所以我們現在要改這兩個值。 

 

(a) 進入 Msange Site

 

(b) 點選 Settings, 就可以看見  Site URL可以編輯,編輯完後按下 Save Updates,這時 Host 欄位會出現,填入跟 Site URL 一樣的即可。 

 

(c) 改完後記得儲存。

 

(d) 訪問網址有可能會看到網頁進入維護模式。

 

 

 

18.  關閉維護模式

同樣在 MySutes -> Settings 裡面,Site URL 的下面有 Coming Soon Page 選項,如下圖顯示 ON 代表讓訪客進不去網站,只能看到維護中的圖。

 

(b) 設為 OFF

 

(c) 網站就可以正常進入了

 

 

 

 

19. 進入 WordPress Admin 後台

不曉得大家有沒有注意到我們沒有設過 WordPress 的密碼,我們之前設定的是 Bluehost 的帳號。

所以在不知道帳號密碼的情況下,要進入 Admin 頁面,就必須要靠 Bluehost 的幫忙。

(a) 點擊 MySites 底下的 Log in to WordPress.

 

(b) 成功進去後就會發現裡面好像被裝了很多內容。我們會在下一篇文章影片安裝教大家如何安裝一個乾淨的 WordPress。

 

 

 

20. 進入 cPanel 畫面,進階的運用

(a) 如果對於更進階的 cPanel 有興趣的話,他進入的方式是在左邊的主選單中選取最下面的 Advanced (進階) 

 

(b) 然後就可以看到 cPanel的畫面了

 

 

剩下的內容我們放到下一篇再繼續!

 


最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!!

圖文系列教學: WordPress 新手基本操作

Small logo

進度條編輯群

進度條編輯團隊