網站架設教學:費用+流程+網頁製作軟體(2018更新)

你搜尋了很多「架站教學」,但資訊總是不完整?

「如何架設網站?費用與流程有哪些?」你問~

對此, 阿道以下示範架站一條龍。從註冊網域到租虛擬主機、從設定DNS到網頁製作軟體… (文末有Google Analytics教學影片)

想30分鐘快速自架網站?看這篇就對了!

網站架設教學

1. 購買網域

台灣提供「網域申請」的網站有:

  • 捕夢網
  • TWNIC
  • 遠振資訊
  • 中華電信 DNS

但我們來看一下費用:

HiNet網域費用

HiNet DNS 網域收費(這網頁大概十幾年未更新…)

如果在國外註冊網域,價錢大約每年$10 USD。

這裡以Namecheap為例,首先查詢想買的域名:

查詢網域

查詢想買的網域

若查詢的網域還沒被註冊,你會看到費用(此範例為一年$10.69美金):

網域註冊費用

若網域已被註冊,你可以選擇其他TLD,或重新查詢另一個網域~

所有域名的後段,如 .com / .net / .xyz / .tw 等,稱為TLD(Top-Level Domain)。當你查詢某個域名,你會看到很多奇怪的TLD。雖然 .com 在今日逐漸匱乏,讓許多商家選擇非.com的TLD,但不可否認,.com仍是我們首先想到網址結尾。

挑選域名的五個建議:

  • .com 優先:.com 早已長存我們的記憶。它是最好記、最理所當然的TLD。
  • 品牌化:域名和你的品牌名相關嗎?若你的市場在台灣,可以考慮用拼音的域名(假設你的品牌中文成分居多)
  • 簡短:短域名好記、好打。
  • 去除 www: www 開頭的網址,已非常的過去式。若你能選擇,我建議無www開頭的。
  • 勿用數字和橫線(-):難記又難打!

接著決定購買年數、是否購買whois隱私保護… 然後確認訂單:

whois查詢(例如用whois.com)會顯示域名註冊人資訊。若購買whois隱私保護,註冊者的資訊會被隱藏

接下來的創建帳戶、付款流程這邊就不贅述…

注意:聯絡資訊務必填寫正確,否則有可能會被吊銷網域所有權。

付款完成後,查看你的收件匣。你會收到一封標題含 VERIFICATION REQUIRED 的email:

這是Namecheap的email。若你在其他網站買網址,你也會收到類似email~

這類email是ICANN(一掌管網域的機構)透過網域註冊商,要求購買者確認whois資料的正確性。

確認whois資料無誤後,點擊「Click here to verify your email address」:

Verify成功後,你的網域 / 網址 / URL就申請完畢!

還在用免費子網域?

還在用免費「部落格平台」寫網誌?除非你完全沒有要營利,否則這樣經營Blog風險很高。

臉書網誌、一些網頁製作和Blog平台,都有提供免費子網域。最初可能因為免費就一直用下去,但你投入時間心血在Google排名的,就是URL / 網址。如果網址不是你的,花這麼多精力可能是在幫「平台」打工。

痞客邦(pixnet.net)就是一個例子。很多部落客用它的子網域:

如果pixnet步無名小站後塵,你的搜尋引擎排名,將隨pixnet的網址一併犧牲!

不只有擔心平台會不會倒閉。若不小心在平台犯規,它有絕對權力能逞罰或停權你。你可以google「Facebook停權」看看有哪些悲劇。

是否自架網站、用哪些平台 / 軟體倒是其次。最重要的是使用你自己的域名!域名一年NT$400元有找,是很小的花費,人人都可以負擔。千萬別因小失大!

2. 租用虛擬主機

一個網站,是由包含HTML、CSS、JavaScript、及其他檔案的資料夾所組成。為了存放這些網頁檔案,你須要租用虛擬主機(又稱Web hosting、主機代管、網路空間)。

主機有很多種,例如共享型、VPS (Virtual Private Server)、專屬型、雲主機等。其中共享型的費用最低,適合架站新手。

我們先來看台灣主機商的報價:

捕夢網主機費用(共享型)

遠振的台灣主機費用(有流量限制)

首先,SSD是行業標準。但光是這個條件,就刷掉不少台灣業者,尤其是那些千元平價主機

24小時客服(24小時全年無休,在線即時問答)是歐美的業界標準。台灣有些也聲稱24小時客服,但實際上如何不予置評~

台灣主機商的唯一優勢,可能是中文客服。但很多的架站專有名詞,都是英文…

例如遠振,即使是台灣業者,費用表上也有一半的名詞是英文。也就是說,你無論如何都要記一些英文。

主機商推薦

虛擬主機的價格戰打得火熱。歐美主機商擁有「規模經濟」,不只硬體價格低,軟體科技也走在世界前端。綜合這些因素,歐美業者算是「俗擱大碗」。

如何比較主機商?除了價錢、規模、評價與24小時客服之外,你還要考慮它的機房位置。

若你的目標訪客都在台灣,虛擬主機機房最好在台灣,或鄰近的亞洲國家 – 如新加坡、日本、韓國。

機房在地球的另一端會產生網路延遲,進而影響使用者經驗。若網站是你賴以為生的工具,你當然要提供最好的「用戶體驗」吧?

這是我的推薦:SiteGround虛擬主機

優點:

  • 全年無休、24小時客服
  • 免費SSL憑證
  • 評價好
  • 有新加坡機房可選

缺點:

  • 客服只打英文

「客服只打英文」是否為缺點,應因人而異。對某些人來說,English only反而是優點。

虛擬主機的線上客服,主要是打字溝通(偶而需要截圖)—這代表你可隨時Google翻譯!再說,主機和網站相關單字才幾十個。

主機租用流程

首先到SiteGround的Web Hosting。你可以依照需求選擇方案。在粉紅色匡處,你能看到方案的配置清單:

費用以美元計價。選定方案後點擊 GET STARTED

輸入你在上個教學申請的網域:

若你的網域沒有www開頭,請忽略欄位上的www。它不會對你的網域有任何影響

接著輸入你的聯絡資料、付款方式。記得選新加坡機房:

帳號密碼一定要記好啊~

3. 取得主機DNS位址

當你第一次登入SiteGround帳戶,你會看到一個設置精靈的畫面。它提供精簡、流水式的設定,讓你快速達成目標(例如安裝WordPress)。

但我們身為站長,必須熟悉一般操作方式,因此這裡選 I don’t need help setting up:

按照以下順序點擊,你會在「Account DNS」處,看到兩行網址(綠色底線標示):

把這兩行網址,貼入你Domain的Nameservers欄位

複製這兩串網址,然後按照下面的DNS設定教學,把它們貼入Nameservers欄位。

若有任何技術問題,如找不到DNS位址… 請聯絡SiteGround的24小時客服Google翻譯很好用~)

4. 設定DNS指向

除了申請路標(網域),你還需要一塊地(主機)來蓋房子(網站)。

但你得先確認,這個路標(網域)是指向你租來的那塊地(主機)。這就是DNS指向設定

以下是Namecheap的實際操作…

登入Namecheap帳戶 > Domain List > MANAGE:

在NAMESERVERS欄位: 1. 選擇Custom DNS, 2. 貼入主機商提供的DNS位址, 3. 儲存

這樣就搞定了!

不同服務商的後台會有差異,但操作流程是一樣的。

當然,網域註冊商不是只有Namecheap。我們來看 name.com 和 Godaddy 的設定方法…

name.com

name.com修改DNS指向,做法和其他註冊商類似:先找到Domain,然後編輯Nameservers欄位:

1. Edit Nameservers, 2. 貼入主機商提供的DNS資訊(大部分皆為兩串網址)

GoDaddy

省錢技巧:以美元(USD)計價的GoDaddy產品,會比以台幣(NTD)計價的產品便宜。試著切換幣種或國家 / 語言,你會發現同一樣東西,價錢差好多!

修改DNS指向:找到Domain > 點擊「DNS」或「Manage」 > 在Nameservers(網域名稱伺服器)區塊選Custom > 貼入主機商提供的DNS位址:

1. 選擇Custom, 2. 貼入從主機商取得的DNS位址

等待幾小時(最多不超過2天),你的域名就指向你的主機了。

如何查詢是否生效?很簡單:在瀏覽器輸入你的域名。若出現主機商的預設頁面,新的DNS設定即告生效。

若有任何技術問題,如找不到Nameserver欄位… 請聯絡註冊商的全年無休、24小時客服!

5. 網頁製作軟體

WordPress是全球最熱門的網頁製作軟體。根據W3Techs統計,全球有30%的網站是用WordPress架設—遠遠超過3%(第二名)的Joomla!

你可以安裝WordPress外掛來擴充功能。WordPress有上千個外掛—有免費的,也有付費的。

WordPress主題(又稱版型)決定網站的外觀。如同外掛,主題有免費也有付費。市場上充滿各式各樣WP主題及外掛,因為全球有超過30%的網站是WordPress。

為什麼推薦WordPress?

  • 免費!
  • 支援正體中文
  • 社群龐大(用戶、前端設計師、後端工程師…)
  • 上千個版型
  • 上千個外掛(社群分享外掛、備份外掛、電子商務外掛…)
  • 頻繁發布更新(安全升級、新功能…)

