URL文章配圖

什麼是URL?網域Domain又是什麼?WordPress架站必學基本知識

WordPress 架站必備知識 – URL的秘密

什麼叫做 URL

其實 URL 簡單來說就是網址,什麼是網址呢?下面這張 Chrome 瀏覽器的圖就說明了一切。

瀏覽器中的網址

可以看到 https://asper.tw/ 就是這個網站的網址。

網址的構成是由通信協定與網域名稱兩大項目所構成的:

  • 通信協定:https
  • 網域名稱:asper.tw

這樣,有沒有很好理解呢?下面會說明 DNS 與網域名稱的關係。

DNS 跟網域名稱(Domain Name)

以下先快速回答一般人對於 DNS 常見的問題:

Q:DNS 是網域商後台常見的設定選項?

A:網域服務商最常使用的後台就是 DNS 記錄管理,後面文章會提到,讓你一次搞懂,而他的介面大概長下面這樣,主要是讓你新增 DNS 紀錄為主。

GoDaddy 的 DNS 後台示意圖
GoDaddy 的 DNS 後台

Q:自有網域常常要設定 DNS 嗎?

A:通常是不用的,DNS 紀錄在設定好後,就不太會頻繁變更,像我的 DNS 大概有好幾個月沒有改動了,除非你把它當成專門的轉址平台來使用,才有機會不斷頻繁增修,但如果真的要做為轉址平台,一般會推薦市面上專有的平台,或使用 WordPress 轉址外掛,在功能面與 UI 呈現上會更好一些。

Q:如果架站不懂 DNS 會怎樣?可能會遇到哪些困難?要問誰?

A:如果不懂 DNS 也是可以架站,在概念上若完全不理解,其實也不會造成太大的影響,只是在採購選擇上,可能會建議使用一站式的服務,如:所有購買行為都在某一個服務提供商解決,像是 GoDaddy 或 Bluehost 之類的提供商,有問題就直接詢問客服人員,將精力留在核心創作上,當然也可以參考本站的各式教學,有任何問題也歡迎留言提出,這裡非常樂意為大家解答。

不用緊張,深呼吸,讓我們開始進入正題吧。

DNS 的全名叫做 Domain Name System,中文叫做網域名稱系統。

網域名稱(Domain Name),則是構成這系統的一小部分,可以把 DNS 想成戶政事務所,裡面可以查詢到這個區域的住家門牌,每個住家門牌都可以用衛星做出精確的經緯度,只是我們多半會使用地址,取代經緯度這個絕對定位來告訴大家自己住哪。

而電腦世界裡的網域名稱,解析出的經緯度就是 IP 地址,每一台提供服務的伺服器、連上網路的裝置(包含你現在正在上網的電腦、平板、手機),都會有一個 IP 地址,只是他很難記憶,所以才會使用 DNS 這套系統來解決這方面的問題。

那麼 DNS 這套系統怎麼運作呢?

舉例來說,今天想要到 asper.tw 這個網站會怎麼走?

簡化

DNS 架構說明示意圖
DNS 架構說明
  1. 問根(root)主機,因為是 .tw 結尾,根主機會跟你說這是台灣戶政事務所負責
  2. 問台灣(.tw)的戶政事務所 asper 住哪
  3. 台灣戶政事務所告訴你,去問管 asper 網域名稱的戶政事務所(如:GoDaddy、Namecheap…之類的 DNS 託管服務提供商)地址在哪
  4. asper 的戶政事務所查了一下,這是我家的住民,就把這台主機的 IP 位址,也就是精確的 GPS 定位給你去連這網站

有沒有發現一件事情,網域的查詢是倒著查的,從 root 問 .tw 再問 asper。

就像寄國際包裹寫地址一樣,會先從國家、州/省、縣/市、鄉/鎮、街道、樓層這樣填寫,一層一層的把範圍逐步縮小,每個郵局只負責寄送他轄下包裹。

子網域(Subdomain)介紹

子網域名稱,最通用的例子就是在前面加上 www,例如:www.asper.tw。

什麼?!

沒錯,加上 www 就是一個子網域。

有子網域就有主網域,而主網域就是我們所購買的 asper.tw 網域,你可以在前面加上任何你喜愛的名稱作為子網域名稱。

那你一定會想問,有些網站前面有加上 www 跟沒有 www 到底差在哪邊?

