10 分鐘架設好 WordPress 網站(主機購買與安裝教學 2021 年版)

原文刊載於 https://riven.design/2646

嗨囉,我是設計師 Riven 🙂

平常擔任講師除了會教授 UI/UX 設計技巧之外,偶爾也會受邀去分享 WordPress 架站教學,而過程中最有成就感的事情,就是將完全不會做網站的同學,教到能夠親手架好一個網站出來了!

我想讓架網站可以成為每個人日常的愛好興趣,一起沈浸在設計與開發的樂趣中,期待能透過這篇文章整理,來讓你可以簡單又快速建立起屬於自己的第一個 WordPress 網站。

架設網站的主機一直都是許多朋友跨不出去的門檻,的確在以前網站開發是個需要不少前置作業與專業知識的技能,但在今天已經有許多方便的工具及流程能讓我們更快上手,接下來會分享的是如何在短短操作時間內,並且不用先花任何一毛錢,就可以完成 WordPress 網站的架設。

開始架一個網站需要哪些東西

☑️ 主機

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

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

☑️ 網域

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

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

申請主機與安裝 WordPress

可以拿來製作 WordPress 網站的主機商有百百款,而其中我覺得最適合新手使用的就是 Cloudways 了。

介面對剛接觸網站架設的朋友很友善,而且租賃費用彈性計價,用多少算多少,不會一開始就要刷很多錢。

更重要的是有免費使用 3 天的額度,讓我們可以先架設來玩看看,並且具備臨時網址可以用,不用需要先購買網域做對應。

簡單來說,是個現在立刻就可以馬上架一個網站來玩耍的好選擇。

前往購買 Clougways 主機

註冊帳號

Cloudways 官網點擊右上角 START FREE 免費試用。
註冊會員,可以使用 Google 帳號快速註冊。
輸入密碼與基本資料調查(職業、在意網站哪方面、每個月主機預算)
2021.06 更新)
因為課程關係跟 Cloudways 官方凹到了 WordPress 主機 75 折的優惠!
在官網註冊時輸入 promo code "RIVEN25" 就可以得到前兩個月的 25% 折扣。

帳號驗證

成功登入後就會進來這個畫面,要先點擊上面綠色按鈕:VERIFY YOUR ACCOUNT。
買主機前要先進行帳號驗證。

網站主機申裝

當我們完成帳號註冊與驗證後,就可以回到建立伺服器的畫面了,上排伺服器與專案的命名就先簡單取一下名字就好。

而接下來可以按照下面的截圖進行設定:

  1. 選擇預設 Digital Ocean 的主機(親測過最推薦)
  2. 主機空間初始可選 2 GB(可以免費試用三天)
  3. 伺服器地址選擇 Singapore(新加坡離台灣使用者比較近)
完成之後按右下角 LAUNCH NOW 進行安裝。

WordPress 安裝

當看到以下畫面時,就是 Cloudways 已經自動在幫我們建立主機伺服器與安裝 WordPress 軟體了,實際等待時間為 5~7 分鐘。

會顯示 Adding Server .. 等它跑完。

安裝完成之後,我們就可以前往剛架好熱騰騰的 WordPress 網站了:

選擇將 SERVERS 按鈕
切換成 APPLICATIONS 介面,並點擊 WordPress。

來到這邊就是我們主機裡 WordPress 的管理介面,點選下圖藍框處的連結就可以前往 WordPress 後台。並請利用此處的帳號密碼進行登入。

點選 WordPress 後台的登入網址
這邊就是 WordPress 網站後台登入口,輸入帳號與密碼即可。
成功進入到我們剛架好的 WordPress 網站後台啦!

大功告成!如此一來我們的 WordPress 網站就架設好啦!恭喜!!😊

正式啟用主機伺服器

而如果三天之內我們的 WordPress 網站還使用的習慣,記得要回到 Cloudways 升級我們的帳號(原本是免費試用帳號)。

點選 Cloudways 上綠色的按鈕:UPGRADE MY ACCOUNT
輸入信用卡相關資料。
而 Biling Details(帳單資訊)需要使用英文填寫,若不知道通訊地址的英文,可以到 中華郵政全球資訊網-查詢專區 進行查詢,且 Phone(電話)要加上國際冠碼噢!例如說 0986543210 要變成 +886986543210。

之後每個月會依照我們的網站主機使用情況進行扣款,而如果已經申請購買好了網域名稱,也可以在 Cloudways 上進行對應設定。

網站架好後下一步

好啦,這樣就完成我們的 WordPress 網站安裝了,整體操作流程應該僅需 10 分鐘左右,超快!

而接下來要做的,就是一步步建構出我們的網站,以及生產頁面內容,還有持續最佳化與維護網站等等。

這些關於設計與開發上的的技巧,我們會在之後的專題攻略與文章內容上聊到更多,今天就先將網站架起來就可以了~這是最重要也是對大多數人來說最困難的第一步!如果你對相關主題有興趣,可以持續訂閱我們網站的電子報,或是追蹤相關社群媒體平台噢~

2021.4 更新)新的 WordPress 線上課程上線囉

有興趣的同學可以去網頁上逛逛。

對了!剛架設完我們的第一個網站,我想也稍微聊一下通常來說網站的製作上都是怎麼進行的。

一般架設網頁需要哪些人手

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

👩🏻‍💻 設計師

主要負責畫出網頁的設計稿,調和配色、排版等視覺,與規劃流程、動線等,然後交付給工程師進行開發。
以前叫做網頁設計師,或網站美編的工作,在現代由於專業領域分工的關係,我們習慣用 UI/UX 設計來稱呼,以強調此網站更注重使用者為核心的體驗與設計。

👨🏻‍💻 工程師

主要是將設計稿給還原做成真正的網頁,撰寫前端語言 (HTML5 + CSS3 + JavaScript 等)進行開發,並搭配後端程式 (在 WordPress 中是 PHP) 進行協作。
不同的網頁框架會用不同的程式語言開發,除了 WordPress 之外,還有像是 Bootstrap、Laravel 以及 Joomla! 等。

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

其實透過 WordPress 一個人也能架

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

聽起來是不是很令人感到興奮呢

邀請你一起加入我們用 WordPress 製作網站的旅途~ 我是 Riven 我們下次見囉,掰掰!

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
林育正 Riven

林育正 Riven

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design

More from Medium

Emerging Web Design Trends for 2022 and Beyond

Brave New Login Page

NetFirms Website Builder Review ~ You Can Build Your Site !

Google Playstore Web app