WordPress 快速架站教學:不懂程式碼也能自學製作網頁 ⚡

在這篇「WordPress 快速架站教學」,我會帶你用 8 分鐘快速學會如何自己建立網站。
就算不會寫程式也沒問題,只要 5 大步驟就能建立自己的網站,想要自學架設 WordPress 網站的話看這篇筆記就對了!
那事不宜遲,我們現在就開始吧!
如果你偏好用影片學習,歡迎觀看下面的 YouTube 影片。
如果你喜歡透過圖文學習,請繼續往下閱讀吧!
圖文版會比較詳細、方便快速瀏覽,還會持續更新與補充內容。
步驟 1:註冊域名 & 租用 Bluehost 主機
使用諾特斯觀眾專屬優惠連結
首先,點擊下方的諾特斯觀眾專屬連結,就可以用全網最優惠的 25 折價格租用 Bluehost 主機。
Bluehost 操作介面簡單,又有 24 小時真人客服,是 CP 值很高的新手入門主機首選!
註冊域名與租用主機空間
項目 | BASIC 方案 (基本方案) | CHOICE PLUS 方案 (優選加值方案) | ONLINE STORE 方案 (網路商店方案) | PRO 方案 (專業方案) |
---|---|---|---|---|
諾特斯觀眾 專屬優惠價格 | 每月 $1.99 美金 (約 $60 台幣) | 每月 $3.99 美金 (約 $120 台幣) | 每月 $7.45 美金 (約 $224 台幣) | 每月 $9.99 美金 (約 $300 台幣) |
網站數量 | 10 | 50 | 50 | 100 |
儲存空間 | 10 GB | 50 GB | 50 GB | 100 GB |
同時可負荷 流量 | 10 位 | 500 位 | 500 位 | 1000 位 |
適合的 網站流量 (每月) | 4 萬訪客 | 20 萬訪客 | 20 萬訪客 | 40 萬訪客 |
1 年 免費域名 | ✔️ | ✔️ | ✔️ | ✔️ |
免費 SSL 憑證 | ✔️ | ✔️ | ✔️ | ✔️ |
免費 CDN | ✔️ | ✔️ | ✔️ | ✔️ |
全天候 客服支援 | ✔️ | ✔️ | ✔️ | ✔️ |
電話支援 | ✔️ | ✔️ | ✔️ | |
網站備份 | 每日備份 (第 1 年免費) | 自動化即時備份 | 每日備份 (第 1 年免費) | |
其他 | 最便宜的 入門選擇 | 自動安裝 WooCommerce |
(使用 諾特斯觀眾專屬優惠 )
備註:
台幣價格是用美金兌台幣匯率 30 來估算。不過,因為匯率會隨時間浮動,實際的台幣價格還是要看交易時的匯率喔。
第 1 步
新手的話,我會建議先從最便宜的「Basic」方案開始,點擊「Select」(選擇)。

第 2 步
輸入想註冊的域名,然後按「Search For Domain」(搜尋域名)。

第 3 步
確認「CART」(購物車) 裡的內容,目前會看到 4 個項目:
第 1 項「WordPress Basic Hosting」(WordPress 基本主機服務),我推薦選擇折扣力度最大的一年期,價格是一年 $23.88 美金 (約 $716 台幣)。

第 2 項,「.COM Domain」(.COM 域名)。因為 Bluehost 贈送了一年免費域名,所以費用是 0 元。

剩下的「Domain Privacy + Protection」(域名隱私保護) 跟「Professional Email」(專業電子郵件),經過我們團隊實測,發現之後在 Bluehost 後台購買 會更便宜。

第 4 步
我們先刪除掉這兩個項目,未來有需要的時候再加購就好。
點擊「垃圾桶」圖示。

第 5 步
選擇「REMOVE FROM CART」(從購物車移除)。

第 6 步
點擊「CONTINUE TO CHECKOUT」(繼續結帳)。

第 7 步
填寫域名註冊者的英文聯絡資訊,「取消勾選」同意寄送促銷訊息。

第 8 步
在「Account Information」(帳戶資訊) 設定登入 Bluehost 的密碼。