WordPress.org vs. WordPress.com

我們常說的WordPress,其實有三種:

  1. WordPress軟體:一個開源的、免費網頁製作軟體。只要把它裝在任一伺服器,你就可以在網路上發佈內容。
  2. WordPress.orgWordPress開源計劃的官方網站。在WordPress.org,你可以下載WordPress軟體、閱讀官方文件、及參與討論。
  3. WordPress.com一個SaaS(Software as a Service 軟體即服務)架站平台 – 有免費及付費版。

你可以在WordPress.com免費製作網頁(且無須安裝WordPress軟體),但你的網站受限於平台規則。例如:免費版有廣告,且只能使用WordPress.com的子網域…

… 還有,你無法自行擴充平台的功能。若想安裝第三方提供的主題和外掛,你必須購買商務版:

WordPress.com費用表

WordPress.com費用表

6. 一鍵安裝WordPress

按照以下步驟進入cPanel:

會常用到,請牢記~

在WORDPRESS TOOLS區塊,點擊WordPress Installer:

點左上角的Install標籤。輸入你的網站資訊、選擇語言、安裝WPForms外掛… 然後點擊下方的Install:

黃色標示,為「網站管理員」登入後台要用的資訊,務必牢記!

幾秒鐘後… 大功告成!你的網站已架設完成 🙂

等等…

你目前的官網 / 個人網站,看起來怎麼那那麼😱😱😱!?

因為一切只是開始!WordPress的網頁製作流程,有設定首頁、網站及APP圖示、更改網址結構、安裝主題及外掛、嵌入影音媒體、自訂外觀及選單、備份WordPress網站(一鍵打包)… 我在 WordPress教學:32個課程 有詳細介紹~

當然,WordPress不是唯一的架站&網頁製作軟體。也許你想了解:

  • Wix 教學&評價
  • Weebly 教學&評價
  • Strikingly 教學&評價
  • 電商平台:集中開店型、獨立開店型
  • 91APP 評價
  • SHOPLINE 評價
  • meepShop 評價
  • 平台架站優缺點
  • 經營部落格賺錢(5個方法)

這些架站平台,在 如何架設網站:費用、網頁製作軟體 有進一步教學。

不想被Google搜尋到?

網站上線後,除了WordPress預設的「範例頁面」,你可能還沒有任何內容。

在摸索學習過程中,你會創建很多測試內容。這時若讓讀者(或客戶)看到你架設中的網站,想必是很糗的一件事。

因此你會問:「如何讓Google搜尋不到?」 正解如下:

不想被Google搜尋到?在WordPress後台這樣設定~

如何讓google搜尋到

OK!經過一段時間,你的網站內容已經齊全,是對外開放的時候啦!這時你會急迫的問:如何讓google搜尋到?

第一步:當然是取消勾選 設定 > 閱讀 的「阻擋搜尋引擎索引這個網站」—切記!

再來,用俗稱「站長工具」的Search Console,提交網站&網址給Google(下一個教學)…

7. Google Search Console

Search Console 是我(也將是你)最常用的Google工具之一。它能讓你的網址立即被Google收錄。

若你已經有Google帳戶,請在這裡登錄Search Console

登錄後 1. 輸入網域, 2. 點擊「新增內容」

然後驗證你對網域的擁有權:

如何 上傳檔案至 [你的網域]

有兩個方法。你可以用FTP上傳驗證檔,或使用cPanel的File Manager。

以下示範用cPanel的File Manager上傳:

從cPanel進入File Manager

進入後,1. 選擇 public_html (就是網站的根目錄), 2. 上傳HTML驗證檔:

上傳後刷新,會在根目錄看到 google___.html 驗證檔

註:FTP軟體有FileZilla和Cyberduck。這裡有Cyberduck使用教學

驗證成功之後,你會在Search Console列表看到已驗證的網站:

網站出現在列表上後,點擊進入吧!

按照如下操作:1. Google模擬器, 2. 填入域名後面的網址(或不填), 3. 選擇「桌面」或「行動裝置」, 4. 擷取…

5. 要求建立索引:

接著會彈出「選擇提交方式」:

可以選擇「僅檢索這個網址」或「檢索這個網址及其直接連結」。注意,後者每個月有次數限制。

提交網址後,Google須要幾小時甚至幾天,才會將收錄的內容顯示於搜尋結果。

如何知道你有哪些網頁被Google收錄? 很簡單:在Google搜尋 site:[你的網域]。例如 site:www.kocpc.com.tw

site:… 的搜尋字串,勿有任何空格~

這樣,你就可以被Google搜尋到啦!但排名是否靠前的SEO(Search Engine Optimization 搜尋引擎優化),又是另一個話題囉~

8. Bing 網站管理員

你可能會問:「Bing是什麼?」

這情有可原,因為Google太強大了 – 幾乎成了搜尋引擎的代名詞。但別忘了Microsoft也有搜尋引擎,叫做Bing(中文:必應)。Yahoo的搜尋結果就來自Bing。

如同Google Search Console,「必應」也有網站管理員工具。

提交網站給Bing吧!若有MSN、Hotmail、Outlook這些微軟帳戶,你可直接登錄 Bing Webmaster Tools > 新增您的網站

必填欄位標示為粉紅色:

你可以同時提交sitemap(網站地圖)。它的網址在 Yoast SEO外掛 > 一般 > 「特色」標籤 > XML網站地圖 > 點擊「?」 > See the XML sitemap

點擊「儲存」之後,推薦用 選項1: 將XML檔案放在您的網頁伺服器 來驗證網域所有權:

如何上傳 BingSiteAuth.xml 至網頁伺服器?方法和前面的Google Search Console驗證一模一樣。

驗證成功後,你就可以提交網址給Bing啦:

建議同時「提交URL」和「以 Bingbot 進行擷取」

這樣Bing的網站登錄就完成了。然而,Bing不像Google那麼快速就在搜尋結果顯示你最新的URL。有時候提交完幾星期,Bing的搜尋結果還不見蹤影。

9. 安裝Google Analytics教學

想分析你的網站流量?那你一定要安裝大名鼎鼎的Google Analytics(GA分析)。

安裝過程主要是將GA的追蹤程式碼,貼入網站的 <head> 區塊。有些WordPress版型有提供客製化 <head> 功能,若沒有也沒關係,有很多WP外掛能讓你客製 head 和 footer 碼,例如 Head, Footer and Post Injections 外掛。

阿道有錄製一段GA安裝教學:

記得,有很多外掛和主題都有自訂 head, footer的功能。若影片中介紹的外掛,因某些原因和站上其他外掛相衝突,你總是有其他選擇。

10. 網站架設問與答

架站新手的一些常見問題如下:

我想在網路賣東西,該如何規劃?

如果能投入大量時間學習,WordPress+WooCommerce是個選擇。若無法花太多時間自架購物網站,你可以:

  1. 聘請WooCommerce前端工程師,或…
  2. 自己用電商平台架站 – 如SHOPLINE、EasyStore等,或…
  3. (推薦)架設無購物車系統的個人網站 – 這裡重點是使用自己申請的網域!若不想自架網站,可考慮用自訂網址的Blog平台、網頁製作平台來寫文章。透過寫品牌故事、成功案例、產品使用教學等來創造流量,並選擇性的在文章置入電商平台連結,讓有興趣想買的人,能從你的「網路商店」下單。

電商入門者,可從「集中開店型」平台開始,我推薦shopee.tw(蝦皮)。熟悉之後,可嘗試獨立開店平台 – 如SHOPLINE、EasyStore。等自己更厲害,開始研究WooCommerce,將購物車整合進自己的WordPress網站。

自架(或借用平台建立)的個人網站,無論有無購物車功能,創造的流量都是自己的,因為網域資產是你的。起步階段,你可將極度複雜的購物車、串接金流這些東西外包(用一些開店平台)。以個人網站為核心,在文章內連結至網購平台,是我推薦新手電商的作法。

Google協作平台有轉址功能,請問推薦嗎?

用自己的網址 / URL是最重要的。用什麼平台還是架站軟體,倒是其次。

Google協作平台支援自訂網址,所以OK囉~

我是從痞客邦搬家出來的部落客,但自製網站的SEO效果不佳,是否因為在PIXNET的文章沒有下架?

其他因素除外,若Google發現有重複內容的文章,它會優先推薦Domain Authority(網域權重)較大的那的。你的案例應該是pixnet.net的URL被優先。如果你有推廣自架站,並建立連結,它的Google排名將會改善。

即是你在pixnet的文章,把自製網站的流量吃掉了(假設你只是在多個地方貼重複內容,沒為你的自架網站建立連結)。

自己架站一年的費用報價?

網域費用平均一年12美元。虛擬主機平均「第一年」48美元(第二年之後,大約$120 USD / 年)。除非想做客製化,否則只要多花一些心思,你能找到滿意的WordPress版型 – 即使不懂CSS。

然而,花費經常超乎預期:是否購買收費的WordPress主題?是否請人設計(報價行情)?是否買付費外掛?若要自己當技術人,你還要投入時間與學習開銷。

您也許會喜歡:

【期間限定】4G輕速吃到飽百元有找!

最新科技新聞不漏接,設定電腦王阿達搶先看