其實可以設定 asper.tw 是 A 網站,而 www.asper.tw 是 B 網站,但不太有人會這樣做就是了,實務上作法通常都會讓 asper.tw = www.asper.tw 連到同一個站,不信可以試試看,在瀏覽器網址列中輸入 www.asper.tw 看看,最後也是會變成 asper.tw。

如下面這張圖所示,其實輸入 www 跟沒 www 都是指到同一個 IP 位址上。

子網域 DNS 架構說明示意圖
子網域 DNS 架構說明

那一定有人會問,除了 www 以外,還有什麼可以當子網域呢?

因為這個主網域是你的,想要取什麼都可以,一般多半以使用阿拉伯數字,與英文小寫字母為主,像上圖的 blog.asper.tw 就是一個可以使用的網域名稱。

設定子網域名稱,以 Bluehost 後台為例

登入 Bluehost 的後台,點選 “Domains” 再點選 “Manage”,這邊使用 asperlab.club 這個主網域作為範例。

登入 Bluehost 後台示意圖
登入 Bluehost 後台

往下捲可以看見 A 紀錄的清單,有這麼一大串,這代表什麼意思呢?

他表示了你只要輸入 mail.asperlab.club、blog.sperlab.club、www.blog.asperlab.club….等,都可以連到這個部落格,因為他們指向的 IP 位址都一樣。

當然如果今天隨意輸入一個 abc123.asperlab.club 的子網域,因為沒有在這名單上,所以就不會告訴你他的 IP 位址囉!

Bluehost A 紀錄示意圖
Bluehost A 紀錄

想得快一點的人,會想到一個問題,那有沒有什麼辦法,用不同子網域,建立兩個不同的網站呢?答案是可以的,秘密就藏在網站伺服器的設定上面,這邊 Bluehost 讓我們可以透過他的後台進行設定。

點選 “Domains” 再點選 “Subdomains” 會出現新增 Subdomains 的表單。

輸入 subdomain 後,可指定一個 home folder(document root),下面的 blog 是之前新增的範例,只是 document root 跟 asperlab.club 放同一層,都在 /public_html 裡面。

Bluehost 設定 subdomain 的 home folder示意圖
Bluehost 設定 subdomain 的 home folder

那 home folder(document root) 與 subdomain 是什麼概念呢?

就像一戶房子中,有多戶門牌的概念:

  • 今天我住 asperlab.club (主網域) -> asperlab.club 使用整個 /public_html 房間
  • 房間要分給其他人一起住在同一戶,所以他把房間門牌自定為 test,test.asperlab.club -> 使用 /public_html/test 房間
  • 萬一有人也想用 blog 這個房間門牌,並跟主網域共用同個房間, blog.asperlab.club -> 使用 /public_html/ 這個房間

房間就是 document root 的意思,中文直譯成文件根目錄,但這邊說他是網站根目錄比較貼近實際意義。

當然,subdomain 也可以對應到外面所購買的虛擬主機服務,不一定要 Bluehost 上的,只是我們使用 Bluehost 一起管理會比較方便而已。

實際操作見證一下比較好理解,這邊建立一個 subdomain 叫做 test,輸入完成後,點選”Create”即可。

建立一個 test subdomain 示意圖
建立一個 test subdomain

再回去查看一下 A 紀錄,會看見一拖拉庫的 test subdomain,自動幫你建立好在那邊等你,只是對我們而言,真正有用處的是 test 這個 A 紀錄而已,其他可以刪除。

查看 test 產生的 A 紀錄示意圖
查看 test 產生的 A 紀錄

這時可以輸入 test.asperlab.club 來看看,可以連上,但發現居然沒有首頁呈現,呈現的是下面這種,為什麼呢?

原因很簡單,裡面沒有放網頁,當然沒有畫面好呈現,有點像你回到家,家徒四壁沒有任何家具的概念,裡面只有一個 cgi-bin 的子目錄(Subfolder),這部分後面會介紹。

進入 test.asperlab.club 網站示意圖
進入 test.asperlab.club 網站
新增一個子網域用的首頁

這時就要使用我們強大的 cPanel 功能來確認囉,一樣也是在 Bluehost 的後台中,於左邊欄位點選”Advanced”後,再點選”File Manager”,接著會彈出一個新分頁(視窗)。

