網站架設教學: 22個詳細教學步驟(適合Blog或品牌網站)

目錄

  1. 誰適合讀這篇
  2. 誰不適合自己架設網站
  3. 網站架設需要哪些費用
  4. 網站架設流程
  5. 為何推薦用WordPress架設網站
  6. 什麼是網域
    1. 網域的挑選技巧
    2. 網域比價網站
    3. 網域的隱私保護
    4. 網域(網址)註冊教學
  7. 網站架設主機
    1. 虛擬主機(適合新手使用)
    2. VPS主機
    3. 實體主機
    4. Sugarhosts虛擬主機申請教學
  8. DNS是什麼?
  9. DNS設定教學
  10. 檢查DNS是否更新完成
    1. Mac指令查詢DNS
    2. UltraTools線上查詢
  11. cPanel
  12. Sugarhost糖果主機後台登入cPanel步驟
  13. cPanel新增網域
  14. cPanel安裝WordPress
  15. cPanel登入WordPress

不會寫程式也可以自己架設網站嗎?

網站架設費用要多少?

讓我們一步步教你從買網域、租虛擬主機以及利用Wordpress架設一個完整的網站,過程中完全不用寫程式!!

文章內都會使用很多Sugarhosts 糖果主機來當作解說的例子,因為目前使用的網域、虛擬主機都是使用Sugarhosts 糖果主機他家的(話說在前頭,Sugarhosts 糖果主機速度不快,但可以用一些方式稍微加速,重點是有中文客服!),用久了也會比較熟悉解說起來也方便,其實這些東西大同小異,用久比較了解後在換去其他間提供商也不難,當初就是從GoDaddy轉到糖果主機的,我有另外寫一篇挑選虛擬主機的原則有需要可以參考。

另外提醒,文章很長,請善用右邊的目錄,手機版是一顆標123的按扭!

誰適合讀這篇

– 需要架設網站,但預算又有限的人

– 想嘗試架設網站,但沒有概念的人

誰不適合自己架設網站

如果原本已經有很多流量,想要自架站或是經營一個新的平台,拜託請你去找專業的公司協助做這件事,這年頭流量很珍貴的,不要因為自己一個失手就毀掉多年累積的東西或是造成不好的體驗,把時間放在自己的專業上比較實在。若你是痞客邦要搬家的,比較常看到的就是Blog i Move跟阿腸工作室這2間。

由於你沒有任何知識背景,你必須要承擔網站壞掉、被駭的風險,假如網站對你來說非常重要,不能有任何閃失,那還是花錢交給專業的去做才對!

網站架設需要哪些費用

基本上就這兩個費用:

使用Sugarhosts 糖果主機想要省預算的可到這邊拿折扣優惠碼:各種虛擬主機優惠折扣券

網站架設流程

硬是要簡單講的話,網站是由網域(網址)、主機(虛擬主機)、架站軟體(cPanel + WordPress)三個東西組成,而網站架設的流程大至上是這樣:

  1. 註冊網域
  2. 註冊虛擬主機
  3. 設定DNS
  4. 安裝WordPress

為何推薦用WordPress架設網站

  1. WordPress是開源軟體,換句話說就是不用錢
  2. WordPress是非常彈性,想得到的功能基本上都有外掛可以使用,也有許多主題(網站版面)可以購買
  3. WordPress的架構對Google SEO是非常友好的
  4. WordPress非常好管理
  5. WordPress算是安全的,因為已經開源很久,所以算是全世界的人都在幫忙找漏洞,也補了很多漏洞
  6. WordPress可以拿來當個人網站、公司網站、購物網站、論壇等等,想得到的幾乎都可以
  7. WordPress因為開源,所以有強大的社群不用擔心踩雷沒人問

我只列出自己覺得好的,想知道更多可以參考why use wordpresswhy you should use wordpress或是直接在Google搜尋”why use wordpress”關鍵字。

什麼是網域

網域就是網址,主要就是讓使用者好記,好記的重點當然就是越短越簡單越好!

像是:www.google.com 就是Google的網域

網域介紹
網域介紹

網域的挑選技巧

GoDaddy有一篇文章是在寫說如何挑選網域(以下節錄10招):

  1. 簡單輸入為主(像是本站網址 start a blog tips)
  2. 盡量簡短(好記憶)
  3. 使用關鍵字(跟品牌相關)
  4. 跟目標使用者地點相關(臺北市資料開放平台就是最佳例子:https://data.taipei/
  5. 避免數字跟其他符號(0跟1容易跟英文搞混)
  6. 好記憶(如臺北市資料開放平台)
  7. 搜尋看看是否有被註冊商標或版權
  8. 挑選適合的域名(像是本站startablog.tips
  9. 保護你的品牌(若你是nike就需要註冊.com, .tw, .cn….等等)
  10. 動作要快(好的域名是非常搶手的)

網域比價網站

全世界有太多提供商在賣網域,所以買網域前也是可以貨比三家,想要比價的可以直接利用TLD LIST 比,但這網站也沒有把所有的提供商都列進去,可以稍微參考一下。

網域比價
網域比價

 

這邊要注意,便宜的價格通常都不單純,像有些是第1年超級便宜,但是第2年續約就會超貴,還有網域的隱私保護功能價格也不一樣,價格不高的我只會比幾間就買了,以下列出曾經購買過網域的地方:

網域的隱私保護

所有的網域都可以從whois去查詢到網域持有人的身份(至少email),而隱私保護就是提供商提供的一個加價服務,假如你不想要讓網域被其他知道到這是你的,你就需要花錢購買。Sugarhosts 糖果主機就有提供一個Sugarhosts whois查詢功能。

進入查詢頁面後輸入自己的網域點”誰擁有它”查詢

Sugarhosts查詢whois資料庫
Sugarhosts查詢whois資料庫

紅色框起來的由上到下分別是註冊時間、註冊者名字(姓名)、註冊者地址、註冊者電話、註冊者Email,基本上所有資訊都是公開的,假如你很介意的話可以加價讓這些敏感資訊隱藏起來。

Sugarhosts查詢whois資料庫
Sugarhosts查詢whois資料庫

網域(網址)註冊教學

網域註冊流程大同小異,這邊以Sugarhosts 糖果主機GoDaddy來一步步示範

Sugarhosts網域註冊

示範網域:makeawebsite.tw

1. 進入Sugarhosts 糖果主機首頁後輸入你想要的網域名稱

Sugarhosts網域註冊第一步
Sugarhosts網域註冊第一步

 

2. 確認是可以註冊的,價格是NT$1422,點選添加到購物車

該網域可以註冊

 

3. 點選結帳

這網域可以購買!

 

4. 網域配置可以先略過,主要就是選擇DNS主機對應位置,之後會提到相關設定

提前設定網域,可以事後再改

 

5. 確認年數後即可結帳

sugarhosts網域的隱私保護要去另一邊設定
sugarhosts網域的隱私保護要去另一邊設定

 

6. 填完資訊輸入卡號就完成購買了!

sugarhosts註冊資訊
sugarhosts註冊資訊

Sugarhosts 網域隱私保護申請教學

1. 接下來如果要加購隱私保護的話從服我的帳戶>網域

Sugarhosts 網域
Sugarhosts 網域

 

2. 看到你剛購買的網域,點右邊一個扳手按鈕

Sugarhosts 網域列表
Sugarhosts 網域列表

 

3. 點選管理網域

Sugarhosts 管理網域
Sugarhosts 管理網域

 

4. 點選附加服務就可以看到加購隱私保護的功能

Sugarhosts 網域附加功能(隱私保護)
Sugarhosts 網域附加功能(隱私保護)

GoDaddy網域註冊教學

示範網域:startablog.guru

1. 進入GoDaddy首頁,一樣先搜尋網域

godaddy找網域
godaddy找網域

 

2. 搜尋結果是可以買,點選Add to Cart(加入購物車),接著點選右上角的Checkout now(立即結帳)

網域可以購買!

 

3. 選擇付款方式、網域使用期限及隱私保護,選好後就可以結帳,如果沒有帳號的就直接申請一個,我已經有帳號所以可以直接點擊完成付款就完成了。

小提醒:

  • 沒有隱私保護的話其他人可以透過網域找到你的資料
  • 仔細看選擇年份的框框下面有1行小字:Renews at NT1,173/yr(以每年台幣1,173續約),這就是需要注意的地方,有可能第1年很便宜但續約超貴,所以可以再便宜的地方買完後等時間到再轉移到其他提供商
Godaddy填寫付款資訊

網域購買提醒

  1. 老話一句貨比三家不吃虧
  2. 注意續約、網域移轉、隱私保護的價格(Sugarhosts 糖果主機比GoDaddy還便宜)
  3. 有些在結帳時有可能會把其他的服務預設加購
  4. 有些會把自動續約的預設為開啟

雖然GoDaddy第二年很貴,但是可以買一年後再轉到其他服務商啊,我都是這樣做!

網站架設主機

目前主機有分成虛擬主機、VPS主機、實體主機這3種,最容易上手的就是虛擬主機,因為不用寫程式、設定環境、注意一些眉眉角角,也是本篇介紹的架設方式。

架設網站目前推薦:Sugarhosts 糖果主機

虛擬主機(適合新手使用)

虛擬主機算是把1台主機的資源分給數個網站一起使用,所以你不會得到固定的資源而且也會受到使用限制,例如:網路流量、記憶體、CPU使用率等等,然而當跟你同一台主機上的網站比較吃資源的時候就會影響到你,但好處就是非常好上手,不用自己管理主機。

可以想像成把一間房子(主機)隔成10間套房(網站),房子的總供電流量就是100A(主機的資源),當有一間套房當下佔用了50A(其他人的網站忽然使用很多資源),就會造成其他房間跳電(網站掛掉),這時候提供商的解決方式就是限制每間套房的使用量(限制資源),通常虛擬主機的限制會很多

單純虛擬主機限制非常多(Sugarhosts的使用服務條款

VPS主機

VPS主機也是虛擬主機的一種,但他是把1台主機的資源切分出來給數個主機使用,租用的人會得到一個完整的資源,可以想像成就是租一台電腦(但是模擬的,性能跟正常的差不多),而不是跟其他人平分,也不會受到其他人影響,使用限制也會少很多,Sugarhosts 糖果主機不會讓你做VPN主機。

VPN限制相對少很多!(Sugarhosts使用條款)

實體主機

實體主機就是租一台真正的機器了,要怎樣隨便你,但一樣每個提供商不一樣,Sugarhosts 糖果主機就會限制架設VPN相關服務。

實體主機又更少(Sugarhosts使用條款)

Sugarhosts虛擬主機申請教學

Sugarhosts 糖果主機示範

1. 進入首頁後點選Web Hosting(虛擬主機),選擇Shared Web Hosting(虛擬主機)

Sugarhosts糖果主機虛擬主機
Sugarhosts糖果主機虛擬主機

 

2. 接著選擇地區跟方案,可以從最便宜的Shared Baby開始,中途如果覺得慢可以再升級。

提醒:

主機地區會影響連線速度

方案主要差異在建站數量、網站流量、硬碟空間、記憶體使用等等限制

新北機房沒有獨立IP(目前很像也無法購買了)

建議先看過方案比較跟Sugarhosts糖果主機可接受使用政策

另外,這邊有整理好一篇各種虛擬主機優惠折扣券,如果有用了請再留言讓我更新,謝謝!

Sugarhosts糖果主機方案
Sugarhosts糖果主機方案

 

3. 點選立即購買後會出現要你選擇網域(購買、移轉或綁定),如果已經按照上一步買了網域後可以直接填入你的域名。

Sugarhosts糖果主機選擇網域
Sugarhosts糖果主機選擇網域

 

4. 最後選擇付款方式,買越多當然是越划算啊!

Sugarhosts糖果主機選擇付款週期
Sugarhosts糖果主機選擇付款週期
確認訂單
確認訂單

 

5. 最後填寫購買人資料以及選擇付款方式就完成拉!

Sugarhosts糖果主機結帳頁面1
Sugarhosts糖果主機結帳頁面1
Sugarhosts糖果主機結帳頁面2

 

提醒:

虛擬主機服務提供商幾乎都有30天內完全退費的條款,若有遇到問題記得要使用!

DNS是什麼?

DNS全名Domain Name System,連上網的東西都有一個IP位址,但IP位址不好記所以才有Domain(網域)的產生,然而DNS就是將網域跟IP位址互相對應的系統,例如:

你的虛擬主機的IP位址是:113.114.115.116

你的網域名稱是:startablog.tips

DNS的工作就會將startablog.guru跟113.114.115.116連起來,所以使用者只會知道他上的是https://startablog.tips,但其實都會連到113.114.115.116這個IP位址去。

如果你想要了解更多關於DNS的資訊,Cloudflare有寫一篇文章可以參考:What is DNS?

DNS設定教學

如果你是在Sugarhosts購買的就已經設定好可以略過,以下步驟說明會是以GoDaddy買的網域設定到Sugarhosts糖果主機的DNS。

1. 登入後GoDaddy,點選管理網域

GoDaddy後台
GoDaddy後台

 

2. 選取要設定的網域

GoDaddy網域選擇
GoDaddy網域選擇

 

3. 往下拉到其他設定,點選管理DNS

GoDaddy管理DNS
GoDaddy管理DNS

 

4. 拉到網域名稱伺服器,點選變更

GoDaddy設定網域名稱伺服器
GoDaddy設定網域名稱伺服器

 

5. 把這四個輸入進去,這些是Sugarhosts糖果主機的網域名稱伺服器,最後儲存就完成了!

  • earth.sugardns.net
  • star.sugardns.net
  • queen.sugardns.net
  • sky.sugardns.net
GoDaddy設定DNS
GoDaddy設定DNS

DNS設定好後需要一小段時間才會更新好,這時候就是等待了!

檢查DNS是否更新完成

查的方式有兩種,一種是直接電腦打指令查,另一種則是用網頁查,這邊兩個都會有步驟說明,電腦查詢的部分會以MAC系統為主,不過建議直接用網路查詢比較方便。

Mac指令查詢DNS

1. 開啟”終端機”

Mac Terminal
Mac Terminal

 

2. 輸入指令

host -t NS <你的網域>

ex:

host -t NS startablog.guru

Mac terminal interface
Mac terminal interface

 

3. 如果有顯示剛剛設定的那幾個就表示完成拉!

Mac host -t NS command
Mac host -t NS command

UltraTools線上查詢

1. 開啟UltraTools網站,輸入你的網域後按”GO”

UltraTools DNS Lookup Tool
UltraTools DNS Lookup Tool

 

2. 如果有設定成功,頁面上也會顯示剛剛設定的資料

UltraTools DNS Lookup Tool
UltraTools DNS Lookup Tool

cPanel

cPanel是一個非常有名及老牌的網站管理平台,主要是可以讓人透過簡易的介面管理網站,基本上cPanel功能超多,但會用到的其實就那幾種。像是檔案管理、FTP、網域設定等等,基本上就是因為這些現有的資源才能讓我們不用擁有技術背景就可以架設網站了。

本篇只會用到”網域“跟”網站應用程式“這兩個部分,而會是透過Sugarhosts 糖果主機所提供的cPanel來解說。

Sugarhost糖果主機後台登入cPanel步驟

1. 登入Sugarhosts 糖果主機 後點選”服務

Sugarhosts糖果主機服務
Sugarhosts糖果主機服務

 

2. 點選你購買的方案:我是買Shared Pro(US-LA-TW)

Sugarhosts糖果主機產品
Sugarhosts糖果主機產品

 

3. 點選”登入cPanel

Sugarhosts糖果主機登入cPanel
Sugarhosts糖果主機登入cPanel

 

4. 登入後會長這樣

cPanel interface
cPanel interface

 

cPanel新增網域

1. 點選”網域“區塊裡的主域別名

cPanel主域別名
cPanel主域別名

 

2. 建立附加網域,這邊只要在新網域部分輸入你買的域名就好,其他自動帶,接著就點新增網域。

第一次建立的網域不會新增子網域,所以子網域亂打也沒關係,網站根目錄的部分就是到時候你所有的網站資料都會存在那個名稱的目錄中,你可以修改也可以用它自動帶的,在建立後會自動幫你新增在根目錄。

cPanel建立附加網域
cPanel建立附加網域
cPanel附加網域建立完成
cPanel附加網域建立完成

 

3. 回到主域別名的那頁就可以看到你剛剛新增的東西了!

cPanel主域別名新增成功
cPanel主域別名新增成功

 

4. 接著可以到”檔案“區塊的”檔案管理器“去找找剛剛提到的目錄

cPanel當案管理器
cPanel當案管理器

 

5. 進去後就可以看到剛剛新增時自動建立的目錄,之後WordPress建好之後就會放在這裡面!

cPanel檔案管理器
cPanel檔案管理器

cPanel安裝WordPress

最後一步就是建立WordPress網站,選擇WordPress的原因主要是這套系統存在很久,全世界有超過3成的網站都用WordPress建的,而因為Sugarhosts 糖果主機的虛擬主機有內建cPanel,所以建立的方式同樣也是到cPanel下操作點一點就可以建好,完全不用寫到程式

1. 到cPanel首頁的網站應用程式點選”WordPress“建立,如果沒有就從”查看更多“去找

cPanel 建立WordPress 網站
cPanel 建立WordPress 網站

 

2. 查看更多進來找到”內容管理(CMS, Content Management System)”就可以看到WorePress,自信的點下去

cPanel 建立WordPress 網站
cPanel 建立WordPress 網站

 

3. 首先選擇安裝位置,也就是剛剛建立的那個網域,對應到的就是剛剛那個目錄。

cPanel 建立WordPress 網站
cPanel 建立WordPress 網站

 

4. WordPress版本預設就好,自動更新我會開啟,但外掛跟主題我會不會讓他自動更新,我比較喜歡手動去做

cPanel 建立WordPress 網站
cPanel 建立WordPress 網站

 

5. 設定到時候登入WordPress的帳號跟密碼,我把網站標題改成”我的測試網站!”

cPanel 建立WordPress 網站
cPanel 建立WordPress 網站

 

6. 進階設定點選讓我來管理這些設置,數據庫管理跟email都先設定預設,主要是要手動設定自動備份到FTP

7. 先到cPanel的檔案管理器底下新增一個備份資料夾wordpress backup

8. 在設定備份方式用FTP,輸入FTP資訊,底下的通路就是剛剛新增的位置,直接輸入/wordpress backup即可

9. 最後點選30日這個,這是每天備份,共備份30天,當然你也可以自己設定想要的備份天數跟方式

10. 開始安裝了

cPanel 建立WordPress 網站
cPanel 建立WordPress 網站

恭喜你,安裝好後網站就建立完成拉!!!

cPanel登入WordPress

1. cPanel>網站應用程式>我的網站應用程式這邊找剛剛件好的網站,右上那個”我的測試網站“就是剛剛新增的,自信的點下去

cPanel 建立WordPress 網站
cPanel 建立WordPress 網站

 

2. 進去後就可以看到剛剛建立的網站拉,點startablog.guru就可以連到網站首頁,點startablog.guru/wp-admin就可以到WordPress後台

從cPanel 登入WordPress 網站
從cPanel 登入WordPress 網站

網站登入位置:

http://你的網址.com/wp-admin

如果忘記帳密就可以再從cPanel直接登入WordPress後台改密碼

3. 登入成功,這就是WordPress後台的樣貌!

WordPress後台
WordPress後台

 

4. 這就是剛建好的WordPress網站

建立WordPress
建立WordPress
測試網站:http://startablog.guru

 

結語:

恭喜你擁有一個自己的網站了,可以接著看另一篇教學:WordPress教學完整版:40個教學步驟讓你完整了解WordPress

最後幾件事:

  • 希望這篇教學文有幫助到剛想要接觸的你
  • 讀完文章後還是有遇到問題,而且這篇也沒有寫到,麻煩留言給我,我會盡量幫助你。
  • 如果覺得這篇是有用的,請分享給其他需要的人。
  • 文章有地方寫得不好或有問題也請跟我說,我不希望內容會誤導其他人。