網站架設實戰篇:圖解如何架設一個網站

作者:簡單創   更新日期:2024-12-14

本文寫的非常長,懶得聽架站理論,想直接上戰場的,就看這裡吧!貴設計以Wordpress設計網站為基礎, 首先確定好要做形象網站、電商網站,接著請依以下步驟進行。
STEP1:Godaddy 購買網址
網站架設最基本的就是網址,但要去那邊買網址呢?在台灣大家第一個想到的就是中華電信,但本文最推薦的還是Godaddy。 Godaddy

▶ 七大推薦原因

  1. 費用首年超優惠:Godaddy首年費用極低,在公司首年商業模式測試階段很適合申請。但請注意第二年就會恢復原價。若是精品網域有可能上看十萬、百萬。 GodaddyGodaddy
  2. 介面簡單乾淨好友善:相對於中華電信,Godaddy你定會覺的非常好用。 Godaddy
  3. 客後服務好好找:中華電信的客服電話告訴你,非常難找,一直在電話中。而Godaddy的客服可直接播打電話,或透過線上客服直接聯絡。
  4. 網址買錯退費好人性:上次買錯一個網址,當下找客服處理,10分後就馬上退費。 完整退款政策,請參考 Godaddy https://tw.godaddy.com/legal/agreements/refund-policy
  5. DNS生效好快速:DNS的用意就是將網址對應到主機的IP位置,例如我在Google Chrome瀏覽器上輸入facebook.com.tw, Chrome會自動對應到FB公司在美國的主機位置256.124.25.23。你就可以開始玩FB了,這個動作就稱之為DNS設定。這個動作會依各家而不同,如中華電信需24~48小時,Godaddy只需幾分鐘的時間就可設定完成。
  6. 程序簡單好快速:中華電信買個網址需要輸入至少10個欄位,Godaddy註冊完,直接刷卡帶走。 Godaddy
  7. 多樣化網址選擇好方便:直接參考下圖吧。.com是台灣最愛的,但隨著網址也跟著進步,不用再死守.com的網址,還有.info、.cc、.vip。 Godaddy

▶ 購買前準備

1.喜愛的網域名稱:網域請至Google 瀏覽器試試有無其他人使用,或其他一樣的網域名稱,但結尾不同。
2.基本個人資訊 : 個人、企業電話、Email、地址。點擊螢幕右上角使用者名稱,再點擊後的帳戶設定即可設定。 Godaddy
3.公司抬頭、統編 : 若企業要報帳,可將”公司統編”輸入至聯繫人(右上角-->帳戶設定-->編輯)。購買完成後會寄PDF檔,帳單資訊就會有公司統編、抬頭可報帳。 Godaddy
4.信用卡相關資訊

▶ 如何購買網址

步驟1:搜尋個人品牌、企業適當的網址 Godaddy
步驟2:選擇適當結尾名稱。以台灣來說較多是xxx.com.tw 或是xxx.tw。若是客戶群是全球性的或想看起來很利害則可選擇.com。請特別注意首年年費與第二年年費,有些首年很便宜,但次年(含以後)的費用就會高很多。 而且因為Goaddy是國際性的大品牌,請注意是台幣or美金計價。 接著直點接選購物車的圖示 加入購買,前面購物車清單。 Godaddy
步驟3:購物車清單請注意以下紅框部份。購買的年數, 年數愈長打的折數就愈少。全方位網域隱私及保護可省略(別人可經由網域”反查”,網域持有者簡單資訊)。小計是以NT 或 TWD計算。 確認訂單資訊:確認好最終價錢、帳號資訊送出即可。 Godaddy
步驟4:確認訂單資訊:確認好最終價錢、帳號資訊送出即可。 Godaddy


STEP2:Siteground買網站主機

貴設計強烈推薦,因為它是目前最受推薦的主機供應商之一。它的價格合理,使用介面友好,搬家速度快,客服回覆速度迅速,並提供一個月內的退款保證服務。當然,還有其他原因,比如?

  1. 免費SSL加密憑證: Siteground提供免費的SSL憑證,確保您的網站資料在傳輸過程中加密,提高安全性。
  2. 免費CDN: Siteground附帶免費的CDN服務,可加速您的網站載入速度,提供更好的用戶體驗。
  3. 每天自動備份: 您的網站將每天自動備份,並保存前30天的資料,確保您的內容不會遺失。
  4. 主機穩定性優: Siteground以其優越的主機穩定性和可靠性而聞名,確保您的網站24/7運行順暢。
  5. 24/7客服服務: Siteground提供全天候客服支援,包括即時線上聊天,以確保您在需要時能夠迅速獲得幫助。
  6. SG介面乾淨,好上手: Siteground的使用界面設計簡潔直觀,使新手也能輕松上手。
  7. Wordpress一鍵安裝,5分鐘搞定: Siteground提供Wordpress的一鍵安裝功能,讓您能夠在短短5分鐘內啟動您的網站。
  8. Wordpress免費輕鬆搬家: 如果您已經擁有一個Wordpress網站,Siteground提供免費的外掛程式,使網站遷移變得輕鬆。
  9. Wordpress自動更新: Siteground會自動更新Wordpress,確保您的網站始終保持最新和安全的狀態。

若真要說Siteground的缺點,第1他是英文介面,第2台灣無法購買,但你仍是可以跟貴設計租用Siteground的主機。貴設計是Siteground的老客戶仍是有主機可以使用的。
Siteground購買連結


STEP3:安裝WordPress
購買SiteGround主機後,就可以開始安裝Wordpress。
Step1:選單上選“WEBSITES”。 wordpress
Step2:右手邊按“NEW WEBSITE”。 wordpress
Step3:新增網站,第一個步驟先放網址,有三個選項: wordpress
➤新增網址(New Domain):可以直接在SG購買網址。但不是很方便,建議可以到Godaddy購買。
➤已有網址(Existing Domain):已有網址可以直接使用這項,可以直接在正式網址製作網站。
➤暫時網址(Temporary Domain):還沒想好網址沒關係,SG有提供暫時網址,讓網站作業不用停擺,到時候取代網址就可以了。
Step4:先用“暫時網址Temporary Domain”,按“Select”,本次暫時網址是:ezstartu25.sg-host.com,確定後“Continue”。 wordpress
Step5:新增新網站,選“Start New Website”按“Select”。 wordpress
Step6:選“WordPress”按“Select”。 wordpress
Step7:設定登入帳密,再按“Continue”。 wordpress
Step8:這是SG提供的資安服務,如果您有需要可以購買每年計算。目前不需要就直接按“Finish”。wordpress
Step9:等待轉完網站就完成了!wordpress
Step10:網站準備好了!登入後台按“Log In Admin”,用剛剛設定的帳號密碼登入後台,就可以開始編輯網站囉。 wordpress


STEP4:WordPress網頁設計
如何設計網頁?網頁設計的概念就跟室內設計的概念一樣,只是從房屋內移駕到網站上。所以其實你也可 以自己設計,其差異性就如同你的房屋要請專業的室內設計師的概念是一樣的。專業設計 師在美感、質感、施工速度、品質就會相對的好。若有預算考量當然也可以自己至IKEA買現有傢俱自行設計。
WordPress網頁設計是一個相當大的範疇,請移駕到WordPress網頁設計,該文章有較完整的介紹。 或可以參考以下的WordPress教學資源

  1. 【WordPress 媒體庫】教學
  2. 【Wordpress網站前後台】教學
  3. 【Wordpress 選單教學 (Menu)】教學
  4. 【Wordpress頁面新增、刪除、修改 】教學
  5. 【Wordpress文章新增、刪除、修改、列表、分類 】教學
  6. 【Wordpress外掛】教學及推薦
  7. 【All in one Migration 】Wordpress網站備份外掛
  8. 6步驟就搞定~Wordpress【電商購物網站建置】
  9. 【Wordpress版型推薦】佈景主題下載秘技
  10. wordpress網站範例

STEP5:GA及GSC
安裝網站分析工具及關鍵字工具, 在WordPress的安裝很簡單,只要申請一組Gmail,並安裝Google Site Kit的外掛。透過該外掛就能快速又無Code的安裝GA、GSC。 GA安裝
Step 1:如何安裝Google Site Kit,請先登入Google帳號 GA安裝GA安裝 Step 2:Google Analytics 和 Search Console都要打勾 GA安裝 Step 3:點選Proceed GA安裝 Step 3:點選Allow GA安裝 Step 4:Add Site 出現以下的畫面,就代表Google Site Kit已經安裝成功了,再點選Go To my Dashboard即可。 GA安裝

利用Google Site Kit安裝GA、GSC進入Wordpress的後台Site Kit的Dashboard就會看見如下圖,如Search Console、Ad Sense、Analytics、Page Speed Insights。其中Search Console出現”Connected”代表GSC已經安裝完畢了。Analytics出現”Connected Service”代表GA還未安裝,請點擊Connect Service,就一直ok、繼續執行下去就好了。GA就會安裝好了。 GA安裝 那Google Site Kit到底是什麼呢? 你可以想像成他是GA、GSC的簡易版工具。因為GA、GSC其實還是需要學習才能看的懂,但透過Google Site Kit把GA、GSC的資料抓進網站,並重新設計簡易的介面呈現方式,讓網站主能更簡單的了解網站流量及網站關鍵字。但想要對網站有更深入的了解、認識,還是會建議透過GA、GSC才會最好。