如何架設網站?不會程式碼沒關係,從購買網域到架設內容,全部簡單的告訴你!

你好👋,歡迎來到全方位~首先我非常感謝你點進來這篇文章。

相信你會點進來不是因為想要自己架設網站就是要幫其他人架設… 這篇裡面詳細並簡單的會教會你:

如何找到並購買適合自己的網域

購買主機並完整的設定好

設定網域DNS連結主機

編輯網站頁面及後台


正文開始前,我要告訴你”全方位“架站服務的限時優惠!只有這篇文章的讀者才有!全方位的架設的網站都是都是頂級的,高效率並且品質又好,非常推薦您。

點擊下面的按鈕進到我們的架站服務介紹裡面~並且在諮詢時輸入 ”HV88“ 就能獲得架站88折優惠!優惠是限時的,趕快去領取喔!


網站架設流程

架設一個網站有三個要素,三個要素都達到後就能建立好一個網站了:

  1. 網域(Domain)
  1. 虛擬主機(hosting)
  1. 內容管理系統(System Management System, SMS)

我這邊找到了一些介紹影片,有興趣的話可以看一下,看不懂的話我後面也會介紹,不用擔心:

網域:

虛擬主機:

內容管理系統:

看得霧煞煞?沒關係哈哈,我剛開始也是看的很頭痛,但是不用擔心,我絕對不會把你教到頭痛,只要跟著這篇文章走就好了~

網站架設流程有非常多種,每一種都有些許的不同,但是基本都是一樣的邏輯。

我會以我所架設過的經驗流程整理成下面幾個我覺得最有效率的4個步驟:

購買網域 > 購買主機 > 網域指向主機 > 編輯網頁


如果看不太懂的話我們把這幾個步驟比喻為一棟房子

  1. 取得網域名稱並購買(取得門牌號碼
  1. 購買主機(取得一棟房子
  1. 網域指向主機(把門牌與房子連結
  1. 編輯網頁(可以開始使用你的房子了!~

還是不懂的話不用擔心,我會在下面幾個主題更詳細的說明~

這次教學我們會以VPS主機以及WordPress為主,它們的介紹我也會在文章後面慢慢提到。


WordPress介紹

Content Management System (CMS), 內容管理系統,算是對想要架設專業網站但是不會程式語言的新手最好的工具。CMS被開發出來之前想要有一個網站需要有寫HTML、CSS程式碼等能力,即使有學過的工程師都要花一大堆時間才能架設出一個好的網站。

好在CMS在1989年被英國電腦科學家開發出來,才能讓網站架設變得更簡單,不需要懂程式碼也可以專業的架設網站。

WordPress,也就是其中一個內容管理系統。從一開始提供小部落格架設簡單網站到現在支援線上購物網站、商務形象網站等專業的功能。

上表可以看到2021年六月,Wordpress在網站市場上就佔了百分之41.7,成為世界上最大的架設網站系統。

你可以去查查看外面架設一個wordpress網站的價格,價值可以從5萬到10萬台幣,我認為主要的原因就是wordpress有無限發展的功能。目前wordpress裡面有55,000+個擴充外掛,而且大部分都是免費的。簡單的操作架設網站加上無限量的功能外掛讓Wordpress變得非常受歡迎!

如果你想要我們幫助你快速的架設一個精美、簡潔的形象或是購物網站,可以到我們的首頁查看喔,我們的服務絕對專業,而且價格比一般公司低了4到8萬台幣!


網域簡介

網域名稱就是我們平常所說的網址、URL等等,是一個網站的域名。

像我們剛剛比喻成的”房子的門牌“,我們要找一棟房子是就需要搜尋房子的門牌,同樣的,我們搜尋一個網站是,就需要搜尋網站的 “網域名稱”

如全方位的網站,下面圖片裡的紅色框框內就是我們的網域名稱: “allroundwealth.com” ,只要搜尋這個網域名稱,瀏覽器就會帶你到我們的網頁(或是上面比喻的房子)裡面。

子網域

子網域就是從網域更加延伸的部分,例如“allroundwealth.com”是這個網站的網域,“example.allroundwealth.com” 就是這個網站的 “子網域”。

目前許多部落格網站如痞客邦(pixnet)、隨意窩(xuite),都有提供子網域。

子網域在這篇裡面我不會特別的去介紹,因為我非常不推薦使用子網域的方法來架設網站。

為什麼?

原因很簡單:”因為不是自己的“ 。 我們來看一些範例:

這些都是我在Google裡面搜尋到的網頁,雖然都能被Google排名出來,但是!網站本身並不是自己的。

可以看到上面圈起來的部分是查詢到內容的網址,結尾都是部落格的網域,代表全部內容都是屬於部落格網域的主人。

如果要創造自我品牌,或是想要做好SEO行銷,非常不推薦使用子網域。

而且使用子網域的安全性不高,那天主網域突然倒閉,所有努力創作過的內容就會全部消失。如果你不打算使用子網域,那你可以繼續讀下去,我會叫你如何架設一個完全屬於自己的網站。

基本內容介紹完後我們開始進入架設網站的第一流程吧!


架設網站第1步:購買網域

這是架設網站其中一個最重要的環節,你將會需要購買你的網域,之後你選擇的那個網域就會成為你網站重要的財產之一。

  1. 選擇網域名稱

那如何選擇自己的網域名稱呢?

首先,我會從自己想要的網站名稱開始

假如,我想要給一個網站取名:”食蟲家庭“ (隨便想的哈哈)我就會先把這個名稱翻譯成英文…

如:insectivorous(食蟲的)、insect eating(吃蟲的)、以及 family(家庭)

之後,再使用翻譯過的名稱來做不同的組合,記得要多想一些不同的組合,為什麼要這麼做後面會跟你解釋

如:insectivorousfamily, insectivorous, insecteatingfamily…等等,發揮自己的創意來找到好記又有趣的網域名。


  1. 開始購買網域!

首先進入Godaddy —— 全球數一數二的網域供應商,可以簡單的購買網域,而且還有中文客服!

進入Godaddy之後你會看到下圖這個頁面:

之後在 “找出完美網域” 的搜尋框裡輸入你剛剛想出的的網域名稱。

如下圖,有些網域名會顯示“無法使用” 或是 “已被他人使用”,這是因為這個網域已經被人購買走了、或是法律上無法使用,所以我上面才會說要多想幾個網域名。

無法使用的網域

這時你應該會想,網站分類名稱有差別嗎??

.com 已經被買走了,那.xyz, .store, .online, .site, .org…可以用嗎???

其實使用起來沒有差別,但是我個人還是建議你按照自己網站的發展方向來選擇。我個人是覺得.com、.tw或是.com.tw是最好的。

.com是國際域名,而.tw是台灣的域名,如果你想要讓你的網站被其他國家的使用者更容易的搜尋到,我會建議使用沒有國家域名分類的網域。

以下是各種分類名稱的代表意思:

  • .com — Company, 國際商業網域
  • .org — Organisation, 盈利、非營利組織
  • .net — Network, 通信、網路技術機構
  • .gov — Government, 國家、政府機構
  • .edu — Education, 教育機構

這篇主要專注在網站架設上,網域分類就不多介紹了,之後會寫一篇完整的解釋~我們先開始購買網域的步驟!

購買步驟就跟一般商店買東西一樣,如果想直接跳過這個部分可以《點我跳過》

步驟1:把想要的網域放入購物車內

點擊 “加入購物車“ 或是右側購物車的圖像來把自己想要購買的網域加入購物車內。

步驟2 :進入購物車內

圖1

在你點選加入購物車的圖示後,會像圖一一樣,右側會有個購物車的區塊,裡面有前往購物車的按鍵可以進入購物車。

圖2

你也可以點選右上角的“前往購物車”的按鍵,或是購物車的圖示來進入購物車裡面。

點進去之後我們就可以進入下一步了~

步驟3:選擇額外方案

進入購物車後他會讓你選擇Godaddy額外提供的服務,如下圖:

上圖是提供個人網域Email的服務

像一般google的電子郵件會是”@gmail.com”,這個服務可以提供你專屬的網域電子郵件,如“@你的網域.com”…

我是不推薦在Godaddy裡面註冊,因為Google也有提供相關的服務,用Google的就好了~下面是連結:

第二個是虛擬主機的方案,我非常不建議使用Godaddy的主機

我之前用過Godaddy的主機,沒用多久就想換了,因為速度慢到連編輯網頁都有問題,所以這個部分先選擇“不,謝了”

之後繼續點選右側的“前往購物車”,就可以進入下一步了~

步驟4:選擇購買時長

之後你會看到和上圖一樣的圖像,選擇你想要購買的時長,不必擔心網域不見,到時候時間到了還會需要續費。只要在過期前續費網域是不會不見的。

*注意,有時候一次買2年會有特價方案,這個要注意一下。

選擇好時長就可以點選下面“準備付款”的按鍵~

步驟5:付款

進入付款頁面之後,輸入個人資料及付款方式(信用卡/PayPal)就可以付錢購買網域了,非常簡單~

當你成功購買了網域後,我們就可以進入架設網站的下一個步驟:購買主機~


主機商選擇

購買主機之前我先跟你介紹一下虛擬主機

我認為一個網站最重要的核心就是網站速度。一個網站不管內容好不好,豐不豐富,只要跑太久,使用者就會馬上退出並訪問另一個網站架設一個網站。

一個網站的速度取決於許多不同的因素,包括網站內影音內容大小、網站RAM、設備快取記憶體容量…等等。而主機(Host)就是決定一個網站速度的因素之一,要架設一個速度快的網站,主機就要選對,選好。

市面上的主機有分成5種

  • 共享主機 (Shared Hosting)
  • 私人虛擬主機 (Virtual Private Server, VPS)
  • 專屬主機 (Dedicated Server Hosting)
  • 雲端主機 (Cloud Hosting)
  • 託管主機 (Colocation)

其中專屬主機以及私人虛擬主機是我認為最好的,想看更多我推薦你閱讀這篇:

4種最常見的虛擬主機,幫助你輕鬆選擇正確的主機類型

我這裡整理出了兩個我自己使用過算是最好的兩家不同的主機供應商:

Cloudways 介紹

以我的經驗來比較Cloudways提供的服務是真的非常的好,網站速度也真的快到沒話說,只要有用過的絕對不會想回去使用Godaddy或是其他主機商。

Cloudways 提供兩種不同在上面提到的主機,分別為私人虛擬主機(VPS)、雲端主機(Cloud Hosting)。

私人虛擬主機有:

雲端主機有:


如果想要直接找上面的主機商,我連結都有放進去了~不過我會在這裡告訴你為什麼直接用Cloudways會比較好:

很多人一開始架設網站都會去爬文,而大部分的人都在推薦便宜的共享主機,這種主機雖然便宜但是它的運作方式就是 “一大堆人同時使用同一個主機” 所以當主機內某一個網站流量高的話其他的網站也會連帶的被影響到。

大部分人經歷過這樣的痛苦後就會去找VPS,也就是我們會用到的私人虛擬主機。

私人虛擬主機雖然是自己一個人的,但在經營一個網站的同時你也要自己顧到自己整個伺服器的資安問題、維修、速度、防火牆等問題…,而且又需要會讀寫程式碼的能力,非常的累人且傷腦筋…

不過!

就如下圖,以前架設網站需要顧慮到許多不同的東西,現在有了Cloudways,上面所提到的問題都可以被Cloudways過濾掉,由Cloudways來管理,你只需要專注在經營、架設網站上面。

而我這篇裡面會教你如何用私人虛擬主機 — Linode來架設網站,除非你有其他需求不然雲端主機的價格就太高了。


Bluehost 介紹

Bluehost是非常適合給網站流量不高的使用者來架設網站的,它提供兩種不同的主機類型:共享主機,以及私人虛擬主機(VPS)。

剛開始會使用Bluehost的應該都是看到它的價格比其他廠商便宜很多,不過這些便宜的方案都是上面提到的 “共享主機”,而共享主機就是多個網站架設在同一個主機裡面。但是與其他提供共享主機的平台不一樣,Bluehost提供的可以順暢的在網站後台架設網站,只是前台會比較慢而已。Godaddy則會出現有時連網站後台都進不去的狀況。

所以說如果你架設出來的網站訪客(流量)不會很多的話那你就可以用Bluehost的共享主機方案。

雖然Bluehost也有提供私人虛擬主機,但是價格就變得跟Cloudways一樣,而使用私人虛擬主機我還是推薦選擇Cloudways。

介紹完主機我們進入架設網站的第二流程!


架設網站第2步:申請主機

在這篇裡面,我只會專注在Cloudways上面,所以Bluehost的教學這次就不會教了~

步驟1:帳號註冊

首先我們先進入Cloudways官方網站:

點進去上面的連結後會進入下面的頁面,然後在點擊黃色框框內的 “Start Free“

點進去“Start Free“之後會進入下圖頁面就可以開始註冊帳號了

如上圖,進入註冊頁面後填寫基本資料如,姓名、Email、自訂的密碼等等……個人職稱以及預算金額不太重要,並不會影響後面的使用體驗,隨便選一個就好了~

你也可以點選Google的圖示以Gmail帳號登入

而我這邊也有優惠碼可以提供你使用,點選 Got a Promo Code?

輸入 VINCEHUANG 就可以獲得前兩個月八折優惠!

全部都填寫完之後記得隱私權政策跟使用條款的地方(I agree to the Cloudways…) 要打勾✅,然後就可以點擊“Start Free”繼續。

步驟2:驗證帳號

運氣不好的話可能會遇到Cloudways的隨機驗證,我申請了好幾個Cloudways帳號也只有1~2個需要驗證,真的遇到的就耐心點配合吧~也不用擔心浪費時間,驗證通常會在一天內完成,我也會一步一步的教你。

*如果出現其他驗證方式可以到我的IG問我喔~聯絡資訊可以在聯絡我們的頁面找到

步驟2-1:發送Email 給 Cloudways 驗證團隊

進入你拿來註冊帳號的Email,發送一封郵件給 av@cloudways.com

主旨為:

Activate Account

內容為:

Good morning,

I would like to activate my Cloudways account

Thank you. Regards

發送後就等個幾分鐘Cloudways 就會發送一封Email 給你~

步驟2-2:提供相關資料

過幾分鐘後你就會看到下面這封Email:

英文密密麻麻的看得眼花對吧哈哈~但是不用擔心,紅色框框裡面才是重點。

在收到這封信的的48小時內,你要在這封Email裡面傳送你的身分證照片、駕照、或是護照照片(選一個),加上下列的其中兩個

  • Facebook個人首頁連結
  • Twitter使用者名稱(連結後面的使用者名:https://twitter.com/使用者名
  • LinkedIn 個人首頁連結
  • 公司或個人網站網址
  • 手機號碼(記得要加國碼)

回覆內容 (有“*”的只要選兩個,其他的複製貼上就好了,記得把自己的身分證/駕照/護照 其中之一的照片加入email附件裡面):

*My Facebook URL is : (FB個人首頁連結)

*My Twitter handle is :(Twitter使用者名稱)

*My LinkedIn profile URL is :(LinkedIn個人首頁連結)

*My company/personal website URL is :(公司/個人網站連結)

*Here is my contact number :(國碼+聯絡號碼)

My government-issued ID is attached to this email.

Thank you. Regard

步驟2-3:登入Cloudways

點擊標題的Cloudways進去登入頁面,並使用自己註冊帳戶的資料登入系統

*如果登入後還是看到需要驗證帳戶的話可以直接點擊右側的 “Need a hand?” 按鍵聯絡客服,它們的客服是24小時都在的,所以不會花太多時間。大部分主機客服都是用英文溝通的,如果不是很流利的話可以先用Google翻譯,客服看得懂的~ 如果真的沒辦法可以到我的IG來問我!聯絡資訊可以在聯絡我們的頁面找到


步驟3:新增及設定伺服器

步驟3-1:點擊Launch

登入後就會看到這個頁面,點擊中間 “Launch” 按鍵,之後就會進入下面的頁面

步驟3-2:設定主機方案

進入頁面後紅色框框內的選擇Wordpress, Version 5.8WordPress會更新所以版本可能會改變,但是就選擇選單內第一個就好了。

第二格是應用程式的名稱,這個你可以填你網域的名稱,或是隨便取一個自己認得出的名字就好了。

第三格跟第四格是伺服器的名稱及計畫名稱,這兩個也是自己取名就好了,之後都可以改~

主機商可以選DigitalOceanLinode 或是 Vultr,這三個我覺得還是Linode最好,所以就先選擇綠色的Linode。

三家主機的比較:

Server Size 就是伺服器大小,如果你的網站內容會很多、或是會需要架設2個以上的網站我建議你選擇2GB,雖然貴了一點,但是可以架設多個網站,品質絕對物超所值。我自己就是用2GB的~ 如果你只有要架設一個網站,而且流量及內容都不會很多那就選1GB吧!

Location就是伺服器位置,如果你在台灣,可以選Singapore或是Tokyo,如果你在其他國家,那你就選靠近自己的位置,越靠近使用地點,速度越快。

好了就點擊右下角的 “Launch Now”,之後它會開始新增伺服器,等個幾分鐘後就會完成。

步驟3-3:主機設定

  1. 時區及上傳限制設定

點進去伺服器裡面並點擊左側 Settings & Packages 來進入以下頁面

Basic下面的Upload Size改成200MB,這樣以後要上傳大一點的資料或外掛時才不會有問題。

看到下面會有個PHP Timezone,這邊改成你自己的國家,如果在台灣就選擇GMT+8台北時間。

最後記得點擊Save Changes 來儲存設定,儲存可能要等待一下子才會好。

  1. 編碼及時區設定

之後點入Basic 右邊的 Advanced,並下滑到 MYSQL 的位置

Timezone 跟之前一樣設定自己國家的位置。

然後Encoding(編碼)的部分選擇 UTF-8 Unicode ,這部分很重要,設定錯誤肯會導致後面沒辦法好好的編輯網站。我之前就是不小心設定成其他的,結果網站架設到一半就卡住了。

這邊好了之後繼續往下滑到System的地方

在System下方選擇自己國家的位置,之後點擊Save Changes儲存設定,然後等待系統。

  1. PHP設定

點擊Advanced右側的Packages進入下面頁面

PHP的部分改成第二新的,像現在最新的是PHP8.0,第二新的是PHP7.4,我們就選第二新的。選擇最新的可能會在架設網站時出問題,因為最新的有時候不太穩定,所以我們就先選擇第二新的。

更改PHP通常會比儲存其他設定的時間來得久,不過大概2~3分鐘就好了。

  1. 備份設定

點擊左側的Backup(備份)來進入頁面

Schedule Time在這邊時備份的時間,我選擇19:00UTC,我的時區時UCT+8台北,所以19UTC+8 = 早上三點,大部分人都在睡覺時備份。

Backup Frequency備份頻率我調成 1 Day,Backup Retention備份保留時間我調成4 weeks。

**Local Backups 記得調成Disable,不然會佔空間

之後點擊Save Changes 主機就設定好了!差最後幾步就要架設好網站了~

步驟4:Cloudways綁定信用卡

如果你是剛註冊的使用者,新增好伺服器後你會有3天免費試用期,在這三天內你必須綁定好你的信用卡,不然三天過後系統會把你架設好的網站內容刪除。

點擊右上角的頭像然後點選Account

進入之後點擊左側的Credit Card 然後新增信用卡資料,剛開始系統會先扣除台幣大約$28來測試卡能不能用,後面會退還給你。

網站架設第二步完成後我們可以馬上進入第三步~


架設網站第3步:設定DNS

來到了架設網站倒數第2步這個地方也是最簡單的一步,不要看到DNS就被嚇跑了,其實沒有那麼難!

《這邊有官方的教學》

步驟1:取得伺服器位置

進到Cloudways並點擊要使用的主機,剛進去時會是下面的頁面,如果不是就點擊左側的Master Credentials,這邊會有你所有主機資料庫的使用權金鑰。

Public IP 旁邊會有一串數字,點擊複製起來。

這邊的IP就是主機的位置,等等更改網域指向就可以把主機資料庫跟網域連結起來,之後就可以架設編輯了!

步驟2:更改網域指向

  1. 進入網域DNS管理控制台

進入Godaddy主頁,點擊右上角的使用者名稱,然後再點擊“我的產品”進入已購買的網域頁面。


進入上圖頁面後會看到你買過的網域,之後點擊你要設定的網域,進入網域設定頁面,之後往下滑到其他設定的地方,如下圖:

點擊紅色框框內的 “管理DNS”進入DNS管理控制台。

  1. 更改DNS指向

進入DNS控制台後會看到這個頁面,找到類型A名稱@,這個就是你網域(或是我們上面比喻的”門牌“)的位置,還沒設定之前都是指到Godaddy預設地點。我們現在只需要改到我們的主機地點,也就是我們主機的IP位置。

點擊右側的編輯圖像開始編輯。

把原本的指向IP位置刪除,然後把剛剛從Cloudways那邊複製來的IP位置放到圖片紅色框框裡。

點擊儲存就好了,很簡單吧~Godaddy這邊就可以不用理它,等下次要續費或是要架設新的網站再來

步驟3:主機新增網域及SSL

  1. 主機新增網域

之後我們進到Cloudways裡面,在主機欄右側有個 “www”,這就是上面命名的app,點擊“www”後再點擊要設定的App名稱。

點進去後會看到下面這個介面,然後點擊右側Domain Management (網域管理)

之後你要把你設定好DNS的網域網址輸入到下面紅色框框內,然後點擊Save Changes (不需要加https://、www.)

這樣你就已經成功的把你的網域跟虛擬主機連接起來,你現在就已經可以開始編輯網站了。

但是,要把網站架設得完美,我們必須把http變成https,把網站變安全。所以我們需要SSL(Secure Sockets Layer)。

  1. 網站傳輸層安全性(SSL)設定

新增好網域之後,我們點選左側的 “SSL Certificate“,之後我們就用它預設的Let’s Encrypt,Let’s Encrypt目前提供了2.6億個網站安全憑證,是數一數二的憑證供應平台。

之後我們再輸入自己的電子郵件地址以及網域名稱,記得要跟上面輸入的網域一模一樣,不然會無法正常運作。

點擊Install Certificat之後就架設好網站了,我們可以馬上編輯自己網站。

如果不知道什麼要SSL的話,我這邊跟你簡單的解釋一下。網站有SSL的主要目的就是把網站流量加密,防止資料在傳輸過程被截取。我們常常看到有些網站會被瀏覽器表示不安全,這些就是沒有安全憑證的網站,而我們就是要把不安全的標記變成一個安全的鎖

第三步驟完成後我們可以進入架設網站的最後一步!


架設網站第4步:開始編輯網站!

在這邊我會教你如何進入Wordpress編輯頁面,詳細的編輯教學可以追蹤我的IG或是訂閱我們的電子報來學習更多~

步驟1:進入網站登入頁面

要進入登入頁面非常簡單,只需要在你的網站後面加上/wp-admin,或是/admin都可以進入上圖那個頁面。

之後進到Cloudways主機裡面,到APP的控制台(可以參考這邊),點選左側的Acccess Details。

進到頁面後Admin Panel 下面就會是你登入網站後台的資料。

URL是進入網站後台登入頁面的網址

Username是帳號名稱

Password是對應的密碼

步驟2:登入網站後台及設定

輸入正確的帳號密碼後就可以進入Wordpress後台並開始編輯網站了!

但是怎麼是全英文??!看到英文不要慌,我教你怎麼設定成中文。

首先點擊右側的Settings,進入頁面後找到Site Language,調成中文。

下面的Timezone改成你所在地的時間。

之後往下滑~

Date Format跟Time Format這邊看你自己要不要調整,然後記得點擊Save Changes,很麻煩我知道哈哈哈,但是要架設好網站就要習慣每次做完更改都要點儲存。

儲存後就會變成中文啦~


我們這次的教學就到這裡了~下次希望可以在Wordpress編輯的教學中看到你,如果需要我的幫忙可以到我IG問我問題喔!

如果你想要我們幫助你快速的架設一個精美、簡潔的形象或是購物網站,可以到我們的首頁查看喔,我們的服務絕對專業,價格也非常實惠,想要的話可以隨時聯絡我!

喜歡我們的內容歡迎訂閱我們的電子報,也希望你可以幫我下面點5個讚然後追蹤一下我的IG喔!拜拜~

Leave a Comment

Your email address will not be published. Required fields are marked *