前言:

雖身為網頁前端設計工作者,但一直都對網域的部分一知半解(冏,

沒有一個自己專用的網路空間來放網站Demo實在說不過去,

所以今天就來記錄網域的申請、網頁空間、網址指向這三個部分:

 

網域申請:

有很多申請網域的管道,但往往要嘛付費,免費的又讓人不安心,

但還是會有免費的可以使用,但就別要求網域名稱很漂亮了(ex:.com / .tw

我這邊申請的是NCTU也就是國立交通大學提供的免費網域,

首先呢,到https://nctu.me/網站,註冊TWID(非本大學學生的註冊方式),

因之前有人惡意使用所以還必須驗證身分證的發照日期等等,驗證完就可以使用。

成功後上方就會出現網域管理的選項,接下來就可以新增網域

 

網頁空間

我的選擇是Google Cloud Platform,網址:https://console.cloud.google.com

只需要google帳號就可以登入(廢話,它的功能其實很多種,

可以建立虛擬主機、雲端程式,所以使用起來我覺得有點麻煩,

因為我只是單純想要個網路空間阿....

Google提供第一年免費試用,可以使用看看是否為自己適合的。

 

網址指向

這部分其實是最麻煩的地方,我第一次搞到想放棄,隔幾天再回來才搞懂怎麼處理..

首先講一下大概流程,

1. 在所申請的網域(NCTU)建立DNS紀錄,類型為CNAME,內容是你所申請網頁空間的信息

2. 在Google Cloud Platform建立Bucket(資料夾的概念),把剛剛建立的DNS紀錄的名稱當作Bucket名稱

3. 設定自動導向網頁(index.html),將上傳的檔案設定公開分享

這樣就可以用自己的網域瀏覽了,放心,以下會有詳細解釋。

 

這邊先假設自己申請的網域叫example.com

 

建立CNAME指向紀錄

我們必須將網域指向到Google Cloud Platform並給予它一個名稱,

所以回到NCTU的網域管理,建立DNS紀錄,類行為CNAME,名稱我這邊是設www

你也可以設其他的像是demo或test,這樣之後的網址就會是demo.example.com 或 test.example.com

然後內容是 c.storage.googleapis.com. 根據你的網頁空間會有不同的內容,這樣就完成了指向紀錄

Google的參考網址:https://cloud.google.com/storage/docs/hosting-static-website

 

建立Bucket(資料夾)

Bucket的名稱必須是我剛剛設的www.example.com (www為CNAME的名稱)

不過這時會有個插曲,因為Google必須驗證此網域,所以先到以下連結

https://www.google.com/webmasters/verification/

新增資源 > 輸入網域 > 其他方法 > 網域名稱供應商 > 選擇供應商名稱(NTCU沒在列表上所以選其他)

此時會提供一串字給你複製,就是要你放在網域的紀錄內容裡,一樣回到網域管理

申請一個DNS紀錄,類型為TXT,名稱不用打,內容就是剛剛複製的字串。

建立完成回到verication頁面驗證應該就能成功,此時Bucket也可以成功建立。

大致流程圖如下:

 

 

自動導向 / 設定分享

建立完成後,先設定自動導向到自己希望的檔案,我這邊是index.html

 

接著,上傳網頁檔案後,把你的檔案選擇公開共用,就完成了!!

 

 

最後只需要打上www.example.com,就會顯示你上傳index.html,

 

文章標籤
創作者介紹
創作者 detone8523 的頭像
detone8523

Detone's Blog - 低調設計 ‧ 高調前端

detone8523 發表在 痞客邦 留言(0) 人氣()