架設網站教學

WordPress架設網站教學

最簡單的圖文步驟分解


前言

想要開始經營一個自己的部落格,除了可以直接到部落格平台上註冊帳號外,也可以考慮自己架一個網站,也就是俗稱的自架站。

通常我都會建議大家自架站,除了彈性與自我掌控性較高外,在與廠商做業務配合時,也會顯得更有專業度,成功合作到的機率就更高。

但提到架網站,可能大家會開始有各種疑問:

  • 架網站是不是要會寫程式呀?
  • 架網站的費用是不是會很貴?
  • 架網站會花費很多時間對吧?

這篇文章,就是想要來做架設網站教學,只要每個月花幾百元的成本,就能夠開始寫文章賺錢,或是經營不同的網站收益方式

這篇文章的前半部會先介紹一個自架站的組成結構,而後才是進行 Cloudways 架設 WordPress 網站的圖文教學,最後則會分析一下為什麼會選擇使用 WordPress 來架站。

自架網站是怎麼組成的

在開始做架設網站教學前,需要先來簡單了解一下,組成一個網站的元素有哪些?

一個自架的網站要構成,需要有最基本的三個要素:

  • 網域 (Domain)
  • 主機 (Hosting)
  • 內容管理系統 (CMS)

以下會分別會用比較簡單的說明方式,讓你能夠了解。

#1 網域 (Domain)

網域和大家熟知的網址有點不一樣,正確來說,必須先有網域才會有網址。

以我網站上的一篇文章來舉例:

  • 這篇文章的網址是:https://deanlife.blog/blogging-platforms
  • 它隸屬的網域就是:deanlife.blog

再用更白話的方式講:

  • 網域:一個行政區
  • 網址:該行政區內的門牌號碼

要先有行政區,才能下去分劃每戶的門牌號碼。

網域是需要花錢租用的,而每個網站只會有一個網域,且網域不能與別的網站重複。(所以才會有網域蟑螂,先把網域買下來,再高價賣給公司行號或知名品牌)

網域競標
網域競標 (擷取至Godaddy)

每個網域的價格並不固定,而是會依照這個網域的價值來訂價,當然有許多受歡迎的網域甚至需要用競標的方式來獲得 (如上圖)。

目前在中文領域中常見的網域商有 (可以直接點入搜尋):

而一般來說,挑選網域商時,除了看平台上有沒有自己喜好的網域名稱,另外還會注意的就是要看該平台有沒有支援你要的「頂級域」與「國別」。

頂級域與國別就是在一個一個網域後方的那串英文,像是常見的有 .com、.com.tw、.org、.net 等。(這個部分沒有特別規定,但通常 .org 會用於政府機構)

網址

要提醒一下,Namecheap 不會有 .tw 的台灣國別,所以如果你網域想要有 .tw 的話,就需要到 Godaddy 上面尋找。(網域的後綴其實我覺得不會到太重要,最多就是看你要不要選擇國別)

而在網域的選擇上你可以:

  • 以你的品牌名稱為主
  • 以你的主題市場為主
  • 單純以個人喜好為主
  • 以投資的角度來選擇

沒有一定的答案,如果你想不到,建議可以直接到平台上面搜尋看看,因為平台上都可以直接告訴你你想要的網域有沒有被註冊走,且也都會給予你相似的名稱建議。

#2 主機 (Hosting)

主機簡單來說就是用來裝你網站所有資料的容器。

因為一個網站的資料非常多,你不太可能自己儲存這些資料,就算可以自己儲存,也需要另外花非常高的成本,所以一般都會由主機公司代管,但相對的也會需要付一點管理費。

主機種類可以分成:共享主機、VPS 主機、專用主機、雲端主機,而這些在不同的主機商中,都會有不同的價格方案,像是以下就列出許多家主機商:

我自己這個網站目前是放在 Cloudways,除了因為 VPS 主機速度快外,他的英文客服團隊也超強,有問題的話問他們幾乎都能夠幫你解決。(這篇教學文主要也會用 Cloudways 來示範)

不過這篇文章主要不是介紹主機商,所以這邊就稍微帶過,關於「虛擬主機是什麼」、「挑選主機技巧」、「各主機商比較」的內容,大家可以閱讀另外一篇詳細的介紹文章。

延伸閱讀:架設網站必備虛擬主機!7大服務商優缺點評價

#3 內容管理系統 (CMS)

內容管理系統其實就是大家俗稱的「架站平台」,不過其實它不能真正算是網站構成的原始要素。

這時代越來越多人有架網站的需求,但不見得每個人都會寫程式,所以這就是一套方便大眾操作的網站編輯管理系統。

CMS 有很多種,目前最多人使用的會是 WordPress,因為它的系統是「開源」的,也就是能夠任意自由地調整,即便不懂程式,也有許多相關的外掛支援,加上視覺化的操作介面,降低操作門檻。

而我本人也會推薦使用 WordPress,原因有以下:

1. 佈景主題多

WordPress 的佈景主題數量非常多,目前免費 + 付費的佈景主題總共有上萬個,而且持續增加中。

所有人都可以依照不同的喜好去找尋適合自己的模板並套用,讓自己的網站看起來專業而不陽春。

2. 外掛工具多

WordPress 外掛是什麼?它的功能就類似我們手機上的 APP,有這些 APP (外掛) 我們才能執行我們想要做的事情。

在 WordPress 社群中最常聽到的一句話就是:「There’s a plugin for that!」意思就是 WordPress 上沒有任何事情是「外掛」辦不到的。

目前 WordPress 上已經有 50000 多個免費 + 付費的外掛可以使用,不過基本上一個網站不會用到那麼多外掛,大約 2、30 個外掛功能就很完善了。

3. 可修改原始碼

在一些佈景主題或外掛無法達到自己想要的外觀或功能時,如果你懂程式語言,就可以從後台修改整個網站的原始碼,將網站改成你自己想要的樣子。

文章編輯時也是,如果視覺化編輯器做不到自己所想的樣子,也可以開啟程式碼編輯器進行編輯 (在右上方設定中,或 Ctrl+Shift+Alt+M)。

網站原始碼
可從後台修改網站原始碼

4. 學習資源多

由於 WordPress 使用人數眾多,且遍及各地,所以各種語言的教學都有,資源非常豐富,遇到問題直接 Google 就能找到答案 (Youtube上也很多)。

在這裡推一下幾個我覺得不錯的中文學習網站與社團:

5. 可設定不同權限

WordPress 最棒的部分就是可以設定不同權限,也就是說一個網站可以給予每個人不同的身分。

像是:

Wordpress權限
  • 訂閱者:只能瀏覽文章,以及發表迴響 (就是你)。
  • 投稿者:只可以撰寫文字,不能上傳圖片以及發布文章。
  • 作者:可編輯並發布文章,其他人的文章及迴響僅可查看。
  • 編輯:可以管理所有與文章有關的事物 (文章、迴響、分類、標籤 …)
  • 網站管理員:負責整個網站的管理與設定。

如果你的網站未來預計會團隊化經營,那麼網站就必須有這些權限,在網站成熟後就能聘請寫手或管理員來負責網站的營運。

自架一個WordPress網站要花多少錢?

在上一段我們了解一個自架站所需要的構成架構後,也許就會有人有疑問:「有那麼多環節,會不會需要花很多錢?」

這邊就簡單來分析一下,一個「新手」架設起一個網站,所需要的必要花費大概為多少?

  • 網域:依照你選擇的網域名稱不同,會有不同的價格,不過基本的都落在一年 NT$200~300 元 (除非你刻意去選擇超貴的網域)。
  • 主機:主機的話會相對比較貴一些,但通常一個新手,主機容量只需要選擇最低的即可,費用大概會一個月 NT$300~400 元,一年下來就差不多 NT$3000~4000 元。
  • CMS:如果你是使用 WordPress 的話,是完全不用錢的。

以上是「基本」的自架站費用,大約一年 NT$4000 元左右。而接下來,是如果你想要長期經營,還可以考慮花錢的地方:

  • 佈景主題:也就是網站的外觀,這部分是可以直接購買套版的,如果你對於網站外觀很追求,可以考慮購買。
  • 各種外掛:在經營上,一定會需要使用到很多外掛,像是 SEO 外掛、頁面編輯器外掛等等,這些是比較常會有人付費購買的。
  • 電郵系統:如果你有想要做電郵行銷這塊,那你還會需要買一個電郵系統,但這其實就已經脫離網站範疇了,算是「經營」上會用到的。

而我自己在經營網站的第一年,只有付「網域與主機」的費用,總花費大約在 NT$3500 以下。

由以上可知,自架一個 WordPress 網站,花費其實沒有想像得高,所以我才會推薦每個人如果能夠自架站的,就自架站吧。

不過如果你真的不想花任何一毛錢,那也可以參考部落格平台的文章,找一個免費的網誌平台使用,像是痞客邦Medium方格子等等。

WordPress架設網站教學

為了方便閱讀,我有將接下來的一連串的圖文,整理成一份簡報

如果你沒有要立即架站的話,可以先收藏起來,未來隨時可以拿出來參考。

#1 購買網域

step 1

進入 Namecheap 首頁,在中間框框輸入自己想要的網域名稱,並按搜尋。

進入namecheap

step 2

最上方會顯示你輸入的網域名稱是否可以被購買,如果不能購買的話,會呈現灰色的,就需要換另一個名稱。

如果是顯示綠色的,就代表可以註冊,點擊最右邊的「Add to cart」進行購買。

查詢可用網域

step 3

按鈕點擊後,可能會出現加購選項,可以不用理它,直接到最下面按紅色按鈕「Checkout」。

購買網域

step 4

檢查一下你買的網域是否正確,如果正確,就點擊右方的「Confirm Order」。(它會請你加購許多功能,可以不用理它,買網域就好)

確認網域訂單

step 5

接著,會要你在右側辦一個帳號 (如果原本就有的人可以左側登入),填入的帳戶資料要是英文。

若看不懂需要填寫的英文欄位,可以直接翻譯整個網頁,變成中文比較好理解。

註冊Namecheap帳戶

step 6

再來,會需要你填入一些基本資料,一樣都要填英文,欄位的中文幫各位標示了。

記得中間的「I’m registering on behalf of a company」需要取消勾選,因為你是個人戶。

(PS. 英文地址不知道的人可以到這邊查詢)

填入基本資料

step 7

最後,選擇一個付款方式,目前接受信用卡、Paypal、帳戶資金(需儲值)。

下方則是帳單地址,可以直接選擇它預設的就行。完成後就到右方按「Continue」付款。

選擇付款方式

step 8

購買完成後,會在你剛剛填入的信箱,收到一封驗證信。

這封信很重要,你需要驗證電子郵件,不然你剛剛購買的網域會被沒收。

直接點擊郵件中的「Click here to verify your email address」就行。

帳戶確認信箱

step 9

回到 Namecheap,到 Domain List 的地方,確認剛剛買的網域,Status 的地方是否有變成 Active,如果有的話就代表購買成功。

(PS. 你的畫面只會有一個網域,不會跟我一樣有兩個)

確認是否購買成功

#2 主機設定

step 1

進入 Cloudways 首頁,中間會有個「Get Started Free」的綠色按鈕,點擊開始免費試用。

註冊Cloudways

step 2

需要註冊一個帳戶,填入名稱、信箱、密碼,下方的選項選擇「Blogger」跟「$0 – $50」就好。(中間的那欄隨意選)

而「Promo Code」地方可以輸入 DEANLIFE,前兩個月主機費可打 75 折。

最後勾選完同意服務條款,點下方「Start Free」就完成了。

輸入註冊資訊

step 3

剛剛註冊帳號完後,有時候系統會隨機做驗證,不用擔心,只要照著上面的指示操作就可以。

都完成後,會進到後台首頁畫面,接著就需要先啟用一個主機,我們點擊中間的「LAUNCH」。

創建虛擬主機

step 4

這個步驟是設定主機伺服器。

先從最上方設定起,左側第一格 WordPress 選擇最新版,接下來的 App、Server、Project 名稱都隨意設定就好,方便辨認而已,只有你自己看得到。

選擇主機商

step 5

下方,我們選擇 linode 主機 (價錢與規格都比較適合新手),Server Size 的地方調成 2GB。

Location 主機位置,會建議選擇離你所在地比較近的,速度會比較快。(台灣人可選日本、新加坡)

都完成後,畫面最右下角會有個「LAUNCH NOW」的綠色按鈕,按下去就會開始安裝了。

選擇主機容量與位置

step 6

伺服器安裝的時候會顯示像是下方這樣的畫面,前面會顯示紅燈,需要等待一些時間。

等待創建主機

設定完成後,前面就會顯示綠燈,我們可以開始進行下一步設定。點擊伺服器名稱進入後台。

主機創建完成

step 7

點擊伺服器名稱,我們會進到設定畫面,並在左側選擇「Settiongs & Packages」,然後再點選上方的「PACKAGES」。

設定虛擬主機

step 8

在下方設定中,PHP 版本選擇倒數第二新的 (寫這篇的當下是 PHP7.3),MySQL 版本選擇 MariaDB 10 以上的版本 (可以照著下方畫面選)。切換版本的時候會需要一點時間,稍微等待一下。

設定主機版本

step 9

再來,點擊右上方的 www,選擇 app,進入到應用端設定。

進入網站應用程式

step 10

點選左側「Access Details」,URL 就會是你的 WordPress 登入頁面網址,而下方的 Username 跟 Password 則是你的登入帳號與密碼。

查看網站登入密碼

step 11

進到你的 WordPress 後台登入畫面後,將剛剛它提供給你的帳號與密碼輸入,就可以登入你的 WordPress 後台囉。

不過目前登入的網站不會是你的網域名稱,而是 Cloudways 預設的網站,所以接下來我們還需要將你的網域跟主機進行串聯。

WordPress登入頁面

step 12

超級重要的補充!!!

前面設定都完成後,一定要記得到帳戶資料中綁定信用卡 (或是點擊畫面中的 Upgrade 按鈕設定),不然等到七天免費試用期結束後,你辛辛苦苦架起來的網站,就會直接消失喔。

Cloudways主機付款

#3 網域與主機串聯

step 1

我們要用 Cloudflare 來進行串聯,進到官網首頁後,右上角先註冊一個帳號。

Cloudflare 是一個能將網域與主機安全做串連的平台,可以不用額外付費,但卻能讓你的網站更加安全,更詳細的原理可以參考 Cloudflare 官方資訊

註冊Cloudflare

step 2

輸入電子郵件和密碼,這個帳戶很重要,所以建議密碼強度要強一點。(可以將 Namecheap、Cloudflare、Cloudways的帳密設成一樣,比較好記憶)

註冊Cloudflare帳號

step 3

將剛剛購買的網域名稱輸入進去,並點擊下方的「新增網站」。

輸入需保護的網站

step 4

接下來要選擇方案,我們選擇最下方的免費方案即可。

Cloudflare免費方案

step 5

然後可以先到信箱中做一下信箱驗證,等等操作起來會比較順。

Cloudflare信箱驗證

step 6

接著回到剛剛 Cloudways Application Management 的畫面,在「Access Details」中,可以看見 Public IP,這是主機 IP,我們將它複製下來。

複製網站IP位置

step 7

【更新:介面後來有改版,現在的 DNS 會出現在左側,不是上方】

再到剛剛的 Cloudflare 的頁面,進到 DNS 設定的地方:

  • A 內容部分,換成剛剛複製的 IP 位置。
  • CNAME 內容的部分,則是換成你的網域名稱。

都完成後按最下方的「繼續」。

設定DNS位置

step 8

接下來你會看到它提供給你兩組的 Nameserver (NS) 網址,先停在這個畫面,並切換到 Namecheap 的後台。

Nameserver網址

step 9

在 NameCheap 後台,右上角的選單,可以找到「Domain List」。

進入後,會看到你剛剛的網址,點擊最右側的「MANAGE」進入。

進入網站管理

step 10

在中間會看到一個 NAMESERVERS 的欄位,其中有個下拉選單,拉下後選擇 Custom DNS。

選擇自訂DNS

step 11

接著,將剛剛 Cloudflare 上的兩個 Nameserver (NS) 網址,直接貼上去,記得貼完要按右上角的勾勾,才會保存更改。

填入自訂網域

step 12

回到剛剛 Cloudflare 提供 Nameserver (NS) 網址的地方,按下「完成」。

接下來的時間,就是 Nameserver 需要轉換的時間,通常一個小時 ~ 一整天都有可能。

step 13

等待的時間,可以回到 Cloudways Application Management 的地方,在左側選擇「Domain Management」。

畫面中間會看到「PRIMARY DOMAIN」,在這格填入你的網域名稱,輸入完成後就按「SAVE CHANGES」。

設定正式網域名稱

step 14

在 SSL Certificate,中間有個可以輸入 Domain Name 的地方,將你的網域填入後儲存。

(PS. 如果你不確定你的網域前方是否有 www,那建議兩個都填入。)

設定SSL加密憑證

step 15

在這期間,可以隨時到網址的地方,輸入你的網域名稱,看看網站是否能夠連上線。

如果無法,就代表還沒轉換成功;如果可以,那就恭喜你,你的網站成功上線囉!

剛開始看到的會是什麼都沒有的網站,不過不用擔心,等等我們會做設定。

空白網站

step 16

接著,我們還需要讓你的網站有安全憑證。

所以回到 Cloudflare,上方選擇 SSL/TLS,進入畫面後,右側的部分選擇最下面的「完整(嚴格)」,然後回到網站刷新,看看網站前面有沒有鎖頭。

設定網域加密等級

#4 基本 WordPress 操作介紹

step 1

第一次登入,要從 Cloudways 後台,就是前面提到的部分,點擊後台登入網址,然後輸入預設的帳號與密碼,登入 WordPress 後台。(可以記下後台登入網址,以後方便登入;密碼待會在後台可以進行更改)

查看網站登入密碼
登入WordPress網站

step 2

進入後,大家的畫面應該會是英文的,為了方便操作,我們先「Setting」>「General」,將介面語言改成中文,順便設定網站基本資訊。

WordPress架設網站教學:一般設定

step 3

此時,大家這個畫面應該會是英文,所以可以先拉到最下方將「Site Language」改成繁體中文。

然後接下來就可以填入以及設定一些網站的基本資訊,如下圖顯示。

更換WordPress語言

step 4

為了更方便以後登入,可以到「使用者」>「個人資料」中,設定新登入密碼。

更換使用者密碼

step 5

接著,可以到「佈景主題」中安裝佈景主題。佈景主題是你網站的外觀樣式,內建就有許多免費的可以使用,找到一個你喜歡的,直接套用即可。(我個人蠻推薦 Astra 的)

選擇佈景主題

step 6

如果你想讓你網站有更多功能,可以到「外掛」>「安裝外掛」中,找到適合的外掛安裝使用。

歡迎參考:Dean 的 WordPress 外掛推薦清單

安裝WordPress外掛

step 7

未來想要發佈文章,就到「文章」>「新增文章」,進入文章編輯頁面。

編輯畫面會長得如下圖,是以「區塊」進行編輯,這部分大家可以自己去熟悉一下。

編輯WordPress文章

step 8

WordPress 有非常多功能,因為這篇主要是架站教學,所以後續的 WordPress 就不一一帶著大家操作,建議你可以花時間熟悉一下,不懂的部分直接上網搜尋,就能夠找到許多資源。

而如果你想要學習怎麼讓自己的頁面看起來更有質感,可以學習一些前端語法進行網頁設計,相關的學習資源,我都幫各位整理到另外一篇文章了:網頁設計教學課程推薦

結論:架設完網站後的下一步是?

這篇架設網站教學教會了大家架設起自己的網站,就可以不用靠外面的網頁設計公司,除了會被收一大筆費用,還有可能網站不是自己喜歡的樣子。

而當架設起自己的網站後,接著就會是開始產出內容了。一個網站的內容,會是影響整個網站發展的重要關鍵,所以如果你有興趣的話,歡迎閱讀《我的高效寫作方法》。

如果你是對於其他部分,像是網站收益方式、網站工具推薦等等有興趣,那麼下方會附上部落格經營相關的文章連結,可以自己挑選有興趣的文章閱讀喔。

部落格經營相關文章

【手機版 表格資訊在下方】

加入創作者社團 部落格DNA
WordPress架設網站教學,最簡單的圖文步驟分解 1

6 thoughts on “WordPress架設網站教學,最簡單的圖文步驟分解”

  1. 這篇文章真的說得很詳細,從選擇網站系統根如何架設網站都很完整,真的是一篇超級實用的文章,已納入書籤,感謝Dean的分享~~~

  2. 謝謝Dean分享這麼詳細的網站架設教學
    我跟著步驟一開始架好了一個網站,但後來Namecheap網站說我的帳號被偵測為詐騙,
    中間花了一點時間Unlock,原本買的網域也被取消交易,重新購買一樣的網域後,
    重新照著步驟架設後,網站就上不去了,也登入不了wordpress後台

    很無助 爬文也找不到方法解決QQ

    1. 要確認一下你的 DNS 指向有沒有正確,通常網站連不上或登不進後台,會是 DNS 沒有正確指向到主機位置。

      如果需要檢測 DNS 指向,可以用這個網站查詢,直接把你的網域輸入進去,查看顯示的 IP 位置是不是你主機的位置。

  3. Dean您好: 我有跟著一步步做設定,但遇到三個問題
    好像是網站有更新所以有的畫面不一樣了
    1.步驟12:沒有出現「Re-check now」的按鈕
    2.步驟17:在「NGINX」中的「WAF MODULE」<—找不到這項目了
    3.因為點擊畫面中的 Upgrade 按鈕設定,直接跳到設定信用卡畫面,沒想到設定完就直接被扣29元,當下不確定設定成功沒,又到卡片那重設,結果又被扣一次29元……,不知道這費用只是確認信用卡而已,會歸還嗎?
    因為步驟12、17都找不到選項,這樣沒關係嗎?
    再麻煩抽空回覆我,謝謝~~

    1. 感謝你的提醒,最近 Cloudflare 介面有一些更新,我有修改文章中的內容了,你再看看,有問題再跟我說!

      至於被扣款的部分,照理說只會刷一筆,如果你被扣了兩次,要馬上聯繫 Cloudways 客服 (後台右下角可以直接找他們),請他們幫忙確認一下是不是重複扣款。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。

error: 內容已被保護!
回到頂端