網站架設 :18 個教學設計(網頁製作+建置費用)

42
66918
網站架設 :18 個教學設計(網頁製作+建置費用)
網站架設 :18 個教學設計(網頁製作+建置費用)

這是一篇完整的「 網站架設 」教學課程,建置觀念到製作流程,一次學會。

想自己架設網站,如:部落格架設形象官網製作購物網站架設、個人或公司網站設計等 ..?

覺得網頁設計公司的建置費用過高,不知道該如何做?

這篇網頁設計教學,我會幫助你搞定這一切,且完全適合新手架站。

一次從門外漢進化成高手,我們開始吧!


1. 如何自架網站?

一個 網站製作 流程,不外乎就是由這 3 點組成:

架設網站 3 要素
1. 購買網址
(申請門牌)
2. 申請主機
(租一塊地)
3. 網頁設計
(搭建房子)

不論是自己製作,或是請網頁設計公司做,都需要在網域&虛擬主機上,做些投資,而且無可避免

差別是,你可用最少的預算,開始網站架設之路。

網址如何取名呢?

「 網址 」是網站組成的第一步,它就像家的門牌一樣,讓人可以順利找到。

1. 簡單好記:越簡單的網域名稱越方便使用者查詢和記憶。
例:蘋果 – https://www.apple.com/

2. 品牌名稱:網域名稱以品牌為名,簡單、易記。只要打算發展品牌的公司,都可以用這個方式。
例:愛迪達 – https://www.adidas.com/

3. 與產品名稱有關:網址與產品的關鍵字有關聯。你也可以用關鍵字工具來想網站名稱。
例:博客來 – https://www.books.com.tw/

4. 去除www:目前大部分新網址都不太會在前面加上www,這是比較舊式的用法。

5. .com優先:.com是大多數人的直覺印象,主要方便好記,增加搜尋率。

6. 勿用中文:網址傳輸是以英文為主,所以網址上有中文,就會轉成一長串的特殊符號+數字,除了難記外,對排名也不太理想。

在台灣,一般民眾最常選擇的就是 .com / .com.tw,大概是這兩種最常見,也最符合。

這邊也把其他類型的網址,也一並列出:

  • org – 財團法人才可申請網域,需要財團法人資料。
  • net – 網路事業機構,例如中華電信、seednet等 .. 才可使用或是其他網路事業。
  • edu – 教育機構,一般為學校機關的網址申請,非一般補習班等機構。
  • gov – 政府機構,為政府網頁使用之網址申請,一般人無法申請。
  • tw / cn / jp – 代表不同國家,如台灣/中國/日本等。

虛擬主機是什麼?

把網址比喻成「 門牌 」,那虛擬主機就是「 家 」的角色。

如果網頁設計完成了,就需要放在虛擬主機上,讓網站正常運作。

「 虛擬主機 」是主機公司,在自管的實體主機上,切分成多個虛擬空間,並把這些空間,租給一般使用者使用。

大幅降低使用者的費用,因為養實體主機是很貴的,只需租用現成的即可。

大約 97 % 以上自己架設網站者,都是租用虛擬主機。

如何挑選虛擬主機?

1. 公司:國外知名虛擬主機公司,都是全球性服務,不論公司大小、主機性能、網站速度,通常優於國內主機。

2. 價位:通常國外的價格,會比國內便宜,但切記不要價格取向,如果主機性能不好,之後也會選擇離開的。

3. 功能性:新手可用入門款方案,價錢也不會太貴;有經驗的網站架設者,可看自己需求,選擇方案。

WordPress 是什麼?

WordPress 是全球知名的網頁設計軟體,全球有 30 % 以上的網站,都來自於 WordPress。

WordPress 網站使用人數
WordPress 網站使用人數

擁有上萬個佈景主題(樣板)和功能外掛,只需一鍵安裝即可成為多功能網站。

或許你不知道怎麼選,請參考 最佳 WordPress 佈景主題最佳 WordPress 外掛推薦,會給你應該的幫助。

WordPress 可完成多種網頁設計,如:部落格架設個人品牌或公司企業官網購物網站架設 等 ..

最大好處是,它是完全免費的軟體,可完全掌握自己網站資料,不需被任何網路平台、網頁設計公司牽制。

因為你就是網站的擁有者。


2. 虛擬主機推薦

Bluehost 是地球最大的虛擬主機公司之一,全球管理數百萬個網站。

是小犬最愛的 WordPress 主機 ,自己親自使用多年,不論網站速度、客戶服務、價格便宜等 .. ,一切都沒話說。

許多部落客、企業主、電商經營者,都把網站建置在上面,有流暢的操作介面,就算不懂英文(可用 Google 翻譯),還是能操作自如。

有哪家虛擬主機商,對 WordPress 有良好的支援?

Bluehost 是 WordPress 官方認可的虛擬主機商,對 WordPress 有良好的支援。

Bluehost教學 :wordpress.org 認證的虛擬主機公司
wordpress.org 認證的虛擬主機公司(經過官方嚴格審核標準)

Bluehost 正常運行時間+網站速度,表現好嗎?

Bluehost 全年有 99.9% 以上的正常運行時間(沒任何一家能保證 100%),這是重要的,不然訪客無法連上你的網站。

測試 10 多家虛擬主機(網路空間)的速度,Bluehost 是排名前幾名的。

Bluehost教學 :網站正常運行比例&頁面載入時間
Bluehost 網站正常運行比例&頁面載入時間

Bluehost 還有許多優點,它的知名度告訴了一切。

