[台大學長手把手]如何架設網站與個人網頁(含架設伺服器推薦)

雖然會寫程式碼可以幫助你對於網站有更深的理解,但是要做出一個成熟的網站,現有的架設網站套件會比自己寫網站節省大量的精力,達到事半功倍的效果。

我在這篇文章中會手把手教大家如何架設網站,並且也會詳細的講解一些重要的知識。不同於網路上很多沒有受過系統化程式訓練於學習的博主,我認為我自己專業的背景能夠幫助網友釐清疑惑,真正地熟練掌握網站架設。不用寫程式,也能快速的架設網站!30分鐘手把手教會新手小白網站架設的步驟和原理

9/11/2021 更新
很多網友搞不清楚自己需要的是一個複雜的網站還是簡簡單單的網頁,在這裡做一個說明

⭐️ 如果你需要讓自己的網站可以有很多的文章,這篇“網站架設”就是你需要的。可以按照步驟一步步的來做。我們通過在伺服器架設wordpress作業系統,可以方便的讓你寫作。

⭐️ 如果你需要的僅僅是展示自己的品牌/作品/活動,而且網頁數量不超過20頁,我們推薦更為方便快速的網頁製作平台,可以參考我們的這篇文章

⭐️ 如果你想要做一個小型電商。只賣產品的話我們推薦網頁製作平台例如shopify,如果除了產品之外還要發布很多的文章,這篇“網站架設”就是你需要的。

網站架設的基本步驟如下:

如何架設網站
  1. 購買伺服器例如Bluehost
  2. 註冊網域
  3. 設置伺服器後台
  4. 登錄Wordpress
  5. 選擇主題,設定基本頁面
  6. 網站架設成功

接下來,我就為大家手把手一步步地進行講解。

1.

什麼是網址URL

當我們想要看看蘋果最新上市的iMac的數據時,我們可以看到iMac數據所在的頁面如下:(紅色框框中)

iMac 網址URL

在網址中,有三個重要的組成部分,我們來為大家詳細解讀。

URL結構

第一部分:HTTPS

HTTPS這個認證可以說明這個網站是安全的,而且能夠提供安全的連線。如果網站沒有獲得認證時,則會顯示為HTTP。當顯示為HTTP時,瀏覽器則會顯示“Not Secure”,建議你不要訪問,可能會存在安全的隱患。

不安全的網頁,缺少HTTPS保護

所以,在我們的網站架設中,設置正確的HTTPS協議能夠增加大家對於網站的信任感

為了獲得HTTPS的認證,我們需要獲取SSL安全憑證。HTTPS = SSL + HTTP。如何獲得SSL,我們在後面會手把手教大家安裝。

Bruce的小提醒: HTTPS = HTTP + SSL
獲得HTTPS協議的認證能夠增加大家對我們網站的信任。

第二部分:網域

網域可以說是整個網站中最重要的事情。很多網域可以賣到非常高的價格,幾百萬甚至是上千萬美金!為什麼?

因為網域就是品牌!

Bruce大大

沒錯!網域就是你的品牌,有一個好用的網域也非常方便所有的人來訪問你的網站。很多個人網站的朋友喜歡把自己的名字作為網站名稱,如果你的網域是“davidhesien.com”能夠有多少人記得住!

反觀世界市值最高的公司的蘋果公司:“Apple.com” 是不是比“Applecomputer.com”更想要讓人訪問呢?

所以在網路世界中,網域就是你的品牌。你的網域越簡短,越好記你也越容易被大家訪問。在第二步,我們會手把手教大家如何註冊自己的網域。

Bruce的小提醒網域就是你的品牌!!!
在預算允許的範圍內,註冊一個簡短好記的網域名稱

第三部分:網頁位置

在我們的例子中,/imac-24/specs/ 就是網頁的位置。這就好比你進入了蘋果的商店,我現在告訴你iMac的基本參數信息在二樓的展示桌上。網頁位置告訴用戶頁面在整個網站中處於什麼位置,它就是網站中的地圖。