使用 Bluehost cPanel 功能示意圖
使用 Bluehost cPanel 功能

先展開”public_html”資料夾,再點選”test”資料夾,最後點選”+File”,新增一個臨時首頁。

有沒有發現 test 下有一個 cgi-bin 資料夾,與我們剛才用瀏覽器連入 test.asperlab.club 時的長相一樣呢?

使用 cPanel File Manager 新增文件示意圖
使用 cPanel File Manager 新增文件

接著在 New File Name 中輸入 index.html,表示他是首頁的意思,接著確認建立目錄為 /public_html/test 後,點選”Create New File”即可。

新增文件命名示意圖
新增文件命名

我們要編輯 index.html 這個檔案,點選他之後,接著點選”Edit”

編輯 index.html示意圖
編輯 index.html

接著會跟你說因為文件編碼因素,建議你先備分檔案,但我們所新建立的檔案為空白檔,沒這問題,就點選”Edit”來編輯吧。

編輯確認示意圖
編輯確認

這邊在編輯畫面中輸入”test.asperlab.club index”後點選”Save Changes”,以證明我們改這個 /public_html/test 資料夾中的檔案,可以對應到 test.asperlab.club 這個子網域。

編輯 public_html/test/index.html 檔

開啟瀏覽器,輸入 test.asperlab.club 網址後,便可看見”test.asperlab.club index”這串字樣出現在眼前了。

瀏覽器中開啟 test.asperlab.club 的畫面
瀏覽器中開啟 test.asperlab.club 的畫面

子目錄(Subfolder)說明

讓我們延續前面 subdomain 的案例。

如果說 subdomain 是大家共用門牌,使用門牌的延伸,那麼 Subfolder 可以說是每個門牌裡面的收納櫥櫃了。

像是 test.asperlab.club 這個門牌,沿用了 asperlab.club 這個主要門牌來用,且使用了 Bluehost 中的 /public_html/test 這房間作為網站資料存放位置,我們也能多建立一層資料夾在 /public_html/test 中,如 public_html/test/abc 這樣。

在網址中所呈現的,會變成 test.asperlab.club/abc,表示會讀取 public_html/test/abc 這個名為 abc 櫥櫃中的資料。

很多新手站長,容易弄混淆的地方就在這裡:

  • 子網域:test.asperlab.club -> public_html/test
  • 子目錄:test.asperlab.club/abc -> public_html/test/abc

至於為什麼會這樣?

不妨來做個小實驗,在 cPanel 中用 File Manager 在 public_html/test 下建立一個 abc 的資料夾,再把剛剛於 public_html/test 中建立的 index.html 搬家到 abc 資料夾下,看看瀏覽器打開會如何呈現。

可以發現畫面無法正常顯示,但是可以看到多出了 abc 這個資料夾,我們接著點選 abc 這個子目錄看看。

瀏覽器開啟 index.html 搬家到 abc 資料夾後的畫面
瀏覽器開啟 index.html 搬家到 abc 資料夾後的畫面

可以發現首頁顯示成了剛剛所建立的首頁。

開啟 test.asperlab.club/abc/ 畫面
開啟 test.asperlab.club/abc/ 畫面

這樣對於子目錄的概念有沒有更清楚了呢?

子目錄簡單說就是 test.asperlab.club/abc/ 一個網域名稱結尾 “test.asperlab.club/” 後的名稱。

要如何選擇使用子網域(Subdomain)與子目錄( Subfolder)

如果要架網站,其實使用子網域(Subdomain)與子目錄(Subfolder)都不影響網站的運作。

假設我們把主網域當成一家百貨公司經營,子網域就像這間百貨裡面有很多專櫃,只是都不是自己家的品牌,這些不是自己的品牌當然擁有自己所屬客群,有一定屬性上的區隔,但同樣都在這家百貨公司設專櫃經營,而子目錄則屬於自己的品牌,與自家品牌血脈相承。

那對於架站上有什麼差別呢?

只要好好經營,其實沒有太大的差異,有差異的部分在於 SEO 搜尋引擎優化,要怎麼選比較好?假設要集中火力經營,就使用子目錄,而想要有所切割與區分,就使用子網域。

而這個煩惱等到有打算建置第二個網站再來傷腦筋就好。

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *