開始架設 WordPress 網站完整教學

林育正 Riven

圖文詳解步驟全攻略,最適合新手架站跟著做!

我是設計師 Riven,平常除了講授 UI/UX 設計技巧之外,偶爾也會到大學去分享 WordPress 架站教學,期待能透過這篇整理,讓架網站成為每個人日常具備的技能,一起沈浸在設計與開發的樂趣中,如果喜歡這篇文章可以給予最多 50 下的拍手以及追蹤我的 Medium 😉

架設網站的主機一直都是許多朋友跨不出去的門檻,的確在以前網站開發是個需要不少前置作業與專業知識的技能,但在今天已經有許多方便的工具及流程能讓我們更快上手,這篇文章會分享的是如何在一小時操作時間內,用不到 $3,000 台幣的預算,購買自己的網域並完成 WordPress 網站的架設。


📨 最新消息 「RAR 設計學院 Beta 版網站上線囉!」

終於弄好了 😔 ~~ 這是我自己架設的線上學習網站, 目標是之後想讓讀者們能夠透過較完整的形式學習不同的設計技巧,但目前尚在開發測試中,想邀請勇者們來幫忙看看,首發課程 《零、購買網站主機、域名與架設》 透過以下連結將可免費註冊,有興趣架設網站的朋友可以趁現在觀看。


我要開始架一個網站,需要什麼東西?

要買一台主機放網站的東西,然後買個屬於你的網域來指向。

☑️ 主機

拿來放置網站包括程式、圖片等的資料與檔案,每年費用成本約為 $5,000 ~ $數萬元不等,租賃虛擬主機來用會較適合,網站架設完成後也尚需維護,所以對新手來說最好挑容易管理、不用費太多心思的主機經銷商。

在以前,若是購買一般虛擬主機,則可能還需要安裝環境,然後要手動到 WordPress 網站下載安裝程式,才可以建立 WP 網站,但在現在有許多一鍵安裝的方法,詳見下文。

☑️ 網域

也就是網址名稱,讓使用者可以透過網址連到你的網站,每年的授權費約幾百~幾千元不等,直得注意的是網域是愈簡單愈短愈好,然後記得續約,不然明年被搶走就哭出來惹。

常見的網域有 .com (commercial 適合商業公司)以及 .org (organization 適合非營利組織)可以針對專案屬性去買適合的域名。
現代的網域也有很多有趣的選擇,像是 rar.design 或是像本土的 .taipei 與中文域名等等,若可以讓使用者留下深刻印象,也是很不錯的附加價值。

架設網頁需要哪些人手

一般最簡單的配置就是設計師 + 工程師。

👩🏻‍💻 設計師

主要負責畫出網頁的設計稿,調和配色、排版等視覺,與規劃流程、動線等,然後交付給工程師進行開發。

以前叫做網頁設計師,或網站美編的工作,在現代由於專業領域分工的關係,我們習慣用 UI/UX 設計來稱呼,以強調此網站更注重使用者為核心的體驗與設計。

👨🏻‍💻 工程師

主要是將設計稿給還原做成真正的網頁,撰寫前端語言 (HTML5 + CSS3 + JavaScript 等)進行開發,並搭配後端程式 (在 WordPress 中是 PHP) 進行協作。

不同的網頁框架會用不同的程式語言開發,除了 WordPress 之外,還有像是 Bootstrap、Laravel 以及 Joomla! 等。

除此之外視數位產品的規模,可能還會有更多角色加入,像是 UI/UX 設計師、前後端工程師、專案管理以及視覺設計師等等,做網站已經是個成熟且專業的領域,但如果我們只是要架一個簡單的網頁呢?我們可能在創業初期人手不多,或只是個人興趣想練習,有更適合的做法嗎?

透過 WordPress 一個人也能架

WordPress 是款開放原始碼軟體,全世界都有開發者與設計師替其貢獻佈景主題、好用外掛或是本地翻譯,且根據統計共超過 1/3 的網站是用 WP 進行製作,仰賴社群維護的專案在資安上也更安全些,重點是 WP 發展至今已經不像以前那樣需要透過複雜的安裝流程,讓我們更可以著重在網站的設計與使用者體驗上。

本篇文章會教你如何從頭開始建立起自己的 WordPress 網站。

準備好了嗎?讓我們直接開始 ‍😉


壹、購買主機與網域

經過數年架站經驗與個人興趣實測後得知,各家主機都有其優缺點,所以我們都會配合不同的專案來選擇適合的主機,這邊我們選擇 SiteGround 作為示範。

▤▤▤▤▤▤ 點擊以下連結之推薦主機大概只要 $180 /月 ▤▤▤▤▤▤