Bruce的小提醒網頁位置就是網站的地圖
網頁位置告訴你你現在處於網站的什麼地方
2.

註冊網域Domain

網域 (Domain name) 又稱「域名」、「網域名稱」,是網站首頁地址。它是一個網站重要的地址。

網域由兩部分組成,網域名稱和網域後綴。以Apple.com這個域名為例,apple就是域名名稱,“.com”就是域名後綴。我們經常看到的.org, .net之類的也是域名後綴。一般來說,域名後綴和你網站所相關的行業有關。.com是最常用的域名後綴,也是最通用的頂級域名

我們建議註冊以.com結尾的網域

因為.com是最常用也最容易被人記憶的網域後綴。
如果是科技相關的網站也可以考慮 .io .net 之類的。
如果架設的網站要做SEO的話,.com還是最好的選擇。

不過網域在這些年也算是稀缺資源,註冊一個少一個,apple.com只有蘋果公司擁有,後面的人想要註冊是無法註冊這個網域的。所以購買網域前,我們先要查詢這個網域有沒有被註冊。

namecheap查找可用的域名

我們可以很清楚的看到,server.com無法註冊。當然你可以選擇和網域的所有者商量,看能否購買這個你個人鍾意的網域,不過在大多數情況下,這個網域可能是作為人家的品牌,就算同意你的出價,最便宜的網域價格也在1千美金以上。

域名證實可以註冊

我們退而求其次,搜索bruceserver.com看有沒有人已經註冊。完全可以!我們就先將這個域名存起來,在後續的步驟中我們會教大家如何方便的註冊域名

3.

虛擬主機與伺服器推薦

假如你已經購買了自己需要的域名,下一步,就是架設網站的重要環節,選擇合適自己的伺服器。

如何選擇伺服器

在介紹如何選擇之前,我們先釐清網友對於伺服器存在的一個疑問。

伺服器和虛擬主機有什麼差別?

“虛擬”的意思就是說他不是一台真實的機器,而是把機器分割出來的一部分來使用。例如4核心的CPU伺服器,分出來4個虛擬主機,每個都有1個核心。一般來說,大部分的網站採用虛擬主機就夠用了。如果是網站流量非常大的網站,才會考慮獨立的伺服器。

其實在選購的時候也不用太注意區分,便宜的很有可能是虛擬主機,40-50美金一個月的費用才可能是獨立的伺服器。按照個人的需求和預算來選擇就好,不需要做一個非常清楚的區分。

在後面的教學中,我一律統稱為“伺服器”。

Bruce的小提醒: 按照預算與需求選擇專案,不用特別區分虛擬主機或者伺服器。

伺服器推薦

很多伺服器廠商都宣稱自己的伺服器最適合網站架設,提供服務的廠商少說有上百家。這麼多的廠商如何選擇?

對新手來說,在滿足伺服器穩定性的前提下,最核心的考量只有一個:有多少的教程可供參考?

很多博主唬爛推薦一堆伺服器產品,很多網友小白也按照教程操作,可是有時候教程過於老舊,有時候不知道哪裡設置出了問題,自己架設網站失敗。由於網路上也沒有教程或者經驗可供參考,自己白花了一大筆錢,也沒有成功地將網站架設起來。

Bluehost

我們在Google中搜索 “Bluehost 教學” 可以看到,Google展示了超過4萬個搜索結果,是所有伺服器架設中教學指南最多的產品

↓40,000 項搜索結果

如果自己在Bluehost架設網站過程中遇到了一些奇奇怪怪的問題,很有可能其他網友也遇到過,而且寫了一個詳細的部落客來提供自己的解決方案。因此Bluehost 最適合對於架設網站沒有什麼基礎的小白。

而且當網站內容增多時,也可升級到Bluehost的進階方案來滿足增加的流量需求。

Bluehost架設網站優勢
  • 最多的中文教學
  • 最高CP值 ⭐️⭐️⭐️⭐️⭐️
  • 新手適用
通過我們的專屬連結購買可以享受高達67%的全網最高折扣!
9/11/2021 備註
Bluehost中低價位主機中最好的主機,但如果你對於速度有需要的,作為商業用途的網站,Bluehost並不那麼適用。

對於架設網站有一定經驗的,而且對於服務器穩定性和速度有較高需求的網友,我推薦Cloudways

Cloudways有著更多的訂製選項,不過價格也會更貴一些。網友可以根據自己的需要選擇對應的專案。從便宜的雲服務器提供商到高端穩定的例如AWS以及Google Cloud。都可以根據自己的需求來搭配。

AWS(Amazon Web Service)是全球雲服務器市場佔有率的第一名,而且伺服器的穩定性也最高。AWS內部有著眾多的設置,正是因為可調整程度高,AWS適合與成熟的大型網站。有一定的客製化,而且需要專門的IT人員進行維護。 Google Cloud則是全球雲服務器市場佔有率的第二名。因為AWS並不提供台灣地區的伺服器,如果想要把伺服器架設在台灣,就可以考慮Google Cloud。
如果想要將服務器放在台灣,目前僅Cloudways提供台灣服務器。在Cloudways的伺服器選項中請選擇Google Cloud並選擇台灣服務器。

Bluehost方案選擇

點擊Get Started,然後選擇適合自己的專案。

Bluehost首頁

如果是自己只需要一個網站的話,我們推薦選擇第一列的“BASIC”基礎計畫。

如果自己有多個網站的需求或者是為了建立自己的品牌網站,對於架設網站比較認真的朋友,建議選擇後面的支持無限網站的計畫。

無限網站一個很大的好處是可以把一個網站作為測試網站,測試過沒有問題之後再遷移到主站。

第三列的計畫有更多的安全保護,在我們的專屬連結中享受和PLUS計畫相同的價格。對無限網站有需要的網友可以選擇“CHOICE PLUS”計畫

Bluehost專案選擇
4.

Bluehost基礎設定

在這一章節,我們會手把手教你如何架設Blueshot的網站。

接下來,我將購買 1 年的 WordPress Basic 入門方案,當作「 Bluehost教學 」範例。

網域選擇

申請新網址選 Create a new domain,已經有網址選 Use a domain you own。

這裡我們在創立網域的輸入欄就輸入剛才心儀的bruceserver,.com的網域後綴是默認的,不用輸入。確認點 Next。

Bluehost網域設置

Bluehost顯示bruceserver.com 可以註冊,接下來我們就來填寫自己的信息。

Bluehost填寫基本信息

Bluehost這邊就贈送我們一個網域,也就是上面選擇的bruceserver.com。下面我們要留意租用多久、是否加購商品、確認消費金額。

Bluehost專案確認

網域隱私保護值得加購,可以讓其他人無法看到網域和你有關的信息。其他的沒有太大價值。

Bluehost專案確認

然後填入付款訊息並勾選服務條款,最後按下 Submit 送出。

Bluehost確認信息

創建Bluehost帳戶

完成申請後會看到收據,這份收據Bluehost也有同步到你剛剛填寫的信箱中。

接下來我們要創建Bluehost的帳戶,可以用來訪問Bluehost的後台(不是網站wordpress的後台,wordpress後台我們後面會講到)。點擊創建帳戶。

創建Bluehost帳戶

然後輸入你想要創建的密碼,點擊Create Account 建立帳號。

⚠️ 帳密請妥善保存,未來登錄Bluehost需要用到
創建帳密

到這裡我們Bluehost的後台設定已經全部完成,接下來我們可以前往查看已經建立好的wordpress網站。

查看Wordpress網站

我們繼續架設 WordPress 網站,首先先從Bluehost官網登錄。

登錄bluehost

輸入帳戶信息和密碼,點擊登錄。

輸入bluehost的帳號和密碼

如果是第一次登入,Bluehost 有引導教程,幫助你安裝 WordPress 網站。我們都先點選 Skip this step 略過設定流程,直接進行網站安裝。

Bluehost 引導教程

網站安裝後,我們直接進入Bluehost後台,可以根據自己的需要選擇加購選項。

