如何架設網站?2024 網站架設3方法+8大架站平台比較!

如何架設網站?2024 網站架設3方法+8大架站平台比較!
適文

適文

27 min read

2024-04-12更新

電商知識

# 電子商務

# 行銷Marketing

網站架設如何開始?架設網站是數位行銷的重要方法,本篇將分享如何架設網站等基本的架設網站教學,包含架網站平台,精選網頁架設公司,還會告訴大家自己架設網站的注意事項!

網站架設的基礎介紹|一口氣了解架網站的目的與方法!

隨著電商網站發展,有越來越多的交易都在線上進行,人們取得與了解服務內容的管道不再受限於實體店面,而是轉為網路搜尋,因此官網架設也成為了數位行銷與品牌盈利的關鍵!

(一)網頁製作的目的有哪些?網頁又分為哪些類型呢?

不同的網站適合的平台也會不同,就好比建築物,有的是店家,有的則是展覽館,網頁架設開始之前必須先清楚架設網站的目的,我們可以簡單分為以下 3 種:

  • 官方形象網站:企業可以透過網站傳達企業形象、建立客戶的信賴。官方網站產出的文章內容透過搜尋引擎優化(SEO),可以讓使用者更容易連結到官方網站,並看到想看的內容。

✨常見網站架設平台:WordPress、Squarespace、WIX

  • 電商購物網站:商家透過線上通路可拓展市場、追蹤客戶,服務方式不再受限實體店面,自架網站也可以追蹤曾經消費的顧客,是現在商家發展的趨勢。

✨常見網站架設平台:SHOPLINE、Shopify

  • 個人部落格:部落格可以分享長篇食記、旅遊或是內容行銷等文章,除了可以建立個人形象,也有機會在未來幫助你成立個人品牌。

✨常見網站架設平台:痞客邦、Medium

(二)自己架設網站怎麼做?3 種網站架設的方法一次看!

架設網站跟蓋房子一樣,你可以在空地上請建商及設計師去建造你理想的房子,也可以自己佈置與改造空屋,甚至你本身就是建築設計師便可以自己包辦,因此網站製作的方法可以分成以下 3 種:

方法 1:使用架站平台

沒有工程背景,不會編程,但又想架設網站,架站平台是最常見的方式,透過這個方法就不一定要再去學習那些要透過工程師編寫的網站內容,可以直接套用模板,或使用編輯器以拖拉的方式設計網站。

架站平台又能細分為 WordPress 與套版的架站平台,差別在於 WordPress 可以控制網站的編程,因此能夠自己調整與設計網站內容,擴充功能的靈活度也會比其他套版平台高。

方法 2:外包設計公司

如果你有足夠的預算,想架設一個有許多客製化功能的網站,打造出有個人風格且與眾不同的網頁,那麼請網頁設計公司就是一個最能滿足需求的方法。

因為外包設計公司可以針對需求做出極度客製化的網站,所有的功能都由專業人員建置,所以需要負擔的網站製作費用也較高

方法 3:架設網站自學

如果你想從頭學習架設網站,或是本身就有工程背景,便可以自己打造網站,不過自架網站需要相當專業的相關知識,所需學習的技能也非常廣泛,所以架設網站自學也就必然會付出較多的時間與心力成本。

自學架站網頁需要學習的內容大致可分為前台(Frontend)、後台(Backend)與內容管理系統,是非常專業的知識,以下幫大家列出相關的基礎必學技能:

前台(Frontend)後台(Backend)內容管理系統
3 項都需要學會
  • HTML
  • CSS
  • Javascript
  • 選擇眾多,只需要選一個專精,常見的有:
  • PHP
  • Nodejs
  • CMS

    (三)自己架設網站要錢嗎?

    架站方法會隨著網站功能的需求而有不同的選擇,因此架設的金額也不同,就算是自學架設網站,也會有需要讓網頁運行的基本費用,所以無論是自架網站還是外包設計,都會有必要花費的細項

    如何架設網站?5 分鐘看完架設網站教學

    架設網站就像是蓋房子,你需要土地、房子、門牌等,虛擬主機就是你的土地,網站則是土地上的房子,而房子內有各種設備,就是我們網站架設所需的程式與功能,接下來就讓我們來看看詳細的網頁製作教學吧!

    (一)如何製作網頁?開啟網站的架站 3 元素

    1.網域:

    網域是架設網站的必要條件,也是用戶進入網站的管道,就像門牌地址一樣能順利找到網站的所在位址,在一條網址(URL)中,大致可分為超文本傳輸協定(https)+網域 網域

    2.虛擬主機:

    虛擬主機就像房子本身,裡面裝了所有房子的設備,它的功能是用來儲存網站的資料,虛擬主機在購買與維護的費用都比實體主機來得更低。

    3.網頁設計:

    一棟吸引人住進去的房子需要漂亮的風格與外觀,也就是網站的佈景主題,而外掛程式就如同房屋的住宅設備,讓你的房子成為展覽館(形象網站)、藝廊(作品集、部落格)或是商家(電商網站),而網頁就像是網站裡一間間的隔間,替網頁設計 SEO 則可以讓人更容易找到你的網頁,會直接影響到用戶在瀏覽網站的感受,因此好的網頁設計也是網站不可或缺的元素。

    (二)網站架設流程,只要 5 步驟讓你發布你的網站!

    Step1:挑選架站方式

    就如同前面所說,我們清楚知道自己網站的類型後,就要選擇適合的架站方式,我們可以依照需求及個人能力,選擇是要外包設計公司,或是使用架站平台,甚至靠自己一手包辦。

    Step2:購買網域和虛擬主機

    • 為了能讓用戶找到網站的所在位址,我們必須申請網域,當然每年也會需要支付費用: 台灣較常用的網址類型( www. 網站名稱 .com.tw 或 www. 網站名稱 .tw)租用價格約每年 NT$800 元
    • 全球域名( www.網站名稱.com)租用價格每年約 NT$720 元

    網站上的所有資料,都必須有一個存放空間,也就是我們的虛擬主機,通常架設網站時會向虛擬主機服務商承租,又可以分為以下 2 種:

    • 共用型主機(與其它網站共用同):每年約 NT$5,000~$8,000 元
    • 獨立型主機(自已獨立):每年約 NT$36,000~$60,000 元

    Step3:架設網頁

    好的網頁設計除了美觀以外,也需要好的瀏覽體驗,第三步驟就是開始規劃網站的 UI UX,在這步驟中,我們可以再細分成以下幾個流程:

    • 規劃網站功能架構:用心智圖來規劃網站架設需要的功能和物件,例如:電商網站需要「購物車」及「金流系統」等功能。
    • 建立 Wireframe 與 Prototype:規劃好網站的架構後,可以使用 Figma 或 Adobe XD 這類型的 Prototyping 軟體繪製網站介面的排版並建立頁面之間的連結。
    • 套用企業識別系統:最後則是根據品牌的 CIS 開始填入細節設計
    • 架設網站:最後,就可以使用架站平台架設網頁了。不過這邊特別注意一點,若你是使用套版型電商平台,則須留意可以客製化介面的程度,不然有可能到最後發現上面三步流程都白走了喔!

    Step4:網站設計 SEO

    當你有了自己的房屋,並不代表每個人都會經過或拜訪,相同地,網站架設完畢後為了增加網站流量及曝光率並提升排名,就要做 SEO 優化,所以當你正在規劃網站架設 SEO 是一個非常建議一併考慮進去的要點!

    用 SEO 的執行架構規劃好網站技術面的事項,將能幫助你在後續執行內容面的企劃時事半功倍。 若你想了解更多,你可以參考我們的這篇文章:SEO 新手懶人包!公開業界不敢說的 SEO 祕訣!

    Step5:發布並宣傳

    當做好萬全準備,就是時候發布給網路世界了!這時候你需要替你的網站連結 Google Search Console 並請工程師替你的網站產生網站地圖(Sitemap),然後透過 Google Search Console 提交給 Google 收錄,你的網站才有機會被搜尋引擎檢索。

    網站架設流程

    網站架設推薦哪些平台?

    網站架設平台是最普遍的架網站方法,架設網站的平台各有優缺點,但最實際的考量還是回歸到「你的需求是什麼?」。比如說,你可能想要經營電商賣東西,也可能只是想要經營品牌部落格或是品牌官網,或是你希望架站後可以讓你追蹤流量、網站的介面可客製化程度高...等等,這些都是你可以先設想的需求。

    那麼,到底哪個平台符合你的需求呢?我們彙整了 8 間較知名的架站平台,其各自的優缺點供你參考:

    (一)8 大架站平台比較

    有無免費方案優點缺點適合網頁
    WordPress✔️
    • 有多種外掛來實現各種功能
    • 提供多種佈景主題
    • 能完全網站所有功能
    • 對 SEO 友善
    • 架設過程較複雜,對初學者有難度
    適合各種網站
    WIX✔️
    • 提供 500 多種編輯主題
    • 不需要編程技術就可用拖拉的方式設計網頁
    • 可以透過 App 擴展網站功能,提升效能
    • 不需要額外主機商
    • 多種網站外掛
    • 不可輕易更換佈景主題
    • 無法轉移至其他平台
    • 無法自選虛擬主機
    • 顯眼的廣告,會影響用戶體驗
    • 存儲空間限制較大
    形象網站
    Weebly✔️
    • 適合初學者使用
    • 可任意替換網頁模板
    • 免費版就可以綁定網域
    • 可直接套用多種佈景主題
    • 有專門的電商方案
    • 不需安裝或管理任何外掛,完全代管
    • 內建編輯功能較少
    • 外掛彈性較低,第三方程式少
    • 網路開店方案會抽取交易費
    個人形象網站
    小型電商網站
    Squarespace✖️
    • 佈景主題多且精美
    • 圖庫、功能區塊豐富
    • 適合初學者
    • 客服沒有支援中文,只能填表
    • 後台介面沒有支援繁體中文
    • 頁面編輯器較不直覺
    形象網站
    小型電商網站
    SHOPLINE免費試用 14 天
    • 短時間即可完成架站程序
    • 與 Google 合作,後台設定可自動串連購物廣告
    • 網頁功能與設計較不彈性
    • 增加版型樣式,需要熟悉程式語法
    電商網站
    Shopify免費試用 14 天
    • 超過 1,000 個擴充功能
    • POS 系統可連接實體店面
    • 每次交易都會收取交易佣金
    • 部分擴充插件需要付費
    • 不支援網店寄存於第三方伺服器
    電商網站
    Medium✔️
    • 介面簡單、容易操作
    • 自帶使用者
    • 適合初期爬升 SEO
    • 介面、選單設計只支援英文
    • 一致性的單欄排版,缺乏版面變化性
    適合個人部落格或單純想分享深度內容文章
    Strikingly✔️
    • 提供的方案可架設多個網站
    • 頁面編輯器直覺性高,容易上手
    • 良好的客服支援
    • 不需安裝或管理任何外掛,完全代管
    • 網站搬家不易
    • 模板選擇性較少
    電商網站
    個人形象網站

    每個平台推出的方案不只一種,當然付費方案功能也較免費方案來得多,看完了優缺點比較後,可以依照網站架設的需求去選擇適合的平台方案喔!

    (二)免費網站架設可行嗎?沒有預算也能架設網站的免費架站平台

    雖然許多平台都有推出免費購物網站架設的方案,其中也不乏免費網頁模版,但是能夠製作的頁數和功能是有限制的,如果需要比較完善的網頁資料或打造成官方網站,你就需要付費升級。

    但如果你真的沒有任何的預算,也只是想架設簡單的網站,免費網站架設推薦 Google site 協作平台,他最初推出是用來設計網頁,建立方便與團隊溝通的網站,可以放入影片、日曆、簡報等,後來演變為免費網站架設平台,以下幫大家整理 Google site 的幾項特色:

    Google site 優點:

    • 只需要 Google 帳號即可使用,完全免費
    • 以拖拉式的方式建置網站,能快速架設簡單的網站
    • 不需要寫程式就能建置網站
    • 如果會寫程式碼,可以自行編輯版面
    • 可以自行購買並自訂網址

    Google site 缺點:

    • 模版功能少
    • 沒有外掛功能
    • 無法做購物網站
    • 網站不能搬家

    因為 Google site 是無法搬家的,所以企業形象網站或是品牌官網,還是建議選擇其他適合的架站平台比較好喔!

    網站架設公司怎麼選?網站架設費用多少錢才合理?

    挑選網路設計公司時,可以透過 FB 粉專、Google 評價或官網的作品量來判斷服務品質,在與公司接洽時可以注意以下幾點:

    • 網頁設計作品是否符合需求?
    • 可製作哪些網站功能?
    • 是否有後臺操作協助與維護的服務?
    • 有沒有完整的網站資料權限?
    • 是否有完善的前置需求溝通,避免之後修改次數不足?

    雖然依照網站需求不同,也會有不同花費,那外包網站架設公司到底多少錢才合理呢?以下幫你條列出架設網站的基本功能與製作費的報價:

    製作費:

    • 內容管理系統 CMS:2 萬 ~ 20 萬元
    • 響應式設計 RWD:2 萬 ~ 5 萬元
    • 電商功能:3 萬 ~ 10 萬元
    • UX、UI、媒體設計:2 萬 ~ 20 萬元
    • 客製化網站設計&功能:10 萬 ~ 100 萬元

    備註:響應式網站(RWD)會根據使用裝置螢幕尺寸不同,可能是手機、平板或電腦,去調整顯示效果,但還是使用相同的網址和網站內容。

    年費:

    • 網址:約 700 元 ~ 800 元
    • SSL 憑證(加密網站資料):約 1,000 ~ 7,000 元
    • 網站託管:約 8,000 元 ~ 15,000 元

    全客製化網站是從無到有,完全視需求而打造,從「風格設計」、「媒體動畫」、「網站功能」、「內容管理系統」等,到每個頁面的設計呈現,全部隨需要的形象去設計,因此金額區間會非常大。

    如果是像購物網站或是規模較大的官方網站,需要客製化網站後台系統或是擴充新的功能,所耗費的成本相對也會更多,金額也會非常高。

    假設是基本的形象網站,沒有購物車功能,或是可直接使用網站架設公司的模組,就有機會將架網站費用壓低。

    (一)外包公司架網站費用,購物網站架設費用多少錢?

    許多網頁設計公司會依照大部分企業可能使用到的功能去評估後,歸納為各種的版型與功能,而形成一個半成品,來節省成本達到半客製化的網站架設服務,而網站架設的費用,大致可以分為 3 個層級:

    • 租用型(全站式後台管理,如 WordPress、SHOPLINE 等):約 0 ~ 100,000 元
    • 半客製化網站:約 $50,000 ~ NT$200,000 元
    • 全客製化網站:約 $150,000 ~ 600,000 元以上

    購物網站因為需要串接金流、購物車、超商代收或線上刷卡等功能,所以購物網站架設費用也會比架設一般網站多出一些,而網路金流各家銀行收費不同,建議可以向長期往來的銀行申請。

    (二)網站架設公司推薦,精選 3 間好評網站架設公司

    如果你有極大的客製化需求,卻又不知道該選哪一間網頁設計公司,我們精選了網路評價較高的 3 間設計公司:

    • 天矽科技網頁設計: 天矽科技於 1996 年創立,目前已服務超過 2,500 家企業,每年網站維護件數高達 600 家以上,官網的設計案例有詳細介紹設計的內容。

    ✨設計案例:億力光電 設計案例:億力光電 (圖片擷取自:億力光電官網)

    • 米洛網頁設計: 米洛科技於 2007 年創立,從企業品牌的形象塑造開始、網站內容的行銷規劃,提供多樣化的版型選擇與功能模組,網站設計非常有質感,可以於 FB 粉專或官網看更多設計案例!

    ✨設計案例:嘉南羊乳 設計案例:嘉南羊乳 (圖片擷取自:嘉南羊乳官網)

    • 愛貝斯網路: 愛貝斯扎根「客製化網頁設計」領域超過 10 年服務超過 1,000 家以上品牌企業,其中不乏許多知名品牌,官網的設計案例有詳細列出該網站的服務項目。

    ✨設計案例:茶湯會 設計案例:茶湯會 (圖片擷取自:茶湯會官網)

    網站架設注意事項有哪些?4 項須知教你防患未然

    • 資料庫: 資料庫扮演儲存網頁資料的角色,網頁擁有者在後台建立資料庫,可用於儲存頁面資訊、商品、訊息等,而瀏覽者也可能在瀏覽網頁時,產生如會員資料、購物訂單等資料,所以網站架設資料庫可以即時記錄網頁異動的資訊。 (延伸閱讀:了解 CRM 顧客管理系統!我的網站是否需要建置 CRM?

    • 資安: 網站架設資安最基本的就是申請 SSL 憑證,有 SSL 憑證的網址會是 https 開頭,沒有的則是 http ,若你的網站有非常多的重要資料,也已經有 SSL 憑證,那就可以考慮使用防火牆,或是以獨立實體主機取代虛擬主機,來進一步確保資料安全。

    • 報價: 無論是外包網站架設公司,還是透過架設平台,記得確保網站架設報價符合你的網站功能合理的金額,若是外包設計公司,也要確保有清楚條列每個項目的金額,畢竟沒有人想要花過多的錢卻沒有得到該有的服務。

    • 合約: 外包設計公司在瀏覽網站架設合約時,務必仔細觀看合約條文內容,並且提出自己的疑問,要確保合約詳細度,不可過於簡略而導致事後出問題時,無法釐清責任的狀況產生。 其中也要注意合約是否有解約條款與註明檔案歸屬方式、各階段修改次數與校稿時間,以及金額是否有誤。

    看完網站架設的流程與教學,相信你已經了解架設網站的流程及方法,也不再像是無頭蒼蠅了,但實際上架設網站還有很多細微的步驟,值得大家摸熟悉與摸索喔!

    以上是網站架設的相關資訊,如果您喜歡我們的文章歡迎分享!若有其他問題也可以查看其他文章,如果您希望學習數位行銷領域的新知或收到 Welly 定期彙整的知識懶人包,則可以填寫下方申請表訂閱 Welly 的電子報喔!

    延伸閱讀:

    2023 SEO公司推薦名單! SEO排名價格及選擇SEO公司7大重點!

    內容行銷是什麼?4大經典內容行銷案例看內容行銷定義

    適文

    適文

    創辦人兼執行長

    曾在美國 LinkedIn 擔任軟體工程師,熟悉 AI、演算法與搜尋機制,回國後透過深入研究 SEO 優化,成功於 2021 年創立 Welly SEO,如今服務過 250+ 客戶,擁有在大型展覽、課程講授的豐富經驗 。

    分享至

    img_CTA
    img_CTA

    想收到 Welly 彙整的國內外行銷新知?

    訂閱可以收到:

    每週一篇新知報

    一季一本電子書

    SEO 系統性學習文

    其他主題

    行銷工具

    行銷必備工具有哪些? 讓 Welly 幫你統整多種行銷工具教學與介紹文章!

    SEM & 廣告

    SEM 是什麼?社群廣告如何操作? 想要自學投放廣告必看文章!

    SEO Guides

    想要提升網站排名, 先從了解 SEO 搜尋引擎優化的基本知識開始!

    延伸閱讀
    OMO是什麼?新零售O2O、OMO差異+3大OMO成功案例分享!
    適文

    適文

    2024-04-12

    Polly

    Polly

    2024-04-12

    適文

    適文

    2024-04-12

    適文

    適文

    2024-04-12

    適文

    適文

    2024-04-12

    Kira

    Kira

    2024-04-11

    Polly

    Polly

    2024-04-12