▤▤▤▤▤▤ 點擊以上連結之推薦主機大概只要 $180 /月 ▤▤▤▤▤▤

SiteGround 有許多貼心的設計,像是官方自己做的提高效能與網站搬家外掛,也可以一鍵免費取得 SSL https 和 Cloudflare CDN,還有不小心把網站弄掛了,也可以從自動備份中還原網站。你可以從 官網 取得更多資訊。

它同時也是 WordPress.org 官方推薦的三家主機商之一。

如果你還沒有主機架設的經驗,可以跟著我們下面一步步的圖文解說來進行。

本篇教學使用 SiteGround 作為示範。

SiteGround 網站後,會列出三種不同的方案,這邊推薦使用中間的 GrowBig 方案,除了有更多的容量空間及無限網站額度外,還包含效能強化以及自動備份的服務。

接下來的費用都是以美金單位,購買一年份主機 + 網域 $3,000 元有找!為確保相關優惠與操作畫面一致,請按照本篇文章示範來進行。
輸入網域名稱與後綴

在這邊呢則是輸入你想要購買的網站網址,比如說我想要叫做 riven 則輸入後再選擇任一網域後綴,這邊試試看 .tips 下方也會即時顯示價格;確認想購買的網域後,選擇 PROCEED 按鈕繼續下一步。

如果你已經購買過網域的話,直接勾選 I already have a Domain 即可。

接著呢就是註冊帳號的環節⋯

輸入要註冊的 SiteGound 信箱帳號,以及要註冊的密碼,密碼的要求是 6~50 位數,以及至少包括一個字母、一個數字與一個特殊符號(@,#,$..等)。
在下面的欄位則是要輸入個人資料,包括國家、英文的姓名、以及通訊地址,英文姓名可以到 外交部領事事務局 查詢漢語拼音,英文地址則可以到 中華郵政全球資訊網 查詢。
接著是信用卡資料,順帶一提現在幾乎所有主機註冊時都需要填寫信用卡做為實名認證,所以一定都要有。
接下來是購買的資訊,這邊我們通常保持默認的設定即可。包括 GrowBig 方案,以及主機位置新加坡(離台灣近)還有畢竟是第一次架設網站,先買 12 個月會最划算。再下面是網域的額外服務,基本上就是針對隱私與資安的防護,如果有需要才勾選加購。

最後,勾選基本的隱私與服務同意選項後,就可以按 PAY NOW 送出。
若要收到 SiteGround 的優惠訊息,才要選第二個勾。

若送出後有跳出紅框錯誤訊息,則再檢查欄位是否遵照規定填寫即可。
這樣就取得自己的主機與網域囉!恭喜 🎊

接著,按下「PROCEED TO CUSTOMER AREA」按鈕就可以來繼續架設我們的 WordPress 主機。


貳、一鍵進行 WordPress 程式安裝

在第一個區塊選擇「Start a new website」就會跳出以下畫面
直接選擇 WordPress 即可,然後依照順序填寫信箱、帳號與密碼,這是我們要架設的網站帳號,務必記得。(上面註冊的是 SiteGround 帳號,這裏是 WordPress 網站帳號)
填寫完成後就按下左下角的 Confirm
下面的這個區塊直接略過按 Confirm
確認條款後按下最後的 Complete Setup 按鈕
開始安裝之後,系統會引導你回會員中心等待安裝程式

參、安裝完成並前往網站

等個大概十分鐘左右(官方寫一小時)就會收到完成安裝的通知信,以及網站帳號資訊。
或是到 SiteGround 會員介面的 My Accounts 處也可以看到目前主機與網域狀態
剛架設好的網頁樣子(什麼都沒有)

好,以上就完成了我們網站主機購買 + 選擇網域 +WordPress 網站架設囉!整個過程大概一個小時內就可以完成,並且只花了不到新台幣 $3,000 元,就可以開始玩我們自己架的網站囉~ 😃

這是剛架好的 WordPress 後台,是不是很令人興奮呢~

以上就是我們這次網站主機架設的第一步囉!是不是很簡單呢~架主機一直都是許多 WordPress 新手跨不出去的門檻,希望能透過這篇文章幫到你!

這些步驟在以前可能會需要不少程式背景與幾天的工作時間,我們已經整理到相當簡單的步驟就可以讓網站順利開啟,讓架站的門檻降到最低!而且用最少花費~

接下來我也會寫架設好之後進階的佈置與設定,讓網頁一步步成為我們想要的樣子,可以發摟 林育正 Riven 或追蹤我的 Facebook

我是 Riven,我們下次見囉 🙂


林育正 Riven

Written by

Monospace 共同創辦人|Adobe Xd 官方合作講師|UI/UX & WordPress 網頁設計師 https://www.facebook.com/Riven.Design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade