WordPress 架站教學全攻略-15分鐘從無到有建立屬於自己的網站

WordPress架站配圖

看過了前面這篇 WordPress 建置超新手入門指南,這篇 WordPress 架站教學全攻略-15分鐘從無到有建立屬於自己的網站,就是他的實戰。

雖然說 15 分鐘,這邊指的是需要動手操作的時間,不含等待生效時間。

下面是需要事先準備好需要的材料:

  • 信用卡 – 付錢用
  • 一個信箱 – 收信與註冊使用
  • 你的地址、電話、英文姓名…等基本資訊 – 填資料用
  • 一台可以安全上網的電腦 – 確認好沒有中毒,避免資料被盜用
  • 可以安靜專心的環境 – 確保操作不要分神

先深呼吸,手抓緊滑鼠,準備起飛。

本篇教學為了讓大家都能更輕易理解,除了圖文並茂的教學外,還有專業的教學影片提供給大家進行參考,操作會分成三個主軸:

  1. 在 GoDaddy 購買網域名稱(Domain Name)
  2. 購買 Bluehost 的 WordPress 虛擬主機(Web Hosting)服務
  3. 設定 GoDaddy 所購買的網域名稱可以連到 Bluehost 所購買的服務

只要完成這三大步驟,就能輕鬆架站,完成一個屬於你自己的 WordPress 網站囉!

用簡單比喻就是如何買一棟房子,然後怎麼告訴大家你住哪邊,好來到你家作客的過程。

網域名稱是你家裏的門牌地址,虛擬主機則是打造一個給 WordPress 住的家,接著讓地址跟家關聯起來就完成了。

WordPress 架站教學全攻略影片

Step 1. WordPress 架站教學 – GoDaddy 買網域名稱

使用 GoDaddy 購買網域影片教學

Step 2. WordPress 架站教學 – Bluehost 買虛擬主機空間

Step 3. WordPress 架站教學 – 設定 GoDaddy 網域名稱伺服器

GoDaddy 買網域名稱

我們現在要來 GoDaddy 專門賣網域名稱(Domain Name)的店裡,挑選一個自己喜歡的網域名稱來使用。

如同前面這篇所說,網域名稱要夠好記憶,這邊就取名為 AsperLab.club 作為範例,示範給大家。

GoDaddy 帳號註冊

首先要到 GoDaddy 網站註冊一個帳號

進入 GoDaddy 網站示意圖
進入 GoDaddy 網站

到網站的右上方,點選”登入”,會出現一個下拉式選單,點選右邊的”建立我的帳戶”即可。

建立一個 GoDdaddy 帳號示意圖
建立一個 GoDdaddy 帳號

接著輸入你的電子郵件信箱、用戶名與密碼,密碼有規定強度限制,如果想不出好密碼,可以使用密碼產生器來產生一組密碼,最後再點選”建立帳戶”即可。

輸入信箱、使用者名稱與密碼示意圖
輸入信箱、使用者名稱與密碼

建立好帳戶之後,會帶到我的帳戶,裡面會顯示有買了什麼產品與服務,這邊因為都還沒有買,所以是空的不會有東西。

我的帳戶產品與服務資訊示意圖
我的帳戶產品與服務資訊

GoDaddy 購買網域

現在已經有 GoDaddy 帳戶後,我們接著要來買一組網域名稱(Domain Name)。

回到 GoDaddy 的首頁後,於搜尋框中輸入這邊輸入”asperlab”後,點選搜尋符號即可。

asperlab 要記得換成你喜歡的網域名稱喔,想個你喜歡的名稱輸入進去即可。

購買理想的網域名稱示意圖
購買理想的網域名稱

接著可以發現 GoDaddy 會推薦 asperlab.com.tw 在最上方,一年費用約為 1,070 元新台幣,下方則出現以 734 元新台幣加購 asper.tw 的網域名稱。

可以發現,其實購買網域名稱,也有點像是在養一個手機門號,有的人會花錢去挑選一個好記的手機號碼,網域名稱也是一樣的道理,只是種類更加多元化。

選購 asperlab 的網域名稱示意圖
選購 asperlab 的網域名稱