接下來,我將開始「 Bluehost教學 」課程,繼續網頁架設教學。


3. Bluehost 方案選擇

前往 Bluehost,選擇 WordPress > WordPress Hosting(WordPress 主機)。

bluehost教學 :wordpress主機+網域申請
使用 Bluehost 申請 wordpress主機+網域

往下滑,會看到 Bluehost WordPress 主機方案,下面我會給你一些 Bluehost 方案評價。

bluehost 主機方案費用
bluehost 主機方案費用

要選擇哪種 Bluehost 方案?

  • 只有一個網站架設需求:選 Basic 方案
  • 多網站架設需求:選 Plus 或 Choice Plus 方案

以新手來說,若只有一個網站需架設,選擇 Baisc 方案是毫無懸念的,此方案也搭配 50 GB 的儲存空間,是非常夠用。

若架設不只一個網站,建議直接選擇 Plus 方案,因為該方案和 Choice Plus 功能差不多,卻比較便宜。

Bluehost 費用了解

Bluehost 通常費用是,網址 $14.99 美元 / 年(一年約 450 台幣),和主機 $7.99美元 / 月(一年約 2880 台幣)。

值得開心的是,Bluehost 官方同意為我們網站讀者,提供最高 50% 以上的主機折扣(如下表,以台幣計算)

WordPress Basic 方案 WordPress Plus 方案
買一年:特價約 2142 元(原價2880 元 買一年:特價約 2682 元(原價 3960 元
買二年:特價約 3564 元(原價 5760 元 買二年:特價約 5004 元(原價 7920 元
買三年:特價約 4266 元(原價 8640 元 買三年:特價約 5886 元(原價 11880 元

小提醒:新手可購買 1 年的 WordPress Basic 方案,用最少預算入門:)

如果網址同樣在 Bluehost 申請, Bluehost 還提供首年網域免費並附帶免費的 SSL 憑證。

等於說,網址+主機費用加起來,最少可用不到 2200 台幣,就能開始你的網路事業!

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

不管購買的是哪種方案,只要點擊本站 Bluehost 連結,讀者們都享有優惠價格。


4. 網域申請+租用虛擬主機

選擇 Bluehost 方案後,就可以網域申請+虛擬主機推薦租用囉:)

這邊簡化 3 步驟,打造自己的網頁製作。

Step1:網域申請

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

如果「 網址 」和「 主機 」都在 Bluehost 註冊的首購申請,Bluehost 會附贈一年的網址(免繳網址費用)唷。

bluehost教學 :網域申請
有建立新網址 & 已經有網址,兩種選項
  • 小提醒:如果你是用「 已有網域 」去申請 Bluehost 主機,請操作 DNS 設定指向,這樣原來的網址才會順利連結上新主機。

Step2:申請資料填寫

填寫使用者資訊,需都填寫英文,郵遞區號需 5 碼(國際碼),可用這個工具查詢。

Email 需填寫正確,申請完成 Bluehost 會寄網域確認信(需點擊啟用)& 購買收據等 .. 敏感訊息。

bluehost教學 :使用者資訊
bluehost教學 :使用者資訊

主要留意租用多久、是否加購商品、確認消費金額,Bluehost 會贈送一年網址和免費的 SSL 憑證。

加購商品只有 Domain Privacy(網域隱私保護)比較值得加購,其他可不勾選,省預算。

bluehost教學 :方案選擇&加購商品
bluehost教學 :方案選擇&加購商品

確認消費金額,接著填入付款訊息,都完成無誤後,勾選服務條款,最後按下 Submit 送出。

bluehost教學 :付款方式
bluehost教學 :付款方式

Step3:創建 bluehost 帳戶

跟著 Bluehost教學 ,如果網域+主機申請成功,會看到歡迎訊息 & 收據明細,接著來註冊 Bluehost 帳戶。

點擊 Create your account 創建帳戶。

bluehost教學 :虛擬主機申請完成
bluehost 主機申請完成,創建 bluehost 帳戶&收據確認

下圖,Domain Name(網域名稱)是未來登入 Bluehost 的帳號,並輸入你想申請的密碼,確認無誤後點 Create Account 建立帳號。

P.S 這裡的資料請妥善保存,是未來登入 Bluehost 的帳密唷:)

bluehost教學 :創建bluehost帳戶
創建 bluehost 帳戶:輸入密碼

到了這裡,恭喜完成了網域申請 > 主機申請 > Bluehost 帳戶註冊的重要流程。

有了這些東西,我們就可以架設 WordPress 網站囉。


5. WordPress 網站製作

到了這邊,應該已經有個人網域、虛擬主機、Bluehost 登入帳密了,我們繼續架設 WordPress 網站。

首先,前往 Bluehost,點 Login 登入。

bluehost 登入教學
bluehost 登入教學

輸入你的網域名稱(或信箱)&密碼, 登入 Bluehost 。

bluehost教學 :後台登入
bluehost教學 :後台登入

如果是第一次登入,Bluehost 會詢問一些問題,並協助你安裝,這些畫面 Bluehost 有可能更改,但未來都可以更改,先任意選擇即可。

下面是示範教學,實際狀況可依個人需求選擇。

首先,選擇網頁製作類型、為誰創建網站等 .. 。

bluehost教學 :網站架設流程
選擇想架設的網站類型等 ..

勾選 Blog 頁面、About me 關於我們頁面等 ..

網頁製作教學:bluehost
選擇想加入的網頁內容

命名網站名稱、設定網站標語,和給 Bluehost 架站幫手一點評分。

bluehost 教學:網頁製作
命名網站名稱、標語、和給 Bleuhost 架站流程評分:)
  • 因為 Bluehost 是英文介面,中文標題在 Bluehost 後台可能呈現問號(除非英文命名),但這不會有任何影響。

然後,挑選 WordPress 主題,可先選個免費版的主題玩玩,看喜歡哪個,不一定要跟我一樣:)

bluehost教學 :wordpress主題挑選
超多 wordpress 主題挑選:)

如果安裝過程中,有出現類似加購商品,先取消它不加購

安裝完成後,會前往 Bluehost 後台首頁。

然後點 My Sites,會出現剛架設完成的網站,可在這裡進入 WordPress 網站前後台。

Bluehost教學 :前往網站前後台
Bluehost教學 :前往網站前後台
  • 此時前台路徑可能是臨時網址,過些時間 Bluehost 會自動更改成你剛申請的網址。

想新增頁面、編輯文章、新增分類 .. ,請參考 WordPress 後台教學課程,有更多的 WordPress 操作。

這時,點擊上圖前台路徑,會發現 WordPress 網站已經順利出現囉!恭喜你!

如果是 WordPress 登入狀態,前台應該看得到預設主題畫面。

如果用訪客模式(無痕視窗),前台應該會出現網頁準備中頁面,等網頁設計完畢後,再切換 正式上線 即可。


6. Bluehost 其他設定

如果有跟著上面的教學,你應該也順利建立你的 WordPress 網站了。

接著我們還有一些事項需完善它,像是信件認證(WhoIs 網域身份認證)、Bluehost & WordPress 設定、網站正式上線 ..。

這幾個也是必要的步驟,請參考 Bluehost 網站製作,補充尚未學習到的部分。

完成後相信你的個人網站設計,也大功告成了:)


7. WordPress教學

WordPress 網頁架設完成,可能會需更了解 WordPress 後台如何操作。

學得更多,就能幫助自己設計更好看的個人 or 公司形象網站。

對此,我準備了完整的 WordPress 後台教學,協助你更進階一步。

更多 WordPress 前後台教學,多個課程前往學習:

WordPress教學 :23 個安裝課程(主題外掛+購物車)


8. 架設 Blog 網站

如果想建立 Blog 網站,開始記錄生活、任何筆記,或是經營自媒體品牌,想找一個好的部落格平台,開始起步。

你需要一個完整的 Blog 架設教學,可以幫助你完成。

建立 Blog 網站教學?對此,我寫了一篇完整文章,希望能幫你自架網站成功。

如何架設 Blog 網站(寫網誌+部落格平台),完整學習:

建立Blog :如何架設教學(寫網誌+部落格平台)


9. 架設形象官網

形象網站設計,或是官網設計,如果你想行銷企業品牌,架設一個形象網站,是勢在必行。

它是你在網路世界的門面,可讓更多人第一步認識你。

也許你找了許多網頁設計公司,但價格費用超出預算?沒關係,在這篇文章,我會手把手帶你完成一個官網設計。

協助你用最少預算,完成這一切,請參考下面連結,應該會對你有幫助。

如何架設形象官網,開始品牌打造,完整學習:

官網設計 :形象網站架設製作(個人品牌+公司企業)


10. 架設購物網站

WordPress 除了官網形象製作,還能幫助你購物網站架設。

許多人問如何用最少費用,自己 架設購物網站 ,我推薦使用 WordPress + Woocommerce。

wordpress woocommerce 架設購物網站
wordpress woocommerce 架設購物網站

WordPress 是全球知名的網頁設計軟體,全球有 30 % 以上的網站,都來自於 WordPress。

Woocommerce 是 WordPress 旗下最知名的網路商店架設外掛,全球下載量已超過 4500 萬。

任何想的到的功能,如:商品管理、訂單管理、會員管理、優惠管理、頁面管理、金物流串接等 .. ,都擁有。

眾多的 Woocommerce 外掛,可協助你擴展電商平台,只需點擊安裝即可。

架設購物網站 :wordpress woocommerce 外掛
wordpress woocommerce 外掛

對此,我寫了一篇「 架設購物網站 」,協助有這方面需求的人。

希望能有效幫助到你。

WordPress Woocommerce 購物網站架設+設計,完整學習:

架設購物網站 :WordPress 開店平台(官網製作)


11. DNS設定指向

dns是什麼

DNS 設定,就是把網域(門牌)指向虛擬主機(土地),當搜尋網址時,可以順利找到放在主機上的網站。

通常網址+主機不在同一地方申請,可能就需手動 DNS 設定,然後等待 24 – 48 小時作業時間,即可完成。

接著示範主機在 Bluehost 申請,網域在 PcHome 申請,要如何設定(每家放的地方不一定相同,但流程大同小異)。

Step1:找到主機的 DNS 網址

首先登入 Bluehost 後台,前往 Domains > Assign ,輸入自己的網址,然後 Bluehost 會產生出兩組 DNS 網址,並複製起來。

小提醒:找到虛擬主機的 DNS 網址,並複製起來。

bluehost 的 dns 設定,範例教學
bluehost 的 dns 設定,範例教學

Step2:將 DNS 網址,複製至網域申請的地方

前往 PcHome 網址,進入 DNS 設定與修改。

小提醒:找到你申請的網域商,DNS 設定&修改的地方。

網站架設 :DNS 設定指向
網站架設 :DNS 設定指向

將剛在 Bluehost 的兩行 DNS 網址,貼上至 PChome 送出,等待 24 – 48 小時的 DNS 轉址時間,就設定完成囉!

網站架設 :DNS設定指向
網站架設 :DNS設定指向

12. 架站平台比較

架站平台主要分成 3 類,有部落格平台網頁製作平台網路開店平台

  • 部落格平台,如:Wordpress、痞客邦、Medium ..
  • 網頁製作平台,如:WordPress、Wix、Weebly ..
  • 網路開店平台,如:WordPress(Woocommerce)、91App、ShopLine

會發現,不論是哪種網站類型,WordPress 都能製作完成。

因為它是開源軟體,有眾多的佈景主題和擴充外掛,功能幾乎能一鍵安裝。

我使用 WordPress 架站平台的理由?

wordpress-banner

使用 WordPress 有非常多喜愛的理由。

最重要的,使用 WordPress 能擁有自己的網站資料,如:文字、圖片、網站程式碼、資料庫等。

這代表,如果任一家架站平台倒了(當初的無名小站),都與你無關,因為你不會再重新開始這一切。

這是我最關心的事。

WordPress 和其他部落格平台,兩者比較?

使用 WordPress 擁有完全自主權,但需要從 0 開始經營,因為不會有現成流量。

許多部落格平台,如:痞客邦、Medium,因為已經有固有社群,所以可能會有少部分的平台流量(但也很少)。

最重要的還是你的網站,有無持續經營。

Woocommerce 購物網站架設,和其他開店平台比較?

woocommerce 購物網站

Woocommerce 是 WordPress 生態中,最知名的網路商店架設外掛,全球下載量已超過 4500 萬,可以用它架設購物網站。

如果你正起步創業,在還沒收入時,用最少預算開始「 購物網站架設 」, Woocommerce 會是最好的選擇。

WordPress Woocommerce 購物網站架設+設計,完整學習:

架設購物網站 :WordPress 開店平台(官網製作)

如果你有一些網路開店成績,或是預算足夠,想直接有完整電商功能。

網路開店平台,如:Shopline、91App,也會是一種選擇。

好處是,他們都幫你設定好了,基本上想要的電商功能,應該都會有。

缺點是,「 網站資料擁有權(無法網站搬家) 」和「 每月的高額月租費 」,可能是你未來會面臨的問題。

見仁見智,擇你所需。


13. 部落格平台

經營網路個人品牌時,可能會需要「 部落格平台 」,協助完成 Blog 架設。

WordPress 是我最推薦的方法,擁有部落格功能需要的一切,在 架設平台比較 章節,可知道原因。

這篇文章中,你可學習到 Blog 部落格網站,的完整架設流程。

如何架設 Blog 網站(寫網誌+部落格平台),完整學習:

建立Blog :如何架設教學(寫網誌+部落格平台)

除此之外,這邊也列出幾個比較常聽到的部落格平台,跟大夥介紹。

痞客邦

台灣,也滿多人使用痞客邦,好處是它有現成的社群流量(要看網站經營狀況)。

痞客邦部落格,社群首頁
痞客邦部落格,社群首頁

但缺點也不少,比如說佈景主題,或許能再更好一點,大多都是舊款設計。

痞客邦佈景主題
痞客邦佈景主題

最讓人無法接受的,可能是超多的網路廣告,造成很差的使用者體驗。

免費版的果然是塞好塞滿,如果不想有廣告,就需付費。

Medium

Medium 是國外比較新的部落格平台,有許多人也使用它,開始自己的 Blog 官網網頁架設。

medium:blog網站平台推薦
medium:blog網站平台推薦

相比痞客邦,我更推薦使用 Medium ,因為它的設計風格很美,和沒有像痞客邦這麼多廣告(重要!)

medium部落格,畫面版型
medium部落格,畫面版型

這幾款就是好用的「 部落格平台 」,最愛用的還是 WordPress ,其他也一起分享出來,希望有幫助到大家。

部落格平台整理:

  • WordPress
  • 痞客邦
  • Medium

14. 網頁製作平台

想製作個人 or 企業官網架設,可能會需要「 網頁製作平台 」,協助完成網頁設計。

WordPress 是我最愛用的「 網頁製作平台 」,在 架設平台比較 章節,可知道原因。

網站架設,第一推薦就是使用 WordPress,這篇文章中,你可學習到「 官網設計 」,打造品牌網站的完整流程。

如何架設形象官網,開始品牌打造,完整學習:

官網設計 :形象網站架設製作(個人品牌+公司企業)

除此之外,Wix 也是比較常聽的網頁製作平台,下面跟大夥介紹。

Wix

wix 網站教學介紹

Wix 在全世界擁有許多愛好者,是許多人愛不釋手的「 網頁製作平台 」。

提供 500 多種的網站模板,有免費版和收費版,可隨你挑選。

主要分成 Wix Editor (編輯器)Wix ADI(人工智能),這 2 種網站設計方式,如下個別為大夥兒介紹。

wix教學:wix editor & wix ADI

Wix Editor(Wix 編輯器)

Wix 一開始就擁有的網頁設計範例,是很直覺的網站架設流程。

提供 500 多種模板讓你選擇,若使用 Wix Editor 響應式網頁設計工具,就不用怕找不到自己喜歡的樣式!

wix教學 :多種選擇模板

選完喜歡的模板後,再搭配使用 Wix Editor 的選單編輯器,就能客製化你的網頁囉!

只要用拖拉元件方式,就能新增一個區塊,然後點擊想修改的地方,輸入文字 or 圖片,即可完成一個區塊的設計,是不是很方便呢。

網站架設 :wix editor 客製化網頁設計

Wix ADI(Wix ADI 人工智能)

Wix 新開發的網頁製作軟體,會用人工智能方式,創建符合你需求的網站 ..

修改彈性小於 Wix Editor,但創立的網站速度更快,適合想快速架站的人。

wix ADI 功能教學

當然,還要來看一下使用 Wix ADI 的網頁編輯頁面,如下圖。

優點就是架設網站速度變更快了,缺點是客製化程度比較低 ,所以各有優缺點。

WIX ADI 網頁設計教學
WIX ADI 網頁設計教學

結論

有許多人拿 WordPress 和 Wix 做比較,或許你可能也有這方面的問題,到底哪個比較好?

用我的經驗來說,如果網站想經營長久,或是可能發展個人品牌,建議使用 WordPress 網站架設方式

因為網站資料都在自己上,也不會有平台商倒掉,然後網站要重新經營的問題 ..

更多 WordPress 前後台教學,多個課程前往學習:

WordPress教學 :23 個安裝課程(主題外掛+購物車)

如果是一次性 or 短暫使用的狀況,就可使用 Wix 網頁製作平台,省時又省力。

廣告行銷結束後,如果網站不需要想刪除,隨時都可以。

總合來說,就是 WordPress 和 Wix 各有各的好,端看你的需求在哪裡。

網頁製作平台整理:

  • WordPress
  • Wix
  • Weebly
  • Strikingly

15. 網路開店平台

想要經營線上生意,可能會需要「 網路開店平台 」,協助完成購物網站架設。

國內外有許多電商主,使用 WordPress + Woocommerce 做為網路開店平台,在 架設平台比較 章節,可知道原因

woocommerce 購物網站
woocommerce 購物網站

Woocommerce 是 WordPress 旗下最知名的網路商店架設外掛,全球下載量已超過 4500 萬。

任何想的到的功能,如:商品管理、訂單管理、會員管理、優惠管理、頁面管理、金物流串接等 .. ,都擁有。

woocommerce購物網站架設
woocommerce購物網站架設

眾多的 Woocommerce 外掛,可協助你擴展電商平台,只需點擊安裝即可。

購物車網站設計,我的第一推薦 WordPress+Woocommerce ,來架設購物網站。

對此,我寫了這篇「 架設購物網站 」教學,希望能有效幫助到你。

WordPress Woocommerce 購物網站架設+設計,完整學習:

架設購物網站 :WordPress 開店平台(官網製作)

Shopline

如果真的要別種選擇,第二順位應該就是 Shopline。

Shopline 優質的設計介面,和網路購物的多功能整合,吸引不少愛好者。

shopline網路開店平台
shopline網路開店平台

最大好處是,可直接使用很多的電商平台功能,如:會員管理、訂單系統、優惠管理等 .. ,不需進行安裝。

shopline功能列表
shopline功能列表

缺點是,這樣的網路開店平台,網站資料如:網頁程式碼、文字圖片、資料庫等 .. ,不是你擁有的。

如果哪天你的品牌知名了,想更換網站系統,那你將重新開始(關鍵字排名、重上商品資料等 ..),這會是一個巨大的成本。

當然,還有每月固定的平台使用費,也是要考量的地方。

結論

結論是,剛開始網路事業,建議使用 WordPress+Woocommerce,雖然會花一些時間架設,但至少不會有「 資料擁有權 」和「 每月高額平台費用」問題

等品牌成熟一點後,可自行雇用軟體工程師,協助公司整個官網製作,或是外包請網頁設計公司製作(記得拿程式碼+資料庫)。

這是我會使用的方法,每個人不一定一樣,這只是我的經驗建議。

網路開店平台整理:

  • WordPress+Woocommerce
  • Shopline
  • 91App
  • Meepshop
  • Cyberbiz

16. 自學程式語法

「 自學程式語法 」,有最高的網站控制權,從網址、 主機、 程式架構、 擴展性等 ..,不用依靠任何平台改變。

如果要做 SAAS(軟體即服務),那這是必須的,舉例有名的:FB、 Line、User等 .. ,就是 SAAS 軟體公司。

程式語法有:如:HTML、CSS、JS、PHP、Python、Nodejs、Ruby、C#等 ..。
網站架設 :saas幾種模式

如果只想簡單寫寫 Blog 或架設購物網站,市面上已經有完整的軟體可使用,就不用大費周章,還要學程式開發。

如:部落格平台網頁製作平台網路開店平台 等 .. ,都有現成的系統。

當然,如果要完全客製化或是要很特別功能,那還是要懂程式語法,不然就是花錢請網頁設計公司製作。

想自學程式架站這也可行,但在我學習程式的路途上,確實發現這個領域非常的「深」。

要有強的程式功力,能開發功能性強的網站,沒花個一年半載是無法的,看下面的圖應該會有所感。

網站架設 :程式學習路線圖
GitHub前端學習路線

所以,如果要踏入,建議一定要有決心或興趣才會走的久。


17. 網站設計公司製作

如果需要很客製化功能,如:Uber 派車系統、FB 社群服務、蝦皮購物等 ..,完整功能服務。

網站架設 :Uber功能網站
網站架設 :Uber功能網站

不管是什麼網頁製作軟體(平台),都無法有這個能力做到。

這時除了有程式能力可自己開發外,就需要請網站設計公司製作了。

網站設計公司挑選,重要3點:

1. 公司 OR 個人(SOHO族)

2. 網頁設計作品集

3. 網頁設計報價價格

你的網站,是公司還是個人(SOHO族)開發?

網頁設計網站市場,大致上可分成公司、個人網頁接案(SOHO族)這兩種。

如果要選擇的話,我會推薦選擇「 公司 」幫你架設網站,而不是「 個人 」接案,原因是:

個人:可以不做就不做,公司:員工不做,老闆可以再請人

當然也有公司倒的,就像個人接案後來不做一樣,但公司穩定性通常比一個人高很多。

不管是請個人 or 公司製作網站,可以的話一定要拿到完整的程式碼,不然到時候人或公司怎麼了,錢也白花了。

如果請網站架設公司製作網頁,也可先問一下公司成立多久,也會安心許多。

重點小整理:

1. 找公司製作比找個人還來的安全。

2. 自己管理主機是最好,沒辦法的話請拿到你網站程式碼。

3. 打聽一下公司成立了多久。

網頁設計作品集,漂亮嗎?

比起網頁設計報價費用,我會認為公司的作品集(範例網站)更加重要。

可以做個小實驗,點進喜歡的網頁設計公司作品集,隨機挑選 3 – 5 個網站,之後幫你架設的網站,大概也會長那樣子。

目前在網頁設計的市場,很多人喊價喊到5000、8000做一個網站,我心裡也是點點點,看看他們的作品集吧,你會有答案的 🙄  🙄

其實一分錢一分貨,當然如果真要花錢做網站,一定要貨比三家不吃虧,但 .. 我會提醒的是,千萬不要把價錢當唯一,不然做出來很醜,你會很想哭的相信我。

還有一個判斷這家公司設計品質方式,就是看他的官網設計的如何,如果很醜,請三思而後行。

想想他的官網都長成這樣了,你的網站設計會好看到哪裡去,是吧?

小提醒:網站設計品質比費用還重要!

網站設計報價價格,有哪幾種?

常見的架設網站費用,就是 套版客製化 兩種,但最近由於網路服務的興起,有些網頁設計公司也搞了個 租用型 的方式,目前大致上是這三種。

1. 套版方案

2. 客製化方案

3. 月 / 年租型方案

套版方案

就算是 Rwd 網頁設計,如果只是一般的企業形象網站,有超過 10 萬就算貴了。

如果是購物網站套版,5 – 20萬(或更高)都有可能,因為裡面可能有公司開發好的會員系統、商品管理、訂單系統、客服系統等 .. ,功能多自然價格也高,是合理的。

要注意的是,是否有需要用到這麼多功能,畢竟剛開始經營網路商店,創業維艱,衡量自己需求找到最適合自己的套版方案,是要做點功課的 😉  😉

客製化方案

客製化方案的網頁設計報價,是沒有上限的,對的你沒看錯「沒有上限」!

如果需要很「 客製化 」的,教你一個跟網頁業務溝通的方式,先告訴他你的預算,方便他在你的預算內,幫你搭配功能。

網站架設 :訂位管理系統
網站架設 :訂位管理系統

上圖,是客製化的訂位管理系統(SaaS),還結合了後位管理、顧客管理、座位安排等功能 .. 想當然費用會比較高。

客製化方案的網頁設計報價費用,從10萬、20萬、50萬、甚至100萬都有可能,主要還是看需求而定。

使用客製化方案,可留意下面幾點:

  1. 客製化網站時,請先告訴業務你的需求和預算。
  2. 貨比三家不吃虧。
  3. 設計品質比價格更重要!

月 / 年租型方案

使用租用型方案,背後的運作方式是原來一次性的買賣改成分期方式跟你收費而已,但最終網頁設計網站,還是不屬於你的 .. 所以,除非是以下兩種狀況,不然不太推薦 😯  😯

如果是我,假如要用月租型方案,會只會用在這個情況:

一次性網站設計費用太高,先月租試看看水溫

寫到這裏,是不是對挑選網站設計公司,有了一些概念了呢?希望能幫助你,找到理想的網站架設公司唷!


18. 開始起飛!

恭喜啦!!如果有從最上面看到這裡,在架設網站這塊領域,你應該也了解網站如何從 0 到 1,從建立到完成 ,還有 網站架設 的相關概念,一次通通灌輸給你 🙂  🙂

網站架設 :startup-rocket

在這篇文章,示範了多種從 0 到 1 的 網站架設 範例,也提到了多個知識點,如:網站架設教學、網頁製作軟體、網頁設計公司挑選等 .. 多種教學。

更多 WordPress 前後台教學,多個課程前往學習:

WordPress教學 :23 個安裝課程(主題外掛+購物車)

不知道你在操作上,是否有遇到任何的問題?

無論是哪種情況,我非常歡迎你在下面的評論裡告訴我,你學到、遇到了什麼?

如果可以,我也會幫忙大家解惑的!

資料參考(若沒附上的,再麻煩提醒我,我在加上去,感謝~):

三個CMS系統的比較

Bing vs Google: SEO Strategy Across Search Engines

CloudFlare: 維基百科

奧革設計資源彙整

DNS: 維基百科


網頁設計教學/資源

網站架設 :網頁設計(程式+設計)
網頁設計(程式+設計)

有人問我說,如果想成為網頁設計師,而不是用軟體或外包,那需要會些什麼?

我回答:一個完整的網站,包含兩個重點「設計」+「程式」層面,目前所看到都是。

網頁設計 – 業界小概念

網路剛剛開始盛行時,有個網站就很帥了,「設計」那時還不是很重要。

但現在,如果網頁設計不好看,那「跳出率」自然就會高,當然得不到好的 Google 網站排名。

「設計」完成的下一步,就輪到「程式」開始實作啦!

「程式」部分比較理性,任何一個功能實現,都需要合乎邏輯的程式碼,也代表需要花很多時間 ,所以常會聽到設計師需要和工程師「溝通」,就是這樣來的。

如果設計的太天花亂墜,再強的工程師也做不出來,所以在網頁設計業界,這兩者達到一個平衡並完成作品,是最好的 😆  😆

接下來,我整理了一些「設計」和「程式」的相關資源。

架設網站(教學+課程)資源

網頁設計「靈感參考」:

Dribbble:最有人氣的設計靈感網站,挖寶的好地方。

Behance:支援中文版,後面有Adobe老大哥站台。

Pinterest:圖片界的Google,有大量圖片素材可供搜尋,很多人愛不釋手。

站酷:眾多網頁設計作品案例,靈感來源參考。

CollectUI:眾多網頁設計作品案例,靈感來源參考。

網頁設計「軟體教學」:

學UI網:學習PS、 AI等軟體好地方,也有影片學習。

UI中國:中國知名的UI/UX設計,教學分享網站。

網頁設計「素材來源」:

iconfinder:很多扁平化 Icon 圖示可以使用 ,適合作為介面設計的圖示來源。

flaticon:國外有名的icon素材網站,挖寶的好地方。

sketchappsources:提供 Sketch 軟體可用模版與素材的網站,收錄許多漂亮的樣板。

pexels: CC0 圖片搜尋引擎,收錄了許多網站的 CC0 圖片,方便尋找想要的圖片。

pixabay: 大量 CC0 圖片可供搜尋,適合用在商業文章或網頁設計範例中。

freepik:提供大量圖像設計素材的搜尋引擎,滿多向量圖型可以下載來使用。

網頁設計「程式學習」:

W3School在線課程(簡中):蒐集大量程式語法的基礎知識點,新手入門程式的好地方。

Codecademy:網頁設計課程/教學,可以從HTML、 CSS 開始學起,註冊會員後有一系列的教學。

網頁設計「程式編輯器」:

sublime:編輯器的入門款選項,簡潔風格讓很多使用者喜愛。

vscode:由微軟開發新一代強大且優秀的編輯器,內含豐富外掛可供安裝。

分享這些也不是說一定要成為「 網頁設計師 」,才能架設一個漂亮的網站。

因為現在網頁製作平台,越來越成熟,如:WordPress 就是超好用的網頁架設軟體。

用 WordPress 就能幫助你完成,大多數的網站製作,想學習更多可參考下面文章。

更多 WordPress 前後台教學,多個課程前往學習:

WordPress教學 :23 個安裝課程(主題外掛+購物車)

這篇文章就到此囉,希望大家一切順利。

我是站長小犬,長期關注:WordPress 網站架設、WordPress 後台教學、WordPress 佈景主題、WordPress 外掛、網路行銷等 ..:)