然後點擊左側My Sites,就會顯示所有的網站列表。在這裡我們只架設了一個網站,因此只顯示“bruceserver.com”。點擊URL就可以查看我們建好的Wordpress站點。

查看我的網站
如果網友是剛剛註冊好Bluehost,並進入後台,你的網址可能會顯示頁面準備中(Coming Soon)。等Bluehost將網站需要的組件架設好,就可以正常顯示。

如果點擊URL出現的不是你的網域,也是正常的。因為網域註冊,設置需要一段時間(快的10分鐘,慢的話要一個小時以上),因此當你的網域所有的配置都調整好,Bluehost就會正常顯示你的網域了

如果點擊下方的Manage Site,就會跳轉到Bluehost管理這個網域的後台。

單一網域bluehost後台

這邊只能夠對網站做一些最基礎的設定,例如主題,外掛,用戶等等。

需要更詳細的設定還需要登錄wordpress的後台進行詳細的設置

WordPress後台設置我們會在後面給大家講解。

5.

Wordpress 介紹

WordPress 是什麼

WordPress是世界上使用最廣泛,也是最為成熟的網站系統。Wordpress代碼完全開源,而且有眾多的開發者開發適用於wordpress的外掛,使得在wordpress上製作網站異常的輕鬆。

以前我使用React自己寫網站代碼,需要耗費至少一個月時間才能生出一個基本的頁面。而且自己寫網頁除了需要有程式基礎,也有很多的bug需要修復。

使用Wordpress,想要讓自己的網頁變得好看不需要費力做設計,選擇好看的主題就能一鍵移植過來。

想要讓網站具備購物, SEO,表格等功能也不需要自己寫複雜的JS code,挑選工程師開發的成熟外掛就可以輕鬆做到。

wordpress 基礎設定

1. 選擇主題

wordpress是提供主題的,這種主題類似手機的UI,不同的主題視覺效果不同,而且也提供了一些豐富的寫作套件可供使用。

wordpress有提供免費的主題也有付費的主題。全球最大的主題交易商店是Envato Market,我們也是在上面選擇的主題套版。

以我們這個網站為例,我們是選擇了一個付費的主題。當時的考量有以下幾點:

  1. 功能齊全,外觀好看
  2. SEO優化
  3. 隨時提供主題支援
  4. 大量wordpress寫作套版

在選購主題的時候,我認為提供主題支援和wordpress寫作套版非常重要!!!所以對於新手來說,我推薦選擇付費的主題。

很多時候,當你搞不清楚wordpress後台如何設置的時候,有主題的開發人員給你提供幫助就非常的方便,大大減輕了負擔。很多網友因為一些小bug,沒有支援就把主題丟掉換新的,這樣來來回回也是耗費了很多的精力和時間。

有了wordpress寫作套版可以讓你的文章和別人的文章閱讀體驗不一樣!在我們的主題下,除了wordpress自建的寫作套版,我們還有大量的主題自帶套版,大大增強了用戶的閱讀體驗。很多閱讀到的顏色框,以及比較表都是使用這類套版生成的。這比其他博主單純的文字內容更容易讓人閱讀!

wordpress寫作套版
如果你點開自己的wordpress寫作頁面是看不到這些套版

因此,找到一個適合自己網頁的主題套版非常重要!

2. 安裝外掛

wordpress有了一個好看的骨架也需要有實用的外掛功能。因此第二步就是安裝可用的外掛。

外掛有很多事必須安裝的,例如GA追蹤。如果是購物網站需要安裝「WooCommerce」線上表單功能可以用「Gravity Forms」,表格可以使用「table press等等」。

外掛數量眾多,各位網友可以根據自己的需求安裝。

詳細的wordpress教學可以參考我們的“wordpress教學”一文。

6.

網站架設成功

到這裡,一個網站就已經成功架設了!信大多數的人應該會覺得從無到有製作一個網站,似乎並非難事,只要到點選所需要的功能,刷刷卡就可以啟用了,就算有不懂的地方,網路上也有許多免費教學可以研究。

有不明白的地方或者問題,歡迎到下方留言!

Dr. Website
Logo