從建置網站的觀念到製作網站的流程,一次給你「 網站製作+網站設計 」的完整教學課程,讓你輕鬆學會如何架設網站。
你可能覺得網頁委託設計公司的建置費用過高,於是打算自架網站?沒關係,我當初的想法跟你是一樣的。
這篇設計教學,我會用 WordPress 軟體 為主軸進行教學,它是一款全球熱門的網頁製作平台,很適合新手架站。
不需要複雜的流程,只要照著我的文章走(前面幾章節,有用數字標示的),就能完成網域申請 > 虛擬主機租用 > WordPress 網站製作。
★☆ — 重要資訊 — ☆★
犬哥網站與 Bluehost 主機有長期合作關係,點擊網站上的 Bluehost 連結 前往官網(包含點擊此連結),最高可享有 3 折的讀者折扣優惠,請一定要把握唷!
此外,我們也會得到些許收益,這可以幫助我們繼續創作更多優質內容,也謝謝你對我們的支持:)
至於其他章節,則是額外的網站架站觀念&多種建置方法懶人包分享,告訴你多種如何架設網站的方法,讓你一次從門外漢進化成高手,本文章節如下。
1. 如何自架網站?
架設網站 3 要素 | |||
---|---|---|---|
1. 網域申請 (申請門牌) |
2. 主機租用 (租一塊地) |
3. 網頁設計 (搭建房子) |
網站能正常運作,就需有「 個人網域 」+「 虛擬主機 」,這是基本配備。
這也是每個站長都需負擔的小投資,沒有例外。
差別是,跟著我的架站教學,你可用最少的預算,建置你的網站:)
網域如何取名呢?
網域是什麼?「 網域 」是網站組成的第一步,就像家的門牌一樣,讓人可以順利找到你的網站。
- 簡單好記:越簡單的網域名稱越方便使用者查詢和記憶。例:蘋果 – https://www.apple.com/
- 品牌名稱:網域名稱以品牌為名,打算發展品牌的公司,可用這個方式。例:愛迪達 – https://www.adidas.com/
- 與服務 or 產品有關:與服務或產品有關聯。例:博客來 – https://www.books.com.tw/
- 去除 www:目前大部分新網址都不太會在前面加上 www,這是比較舊式的用法。
- .com 優先:.com 是大多數人的直覺印象,主要方便好記,增加搜尋率。
- 勿用中文:網址傳輸是以英文為主,所以網址上有中文,就會轉成一長串的特殊符號+數字,除了難記外,對排名也不太理想。
網域取名完成後,接下來可以看一下網域後綴部分(或稱為頂級域名),要如何選擇呢?
一般最常選擇的就是 .com 類型的頂級域名,它適用於任何場合或服務,通常也是最熱門的選擇(會建議優先選擇)。
但有時候喜歡的網域名字,剛好偏偏被註冊走了,就能用更換頂級域名的方法,還是有機會註冊到自己喜愛的名字。
有關於網域後綴名(頂級域名),有哪些常見的類型呢?下面僅列出一些分享。
- tw / cn / jp:代表不同國家,如台灣、中國、日本等 ..(選擇這類型的網域,可挑選網站主要訪客的居住地)。
- co:可解讀為公司或企業的英文縮寫,但基本上適用於任何情況,可當作 com 申請不到的替代方案(簡單好記)。
- net:網路相關行業可使用,但無明確限制。
- info:資訊性類型網站可使用,但無明確限制。
- org:organization(組織)縮寫,適合非營利組織、基金會、人文組織、宗教組織等 ..,但無明確限制。
虛擬主機是什麼?
「 虛擬主機 」是主機公司在自管的實體主機上,切分成多個虛擬空間,並把這些空間,租給一般使用者使用。
這樣可大幅降低使用者的費用,因為養實體主機是很貴的,所以絕大部分的站長,通常都是租用現成的。
另一個比喻,如果把網址比喻成「 門牌 」,那虛擬主機就是「 家 」的角色。
如果網頁製作完成了,就需放置在優質的虛擬主機,才能確保網站不會受到攻擊,和速度穩定。
如何挑選虛擬主機?
- 公司規模:國外知名虛擬主機公司,都是全球性服務,不論公司規模、營運歷史、主機性能、規格服務,通常優於國內主機。
- 主機性能&功能性:主機穩定度&安全性是重要的,網站才會安全有保障。還有主機的方案規格是否理想。
- 方案價位:通常國外的價格,會比國內便宜,但建議不要都價格取向,如果主機因此性能不好,之後你也會選擇離開的。
WordPress 是什麼?
WordPress 是全球知名的網頁設計軟體,全球有 40 % 以上的網站,都來自於 WordPress。更多 WordPress 是什麼 。
擁有上萬個佈景主題(樣板)和功能外掛,只需一鍵安裝即可成為多功能網站。或許你不知道怎麼選,請參考 優質佈景主題 和 優質外掛推薦,會給你應該的幫助。
WordPress 可完成多種網頁設計,如:部落格架設、個人品牌或公司企業官網、購物網站架設 等 ..
最大好處是,它是免費開源的軟體,可完全掌握自己網站資料,不需被任何網路平台、網頁設計公司牽制。
且不會因為任一網頁製作平台的營運問題,造成網站消失(舉例來說,無名小站結束營運,原來的內容也隨著關站而消失,但這不會發生在 WordPress 身上)。
因為你就是網站的擁有者!
2. 虛擬主機推薦
Bluehost 是地球最大的虛擬主機公司之一,全球管理數百萬個網站並持續增加中。可參考 Bluehost 心得評價,了解更多。
不論網站空間、網站速度、價格便宜、客戶服務等 .. 多方面表現都令人滿意,對於剛入門的網站新手是最優質的選擇。
許多國內外的部落客、企業主、電商經營者,也都把網站建置在 Bluehost 主機。
Bluehost 的客群來自世界各地,所以不用擔心不懂英文,只要搭配 Google 翻譯,一樣能操作自如。
你也能參考下面影片,進行完整的網域 / 主機申請+ WordPress 架站。
有哪家虛擬主機商,對 WordPress 有良好的支援?
Bluehost 是 WordPress 官方認可的虛擬主機商,對 WordPress 有良好的支援。
Bluehost 正常運行時間、網站速度,表現好嗎?
Bluehost 全年有 99.9% 以上的正常運行時間(沒任何一家能保證 100%),這是重要的數據,不然訪客無法連上你的網站。
再來,我實測了幾個 WordPress 網站,在中低價位的各家主機速度評比,Bluehost 的網站速度是排行前幾的。
Bluehost 主機安全性高嗎?
Bluehost 是全球最大的虛擬主機之一,它從 2003 年就開始營運至今,總部位於美國猶他州奧勒姆市,是一家領先的主機解決方案公司。
老字號的品牌&經營歷史表現了它的穩定度,到目前全球已經託管超過 200 萬個網域(網站),在全球聘請許多優質工程師打造主機安全性,防止你的網站受到攻擊。
搭配有優質的 24 / 7 線上客戶服務,如果怕語言不通,通常用 Google 翻譯就能搞定(他們有很多亞洲客戶)。
有關 Bluehost 主機相關問題,也能直接向我詢問,因為我自己就有許多網站是放在 Bluehost 上,而且也用了好幾年。
3. 主機方案選擇
了解完 Bluehost 這款優質的主機之後呢,這章節就來點評一下主機方案部分,幫助你選擇最適合自己的。
前往 Bluehost,點擊「 Get Started(立即開始)」,如下圖。
點擊後,會看到 Bluehost 主機方案。
如果不知道如何選擇最適合你,下面我會給你一些 Bluehost 的方案建議。
要選擇哪種 Bluehost 方案?
Bluehost 的 WordPress 主機提供多種選擇,分別是 Basic 方案、Choice Plus 方案、Online Store 方案。
依照不同方案,全都享有 WordPress 自動安裝和更新、24/7 全年無休客服,這是超值的功能服務。
基本來說,Bluehost 的 Basic 方案會比較建議選擇,因為費用較便宜且功能已經足夠。
這邊我簡單的統整,方便你找到適合自己的方案。
- 剛開始架站的新手(最便宜):選 Basic 方案。
- 需要更多硬體空間的人:選 Choice Plus 方案。
以新手來說,選擇 Baisc 方案是毫無懸念的,除了可架設多達十個網站,此方案還配有 10 GB 的儲存空間,是非常夠用。
4. 網域申請+租用虛擬主機
選擇心目中的 Bluehost 方案,我們就可以開始申請網域和虛擬主機了,這邊簡化 3 步驟,打造自己的網頁製作。
Step1:選擇方案和申請網域
前往 Bluehost,點擊「 Get Started(立即開始)」,如下圖。
點選你想租用的方案,如果預算有限可從 Basic 方案開始,若有更大需求就選 Choice Plus 方案。
接著來註冊網域,若你已經有一個網域,可勾選「 I want to use a domain I already own. 」,接著輸入自己的網域。
若沒有網域的話有兩個選擇,一是直接輸入你想要的網址進行網域申請,另一個是點選右下角「 Choose domain later 」稍後再申請。
小提醒:Bluehost 所有方案皆會附贈一年的網址(免繳網址費用),且 DNS 已經設定完成。
如果取消勾選「 Add Domain Privacy 」會跳出彈跳視窗,選擇「 Unprotected(取消) 」即可接續進行。
接著,可以確認主機要租用多久(建議至少租用一年,才享有折扣優惠)、網域要買幾年、確認消費金額。若沒問題就可點選 Continue to checkout 進行結帳。
小提醒:Bluehost 方案費用依照官方當時為準,上圖購買費用僅供參考使用(記得使用 折扣連結 前往,才會享有專屬折扣價格)。
Step2:申請資料填寫
使用者資訊需都填寫英文,姓名可到 外交部 查詢,地址可用 中華郵政 查詢。
地址區塊有限制不能超過 41 字元,若超過的話,可將剩餘的輸入在 Address 2 欄位(若無可空著)。
Phone Number 電話需輸入國際碼,如果你是輸入手機,就把開頭 0 去掉直接輸入手機號碼即可(手機範例:923456789),如下圖。
至於 Email 信箱需填寫正確,申請完成 Bluehost 會寄網域確認信(需點擊啟用)& 購買收據等 .. 敏感訊息。
接下來會需設定密碼,這個密碼是未來登入 Bluehost 的帳密,記得要妥善保存唷:)
小提醒:密碼須設定 8 – 16 個字元,包含大小寫英文+至少一個數字+至少一個特殊符號(例如:!@#$%^)
然後填入付款資訊,最後按下 Submit 送出。
這樣一來,個人網域和 Bluehost 主機就都申請完成囉,太好了:)
Step3:建立 WordPress 網站
接下來 Bluehost 會自動進行 WordPress 網站的快速安裝,完成後可以看到顯示已安裝完成,點擊「 Log in to WordPress 」按鈕登入網站。
接著會看到 Bluehost 的架站引導畫面,這邊可先直接關閉視窗略過(稍後我們會用 WordPress 預設的流程做編輯)。
或滑到頁面最下方點選略過,就會自動導向到 WordPress 後台(這邊沒有登入後台也沒關係,後面會教大家)。
這樣基礎的 WordPress 網站就順利建置完成了,恭喜大家:)
5. 前往 Bluehost 後台
這章節,我們將前往到 Bluehost 後台,逐一了解有哪些可使用的功能。
輸入你的 UserID (網域名稱 or 信箱)& 密碼, 登入 Bluehost 。
接著會有簡易的 Bluehost 安全驗證設定,目的是幫你的帳號提升安全性。
首先設定 Pin 碼,這邊可以自行輸入想要的密碼,但要記好,因為未來聯絡客服時,可能會需要用到。
接著進行 Email 信件認證。Bluehost 會發一個驗證碼到你申請的信箱,可前往信箱確認。
開啟 Bluehost 的認證信件後,會有一串認證碼,只要把它複製到欄位中,點選按鈕就可以進行認證囉!
之後會出現「 開啟兩步驟驗證 」功能,這個可以先點選 Skip 略過。
接下來可能會跳出促銷訊息,這邊也點選下方 No thanks 略過。
最後就會來到 Bluehost 後台介面了!有關左側的「 Websites 」選項,裡面會列出所有的 WordPress 網站。
以下圖為範例,選項「 Settings 」是顯示網站資訊,選項「 Edit Site 」是前往到 WordPress 後台。
進來之後,Bluehost 給予的網站設定項目,大致上都會放在這邊。這裡面功能很多,大家都可以再玩看看。
這邊主要列出必用路徑,分別是 WordPress 前後台路徑,也可以從這裡前往。
補充訊息:WordPress 網站前台
如果網址列出現臨時網域(非剛申請的網域)是正常的。
那是因為 Bluehost 需把你的新網域,通報給全世界的主要伺服器基地,讓它們收錄你的網域,如此一來你的網域才會被找到(這個也稱為 DNS 指向,通常生效時間約 24 ~ 48 小時不等)。
等系統作業完成後,Bluehost 會自動把臨時網域,更改成你剛申請的網址(在此之前,如果要登入 WordPress 後台,建議先從 Bluehost 後台前往)。
補充訊息:WordPress 網站後台
首次登入 WordPress 後台,建議可優先更改網站語言、網站標題、永久連結 等 .. 主要項目,方便未來操作。可參考 WordPress 後台教學。
6. Whois 信件認證
虛擬主機租用完成後,可以再到電子信箱檢查 Bluehost 是否有寄信給你。
這些信件中,網域認證信(WhoIs 認證)是最重要的,請務必點擊裡面的按鈕或連結進行認證,否則網域可能會失效唷(Bluehost 上申請的新網域,才會收到)。
備註:WhoIs 認證信,是 ICANN 國際網域機構,所規範網域商需進行信件確認,故才有此信件。
收到信件後,所要做的就是點擊下面的 Confirm Email Address 驗證電子郵件,就認證完成了:)
如果沒收到 Bluehost 寄來的 WhoIs 認證信件,先確認一下申請留的信箱是否正確&有無在垃圾信件裡。
假如確認沒收到,可能是網域正等待生效中,因為任一個網域商販售網域,最後都需經過 ICANN 國際網域機構審核,有時候可能那頭還在作業中,等網域生效後就會收到信件。
若是超過 24 小時還是沒收到信,可以直接與 Bluehost 客服聯絡處理。
7. SSL 憑證申請
安全通訊協定,又稱為 SSL(Secure Sockets Layer)是一種安全協定,可在瀏覽器和主機伺服器之間,建立安全加密連結。
只要瀏覽器的網址欄前面有安全鎖頭,就代表目前是用 SSL 連線狀態。更多 SSL 是什麼。
網域加上 SSL 憑證的好處,除了訪客搜尋到你的網頁時,不會顯示不安全網站,也能幫助網站 SEO 排名。
Bluehost 預設會直接啟用 SSL 安全憑證(會須等一些時間生效),那這章節還是會分享幾個 SSL 憑證的啟用方法,有助於你進行。
方法1:使用 Bluehost 啟用 SSL 憑證
首先,可前往到 Bluehost 後台,找到 Websites > 選擇網站 Settings。
接著可以找到 Advanced 選項,點擊進入分頁後,可以看到有列出多種進階功能。
裡面應該會看到 cPanel 前往區塊,點擊 Manage 前往。
接著,可在 cPanel 面板內,搜尋「 SSL 」關鍵字,點選下圖的圖示。
可全選打勾,然後點「 Run AutoSSL 」就會開始跑 SSL 憑證安裝。
小提醒:有關 SSL 的安裝過程和安裝完成後,都會等待一些生效時間,才會看到成功的狀態。
好囉,以上就是透過主機端,啟用 SSL 憑證安裝的方法,如果有需要的朋友也能做參考:)
方法2:使用 WordPress 外掛申請 SSL 憑證
WordPress 是強大的 網頁製作平台,有上千萬個 佈景主題 和 網站外掛,幫助你達成網站需求。
這裡我推薦使用 Really Simple SSL 外掛幫助你 SSL 憑證申請,請參考 如何安裝 WordPress 外掛。
操作流程很容易,你只需安裝和啟用這個外掛,過段時間網址就有安全性鎖頭了。
8. WordPress 後台設定
如果有照著上面的 WordPress 架站步驟,你應該也有自己的基礎網站了。
可以到 WordPress 後台做些設定,方便後續的網站經營,前往 Websites > Edit Site,進入 WordPress 後台。
首次進來 WordPress 後台都是英文介面,我們先進行語言的調整。
前往 WordPress 設定(Settings) > 一般(General),如下圖。
找到 Language 語言欄位,並調整為中文,然後先進行儲存。這樣一來,版面都會變成中文介面囉!
接著,可依需求調整「 網站標題、網站說明、網站語言、時區、管理員信箱 」等 ..(可參考下圖)。
有關網址欄位(有兩欄)這裡建議不更動(目前是臨時網域,網域生效後系統會自動更換),不然會影響到整個網站連結。
都修改完畢,最後按下 儲存設定 即可:)
我在這個 WordPress 後台教學,也有做相關教學,若有疑問也可前往學習。
9. 新增 WordPress 使用者
Bluehost 的架站流程,會自動幫我們建置 WordPress 網站,但如果要登入到 WordPress 後台,就需從 Bluehost 才能前往,這樣會有點不太方便。
所以我們需更改 WordPress 的登入密碼,之後才能用搜尋網址的方式,直接訪問 WordPress 網站並登入後台。
前往「 使用者 > 新增使用者 」,可建立一個新的使用者(自己設定的帳密要記得喔),權限選擇最高權限「 網站管理員 」,完成後送出。
新增的使用者已經順利出現了,這樣就能透過輸入網址的方式,直接登入 WordPress 後台了(可先自行登出再登入 WordPress 後台試看看成果)。
WordPress 網站的 2 個重要路徑(請把 demo.com 改成自己的網域):
- 前台:demo.com
- 後台:demo.com/wp-admin(加上 wp-admin 就是後台路徑)
10. 整理 WordPress 外掛
這章節,會分享如何整理 WordPress 後台外掛,把一些多餘的外掛刪除,讓介面變得乾淨一點。
用 Bluehost 安裝 WordPress 網站,系統預設會裝上一些外掛,但有些是用不太到的,可以做個整理。
登入 WordPress 後台,前往「 外掛 > 已安裝的外掛 」,把不需要的外掛 停用,停用完成再 刪除 即可。
如果需要使用的外掛,點擊 啟用 就會開始運作。
如此一來,WordPress 外掛就整理完成了,畫面變得更清爽了~
我在 WordPress 優質外掛推薦,有挑選幾個常用外掛,節省你尋找的時間,可參考 如何安裝 WordPress 外掛。
WordPress 軟體教學
WordPress 開源軟體 讓站長可以最低預算,自行架設網站。
對於不同主機、功能外掛、佈景主題的搭配方法,可能會產生不同的 WordPress 建置費用。從最低的架站價格,到進階功能網站的搭配,一切由你自由組合。
開始打造 WordPress 網站
購買網域+虛擬主機完成後,「 WordPress 網站架設 」初步完成。
接著站長們可開始學習 WordPress 後台 如何使用,幫助你打造更棒的個人、公司形象網站。
全世界有很多專業人士,開發了上千萬種佈景主題和網站外掛,豐富 WordPress 的生態系。
所以完成前置作業後,我特別挑選了幾款 最佳佈景主題 和 最佳網站外掛,可以幫助你節省尋找的時間。
如果你有想架設的網站類型,這邊,我列出 3 個常見的 WordPress 網站類型,你可以直接點擊前往,進行後續學習唷。
網站架設完成,開始網路行銷!
最後,開始經營網站的過程,我們還需進行 SEO 行銷。
WordPress 因為是最多人使用的開源軟體,所以搜尋引擎都會優先收錄 WordPress 製作的網頁。
站長可在進行網站行銷時,搭配 關鍵字研究工具+優質 WordPress SEO 外掛,幫助你分析網站流量,進一步規劃搜尋引擎優化策略。
架設網站的多種方法
「 網站架設 」有多種方法,不同的作法都各有優缺點,並沒有誰好誰壞,只有適不適合你。
你可以選擇適合的方法,建置個人或公司的形象網站,再搭配視覺設計製作,完整你的網站。
下面我列出幾種最常見的「 網站架設 」方法,如下。
- 使用開源的網頁製作軟體,有完全的網站所有權(像是 WordPress 軟體)。
- 租用架站平台公司的軟體,但需負擔不少的租金。
- 網頁外包設計公司製作。
- 自學程式語法架設網站。
接下來,我會對這幾點進行簡單的優缺點分析,協助你選擇適合的方式建置網站。
開源軟體評價
開源 = 免費+擁有全部的網站所有權。
這類型的代表軟體,像是 WordPress、Joomla、Drupal,都是屬於此種類型。
其中又以 WordPress 是最知名的架站軟體,全世界有 40 % 以上的網站是使用 WordPress 建置,你可在 GitHub 找到它的底層程式碼。
GitHub 是全世界最大的開源程式碼平台,數以萬計的軟體工程師,將其開發的程式碼公開至網路上,並供給其他人做再開發,豐富整個網路世界。
開源最大的好處是,就是有完全的網站自主權,可掌握自己網站的所有資料,如:文字、圖片、網站程式碼、資料庫等。
還有,因為網站開源(底層程式碼公開),所以任何的軟體工程師,都能用此當基礎,向上開發新的功能服務。
像是 WordPress 就有龐大的功能生態系,能夠架設多種類型網站,像是 部落格架設、形象官網製作、購物網站架設 等,幾乎能完成你所想。
最重要的是,在架設網站完成後,後續的網路行銷,開源架站軟體可完全讓站長自由控制,像是可以安裝 SEO 外掛輔助,不需額外花費解鎖 SEO 功能。更多 SEO 是什麼。
其他的知名架站開源軟體,像是 Joomla、Drupal 或是其他新興軟體,也有自己的追隨者,但因為使用規模都不及 WordPress,這邊就不特別介紹。
優點
- 完全掌握自己網站資料,不會被任何平台公司的運作或是規則影響。
- 有豐富的網站功能生態系,通常只需一鍵安裝即可使用。
- 可自由控制網站預算,依需求搭配功能。
缺點
- 需學習如何安裝網站軟體和架設網站,但這通常很容易上手,因為網路上有多種教學課程,像是 犬哥網站。
架站平台公司評價
使用架站平台公司的服務,就是跟軟體公司租用架站方案,幫助自己建置網站。
這類型的服務又稱為 SaaS(Software as a Service),就是軟體即服務,也是常聽到的雲端服務。
代表軟體有很多,有建立部落格的像是痞客邦、Medium、方格子等。
有可以建立官網設計的,像是 Wix、Weebly、Strikingly 等,這幾種網站建置軟體。
也有可以架設購物網站的,像是 Shopline、91App、Meepshop 等。
使用這類型架站方法的好處是,可以省掉網站安裝的流程,因為軟體公司都幫你建置好了,只需付費使用現成的即可。
相對的,使用架站平台公司的軟體也有缺點,因為你只是平台租用者,並非是擁有者。
所以有關你的網站資料,像是文字、圖片、資料庫、程式碼等,都是由軟體公司掌握,這代表你會受到牽制。
假設公司更改收費規則,或是經營不善而結束營業,那網站都可能面臨消失問題。
優點
- 不需自行安裝建置網站,可直接使用現成的軟體服務。
- 形象品牌網站的技術服務,有軟體公司的客服可詢問。
- 適合一次性網站建置,像是行銷頁面、個人作品集等,不打算長期經營的網頁。
缺點
- 因為只是平台租用者,並沒有網站擁有權,容易受到軟體公司經營的影響。
- 基本款的平台方案,網站功能通常不完善,目的是為了收取較高額的進階版費用。
- 租用平台的價格,對於新手或預算不多的人來說,會是一筆不小的負擔。
外包網頁設計製作
將網站建置的需求,外包給 網頁設計公司 ,也是常見的架站解決方法之一。
網頁外包設計的好處是,你可以客製化網站功能,像是 預約系統、訂位系統、訂房系統、企業內部管理系統、派車系統,這些服務系統基本上都有辦法做到。
依照不同的開發難度,選擇的設計公司就很重要,因為網站程式不是寫出來可以運作就好,好的程式架構跟未來的網頁速度,有很大的關係。
且不同網站建置需求,會有不同的設計價格,一次性費用從幾千元到上百萬都有,主要依照客製化程度。
下面我列出幾個常見的提問,可以幫助進一步了解。
1. 如何選擇適合的網頁設計公司?
網頁設計的發展也經歷了好幾個年頭,所以市場上提供相關服務的公司也很多。
我提供一些尋找適合公司的方法,像是公司評價和規模是否理想、 網頁作品集 是否漂亮、網頁報價是否合理。
這幾個都能當挑選標準,幫助你找到適合的公司。
2. 網頁設計有哪幾種常見方案?
網頁常見的設計方案,有套版方案、客製化方案、租用型方案、半客製化方案(套版,但可修改)。
套版方案,這是設計公司已開發完成的系統,然後拿來重複販售。
價格費用相對客製化方案,會比較低一點。
客製化方案,這是依照顧客的需求而特別量身製作,費用通常會比較貴,當然能做的需求幾乎是無極限。
租用型方案,是比較新版的網站方案,因為網路服務的興起,許多顧客可能預算有限或是想先試用看看,設計公司就推出租用版方案。
3. 網頁外包設計製作的優點?
- 網站可以客製化設計,幾乎能滿足大多數需求。
- 可省掉大量的時間和精力,轉交給設計公司執行就好。
- 有任何網站問題,可直接詢問客服人員。
4. 網頁外包設計製作的缺點?
- 依照不同的需求,會有不同的網站建置費用,從幾千元到上百萬的範圍都有。
- 大部分設計公司,不會提供網站程式碼(或資料庫),你沒有網站擁有權。有關此問題,可以詢問你委託的公司,看他們是否願意提供。
延伸閱讀:
WordPress 網頁設計服務
犬哥網站 提供優質的 WordPress 設計服務。
我們是使用 WordPress 開源軟體來架站,幫你挑選適合的主題+功能外掛,再針對你的行業別做微調。更多 架設費用如何算?
WordPress 架設網站,優勢大整理!
使用 WordPress 設計網頁好處多多,我們這邊條列式整理優勢,讓大家更好理解 WordPress 優秀之處!
- 客製化開發:自由搭配外觀主題+功能外掛,實現多種特殊功能。
- 後台管理:中文化後台管理,可搭配會員功能,完成公司內部分權網站運作。
- SEO 表現優秀:WordPress 是全球最多網站的選擇,也因此搜尋引擎更好讀取 WordPress 程式碼,網站收錄速度大幅提升,SEO 表現自然優秀。
- 資訊安全:因為 WordPress 是全球最多網站使用的架站軟體,所以有許多資源投入安全運作,正常使用 WordPress,絕不會有安全疑慮。更多 WordPress 資安外掛推薦。
- 網站自主權:不論是交由哪一個設計公司,只要是使用 WordPress,你隨時可拿回網站程式碼,因為程式碼是開源的,不怕找不到下一家幫助你維護 WordPress 網站。
可以看見,使用 WordPress 架設網站,是相對 CP 值優秀的選擇,這也是為什麼「 犬哥網站 」選用 WordPress 幫助站長架設網站的原因!
如果你想了解更多「 犬哥網站 」的服務,歡迎點擊下方按鈕,前往查看&諮詢:
自學程式語法
自學程式語法,這個模式和 使用開源軟體 情況一樣,就是站長擁有最高的網站控制權,從個人網域、虛擬主機、網站內容、網站程式碼等都能獨立擁有。
這代表,你能完全掌握自己網站資料,不會被任何平台公司的運作或是規則影響。
自學程式語法是條漫長的道路,因為它是一個技能的培養,沒有幾年的學習時間,是很難架設出功能齊全的網站。
除非架設網站之外,你也剛好想培養一技之長,那學習寫程式會是個好選擇,因為有程度的軟體工程師,公司給的薪水幾乎很不錯。
不然會建議用其他方法建置網站,因為這樣花費的時間可能太多。
優點
- 完全掌握自己網站資料,不會被任何平台公司的運作或是規則影響。
- 程式開發學成後,任何功能類型網站隨你架設,不受限制。
- 培養一技之長,有程度的軟體工程師,薪水待遇通常很不錯。
缺點
- 程式技術是一門學問,要學習到一定的程度,需要幾年時間培養。
- 如果單純想建置網站,通常有更好的方法替代。
備註:程式語法有很多種,可先選擇一種語言專精即可,像是 HTML、CSS、JavaScript、PHP、Python、Java、C# 等。
利用 AI 輔助進行程式學習 / 開發
近年來 AI 發展神速,像是 ChatGPT 這類的語言模型,除了可以回答關於網站架設的知識外,也能依照你的文字敘述,直接幫你生成程式碼!更多 UI / UX 設計師 ChatGPT 指令秘笈。
透過簡單文字描述,例如「 請幫我寫按鈕的 HTML、CSS,按鈕樣式為圓角、黃底黑字請幫我寫一個按鈕的 HTML 和 CSS,按鈕樣式為圓角、黃底黑字 」,不到一分鐘的時間,ChatGPT 就能產出程式碼。
你只需要簡單複製貼上,就能製作網站,不過目前 ChatGPT 產出的程式碼,有時候可能會有小誤差,不太完美,建議還是要檢查一下。
我們之前也有分享過利用 ChatGPT 寫 CSS 程式碼的影片教學,有興趣的朋友可以前往學習唷:)
部落格平台有哪些?
經營網路個人品牌,可能會需要 部落格平台 ,協助你完成 Blog 建立。
我的最佳作法會使用 WordPress,因為它是免費開源軟體,能完全擁有網站程式碼,可自由 網站搬家 或是 更換主機。
使用 WordPress 不會被任何設計公司給綁架,也不會因為任何平台結束經營而變成網站孤兒。
可以參考 Blog 建立,這篇文章中有完整架站教學,或是參考下面影片學習。
除了使用 WordPress 架站之外,這邊也列出幾個常聽到的部落格平台,跟大夥介紹。
痞客邦
痞客邦 是老字號的部落格平台,主要的客群來自台灣,好處是它有自己的平台生態,像是話題討論區、主題社團、定期活動等..,網站內較熱門的分類屬於美食、旅遊、親子及美妝。
對於網站主的好處是,你或許會從中得到一些網站流量,但通常也不多。
在操作介面裡,我覺得內容很齊全,有眾多選項可以調整,光是字體就有數十種類型,文字可以自由調整大小;排版方式除了可以調整段落間距、段落併攏位置,還可以做段落縮排調整,在編輯方面非常多元!
但它的缺點也不少,像是佈景主題、後台介面都偏向舊款設計,會影響網站門面。
此外,還有上傳流量限制,如果需要提升上傳流量,勢必要使用付費服務解鎖功能。
比較可惜的是,就是痞客邦有很多的網路廣告,讓使用者體驗變得差,這也是讓許多人遠離的原因。當然你可以關閉網路廣告,但是需為此付費升級。
儘管如此,由於痞客邦在台灣發展的早,仍是有它的功能特色和一定的用戶群,所以也是可參考的標的。
Medium
Medium 是一個國外的部落格平台,由 Twitter 的創辦人和其他夥伴,在 2012 年 8 月一起創立的,宗旨是「打造高質量、高專業的部落格平台」,希望有別於 Twitter 的短篇貼文。
Medium 獲得全球專家學者青睞,很快就成為學術交流的平台,近年來台灣也越來越多用戶加入,與國外學者做交流。
因此有許多國內外的媒體會在這邊轉載分享專業的學術文章,也有許多個人或是企業,使用它做為公司或是其中一個項目的文章發布平台,像是 Airbnb、Facebook、Square 等。
Medium 網頁設計很藝術派,大多數是時尚、簡約的樣式類型,而且沒有鋪天蓋地的網路廣告。
所以比起痞客邦,我更推薦使用 Medium 打造你的部落格網站。
相關網站類型
下面這幾款部落格平台,就是比較多人使用的品牌,你可從中選取。
我首推的還是 WordPress,因為我們管理自己的網址、主機、整個網站等等權限,不受任何平台約束,所以不必擔心因平台結束營運,整個網站心血在一夕之間都沒了!
犬哥網站 就是使用 WordPress 建置而成,當然這是我的選擇,主要還是選擇適合自己的來使用:)
部落格平台整理(依照順序推薦):
- WordPress
- 痞客邦
- Medium
- Blogger
網頁製作平台有哪些?
市面上的網頁製作平台有很多,但絕大多數是採用平台租用服務,網站並不是完全屬於自己的,這容易遇到哪天平台結束營運,而導致多年經營的網站血本無歸。
我的最佳作法會使用 WordPress,因為它是免費開源軟體,能完全擁有網站程式碼,可自由 網站搬家 或是 更換主機。更多 WordPress 是什麼。
使用 WordPress 不會被任何設計公司給綁架,也不會因為任何平台結束經營而變成網站孤兒。
可以參考 官網設計,這篇文章中有完整架站教學,或是參考下面影片學習。
除了使用 WordPress 架站之外,這邊也列出幾個常聽到的網頁製作平台,跟大夥介紹。
Wix
Wix 是一個流行的網頁設計軟體,在全球 190 多個國家服務,超過一億八千萬個使用者。
龐大的使用者,讓它成為了納斯達克的上市公司,算是除了 WordPress 以外,聲量第二高的網頁製作軟體。
網站上有 900 多種佈景主題,和多種官方或第三方網站外掛,可直接套用。
Wix 有提供出色的頁面編輯器,介面直觀淺顯易懂,且都是繁體中文,是輕鬆架站的好夥伴。
挑選完喜歡的樣板,只需把元件拖放至指定區位,就可新增一個區塊功能。
而如果要修改編輯,只需點想修改的地方,即可進行編輯,是不是很方便呢:)
Wix 也有推出 App 供使用者下載,若你人在辦公室外,不方便帶著筆電,你可以下載 Wix 的 App,在你的行動裝置上管理網站。
Weebly
Weebly 是一款簡單上手的網頁製作軟體,有支援中文,在台灣也算知名架站平台。
它有好用的頁面編輯器,只要用拖曳方式,就可快速製作網站,蠻適合需快速建站的新手使用。
頁面編輯器支援多種小工具,像是文字、圖片、區塊、輪播工具等 ..,有利站長設計網頁排版。
此外,Weebly 也有推出 App,不管你在哪裡,只要有手機等行動裝置,就可以下載 Weebly 的 App,在你的行動裝置上設計版面、追蹤數據、處理訂單等。
Weebly 也有多種佈景主題可以選擇,不論你是要架設電商網站或是部落格,都有模板可以直接選擇。
如果你打算快速架站,或只是短暫性的需要有網站能使用,那使用 Weebly 也是個好選擇!
相關網站類型
下面這幾款網頁製作平台,就是比較多人使用的品牌,你可從中選取。
我首推的還是 WordPress,因為 犬哥網站 就是使用 WordPress 建置而成,而且擁有網站自主權,更改編輯的自由度高,所以我才會推薦,不過這是我個人的選擇,主要還是依據讀者需求,選擇適合自己的來使用:)
關於 WordPress 的優點有哪些,前面章節都有介紹,可以往前閱讀介紹內容,進行比對篩選。更多 網頁製作平台推薦。
網頁製作平台整理(依照順序推薦):
- WordPress
- Wix
- Weebly
- Strikingly
網路開店平台有哪些?
想要經營線上生意,可能會需要強大的網路開店平台,協助完成購物網站架設。
WordPress 是完整多功能的架站平台,也可用來建置購物網站,是目前全世界僅次於 Shopify 最多人使用的開店平台。
如果你有預算上的考量,最佳作法會是使用 WordPress+WooCommerce,這是完整的搭配。更多 WooCommerce 是什麼。
可參考 架設購物網站 教學文章,並搭配下面影片學習,有將近 4 小時的完整購物站製作,讓你立即網路開店成功!
WooCommerce
WooCommerce 是 WordPress 旗下最知名的網路商店架設外掛,全球下載量已超過 4500 萬,而且它是免費的。更多 WooCommerce 中文教學。
因為是免費的軟體加上安裝快速,在全球各地累積許多使用者,在全球已有超過 500 萬的下載量,市占率高達 40 %,是世界排名前幾的電商系統。WooCommerce 幾乎任何實用的功能都擁有,如: 商品管理 、訂單管理、 會員管理 、 優惠管理 、 金物流串接 等等,非常齊全!
加上有眾多的 WooCommerce 佈景主題 & 擴充外掛,可協助強化電商平台,只需點擊安裝即可。
對此,我寫了這篇 架設購物網站 完整教學,手把手帶你網路商店架設,希望能有效幫助到你。
WooCommerce 的生態圈很豐富,有多種周邊擴充功能,這也是讓它更完整強大的原因。
如果想節省網路開店平台的預算,使用 WooCommerce 開店平台外掛,絕對會是你的好選擇:)
Shopline
Shopline 是香港的軟體新創公司,因為其優質的設計介面和多功能的商店服務,在東南亞吸引許多愛好者使用。
Shopline 內建完整的電商平台功能,像是會員管理、訂單系統、商品管理、優惠管理等等多項服務項目,你不需額外進行安裝。
只不過在平台外觀方面,Shopline 提供了固定外觀版型給商家使用,這些版型無法做出大幅度的編輯修改,所以很難凸顯出網站的個人特色。
Shopline 的方案內容目前分為四種,從小資輕量到全通路的方案都有,可看自身需求選擇。
但由於使用「 架站平台公司 」的方法架設網站( 像是 Shopline ),你只是平台租用者而非擁有者,所以像是網頁程式碼、文字圖片、資料庫等都不是你擁有的。
這可能會遇到個問題,假如哪天品牌茁壯了,想搬出來自架購物網站,你將重新開始網站經營,這將是一個巨大的成本。
還有每月(或每年)固定的平台使用費,也是要網站主需考量的地方。
相關網站類型
結論是,剛開始網路事業,建議使用 WordPress+WooCommerce 搭配。
雖然會花些時間學習網站架設 ,但至少不會有「 沒有資料擁有權 」和「 每月高額平台費用 」問題。
等品牌成熟一點後,再依需求雇用軟體工程師,協助提升 WordPress+WooCommerce 的整個功能性,讓它更符合公司成長需求。
或是重新開發一個客製的購物網站(不一定是 WordPress 系統),雇用一個軟體工程師、外包設計公司,幫助你重新製作。
不論哪種方法,請記得索取網站程式碼、資料庫等等「重要的」網站內容資料。
這只是我的經驗供你參考,主要還是選擇適合自己的方法。更多 網路開店平台比較。
網路開店平台整理(依照順序推薦):
- WordPress+WooCommerce
- Shopline
- Shopify
- 91App
- Meepshop
- Cyberbiz
AI 架站軟體推薦
過去在製作網站時,都會需自己發想每一個區塊該放什麼、如何呈現樣式等。
現在也有許多 AI 架站平台,可以直接透過回答問題或是描述,快速生成完整的網頁。更多 AI 網頁建置軟體推薦。
像是可以透過輸入你的行業別、選擇色彩搭配、選擇網站區塊、選擇字體樣式等,就能快速架站成功,十分的方便(不需任何程式概念)。
有些 AI 架站軟體,也有支援電商網站的製作,加上完整的會員訂單系統,讓我們可選擇的架站工具又多了不少。
這邊也列出幾個好用 AI 架站軟體,免費版就包含非常多功能,大家可以試試看:)
Hocoos
Hocoos 是一款 AI 架站軟體,操作介面簡單又好看,免費版就可以製作發布網站!除了 AI 架站功能外,也有 AI 文案生成、圖片生成、logo 生成等。
Hocoos 的架站流程滿有趣的,是透過對話方式,一步一步的問答引導來架站,總共只有 7 個步驟。
首先,於首頁輸入 Email 登入後,就會進入到一個像對話框一樣的架站頁面。
再來只要依序回答你的網站類型、提供的服務、網站要包含的功能( 產品銷售、線上預約等 )、商家類型( 只有網路商店或有實體店家 )、商家特色、商家聯絡方式,接著不到 30 秒的時間,AI 就能生成一個完美的網站!
網站生成後,有 3 種樣式可以選擇,你可以再自行調整網站配色、搭配字體。
若是目前顯示的配色或字體不喜歡的話,你可以再次切換樣式,系統就會產出新的配色、字體建議,之後點選 Creat my website 進到下一步。
接著就可以開始對網頁內容進行更新調整,你可以直接使用 Hocoos 內建的 AI 文案生成功能,輕鬆編輯商品文案。
若是你的商家剛起步,還沒有自己的 logo,也能使用 Hocoos 的 AI logo 功能,幫你的商店設計專屬的 logo!
不過免費版只有 1 次 logo 生成的體驗機會,文案生成也有限定 20 次,若想體驗更多,需要付費升級。可前往 Hocoos 方案 了解更多。
Hocoos 最強大的地方在於,你可以直接在網站上一鍵架設商品頁面,之後只要簡單替換照片、修改商品介紹,就可以輕鬆完成你的商品網站!
商品編輯頁面的操作方式也都非常簡單易懂,對於新手架站算是非常友善!
此外,Hocoos 也有 AI 圖片生成功能,讓你可以直接在網站上生成商品示意圖,不過免費版也只有 5 次生成機會。
商品頁都設置完成後,網站就可以免費上架運作了!除了可以實際購物下單、設定購物折扣券,更厲害的是,顧客下單後,系統還會自動發送訂單成立通知 Email 給顧客,而站長也會收到有新訂單的 Email 通知。
之後站長可以回到 Hocoos 後台的「 Orders & Customers 」介面管理訂單,非常方便!推薦有電商架站需求的朋友試試:)
Pineapple Builder
Pineapple Builder 是一款強大的 AI 架站軟體,只需要輸入一段簡單的描述,就能生成一個高質感網站!它也有 AI 文章建議功能,可以幫助你快速撰寫優質 SEO 部落格文章,適合想要架設部落格的站長。
Pineapple Builder 搭配了 ChatGPT 智能助理協助你精準快速架站,你可以選擇要使用免費版的 ChatGPT 3.5 或付費版的 ChatGPT 4。前往 Pineapple Builder 方案 了解更多。
雖然介面皆為英文,但是你可以透過輸入中文指令來架站,例如「 一個理髮廳形象網站 」,不到一分鐘,就可以快速生成頁面,甚至連中文文案都幫你打好了!
Pineapple Builder 的頁面編輯器也非常好懂,像 Figma 一樣,左方工具列有各個元素分層,適合不懂程式碼的設計師編輯。
在編輯器上也隨處可見 AI 助理功能,如果最一開始生成的文案太短的話,你只需要點選 AI,再點選 Make it longer,AI 就會生成更長的文案。
此外,Pineapple Builder 也有快捷功能,只要輸入斜線 / ,就會跑出 H1、子標題、行動呼籲按鈕或是其他 AI 功能快捷鍵,非常方便。
若你還想在網站上新增更多區塊,你只需要點選加號 + 或 Add Section,就可以新增區塊,你也能繼續搭配 Pineapple Builder 的 AI 助理生成區塊。
在靠近左下角的地方會有一個像是對話框的地方,同樣只需要一段簡單的中文描述,告訴 AI 這個區塊你想要放置什麼樣的內容,Pineapple AI 就能幫你產出附帶中文文案的網頁區塊。
使用下來,Pineapple Builder 算是滿強大好用的 AI 架站工具,AI 生成的速度都滿快的,且免費版就可以無限次生成文案,大家可以試試看唷:)
相關網站類型
這幾款 AI 架站軟體都挺不錯的,操作簡單適合新手,可從中選取試試看:)
AI 架站軟體整理( 依照順序推薦 ):
- Hocoos
- Pineapple Builder
- Framer AI
- Jimdo
- Kleap
網頁的設計教學/資源
有人問我說,如果想自學成為網頁設計師,有什麼資源是可以用來學習的?
一個網站的設計,主要是由兩個面向組成的,分別是設計+程式。接下來,我整理了一些相關資源,幫助大家學習成長。
架設網站(教學+課程)資源
網頁設計「 靈感參考 」:
Dribbble:最有人氣的設計靈感網站,挖寶的好地方。
Behance:支援中文版,後面有Adobe老大哥站台。
Pinterest:圖片界的Google,有大量圖片素材可供搜尋,很多人愛不釋手。
站酷:眾多設計作品案例,靈感來源參考。
CollectUI:眾多設計作品案例,靈感來源參考。
Eagle:台灣團隊開發的靈感搜集工具,可以輕鬆整理「 靈感、截圖、影片、音樂 」等各種素材。
網頁設計「 軟體教學 」:
犬哥網站:固定更新不同的自架網站、UIUX 相關教學,也有影片學習、素材資源分享。
學 UI 網:學習PS、 AI等軟體好地方,也有影片學習。
UI 中國:中國知名的UI/UX設計,教學分享網站。
網頁設計「 素材來源 」:
Freepik:提供大量圖像設計素材的搜尋引擎,滿多向量圖型可以下載來使用。
Flaticon:國外有名的icon素材網站,挖寶的好地方。
Iconfinder:很多扁平化 Icon 圖示可以使用 ,適合作為介面設計的圖示來源。
Sketchappsources:提供 Sketch 軟體可用模版與素材的網站,收錄許多漂亮的樣板。
Pexels: CC0 圖片搜尋引擎,收錄了許多網站的 CC0 圖片,方便尋找想要的圖片。
Pixabay: 大量 CC0 圖片可供搜尋,適合用在商業文章或設計範例中。
網頁設計「 程式學習 」:
W3School 在線課程(簡中):蒐集大量程式語法的基礎知識點,新手入門程式的好地方。
MDN Web Docs:包含 HTML、CSS、JavaScript 等教學,部分教學都有繁體中文版可參考。
Codecademy:設計課程/教學,可以從 HTML、 CSS 開始學起,註冊會員後有一系列的教學。
當然,網站還有許多設計資源可以讓自己學習提升,這裡僅列舉部分。
常見問題
自架網站需要準備什麼?
網站能正常運作,就需有「 個人網域 」+「 虛擬主機 」,這是基本配備。
這也是每個網站主都需負擔的小投資,沒有例外。
差別是,跟著我的架站教學,你可用最少的預算,建置你的網站:)
網域如何取名呢?
網域是什麼?「 網域 」是網站組成的第一步,就像家的門牌一樣,讓人可以順利找到你的網站。
網域取名時,注重幾個簡單原則即可,像是簡單好記、品牌名稱、與服務 or 產品有關、去除 www、 .com 優先、勿用中文。
虛擬主機是什麼?
「 虛擬主機 」是主機公司在自管的實體主機上,切分成多個虛擬空間,並把這些空間,租給一般使用者使用。
這樣可大幅降低使用者的費用,因為養實體主機是很貴的,所以絕大部分的網站主,通常都是租用現成的。
另一個比喻,如果把網址比喻成「 門牌 」,那虛擬主機就是「 家 」的角色。
WordPress 是什麼?
WordPress 它是全球知名的網頁製作軟體,全球有 40 % 以上的網站,都來自於 WordPress。
它可完成多種網站的設計,如:部落格架設、個人品牌或公司企業官網、購物網站架設 等。
有推薦的 WordPress 優質虛擬主機嗎?
Bluehost 是地球最大的虛擬主機公司之一,全球管理數百萬個網站並持續增加中。可參考 Bluehost 心得評價,了解更多。
對於新手架站來說,是費用便宜且 CP 值高的主機選擇,可一次完成網域申請、主機租用、WordPress 架站。
如果對速度有一定程度的要求,則可以參考其他款進階主機,像是 Cloudways(VPS) 或是 A2 Hosting(中高階方案)。
聯絡犬哥網站
在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!
接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。
資源一:犬哥網站(專業 WordPress 網頁設計&SEO 行銷公司)
如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&SEO 行銷公司),請專家協助你會更容易!
我們有多年網頁設計、SEO 網站排名經驗,加上上百個高質感作品、SEO 實戰案例,絕對能滿足您的需求!
資源二:WordPress+SEO 超強線上課程
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。
課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?
這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..,大幅提升行銷能力。
帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!