Bluehost 架設 WordPress 完整手把手教學(含影片)

教你如何架設 WordPress 網站,使用 Bluehost 虛擬主機

本篇文章帶你從無到有,一步一步的完成 WordPress 網站架設,使用 WordPress 推薦的虛擬主機 BlueHost,來完成 WordPress 的架設。「過程不需要程式、任何人皆可跟著步驟完成」!

內容索引

自己做網站你必須準備的網站三大要素

 

架設 WordPress 網站必備三要素
網域名稱(網址)網站主機伺服器WordPress 主題(網站設計)

 

網域名稱的準備

如果你已經有網域(網址),可以直接跳到第二步驟 Bluehost 主機的設定。如果還沒有的話,首先你要做的,就是替你的網站想一個名字,再從這個名字衍伸出你的網址。

這邊只要想名稱即可,Bluehost 主機方案有贈送一組網址,到第二步驟的主機設定教學中,再將名稱輸入即可。

網址要如何命名?

如果可以跟你的品牌名稱一模一樣當然最好,前提是你的品牌名稱是英文的,像是 Google 的網址是:google.com。如果不是英文也可以將中文翻譯成英文,例如傑克網頁設計網址可以是:jackwebdesign.tw,也可以是 jack-web-design.tw。

網址是可以接受 – 符號的,雖然後者將英文單字分開較好閱讀,但很多人對於網址中有任何符號是有疑慮的,我自己也不喜歡,因為覺得不利記憶和輸入。試想一下,如果有人要用手機輸入你的網址,是不是還得要切換到符號表,再切回英文。

也可以依照網站性質命名。像巴哈姆特是國內有名的電玩資訊網站,而它的網域名稱是:gamer.com。gamer 是遊戲者的意思,非常符合它的網站內容,也很好記憶!

 

更多網址命名訣竅可以參考:官網網址要這樣命名,域名選.com .tw有差別

Bluehost WordPress 網站架設影片教學

下方亦提供圖文教學,可依照喜好自行選擇其一來跟著步驟實作「皆可以帶你完成 Bluehost 主機設定,完成 WordPress 網站架設」。如有不懂處也可兩相對照。
Bluehost 網站(記得點擊此連結到 Bluehost、主機才有折扣喔!)

 

0:00 WordPress 網站架設三要素

1:10 Bluehost 方案介紹

2:17 網址命名與觀念

4:28 填寫 Bluehost 註冊資料

12:24 主機初始化設定

14:42 認證網域擁有者

15:56 登入 WordPress 網站

19:03 設定成正式網址

20:25 WordPress 前後台切換方法

22:25 不需要外掛清理

24:55 開啟/關閉 Coming Soon Page

25:20 設定網站 SSL https 加密

27:28 恭喜!準備開始設計美化 WordPress

Bluehost 網站主機的設定

為什麼選用 Bluehost,因為它是 WordPress 官方所推薦的虛擬主機,且耕耘 WordPress 使用者市場多年,於 WordPress 的整合上的確做得極佳,可以「幫助你更輕易的架設起 WordPress 網站」。

首先到 Bluehost 的網站(記得點擊此連結到 Bluehost、主機才有折扣喔!)

 

看到左上 WordPress 選項,選擇選單中的第一個 WordPress Hosting

WordPress 推薦虛擬主機 Bluehost

 

Bluehost WordPress 主機方案選擇

WordPress 推薦虛擬主機 BluehostBASIC、PLUS 方案主要差異為:

WordPress 主機 BASIC 方案WordPress 主機 PLUS 方案
架設一個網站可架設多個網站
可用硬碟空間 50GB硬碟空間沒有上限
免費網域一年免費網域一年
主機備份服務 (CHOICE PLUS)

 

三個方案的主機效能與速度都是一樣的,差異主要在 「BASIC 方案只能架設一個網站並且硬碟容量限制 50GB」,「PLUS 方案皆是無限容量、無限制網站架設」。

 

如無特殊需求,你應該只需要架設一個網站,50GB 的容量其實也挺足夠的了,我的部落格到現在還沒超過 30GB 的容量使用。建議可以選 BASIC 方案即可。

 

有些人可能有放影片的需求,會有空間會不會不夠的疑慮,但基本上現代網站的影片都是放在 Youtube 之類的第三方平台,再嵌入到網站上即可給訪客觀看,不佔主機硬碟空間,本文上方的影片也是這樣處理。

 

Bluehost 主機網址設定

方案皆有送一組網址,如果沒有網址,就在左邊的框框填入你想要的網址名稱,並下拉選擇要 .com、還是其他的域名,如果不知道怎麼選建議就使用 .com 就好。命名的部分上面有說明,這邊就不另外再說明。

第一年網址到期後,Bluehost 會寄信通知你並且自動續約,不須擔心一年後網址約到失效問題。網址一年的價格約為 16-19 美金左右,也就是 500 元新台幣上下。
WordPress 虛擬主機 Bluehost 設定網址
如果在這邊選了下方的 I’ll create my domain later,可以在網站建立後再決定網址,屆時點進購買網址雖然會顯示費用,進入結帳時就會將第一年費用直接扣免。(可參考步驟9
WordPress 虛擬主機 Bluehost 設定網址
如圖在右邊框框輸入網址名稱,再按下 Next

 

Bluehost 架設 WordPress 教學
如果像這樣跳到下一個步驟,出現一個綠色框框代表網域可以使用,如果停在同一頁出現黃色框框,那代表該網域名稱已經被註冊,請再想想其他的網址。

填寫主機註冊資訊

在綠色框框下面,接著填寫註冊表單。這邊要使用英文填寫,英文名字不是自己命名的那種,而是需正式中翻英,像是護照上使用的那種。不知道的可以到下面提供的網站做翻譯!地址也是一樣唷!

外文姓名中翻英系統

郵局地址中翻英系統

 

架設 WordPress 教學 註冊 bluehost

Bluehost 主機租貸時間選擇

接著往下拉會看到下圖的選項,打開下拉選單,可以看到有 12 個月(一年)、24個月(二年)、36個月(三年)的合約。一次租貸主機的時間越久平均每個月的使用費用就越便宜。

架設 WordPress 教學 註冊 bluehost
架設 WordPress 教學 註冊 bluehost
一年合約二年合約三年合約
$71.4 (台幣 2142 元 )$118.8 ( 台幣 3,564 元 )$142.2 ( 台幣 4,266 元 )
這邊美元以 30 元計算,現在美金匯率為 28 左右,因此實際價格會更便宜。
建議購買短約、一年至多兩年就好,因為網站有時都是會有一些變動的。假如一兩年後經營不錯,可能會在往更貴、更快的主機升級。又或是一年就覺得興味索然,不想經營了?這也很難說⋯⋯。

取消勾選 Bluehost 需要加錢的服務

接著再往下拉,這個 Package Extras 區塊的服務都是需要額外付費使用的,都把它取消勾選,否則你的總價格會變得很貴!而這些服務其實大多都是防毒之類的守護,只要做好備份其實不太需要。我自己網站也沒使用這類服務。

第一個 Domain Privacy 項目其實是提供隱藏註冊資訊的服務,別人無法查到網域的註冊者是誰,如果有特殊考量不能被知道網站的所有者是誰,那可以考慮使用,一個月的價格是 0.99 美元。

架設 WordPress 教學 註冊 bluehost

架設 WordPress 教學 註冊 bluehost
取消第一個項目時,會跳出這個視窗詢問確定要取消,請堅決按下右邊按鈕即可。

架設 WordPress 教學 註冊 bluehost

輸入結帳資訊、同意守則並完成主機設定

最後只需要填入信用卡,並完成結帳,就完成初步的 Bluehost 主機設定了!

架設 WordPress 教學 註冊 bluehost

 

完成主機購買,建立 Bluehost 帳戶

上個步驟送出後,如資料皆正確就看到下圖畫面。接著我們按下畫面中 Create your accout 的藍色按鈕,建立我們的 Bluehost 帳戶。

架設 WordPress 教學 註冊 bluehost

設定 Bluehost 帳戶密碼

這邊要注意的是,Bluehost 要求的密碼強度較高,不能隨意設定,有幾個要求一定要做到:

  • 至少八位數密碼
  • 至少一個大寫英文字母
  • 至少一個小寫英文字母
  • 至少一個數字
  • 至少一個特殊符號(!@#$%^&)

 設定完這個密碼記得記錄下來,否則一定會忘掉!也可以讓瀏覽器幫我們記憶,之後自動輸入即可。

架設 WordPress 教學 註冊 bluehost

 

架設 WordPress 教學 註冊 bluehost
設定完密碼會看到下圖的畫面,按下藍色按鈕 go to login 前往下個步驟
bluehost WordPress 主機設定教學
這個步驟就是要你登入嘍!帳號是網域名稱,應該已經自動幫你輸入,密碼則是你剛剛設定的密碼。

略過所有引導 WordPress 安裝精靈

登入後 Bluehost 會跳出很多引導,大多都是要幫助你安裝 WordPress 的,這些「我們進去後自己設定會比較好,因此全都按下略過」。

bluehost WordPress 主機設定教學
略過,不需要幫助
bluehost WordPress 主機設定教學
問你想做什麼類型的 WordPress 網站,一樣選略過
bluehost WordPress 主機設定教學
這是問你 WordPress 網站製作的經驗,一樣選略過
bluehost WordPress 主機設定教學
這一個是問你要安裝哪個版本的 WordPress,左邊是官方原版的、右邊是 Bluehost 開發的編輯器,但還在測試還不夠成熟,我們選擇原版的。
bluehost WordPress 主機設定教學
問你網站建立的目的,會推薦你 WordPress 外掛,略過!之後需要什麼自己裝就好,不需要此刻裝一些不一定會用到的。
bluehost WordPress 主機設定教學 主題套用
問你要不要預載哪個主題,這個進入 WordPress 之後也可以自己去安裝,如果現在就想裝其實也是可以!我是先略過。
架設 WordPress 教學 bluehost 詳細資料
總算登入 bluehost 了!然後馬上跳出推銷!這是要錢的,不要試用,免得之後忘了取消被扣錢,直接選下方關閉。
架設 WordPress 教學 bluehost 詳細資料
這個也是一樣,勾選右邊的選項後,按下紅色按鈕。

到信箱收 Bluehost 網域認證信

登入後,在繼續之前我們要先去收 Bluehost 寄來的信。請打開你剛剛用來註冊的電子信箱。確認是否有 Bluehost 寄來的信件。

 

架設 WordPress 教學 註冊 bluehost Whois 網址認證
應該會看到兩封 Bluehost 寄來的信件,先點擊 WHOIS 網域認證這封信
架設 WordPress 教學 註冊 bluehost Whois 網址認證
進去看到大大的綠色按鈕,點擊認證我們的網域信箱無誤
架設 WordPress 教學 註冊 bluehost Whois 網址認證
畫面會跳轉到 Bluehost 的網頁,看到 successfully 成功字樣,表示已經完成,可以將此頁關掉。

另一封信:Bluehost 主機資訊統合

另一封 Bluehost 所寄來的信是剛剛購買主機的收據,但不只是這樣,拉到信件下方你會看到一些關於主機的詳細資訊比較重要的有:

  • 網域名稱
  • Nameserver
  • FTP連線位址
  • FTP Username

有些現在暫時用不到,但假如哪天你想設定些什麼,需要用到的時候就可以來查看,建議將這封信保存起來。

架設 WordPress 教學 bluehost 詳細資料

架設 WordPress 教學 bluehost 詳細資料 nameserver ftp
信件下方統合了你租用的 Bluehost 主機的重要資訊

登入並將 WordPress 網站改為中文介面

透過 Bluehost 登入 WordPress 網站

到了這一步,我們的 WordPress 網站已經架設好了!但是我們還需要做一些設定讓網站更方便使用!首先教大家如何從 Bluehost 後台登入你的 WordPress 網站。

如果去收信,不知道 Bluehost 後台跑哪去的人,請重新到 Bluehost 網站 -> 右上角有一個 Login -> 輸入密碼登入後,就會進入後台了。
架設 WordPress bluehost 主機 後台使用教學
點選左邊的 My Sites ( 我的網站 )
架設 WordPress bluehost 主機 後台使用教學
在 My sites 你可以看到你的 WordPress 網站,點擊藍色按鈕進入
架設 WordPress bluehost 主機 後台使用教學
點擊右上角就可以登入你的 WordPress

將 WordPress 網站介面改為中文

Bluehost 安裝的 WordPress 預設為英文介面,幸好 WordPress 是支援多國語言的,我們只需要到 Setting -> General 中去將語言改為繁體中文即可。

架設 WordPress bluehost 主機 後台使用教學
透過 Bluehost 登入 WordPress 後,左邊選單下方找到 Setting 並點擊 General
架設 WordPress bluehost 主機 英文改成中文
找到 Site Language,預設為 English
架設 WordPress bluehost 主機 英文改成中文
打開下拉選單,拉到最下方找到繁體中文,選定後儲存設定

將 Bluehost 暫時網址改為正式網址

記得步驟4.10我們有去收 Bluehost 的信,一封 WHOIS 的網域認證信。網域認證後才能使用正式網址,因此 Bluehost 會先用暫時網址幫我們安裝網站。等到正式網址生效了,就可以把網站切換為正式網址啦!

Bluehost 更改正式網址,加 SSL Https
網站目前是使用 Bluehost 提供的暫時網址,冗長、且不好記憶!

確認正式網址是否生效

要確認正式網址是否生效,首先我們一樣先去收信。如果有看到 Bluehost 又寄給你一封 Domain … (中略) … completed 的信,代表你的網域已經認證完成!
Bluehost 更改正式網址,加 SSL Https

Bluehost 更改正式網址,加 SSL Https
點擊進入此封信,點擊信件內容提到的網域名稱(就是你的網址),看是否能正常瀏覽網站?

 

如果點擊網址,有出現如下畫面,表示正式網址已經啟動!這正是你的網站,這頁面是 Bluehost 為了怕你網站還沒準備好,零零落落的樣子被外界看到,而準備的 Coming Soon 畫面。

如果這邊你的網址無法順利瀏覽網站,請到步驟4.10 看是否有正確完成 WHOIS 認證。

 

Bluehost 更改正式網址,加 SSL Https
雖然網址能正式啟動,但網址被判定為不安全,主要是因為沒有啟用 SSL 認證

 

啟用 Bluehost 網址 Let’s Encrypt SSL 認證

一般主機要使用 SSL 過程還挺複雜的,甚至要花錢購買 SSL 憑證。幸好 Bluehost 幫我們整合好了 SSL 功能!且是免費的!我們到 Bluehost 的後台,My Sites -> WordPress 網站,點擊 Security 頁籤,再接著點擊 SSL 的開關!即可完成網址的加密!成為 https 網站嘍!

Let’s Encrypt SSL 雖然是免費提供,但三個月就要重新認證一次才能持續使用,但不用擔心,Bluehost 會自動幫你跟 Let’s Encrypt 續期,這也是用 Bluehost 架設 WordPress 的好處!

Bluehost 更改正式網址,加 SSL Https

將 WordPress 網站套用為正式網址

在 Security 打開 SSL 後,接著我們點擊 Setting 頁籤,會看到 Site URL 中的格子(可能只有一格、輸入更改後會變成兩格),將格子中的網址改為我們的正式網址。

EX:我的網址是 make9demo.com

http:// 而因為我們的網址有開啟 SSL 安全認證所以是加上 https://

因此格子中我要輸入的是:https://make9demo.com

如果有兩格兩格都要改,最後按下儲存。

 

Bluehost 更改正式網址,加 SSL Https
完成此步驟後,再去輸入網址,就可以看到「不安全」已經變成代表「安全加密」網站的「鎖頭」了

關閉 Coming Soon Page

是時候把 Bluehost 的暫時頁面關閉了,同樣在更改網址的 Setting 頁籤下方,有一個 Coming Soon Page 的選項,將它關閉為 OFF,再次輸入網址去觀看,就可以看到網站本身了。

Coming Soon Page 只對訪客顯現,如果你是「登入狀態的網站管理員」,並不會呈現這個臨時頁面,要看訪客的視角,可以開啟無痕視窗在輸入網址來測試。

Bluehost 更改正式網址,關閉 coming soon page

延伸閱讀:WordPress 網站的教學

恭喜你的 WordPress 網站已經架設完成!你可以開始經營、用 WordPress 主題妝點你的網站了。由於篇幅太長這邊就不再做基礎的教學,這部分請參考我另一篇文章,有從最簡單操作教起的 WordPress 基礎教學:

一學就會的 WordPress 極新手教學!最棒網站自己做

 

只要花點時間,將這幾隻不長的影片看完!你就有相當的基礎概念了!

 

另外我發現很多跟著教學完成的人,裝完 SSL 後,卻沒有關閉網站的 http 入口!請跟著此教學簡單幾個步驟完成關閉!只保留 https 入口!

安裝完 SSL 關掉沒有加密的入口!http 301 轉址到 https 網址

 

如果你已經有基礎概念,接著你可以依照你的網站屬性,選擇適合你的進階教學!看你是想架設部落格、還是官方網站,選擇適合你的教學!

WP 部落格 Blog 速度為上!首選 Astra 佈景主題!全教學

WordPress 使用 Elementor 教你完整做官方網站!免費影音教學

WordPress 最有設計感又強大的主題 Divi 中文教學

 

後續我還會陸續推出許多的教學影片,歡迎追蹤我的粉絲團,以得到最新的訊息喔!

WordPress 教學匯總:

WordPress 架站全攻略 網站從無到有 完整教學清單指南

BlueHost 主機常見問題

購買流程沒選網址,後續還能得到免費網址嗎?

如果你在購買流程選了下方的「稍後再設定網址」的話,Bluehost 會先將你的網站使用臨時網址安裝,並且給你的帳戶一張網址優惠券。確定網址名稱後,再到後台去選定網址,雖然選的時候會如同購買流程出現網址價格,但只要進到「結帳的流程」就會自動套用優惠券!會將第一年的網址價格全免!

Bluehost 各個方案速度有差異嗎?

除了 PRO 方案提供了更強的 CPU 之外,其他的方案速度沒有差異,差異主要是在限制,像是 BASIC 方案只能架設一個網站並有50GB容量限制(造九頑五本站到目前為止才用 20GB空間、以一個網站來說 50GB 挺夠的!),而 PLUS 以上的方案則無網站數量限制、無空間限制。不過對於新手大多只有一個網站需求,用 BASIC 即可。假如你想一次簽約多年得到優惠價格,認為之後可能會架設到第二個、第三格網站,就可以考慮購買 PLUS 以上的方案。而 CHOICE PLUS 方案比起 PLUS 則是又多了「自動備份的功能服務」。

Bluehost 品質推薦嗎?

Bluehost 身為 WordPress 官方所推薦的虛擬主機,不管在前後台對 WordPress 的優化上都是算水準之上的虛擬主機。對於新手我認為是很好的入門選擇!加上 WordPress 可攜的特性,新手一開始先選擇便宜、穩定的 Bluehost 是很推薦的選擇。後續如果追求更進階的主機,屆時可將 WordPress 網站整個搬家過去!

Bluehost 使用上速度覺得有點慢?

新手很容易忽略在安裝完 WordPress 網站後,要安裝「快取外掛」才能減輕主機負擔,讓 WordPress 的速度發揮出來!不過有些快取外掛在登入狀態是不會生效的(方便你測試最新改動),因此開「無痕視窗」來測試才最準確喔!至於後台操作是不會有快取效果的,所以慢一點是正常的。

 

Bluehost 購買流程跳過網址,後面如何設定免費第一年網址?

如果你在 4.2選擇「I’ll create my doamin later」跳過第一年免費網址的設定,你還是可以在後面取得這個屬於你的網址優惠。

 

只要正常用 Bluehost 的購買網域方式,在最後結帳的時候,會自動幫你套用優惠免除第一年的價格。

Bluehost 註冊跳過、後面取得第一年免費網域的方式

先登入你的 Bluehost 後台,在左邊的選單中找到 Domain 並選取「Purchase Domain 購買網域」。

Bluehost 購買註冊跳過網址 後面如何取得網址?

 

在搜尋框搜尋你想購買的網域,下面搜尋結果可以看到可購買的選擇和價格,只要不是特殊項目(價格會特別高),都可以套用優惠全免。

Bluehost 購買註冊跳過網址 後面如何取得網址?

 

決定購買的網址後,按下後面的購物車按鈕,再點選購物車跳出視窗後,點選前往結帳。

Bluehost 主機 免費網址取得及設定

 

由於他自動幫我們加入了隱私保護的加值服務、且網址和保護都各買了兩年,所以價格會變得特別貴,把隱私權保護取消、再把網址購買年調整為一年。

Bluehost 主機 免費網址取得及設定

 

調整好後,就可以看到價格回歸正常,如果有優惠券的(有購買主機方案,沒在步驟4.2選擇網址的)應該會直接套用變為 0 元免費購買。

Bluehost 主機 免費網址取得及設定
前面跳過沒輸入自選網址的,這邊應該會變零元,我因為只是示範,並無優惠券,所以是要錢的。

 

檢查/設定 Bluehost 網址分配給網站使用

上面購買好後,如果你無法將網址設定給網站用,可能是該網域還未分配給你的網站。回到 Bluehost 後台,選擇「My Domains」,檢查你的網址是不是灰色寫著「Unassigned 未分配」。

Bluehost 主機 分配網址給 WordPress 網站

 

如果是的話,點擊後方的 Manage 並選取第一個選項「Assign 分配」。

Bluehost 主機 分配網址給 WordPress 網站

 

接著會進到這個畫面,這些設定都不需要更改,直接往下拉選擇分配網址即可。

Bluehost 主機 分配網址給 WordPress 網站

Bluehost 主機 分配網址給 WordPress 網站

 

分配完成後,可以接6.3步驟的設定,將網站改為你的正式自選網址啦!

 

假如你還沒有設定網站?或是因為前面跳過網址,現在有點搞混不知道自己在哪了,你也可以重新來,現在開始設定一個新網站,請往下繼續看步驟10

 

Bluehost 如何建立一個新 WordPress 網站?

假如你已經建立 WordPress 網站,你想重來可以將原本的刪掉,重新建立一個。

刪除既有 WordPress 網站

登入 Bluehost 後台,選擇「My Sties」,已經有的 WordPress 網站會列在右邊,選取想要刪除的網站「Manage site 管理網站」。

Bluehost 主機 重新安裝 WordPress 網站

 

進去後上面頁籤切換到「Settings 設定」,然後往下拉找到 Delete Site 的區域,確認真的要刪除後再按下 Delete 按鈕刪除 WordPress 網站。

Bluehost 刪除 WordPress 網站 Bluehost 刪除 WordPress 網站

 

Bluehost 後台建立新的 WordPress 網站

刪除網站後,或是你是無限網站方案,都可以在這邊建立新的 WordPress 網站,登入 Bluehost 後台後點選「My Sites」再點選右邊「Add site 新增網站」。

Bluehost 主機 建立新 WordPress 網站

 

這邊建議安裝左邊官方原生的 WordPress 網站!

Bluehost 主機 建立新 WordPress 網站

 

這邊可以輸入你的網站名稱,和簡述,之後進入 WordPress 後台都可以再更改,可以先簡單輸入。

Bluehost 主機 建立新 WordPress 網站

 

接著的步驟重要的是選擇你的網址,下拉選擇你在 Bluehost 設定的自選網址。

如果是註冊流程未設定自選網址的,可以參考步驟9.1免費購買網址後、再做網址分配就能在這邊的下拉選單看到該網址!

Bluehost 建立新 WordPress 網站 分配網址

 

接著會問你想建立的 WordPress 網站類型,直接跳過就可以了,不須預裝一些程式。

Bluehost 建立設定新 WordPress 網站

 

接著網站就已經建立好,會告知你帳號密碼,可以記錄下來登入 WordPress 時候會用到,另外還有網站的前後台網址。

就算帳密、網址資訊都不記下,一樣可以直接從 Bluehost 後台免帳密登入 WordPress 後台。

Bluehost 建立設定新 WordPress 網站 帳號密碼

 

接著後面步驟跟前面正式教學一樣,可從步驟5.1開始。或從影片13:09 的地方開始觀看。

上一篇WordPress Divi 主題 繁體中文化,安裝子主題 下一篇WordPress 最有設計感又強大的主題 Divi 中文教學

WP近期優惠

WordPress 主機5/23 起漲價!把握最後三天機會!傳送門

WP近期優惠