第 9 步
在最下方的「Billing Information」(帳單資訊) 填寫付款資料。

第 10 步
在右側的「Order Summary」(訂單摘要) 確認最終金額,包括了主機費用和 5% 的加值營業稅,總共 $25.07 美金 (約 $752 台幣)。
按下藍色按鈕「SUBMIT PAYMENT」(提交付款),完成主機的租用。

Bluehost 會自動在主機上幫我們安裝免費 WordPress 軟體。


收取域名聯絡資訊確認信
到註冊時填寫的 Email 信箱,找到主旨寫著「Alert: Keep Your Domain Active」(提醒:保持你的域名活躍) 的「域名聯絡資訊確認信」。

點擊信件中的橘色按鈕「CONFIRM EMAIL ADDRESS」(確認電子郵件地址)。

當看到「Your Email is Confirmed」(你的電子郵件已確認),就表示已完成驗證。
然後耐心等待幾個小時到 1 天的時間,Bluehost 會自動完成域名和主機的 DNS 指向設定,並為網站安裝免費 SSL 憑證。
你可以先休息一下,晚點再回來進行下個步驟。

步驟 2:調整 WordPress 基本設定
等待幾個小時後再回來,從 Bluehost 後台點擊「EDIT SITE」(編輯網站)。

可以看到網址列中先前註冊的域名生效了。

選擇畫面底部的「I’m following a tutorial, take me to the WP Admin Dashboard」(我正在跟著教學,帶我前往 WordPress 後台),直接進入 WordPress 後台。

WordPress 一般設定
第 1 步
點擊左側欄位的「Settings」(設定)、「General」 (一般)。

第 2 步
找到「Site Language」(網站語言),選擇「繁體中文」。

第 3 步
再點擊「Save Changes」(儲存變更)。

介面變成中文,操作就更直覺方便了。

第 4 步
繼續修改「網站標題」跟「網站說明」,也就是網站的名稱跟簡介,它們會顯示在搜尋結果和瀏覽器的標籤頁中。

第 5 步
調整時區以及時間、日期的顯示格式。
- 時區:依你的所在位置填寫 (範例:台北)
- 日期格式:「Y 年 n 月 j 日」(範例:2024 年 8 月 21 日)
- 時間格式:「a g:i」(範例:上午 2:17)

第 6 步
點擊「儲存設定」。

步驟 3:修改網站設計
安裝 Blocksy 佈景主題
第 1 步
左側欄位切換到「外觀」、「佈景主題」。

透過修改佈景主題,我們可以輕鬆地更換網站的版型、設計。

在試用過各種佈景主題之後,我最推薦免費的 Blocksy 主題!
這個主題風格簡約,但功能非常強大,這個「諾特斯網站」也是使用 Blocksy 主題製作的。

第 2 步
點擊下方連結,前往 Blocksy 官方網站。
第 3 步
點擊網頁右上角的「Free Download」(免費下載)。

第 4 步
點擊「Download」(下載) 取得 zip 檔。

第 5 步
回到 WordPress 後台,點擊「Upload」(上傳)。

第 6 步
將下載到的 zip 檔拖曳進來。

第 7 步
點擊「立即安裝」。

第 8 步
安裝完成後,點擊「啟用」。

第 9 步
另外再安裝附加外掛 Blocksy Companion,可以讓 Blocksy 主題的功能更進化。

套用模板 (入門網站)
網站的版型可以點擊「入門網站」,套用主題提供的現成模板,來節省設計的時間。

我挑選的是「Blog」(部落格) 分類裡的「News」(新聞)。
點「預覽」可以看到,它的版面簡潔,頁首、頁尾、資訊欄這些網站基本要素齊全,適合新手使用。


第 1 步
點擊「匯入」來套用模板。

第 2 步
安裝子佈景主題「打勾」,點擊「下一個」。

第 3 步
再次點擊「下一個」。

第 4 步
點擊「安裝」匯入模板。

編輯頁首、頁尾
第 1 步
模板成功匯入後,點擊「自訂器」,前往自訂器介面。

在自訂器中,可以調整網站的版型、設計。

第 2 步
滑鼠移到頁首的 LOGO 上,點擊彈出的「三個點」圖示,叫出「標誌」選項。

第 3 步
選擇標誌的「編輯」。

第 4 步
將自己的 LOGO 圖片拖曳進來上傳。

第 5 步
按「Select」(選擇) 來替換。

第 6 步
為了保持畫面簡潔,頁首我只會保留標誌跟選單。
所以要在畫面下方的編輯器,將其他元素都一一按「✕」刪除。

第 7 步
向下滑到最底部的頁尾,我只會留下版權聲明。
點擊「編輯」,也是一樣刪掉不需要的元素。


第 8 步
再點擊「版權」。

第 9 步
修改版權文字,通常會寫成以下形式:
版權所有© + 年份 + 品牌名稱

我再來提倡一個諾特斯觀眾之間的小默契,你可以在頁尾的地方,加上「✏️」這個 Emoji,也就是諾特斯觀眾的秘密記號。
有加這個秘密記號的人,都有著一段看諾特斯的影片或文章,架設網站的共同回憶。
以後看到頁尾有這個秘密記號的網站,就知道是自己人,大家可以互相照顧一下。

其實在自訂器中,除了我示範操作的項目以外,還有非常多可以修改的細節,大家有時間可以多探索看看,打造出自己風格的網站設計。
第 10 步
完成設計後,按左上的「發佈」儲存設定。

第 11 步
最後,按「✕」退出自訂器。

步驟 4:發佈第 1 篇文章
網站的外觀設計都搞定後,接下來要來發佈網站的第 1 篇文章。
刪除預設文章
第 1 步
從左側欄位切換到「文章」、「全部文章」。

第 2 步
「全選」安裝模板時匯入的預設文章。

第 3 步
按「批次操作」,選擇「移至回收桶」。

第 4 步
點擊「套用」把它們都刪除。

編輯文章
點擊「新增文章」,打開 WordPress 編輯器。

WordPress 編輯器的使用方式其實跟 Word 之類的文書軟體差不多,最上面要輸入標題。

下方輸入文章內容,文字可以變更對齊、顏色、粗體等等的設定。

插入圖片
除了文字,文章中也可以插入圖片做搭配,增添內容的多樣性。
第 1 步
點擊「+」,選擇「圖片」。

第 2 步
選擇「媒體庫」。

第 3 步
拖曳圖片檔案上傳。

第 4 步
點擊「選取」,將圖片加入文章中。


這次只簡單說明圖文的編輯方式,其實編輯器裡還有很多不同功能的區塊可以運用,等著大家以後去挖掘!
發佈文章
文章寫好了,就按右上角的「發佈」。

再按一次「發佈」做確認。

跳出的視窗選「Publish without launching」(發佈但不啟動),表示將文章先發佈到網站上,但網站目前尚未公開。

步驟 5:公開網站
終於來到最後 1 個步驟了!
按右上角的「WordPress」圖示回到後台。

點擊右上角的「Site Status: NOT LIVE」(網站狀態:未上線)。

把「Coming Soon page」(即將上線頁面) 選項「關閉」,就能把網站公開到網路上了。

如此一來,在任何瀏覽器的網址列輸入你的域名,都可以訪問你的網站,看到你寫的文章囉!

結語:跟著諾特斯快速架站
以上就是如何快速建立網站的方法,是不是很簡單呢?
如果你想知道更多有關網站架設的細節,歡迎觀看我用心製作的其他 WordPress 筆記。
希望這樣的教學對你有所幫助,祝你架站一切順利!
參考資料
- How to Make a Website in 10 Minutes in 2024 (Simple & Easy)
- Bluehost WordPress Tutorial 2023 For Beginners [The EASY Way]
- How to Make a Website in 10 Minutes | Easy & Simple 2023
- How to Build a Website with WordPress 2024 (COMPLETE Tutorial)
- How to Create a WordPress Website with Bluehost – in 10 Minutes!
製作團隊
總編輯、發佈:諾特斯
文字撰寫、文字編輯、圖片製作、圖片編輯:鹹魚
圖片製作:蚊子