把畫面往下捲動,可以發現這邊的網域名稱前面都是 asperlab ,但是後面可以接的結尾五花八門,從 .com.tw 到 .shop、.vip、.club…等繁簇不及備載,這邊我們購買 .club 的名稱,第一年只要 37 元新台幣。

在 asperlab.club 的選項中,點”加入購物車”即可。

將 asperlab.club 加入購物車示意圖
將 asperlab.club 加入購物車

加入購物車後,會出現購物籃的側邊攔,可以選擇要買幾年,這邊選擇一年,接著再點選”前往購物車”的按鈕準備結帳。

在購物籃中調整購買年份示意圖
在購物籃中調整購買年份

GoDaddy 網域名稱加購服務

接著 GoDaddy 會推薦你買保護隱私的服務,正式網站會推薦購買,而這邊先不購買,所以選擇 “不,謝謝”,而下面的”免費建立您的網站”選項,可以不用選擇,因為我們本來就要自己建一個網站。

隱私服務與網站建立服務示意圖
隱私服務與網站建立服務

下面還有 GoDaddy 會推薦購買 Linux 虛擬主機、 email 服務,這邊也先都不做選擇。預設都是選擇”不,謝了”這個選項。

不過如果有需要, email 服務可以考慮加購,也就是過去我們常常在用免費的 OOO@gmail.com、OOO@yahoo.com.tw、OOO@outlook.com…等免費的信箱服務,但買了網域名稱之後,就可以使用 OOO@asperlab.club 這樣的專屬信箱,在觀感上會有一種截然不同的感覺。

Linux 虛擬主機服務與 email 服務選項示意圖
Linux 虛擬主機服務與 email 服務選項

確定都沒有問題以後,點選前往購物車

前往購物車示意圖
前往購物車

接著做最後確認,沒有問題就點選”結帳”按鈕即可。

結帳前確認示意圖
結帳前確認

GoDaddy 填寫付款資訊

接著要開始輸入帳單基本資訊,地址部分可使用中華郵政的地址翻譯系統,把地址翻譯成英文地址。

輸入帳單基本資訊示意圖
輸入帳單基本資訊

往下捲動後,可以發現還要填寫付款資訊,這邊使用信用卡方式付款,填寫完畢後點選”儲存”即可。

使用信用卡方式付款示意圖
使用信用卡方式付款

接著一樣會跳出一個確認購買畫面,檢查一下付款資訊、購買網域名稱的時間…等有沒有錯誤,沒有的話就點選”完成購買”即可。

完成購買畫面示意圖
完成購買畫面

購買成功後,畫面會轉到這個網域名稱的後台頁面,緊接著右上角會出現購買成功與收據提醒,我們點選”檢視收據”來確認一下。

購買完成後右上角會出現提示示意圖
購買完成後右上角會出現提示

GoDaddy 完成購買確認

點選檢視收據之後,會跳到”訂單紀錄”的頁面,不過我們發現他居然是空白的,沒關係,系統有時比較忙一點,等一下下後重新整理頁面就好。

管理帳單畫面示意圖
管理帳單畫面

重新整理一下頁面後,可以看見有一筆訂單出現了,點選訂單編號。

訂單出現畫面
訂單出現畫面

點選完訂單編號後會出現收據,確認一下收據有沒有錯誤即可。

收據確認畫面示意圖
收據確認畫面

確認完收據後,點選”訂閱”可以看到我們剛剛買的 asperlab.club 網域名稱,並且在”帳單日期”下方會顯示出到期日,而且很貼心的幫你開啟自動續約功能,只要信用卡不要過期,他都可以幫你自動繳費。

管理訂單

GoDaddy 驗證購買的網域

買好了網域,還有一件事情要做,就是驗證你真的是這個網域的擁有人,這邊驗證方式是使用電子郵件信箱驗證。

在 GoDaddy 的頁面中,點選”我的產品後”,再點 asperlab.club 進入。

點選產品頁面示意圖
點選產品頁面

接著再點選”我的網域”進入管理頁面。

網域頁面示意圖
網域頁面

出現我的網域畫面後,可以看到 asperlab.club 出現在網域欄位的下面,下一步的欄位則顯示”驗證聯絡人資訊”,點選”驗證聯絡人資訊”後,下面會出現一個綠字提示”Email sent”表示驗證信已寄出。

驗證聯絡人資訊示意圖
驗證聯絡人資訊

接著到信箱中收 GoDaddy 所寄來的驗證信,點”立即驗證電子郵件”即可完成。

驗證電子郵件

驗證完成後,點選”檢視我的網域”確認一下有沒有驗證成功。

GoDaddy 網域驗證成功

驗證成功之後,下一步的欄位中,會出現”使用我的網域”按鈕,如果還是出現”驗證聯絡人資訊”的話,稍等一下重新整理就會生效了。

我的網域狀態示意圖
我的網域狀態

以上就是買好一個網域的流程,是不是非常簡單呢?

Bluehost WordPress 虛擬主機服務購買

有了網域名稱這個門牌以後,接下來就是要來打造一個 WordPress 要住的家了。

Bluehost 帳號註冊

首先我們先到 Bluehost 網站,一樣先註冊一個帳號再說。

從 Bluehost 首頁近來註冊帳號示意圖
從 Bluehost 首頁近來註冊帳號

進入後,會有許多的頁面可以選,這邊選擇 Basic 即可,當然如果想要選更好的方案也可以。

Bluehost 方案選擇示意圖
Bluehost 方案選擇

這邊會出現兩個選項,左邊是建立一個新網域名稱之後,然後再購買虛擬主機服務(Web Hosting),而右邊則是使用自己購買網域名稱,這邊輸入 asperlab.club 後,接著點選 “Next” 即可。

輸入之前在 GoDaddy 所買的網域名稱示意圖
輸入之前在 GoDaddy 所買的網域名稱

Bluehost 跟 GoDaddy 雷同,在註冊帳號時都要填寫一些基本資料,同樣的,地址可以使用中華郵政來翻譯成英文。

建立 Bluehost 帳號所需填入資料示意圖
建立 Bluehost 帳號所需填入資料

接著選擇 Account Plan 要買幾年,買越久折扣數越多,這邊以一年為例,建議一次買好買滿買三年,一來可以逼自己下定決心要努力經營網站,二來折扣數也比較高,可以省不少。

再來 Package Extras 則是加購一些額外服務,其中 Codeguard Basic 在正式營運網站上推薦使用,備份有備無患,至於 SiteLock Security Essential 的服務,如果有做電子商務網站,會建議使用,增進資訊安全。

選擇購買方案與額外服務示意圖
選擇購買方案與額外服務

最後填寫信用卡資訊,填寫完成後,記得勾選同意使用服務條款,再點選”Submit”送出即可。

填寫付款資訊示意圖
填寫付款資訊

接著稍微等個幾秒鐘,就會出現購買成功的資訊了,這邊我們稍微確認一下購買的內容即可。

都沒問題的話,就點選”Create Account”建立一組帳號。

購買成功畫面示意圖
購買成功畫面

可以發現帳號已經幫你填好了,帳號是以網域名稱來登入,接著輸入密碼,並同意條款,最後點選”Create Account”即可。

建立密碼並建立帳號示意圖
建立密碼並建立帳號

接著建立完後,會出現下面這個畫面,點選”go to login”便可開始登入使用。

帳號建立完成示意圖
帳號建立完成

輸入剛剛所建立的帳號密碼後,點選”Log in”便可以使用 Bluehost 服務囉!

Bluehost 登入畫面示意圖
Bluehost 登入畫面

如此一來,我們帳號建立就大功告成了,接著要來建立 WordPress 網站囉!

Bluehost 中建立一個 WordPress 網站

登入後,映入眼簾的是一個建立網站的流程,簡單四個步驟,就可以把 WordPress 建立好囉!是不是很簡單呢?

第一步就是回答一下你要建立什麼網站、用途、觀眾,這邊範例選擇”Blog”、”Personal”、”Myself”,選好之後再點選”Continue”繼續。

WordPress 架站第一步的選擇資訊示意圖
WordPress 架站第一步的選擇資訊

接著就是問你會放些什麼素材到你的網站上面,這邊選擇”Blog”、”About me”,選完以後再點”Continue”即可。

網站資訊選擇示意圖
網站資訊選擇

接著填入你得網站名稱、還有一個類似副標題的文字,最後問你對於這些流程是否感到舒適,有點類似市調的概念,接著點選”Continue to Theme Selection”開始選擇主題囉!

網站名稱填選示意圖
網站名稱填選

接著要進入一個類似買衣服的概念,不過這是給 WordPress 來穿的,衣服有分成要錢跟不要錢的,然後還有很多種類可以選擇,當然這事後都能再調整,所以可以先隨便選一個順眼的即可。

看到喜歡的主題(Theme),把滑鼠移過去,點選”Use This Theme”就完成了。

WordPress 主題選擇示意圖
WordPress 主題選擇

選好主題後,便會開始安裝 WordPress 在 Bluehost 上面,這邊需要稍微等一下。

安裝 WordPress 於 Bluehost 上示意圖
安裝 WordPress 於 Bluehost 上

建立好之後,會自動把頁面轉到 Bluehost 的後台,可以看到紅框的網址,是 Bluehost 暫時給我們的 WordPress 網址。

設定完成後的 Bluehost 後台示意圖
設定完成後的 Bluehost 後台

接著我們來看看 WordPress 的後台設定狀況,在左邊欄點選”My Sites”後,滑鼠游標移動到網站上,接著點選”Log into WordPress”。

點選 My Sites 以進入 WordPress 後台示意圖
點選 My Sites 以進入 WordPress 後台

登入中,要稍微等一下。此時請不要做任何操作

登入中的畫面示意圖
登入中的畫面

登入後,後台就可以正常呈現囉!不過網址還是使用 Bluehost 暫時提供的為主,接下來就要來設定網址的部分了。

Bluehost 後台可正常呈現示意圖
Bluehost 後台可正常呈現

設定 GoDaddy 讓所買的網域名稱可正常連線

終於來到最後一階段,馬上就要完成了。

這段作業,主要是修改一個叫做網域名稱伺服器的設定,好像有點聽不懂?

網域名稱伺服器(Name Server)是什麼?

網域名稱伺服器簡單來說,假設你蓋了一棟飯店,飯店下面一般來說都會有櫃檯人員,告訴你住哪號房,而網域名稱伺服器(Name Server)就是在做這件事情。

跟你的訪客說,你住在哪個房間裡。

That’s all

因為我們的飯店是蓋在 Bluehost 上面,所以要使用 Bluehost 提供的飯店櫃檯,所以必須要在 GoDaddy 的後台中,設定 Bluehost 的飯店櫃檯位置,這樣訪客來問你房間在哪邊,GoDaddy 櫃台人員就會告訴你的訪客,請洽 Bluehost 櫃台。

所以你的訪客輸入網址之後,就會去找 Bluehost 所提供的櫃檯,讓 Bluehost 櫃台告訴你的房間在哪裡了。

這樣有沒有很容易理解呢?

GoDaddy 網域名稱伺服器設定

設定之前,我們先記錄一下 Bluehost 的網域名稱伺服器的地址,設定到 GoDaddy 上面後,這樣 GoDaddy 才知道要怎麼跟訪客說怎麼走,才能找到 Bluehost 的櫃台。

登入 Bluehost 後台,先在左邊欄點選”Domains”。

登入 Bluehost 後台

接著點選 “Manage” 按鈕進入管理介面

Bluehost 管理介面示意圖
Bluehost 管理介面

接著再把 Name Servers 欄位下的網址給複製起來,分別為 ns1.bluehost.com 與 ns2.bluehost.com 兩個。

至於為什麼要兩組呢?萬一一個櫃台服務人員請假了,至少還有第二個櫃台可提供服務。

Bluehost Domains 管理介面示意圖
Bluehost Domains 管理介面

接著登入 GoDaddy 的後台,點選 asperlab.club 的 DNS 按鈕。

進入 GoDaddy 後台示意圖
進入 GoDaddy 後台

往下捲動,會發現網域名稱伺服器的設定,點選”變更”以修改設定。

找到 DNS 網域名稱伺服器設定示意圖
找到 DNS 網域名稱伺服器設定

接著點選”輸入我自己的名稱伺服器(進階)”以進入設定畫面。

網域名稱伺服器設定示意圖
網域名稱伺服器設定

接著把之前在 Bluehost 中的 Name Servers 的網址 ns1.bluehost.com 與 ns2.bluehost.com 貼上,再點選”儲存”。

設定網域名稱伺服器示意圖
設定網域名稱伺服器

由於這個設定,可能造成既有網站中斷對外服務,所以會跳出警告,不過因為是新的,不會有這問題,所以勇敢的點選”Yes,….”,再點選”繼續”即可。

修改網域名稱伺服器確認示意圖
修改網域名稱伺服器確認

接著 GoDaddy 的 DNS 管理後台會很貼心的告知,在生效這段期間,可能有部分功能無法使用,但我們也沒使用到什麼功能,因此不用過於擔心。

至於電子郵件部分,並沒有需要確認的,如果擔心的話,可以開啟信箱看看有沒有相關提示。

網域名稱伺服器生效中示意圖
網域名稱伺服器生效中

大概要等 15 – 30 分鐘左右才會設定生效,這段期間可以喝杯咖啡休息一下。

成功之後,網域名稱伺服器就會變成 Bluehost 的了。

GoDaddy 網域名稱伺服器生效完成示意圖
GoDaddy 網域名稱伺服器生效完成示意圖

Bluehost 確認設定是否生效成功

接下來鏡頭交還給 Bluehost 部分。

可以發現原本暫時的網址,變成了我們在 GoDaddy 所購買的網址。

Bluehost 生效成功示意圖
Bluehost 生效成功

接著點選”My Sites”可以發現網站的網址也同步修改完成,讓我們點選”Log into WordPress”來看看是否功能正常。

Bluehost 網站管理後台示意圖
Bluehost 網站管理後台

如此一來,就設定大功告成了,WordPress 後台進入的網址也是我們買的 asperlab.club 網域名稱。

不過要注意的是,當 GoDaddy 生效後,也要等 Bluehost 設定自動生效,兩者加起來建議等候 30 分鐘,簡單說當你設定好 GoDaddy 的網域名稱伺服器設定後,就可以去做點其他事情,晚點回來確認就好囉!

常見問題 Q&A

WordPress 首頁一直出現 Coming Soon 畫面

預設 WordPress 首頁畫面示意圖
預設 WordPress 首頁畫面

其實 Bluehost 有一個很貼心的功能,當你的網站尚未正式啟動服務前,會使用這個畫面作為提醒,當網站建立好了之後,這個功能就能關掉囉。

首先到 “My Sites” 後,接著選擇”Manage site”中的 “Settings”

Bluehost 設定示意圖
Bluehost 設定示意圖

再來就是把這個 Coming Soon Page 的開關給關起來就可以了

把這個選項關閉示意圖
把這個選項關閉

WordPress 有沒有辦法調整成中文介面?

可以的,在 WordPress 後台中,到 Settings 內,只要依照下圖指示調整即可,調整好後,到頁面最下方點選”Save Changes” 即可完成。

WordPress 設定語言後台示意圖
WordPress 設定語言後台

Bluehost 網址仍為暫時的網址怎麼辦?

  1. Bluehost 可能還沒有完全生效
  2. GoDaddy 設定 Bluehost 的網域名稱伺服器錯誤
  3. Bluehost 內部錯誤

如果是前面兩點,第一點可以再等一段時間確認即可,因為網域名稱主機生效時間,最長是 48 小時才會完全生效。

第二點部分,則是在重新修改一次 GoDaddy 的網域名稱伺服器設定即可。

第三點比較麻煩一點,可以先透過手動方式試試看,前提是前面兩者問題都排除與確認過無誤,可以先修改下圖網址設定,在連線看看是否正常。

到 “My Sites” 後,接著選擇”Manage site”中的 “Settings”,直接修改”Site URL”設定值為 https://asperlab.club 再點選”Save Updates”即可。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *