本篇文章帶你從無到有,一步一步的完成 WordPress 網站架設,使用 WordPress 推薦的虛擬主機 BlueHost,來完成 WordPress 的架設。「過程不需要程式、任何人皆可跟著步驟完成」!
內容索引
自己做網站你必須準備的網站三大要素
架設 WordPress 網站必備三要素 | ||
網域名稱(網址) | 網站主機伺服器 | WordPress 主題(網站設計) |
網域名稱的準備
如果你已經有網域(網址),可以直接跳到第二步驟 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
Bluehost WordPress 主機方案選擇
BASIC、PLUS 方案主要差異為:
WordPress 主機 BASIC 方案 | WordPress 主機 PLUS 方案 |
架設一個網站 | 可架設多個網站 |
可用硬碟空間 50GB | 硬碟空間沒有上限 |
免費網域一年 | 免費網域一年 |
無 | 主機備份服務 (CHOICE PLUS) |
三個方案的主機效能與速度都是一樣的,差異主要在 「BASIC 方案只能架設一個網站並且硬碟容量限制 50GB」,「PLUS 方案皆是無限容量、無限制網站架設」。
如無特殊需求,你應該只需要架設一個網站,50GB 的容量其實也挺足夠的了,我的部落格到現在還沒超過 30GB 的容量使用。建議可以選 BASIC 方案即可。
有些人可能有放影片的需求,會有空間會不會不夠的疑慮,但基本上現代網站的影片都是放在 Youtube 之類的第三方平台,再嵌入到網站上即可給訪客觀看,不佔主機硬碟空間,本文上方的影片也是這樣處理。
Bluehost 主機網址設定
方案皆有送一組網址,如果沒有網址,就在左邊的框框填入你想要的網址名稱,並下拉選擇要 .com、還是其他的域名,如果不知道怎麼選建議就使用 .com 就好。命名的部分上面有說明,這邊就不另外再說明。
填寫主機註冊資訊
在綠色框框下面,接著填寫註冊表單。這邊要使用英文填寫,英文名字不是自己命名的那種,而是需正式中翻英,像是護照上使用的那種。不知道的可以到下面提供的網站做翻譯!地址也是一樣唷!
Bluehost 主機租貸時間選擇
接著往下拉會看到下圖的選項,打開下拉選單,可以看到有 12 個月(一年)、24個月(二年)、36個月(三年)的合約。一次租貸主機的時間越久平均每個月的使用費用就越便宜。
一年合約 | 二年合約 | 三年合約 |
$71.4 (台幣 2142 元 ) | $118.8 ( 台幣 3,564 元 ) | $142.2 ( 台幣 4,266 元 ) |
這邊美元以 30 元計算,現在美金匯率為 28 左右,因此實際價格會更便宜。 |
取消勾選 Bluehost 需要加錢的服務
接著再往下拉,這個 Package Extras 區塊的服務都是需要額外付費使用的,都把它取消勾選,否則你的總價格會變得很貴!而這些服務其實大多都是防毒之類的守護,只要做好備份其實不太需要。我自己網站也沒使用這類服務。
輸入結帳資訊、同意守則並完成主機設定
最後只需要填入信用卡,並完成結帳,就完成初步的 Bluehost 主機設定了!
完成主機購買,建立 Bluehost 帳戶
上個步驟送出後,如資料皆正確就看到下圖畫面。接著我們按下畫面中 Create your accout 的藍色按鈕,建立我們的 Bluehost 帳戶。
設定 Bluehost 帳戶密碼
這邊要注意的是,Bluehost 要求的密碼強度較高,不能隨意設定,有幾個要求一定要做到:
- 至少八位數密碼
- 至少一個大寫英文字母
- 至少一個小寫英文字母
- 至少一個數字
- 至少一個特殊符號(!@#$%^&)
設定完這個密碼記得記錄下來,否則一定會忘掉!也可以讓瀏覽器幫我們記憶,之後自動輸入即可。
略過所有引導 WordPress 安裝精靈
登入後 Bluehost 會跳出很多引導,大多都是要幫助你安裝 WordPress 的,這些「我們進去後自己設定會比較好,因此全都按下略過」。
到信箱收 Bluehost 網域認證信
登入後,在繼續之前我們要先去收 Bluehost 寄來的信。請打開你剛剛用來註冊的電子信箱。確認是否有 Bluehost 寄來的信件。
另一封信:Bluehost 主機資訊統合
另一封 Bluehost 所寄來的信是剛剛購買主機的收據,但不只是這樣,拉到信件下方你會看到一些關於主機的詳細資訊比較重要的有:
- 網域名稱
- Nameserver
- FTP連線位址
- FTP Username
有些現在暫時用不到,但假如哪天你想設定些什麼,需要用到的時候就可以來查看,建議將這封信保存起來。
登入並將 WordPress 網站改為中文介面
透過 Bluehost 登入 WordPress 網站
到了這一步,我們的 WordPress 網站已經架設好了!但是我們還需要做一些設定讓網站更方便使用!首先教大家如何從 Bluehost 後台登入你的 WordPress 網站。
將 WordPress 網站介面改為中文
Bluehost 安裝的 WordPress 預設為英文介面,幸好 WordPress 是支援多國語言的,我們只需要到 Setting -> General 中去將語言改為繁體中文即可。
將 Bluehost 暫時網址改為正式網址
記得步驟4.10我們有去收 Bluehost 的信,一封 WHOIS 的網域認證信。網域認證後才能使用正式網址,因此 Bluehost 會先用暫時網址幫我們安裝網站。等到正式網址生效了,就可以把網站切換為正式網址啦!
確認正式網址是否生效
要確認正式網址是否生效,首先我們一樣先去收信。如果有看到 Bluehost 又寄給你一封 Domain … (中略) … completed 的信,代表你的網域已經認證完成!
如果點擊網址,有出現如下畫面,表示正式網址已經啟動!這正是你的網站,這頁面是 Bluehost 為了怕你網站還沒準備好,零零落落的樣子被外界看到,而準備的 Coming Soon 畫面。
如果這邊你的網址無法順利瀏覽網站,請到步驟4.10 看是否有正確完成 WHOIS 認證。
啟用 Bluehost 網址 Let’s Encrypt SSL 認證
一般主機要使用 SSL 過程還挺複雜的,甚至要花錢購買 SSL 憑證。幸好 Bluehost 幫我們整合好了 SSL 功能!且是免費的!我們到 Bluehost 的後台,My Sites -> WordPress 網站,點擊 Security 頁籤,再接著點擊 SSL 的開關!即可完成網址的加密!成為 https 網站嘍!
將 WordPress 網站套用為正式網址
在 Security 打開 SSL 後,接著我們點擊 Setting 頁籤,會看到 Site URL 中的格子(可能只有一格、輸入更改後會變成兩格),將格子中的網址改為我們的正式網址。
EX:我的網址是 make9demo.com
http:// 而因為我們的網址有開啟 SSL 安全認證所以是加上 https://
因此格子中我要輸入的是:https://make9demo.com
如果有兩格兩格都要改,最後按下儲存。
關閉 Coming Soon Page
是時候把 Bluehost 的暫時頁面關閉了,同樣在更改網址的 Setting 頁籤下方,有一個 Coming Soon Page 的選項,將它關閉為 OFF,再次輸入網址去觀看,就可以看到網站本身了。
延伸閱讀:WordPress 網站的教學
恭喜你的 WordPress 網站已經架設完成!你可以開始經營、用 WordPress 主題妝點你的網站了。由於篇幅太長這邊就不再做基礎的教學,這部分請參考我另一篇文章,有從最簡單操作教起的 WordPress 基礎教學:
只要花點時間,將這幾隻不長的影片看完!你就有相當的基礎概念了!
另外我發現很多跟著教學完成的人,裝完 SSL 後,卻沒有關閉網站的 http 入口!請跟著此教學簡單幾個步驟完成關閉!只保留 https 入口!
安裝完 SSL 關掉沒有加密的入口!http 301 轉址到 https 網址
如果你已經有基礎概念,接著你可以依照你的網站屬性,選擇適合你的進階教學!看你是想架設部落格、還是官方網站,選擇適合你的教學!
WP 部落格 Blog 速度為上!首選 Astra 佈景主題!全教學
WordPress 使用 Elementor 教你完整做官方網站!免費影音教學
WordPress 最有設計感又強大的主題 Divi 中文教學
後續我還會陸續推出許多的教學影片,歡迎追蹤我的粉絲團,以得到最新的訊息喔!
WordPress 教學匯總:
WordPress 架站全攻略 網站從無到有 完整教學清單指南
BlueHost 主機常見問題
購買流程沒選網址,後續還能得到免費網址嗎?
Bluehost 各個方案速度有差異嗎?
Bluehost 品質推薦嗎?
Bluehost 使用上速度覺得有點慢?
Bluehost 購買流程跳過網址,後面如何設定免費第一年網址?
如果你在 4.2選擇「I’ll create my doamin later」跳過第一年免費網址的設定,你還是可以在後面取得這個屬於你的網址優惠。
只要正常用 Bluehost 的購買網域方式,在最後結帳的時候,會自動幫你套用優惠免除第一年的價格。
Bluehost 註冊跳過、後面取得第一年免費網域的方式
先登入你的 Bluehost 後台,在左邊的選單中找到 Domain 並選取「Purchase Domain 購買網域」。
在搜尋框搜尋你想購買的網域,下面搜尋結果可以看到可購買的選擇和價格,只要不是特殊項目(價格會特別高),都可以套用優惠全免。
決定購買的網址後,按下後面的購物車按鈕,再點選購物車跳出視窗後,點選前往結帳。
由於他自動幫我們加入了隱私保護的加值服務、且網址和保護都各買了兩年,所以價格會變得特別貴,把隱私權保護取消、再把網址購買年調整為一年。
調整好後,就可以看到價格回歸正常,如果有優惠券的(有購買主機方案,沒在步驟4.2選擇網址的)應該會直接套用變為 0 元免費購買。
檢查/設定 Bluehost 網址分配給網站使用
上面購買好後,如果你無法將網址設定給網站用,可能是該網域還未分配給你的網站。回到 Bluehost 後台,選擇「My Domains」,檢查你的網址是不是灰色寫著「Unassigned 未分配」。
如果是的話,點擊後方的 Manage 並選取第一個選項「Assign 分配」。
接著會進到這個畫面,這些設定都不需要更改,直接往下拉選擇分配網址即可。
分配完成後,可以接6.3步驟的設定,將網站改為你的正式自選網址啦!
假如你還沒有設定網站?或是因為前面跳過網址,現在有點搞混不知道自己在哪了,你也可以重新來,現在開始設定一個新網站,請往下繼續看步驟10。
Bluehost 如何建立一個新 WordPress 網站?
假如你已經建立 WordPress 網站,你想重來可以將原本的刪掉,重新建立一個。
刪除既有 WordPress 網站
登入 Bluehost 後台,選擇「My Sties」,已經有的 WordPress 網站會列在右邊,選取想要刪除的網站「Manage site 管理網站」。
進去後上面頁籤切換到「Settings 設定」,然後往下拉找到 Delete Site 的區域,確認真的要刪除後再按下 Delete 按鈕刪除 WordPress 網站。
Bluehost 後台建立新的 WordPress 網站
刪除網站後,或是你是無限網站方案,都可以在這邊建立新的 WordPress 網站,登入 Bluehost 後台後點選「My Sites」再點選右邊「Add site 新增網站」。
這邊建議安裝左邊官方原生的 WordPress 網站!
這邊可以輸入你的網站名稱,和簡述,之後進入 WordPress 後台都可以再更改,可以先簡單輸入。
接著的步驟重要的是選擇你的網址,下拉選擇你在 Bluehost 設定的自選網址。
接著會問你想建立的 WordPress 網站類型,直接跳過就可以了,不須預裝一些程式。
接著網站就已經建立好,會告知你帳號密碼,可以記錄下來登入 WordPress 時候會用到,另外還有網站的前後台網址。
接著後面步驟跟前面正式教學一樣,可從步驟5.1開始。或從影片13:09 的地方開始觀看。
在這裡,所有的學習內容都是免費的。
如果這讓你感到滿意,一杯咖啡能讓我們走得更遠。
嗨!歡迎來到造九 😊 打聲招呼吧!