42 COMMENTS

    • 嗨~方先生你好:
      剛看了你的連結內容,裡面功能算是簡易版的淨銷存系統,是比較客製化的網站功能,採用PHP程式語法架構出來的。

      建議如果公司內部有技術團隊,可以和公司溝通請他們協助開發;若是沒有的話,可以找尋網頁外包(公司或是個人Soho,優缺點和注意事項,文章內有敘述)。

      祝你一切順利:)

  1. 您好,看到您的文章讓我受益許多,但有些疑惑
    不曉得如果要從網頁製作平台轉到網頁製作軟體或是自己架網站,或者從網頁製作軟體轉到自己架網站的時候
    之前建立的會員系統會不會有無法轉移(會員要重新註冊)的情況發生?

    • 嗨~HeZe你好,首先很開心我的文章有幫助到你:)

      切入正題,在平台上的移轉,舉例:如果原來用wix(網站製作平台),想要把會員移轉到wordress(網頁製作軟體),你可以先看wix後台,有無開放會員資料匯出功能,若是有的話就輕鬆許多,但以我的經驗來說多半沒有(因為多半不希望你跳槽)。

      如此一來,只能用人工手動新建會員方式,在wordpress建置會員檔案,如此一來也不用再發信給原來會員,請他們重新註冊,不然多半會有會員流失問題。

      如果是要把wordpress的會員,匯出到自己架設的網站,應該比較有機會實行,你可以先搜尋是否有類似的外掛,協助你進行。

      但如果沒有的話,可能還是需要人工手動重建會員,或者可用程式,爬wordpress的會員資料+頭像等資料..進入到你自行架設的官網,也可以達成。

      因為跨平台的移轉資料是算比較大的工程,各家軟體本來就不一定會相互支援,祝你一切順利:)

  2. 您好, 謝謝你這麼詳細地解說, 讓我終於有點頭緒…

    另外有個問題想請教: 如果想做互動性較高的新聞網站, 也打算初步的設計和開發外包給網頁設計公司製作, 比較好奇是在和他們洽談前, 就要有一定量的新聞內容了嗎?(避免網站架設好但產品還沒好?)
    或是能夠先有網站, 再慢慢累積內容?如果是前者的話, 有建議要提供設計公司多少的內容量嗎?

    非常感謝!

    • WenYen 你好,基本上這兩種模式都可以,但如果怕網站成品出來,沒有內容會有點單調,那建議可以先準備幾則文章,等待網站完成後先上傳幾則(自己上 or 請外包公司上),免得網站看起來空空的,其他的文章再慢慢製作就可以。

      希望有幫助到你:)

  3. 請問為何我已經使用Let’s Encrypt加密,也出現如同您顯示畫面表示已經成功,但為何在一鍵安裝WordPress的Choose Protocol時,選擇https:// 的選項是出現A trusted SSL Certificate was not found呢?
    是因為DNS指向剛設定的關係嗎?需要等待時間嗎?還是有哪裡出問題呢?謝謝您指教!

    • HI,CarolHuang:

      有的時候可能是剛才設定完成的關係唷,可以試著等一下。

      或是先安裝好wordpress,再用Let’s Encrypt加密。

  4. 想請問,只想做一個最基本的公司網頁(介紹公司提供的檢測項目而已),是用weebly自己好呢?還是請人架設好呢?
    主要是希望能夠上搜尋引擎,讓公司能見度提高
    如果是用weebly做,看他方案內也有優化的功能,這樣就能上收尋引擎嗎?還是也是要自己上google去申請
    不好意思….問的問題或許很好笑…..但我真的是不太懂….再請您指教,謝謝

    • HI Amy:

      若只是簡單的形象網站,可以使用上面的免費架站軟體,他們內建都有 SEO優化(應該也會協助做網站提交),只要公司名稱沒有含熱門關鍵字,是滿快在瀏覽器上可以用公司名稱搜尋到自己網站。

      若是想要自己控制 SEO優化,建議你可以使用 wordpress 進行網站架設(有網址+主機費用),但又須比用 weebly 這些軟體,還要多學一些東西補足了,好處是你可以自行變更任何東西。

      希望有幫助到你唷:)

  5. 有幸拜讀您的文章 真的是相當的認真且用心
    能夠看出筆者地努力的心血及想盡可能完善各方面介紹的認真態度
    在此感謝您的分享

    順便請教 如想精進有關網頁前端布置及後端資料處理的相關技術
    例如 必要js套件的學習應用 學習資源.書籍等等
    有沒有什麼個人推薦的呢?

    • HI Hower:

      謝謝你的鼓勵和支持:)

      若要學習程式技術,目前來說網站上的資源已經很多了,你可以參考 w3school(簡體教學),會入門比較快,從 HTML => CSS => JS => PHP 逐步學習,從前端入門,若是對後端有興趣,可以玩看看 PHP 比較好入門。

      JQ 是 JS 的一種框架,可以幫助你完成許多前端功能(有很多套件,都是基於 JQ 開發),在學 JS 打完基礎後,也可以玩看看 JQ ,希望有幫助到你唷:)

  6. 因為最近才剛購買網域、租主機也是在學習階段,有幸拜讀您的文章,真的是很感謝。讓我對整個架構又更清楚了。相對比其他架站網站來說,您的網站呈現的是更清楚的是整個架構與觀念的釐清,剩下的就是使用者自己再去找更深入的議題學習。對我受益良多。~感謝!!

    • Hi lydia:
      有關 Wix 上的付款功能,是他們內部綁定的唷!簡單來說,就是要配合他們的金流廠商,是無法自己串接的,除非是使用 wordpress 等開源軟體,進行網站開發。

  7. 剛個人創業,許多事都在起頭,一步步的戴著鋼盔往前衝
    好不容易把FB粉專搞懂了,也把資料漸漸豐富起來
    下一步就是個人網站了!
    感謝版主豐富又詳細的架站介紹,對我這個網路資訊新手有莫大幫助
    有信心繼續往前衝了!

    • Hi 傑瑞:

      看到你一步步往你的夢想前進,很替你開心!

      很開心我的文章有為你帶來幫助,祝你一切順利:)

  8. 感謝筆者用心分享關於網站架設的資訊
    初學架站真的很多東西需要慢慢去學習理解
    像是虛擬主機租借等也得自己去評估選擇
    不論什麼都是博大精深呢XD

    • HI bella00xx:

      你好,是可以的唷。

      照著本站的流程申請完成 SiteGround 後,登入 SiteGround 然後前往 cPanel ,在這裡面可以上傳你的 database(使用 MySQL DataBases & phpMyAdmin),然後再用 FTP 工具,把網站資料上傳到 server 即可。

      希望也幫助到你唷:)

  9. 請問一下 像我是使用Wix製作的的網站 我想使用我自行購買的網域當作網址 但我的網址後面有.tw Wix好像沒有支援,如果是這樣,那我該怎麼辦?

    • HI 吳尉嘉:

      Wix 使用自己的網址當網域,目前還沒實際試過,若 tw 不支援,可能就需要申請 com 的網域了。

    • HI DDR:

      有的,雲端資料庫應該算基本配備,不然沒地方存網站資料。

      Bluehost 有 phpMyAdmin 這款軟體,用來操作資料庫相關動作,這在 Bluehost 後台介面,都能前往。

      希望有幫助到你唷:)

  10. 您好 想請問 依照您的步驟一步步執行,完成後,是否代表 在google上鍵入自己的名稱 即可搜尋到自己的網頁呢? 非常謝謝您

    • HI mimi lee:

      照著文章可完成網址+虛擬主機申請+網站架設,

      但若要 Google 關鍵字能「 快速 」搜尋到,需本身你的網站名字不是熱門名(因為競爭,相對排名的慢)。

      若不是熱門名,舉例:用公司名稱當網站名稱,因為公司名基本上不太會重複,

      所以網站上線大約1-2個禮拜(不一定),應該就搜尋的到了。

      希望有幫助到你唷:)

發表迴響