SiteGround教學 :快速 WordPress 網站製作

1
2871
SiteGround教學 : 快速 WordPress 網站製作
SiteGround教學 : 快速 WordPress 網站製作

本文是一篇詳細完整的 SiteGround教學 。

SiteGround 是一家非常知名的虛擬主機商,許多國內外知名公司,都是把網站架設在 SiteGround 主機上。

不論是虛擬主機速度&穩定度,或是客服支援等 ..,表現都接近滿分,更被WordPress 官方列為推薦的虛擬主機之一。

想開啟你的網路事業嗎?

在這篇文章我會教你,如何用便宜的預算,快速完成網址+SiteGround 主機申請+WordPress網站安裝+SiteGround 設定+網站搬家等 ..

而你所要做的,就只是跟著我的教學流程 .. ,就這麼簡單!

關於 SiteGround教學 ,我精心製作了 幾個章節,大綱如下:


1. 虛擬主機推薦

網站架設 :虛擬主機推薦
網站架設 :虛擬主機推薦

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

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

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

過去網域和虛擬主機,會需要分開申請,現在簡單多了,在同一地方就可以搞定一切,且方便未來管理 .. 前提是,我們必須找一家品質好的主機公司,對吧?

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

SiteGround教學 :SiteGround 虛擬主機
虛擬主機推薦:SiteGround

SiteGround 是專業虛擬主機公司,也有網域申請服務,全球有多個數據中心(亞洲有新加坡據點),連線起來一樣快,到目前已經管理超過 800,000 個網域。

SiteGround:Wordpress.Org 推薦的虛擬主機
SiteGround:Wordpress.Org 推薦的虛擬主機

這家主機公司,我自己親身使用多年且十分滿意,它們所有的主機,都對 WordPress 進行速度+穩定度的優化。

這也是為什麼能讓 WordPress.org 官方,列為推薦的主機之一,你可以享有 ..

  • WordPress 一鍵安裝:5分鐘完成 WordPress 網站。
  • WordPress 版本+外掛自動升級:自動版本協助升級。
  • WordPress 搬家:SG 搬家外掛,可自己輕鬆搬家 or 請專人搬家。
  • 每日自動備份:自動備份 1 個月資料,也可手動備份+還原。
  • 虛擬主機速度快:所有 SG 主機,都對速度進行高度優化,配備了超快速硬碟 SSD ,確保網站速度,跟飛的一樣。
  • 優質客戶服務:SG 提供超棒的客戶支持服務,24/7 的電話服務,也支持即時聊天,協助解決問題。
  • 免費的 SSL 和 CDN:SSL(安全加密)的重要性,相信不用再多說,連 CDN(快取+分散風險) 也提供免費服務。
  • 多個服務器位置:SG 在全球有多個數據中心,亞洲地區有新加坡據點,連線起來就是快。
  • 還有其他優點 :)

WordPress 虛擬主機對網站速度的影響,是很關鍵的!

所以後來,才決定使用多人推薦的 SiteGround ,開啟我的部落格之旅  😛 😛

SiteGround 良好的虛擬主機效能
使用主機測試網站的數據報表,SiteGround 超快的虛擬主機效能:)

專家們對 SiteGround 評論?

SiteGround 是 WordPress 社區中最受歡迎和評分最高的託管服務提供商之一。

它提供獨特的主機解決方案,讓主機穩定度、主機速度、主機安全性等 ..,都能達到最高的審核標準,且有接近 100% 的正常運行時間。

一流的客戶服務是需要的,由於 SiteGround 的使用者來自世界各地,至少可以說,他們的客戶支持很棒。

如:24/7 的客服服務、即時聊天、快速表單回覆 .. 等。

若是打算經營自己的網站事業, SiteGround 會是你很好的選擇!

SiteGround 虛擬主機:國內外網友優良評價
SiteGround 虛擬主機:國內外網友優良評價

SiteGround 費用了解

至於費用部分,虛擬主機的原訂價格為$ 14.99 美元 /月,值得開心的是,SiteGround 官方已經同意為我們網站的讀者,提供方案 50% Off 的虛擬主機折扣

siteground教學:虛擬主機價格
siteground 虛擬主機價格

就等於虛擬主機只需 $6.99 美元 /月(一年約 2520 台幣),即可開始享用 SiteGround 主機。

若網址也同樣在 SiteGround 申請,域名的價格通常為$ 15.95 美元 /年(一年約 480 台幣)。

等於網址+主機費用相加起來,可以用大約 3000 台幣,開始你的網路事業!

下一章節,我會帶領大家網域申請+虛擬主機租用,教學很容易上手的,我們開始吧:)


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

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

這章節,申請流程簡化成 3 步驟,完成網域申請+租用虛擬主機,打造自己的網頁製作。

Step 1:挑選主機方案

首先前往 SiteGround ,挑選適合自己的主機方案。

siteground教學:虛擬主機價格
siteground教學:虛擬主機價格

如果你是初學者,推薦使用 StartUp 入門方案 創建第一個 WordPress 網站,是一個不錯的選擇,費用較低方便入門。

若是有些經驗的使用者,想擁有更好的 SiteGround 服務,如:更好的主機規格、網站速度等 .. ,你可以選擇 GrowUp 中階方案

Step 2:申請你的專屬網址

填入想申請的網址( Register a new Domain ),並前往下一步,若是原來就有網址,就選( I already have a domain ),就不另做申請。

網站製作 :siteground網址申請

Step3. 填入申請資料

填寫申請帳戶資料(英文),客戶資料,付款方式等 .. ,最後送出付款。

  • 帳戶資訊,請務必記好,是要登入 SiteGround 的帳密唷!
  • 英文地址 / 郵遞區號(5位數),可用「 中英地址翻譯 」工具查詢。
網站製作 :SiteGround申請資料填寫
siteground:申請資料填寫

付款完成,這時網址申請+虛擬主機租用,就順利申請成功囉:)

網站架設 :SiteGround,網址+網路空間申請成功
SiteGround:網址+網路空間申請成功,歡迎信

申請完成後,留意一下信箱,系統會寄送歡迎信,若沒收到也無所謂,不會造成影響。

這章節,是協助你完成 網頁架設 的基底。

有點像是基礎設施,下一章節就要來學習如何 WordPress 安裝,也就是「 網站製作 」的部分囉:)


3. 架設個人或公司網站

網頁設計教學 :開始架設個人&公司網站

首次登入 SiteGround 後台,會發現 Set Up Site,把它用力點下去 😎 😎

若還沒有網址&虛擬主機,可點擊下面按鈕,依照 網頁架設 教學,快速完成申請。

網頁製作教學 :SiteGround,點擊網站設計
SiteGround:點擊網站設計

照著下面流程選取,主要分為 Start New WebSite(開始新網站)和 Migrate Website(轉移現有網站)。

網站製作 :網址+虛擬主機+Wordpress安裝完成
SiteGround:網址+虛擬主機+Wordpress安裝完成

小提醒:

  1. 這裡設置的帳號密碼,是未來會用到的 WordPress 後台帳密(之後可改密碼,別擔心)
  2. 若要搬家至 SiteGround,可以使用 Migrator WebSite 搬家工具(若一方案皆有),或請 SiteGround 公司專人協助搬家(需 GrowBig 方案以上)。

點擊完成後,會到 Add Extras(額外服務)頁面,這邊都先不選取。

送出後,SiteGround 就會開始運行 WordPress 安裝,完成後會出現安裝成功的畫面。

網站架設 :SiteGround,DNS指向+網站管理工具
SiteGround:DNS指向+網站管理工具

若網址非在 SiteGround 申請,請看這:

請把上圖的左邊 DNS  兩行複製下來(Site Tools 後台 也找得到)。

然後到自己的網域商,進行 DNS 設定(把剛複製的兩行貼上去),然後等待24小時 ~ 48小時的作業時間(系統指向時間)。

就可以順利把你的網址和 SiteGround 主機,串接起來了!

接著,搜尋剛設定的網址,來看一下努力的成果,若網址已經指向成功,就會出現剛架設完成的 WordPress網站,如下圖。

網頁製作教學 :SiteGround,搞定的 wordpress 網站
SiteGround:搞定的 wordpress 網站

假如安裝過程等比較久,出現超時安裝提示,這也是代表已安裝完成

只要重新刷新頁面,然後點選 Websites 分類,就會看到剛安裝完成的網站,如下圖:

網站製作 :SiteGround網站架設

想學習更多「 WordPress 前後台 」如何使用,我在 WordPress 教學 這篇有良好的範例說明 😆 😆


4. 網站搬家

網頁設計教學 :SiteGround 網站搬家

這章節,是分享有關如何把網站,搬家至 SiteGround ,若無搬家需求,可跳過這章。

在開始之前,需要先跟著我的 SiteGround教學 ,完成虛擬主機申請,才能使用搬家服務唷。

這邊我整理 5 個步驟,協助你完成網站搬家,如下:

  1. 選擇網域種類
  2. 選擇搬家種類
  3. 下載+啟用搬家外掛
  4. 輸入搬家憑證&進行網站轉移
  5. 進行 DNS 設定

Step1. 選擇網域種類

首先前往 SiteGround 後台 > Websites,點擊 New Website,新增一個網站。

網站製作 :網站搬家教學
SiteGround 網站搬家

接著,點選 Existing Domain(已經有網域),要對你原有的網域內容,進行搬家。

若沒有網址的話,就選 New Domain(新申請網域),申請一個。

網頁製作教學 :網站搬家

Step2. 選擇搬家種類

接下來,選 Migrate Website(網站搬家) > WordPress Automigration(外掛搬家),開始搬家流程。

備註:下圖右邊的 Professional Migration(專家協助搬家),比較適用原來網站非 WordPress 架設使用,需提供 Cpanel 網址&帳密,或 FTP 相關資料,方便 SiteGround 專家處理。

若是原來網站就是 WordPress 架設,只是想搬移到 SiteGround ,比較建議使用WordPress Automigration(外掛搬家),除了速度快,也方便!

網頁製作教學 :網站搬家

送出後會進入選購項目,這邊不做任何選購,直接下一步,即會開始安裝你的新主機空間。

Step3. 下載+啟用搬家外掛

新主機空間安裝完畢後,接下來需下載 SiteGround 提供的 SG Migrator 搬家外掛(下圖左邊)。

也請記得中間的 Migration Token,和右邊的 DNS 路徑,這頁可先保存下來,等下都會用到。

網站製作 :SiteGround 網站搬家,設定完成

下載完 SG Migrator 外掛後,前往原有網站的 WordPress 後台,並上傳外掛,然後啟用。

Step4. 輸入搬家憑證&進行網站轉移

前往 SG Migrator,輸入 Migration Token 憑證(上圖中間),和轉移完成通知信箱,最後點確認按鈕,即開始轉移。

SiteGround教學 :SiteGround Migrator網站搬家
SiteGround Migrator:網站搬家

等待轉移完成後,會出現轉移成功的提示。

接著,可以點擊下圖左側 Go To Site ,SiteGround 會給一個假網址,方便你確認搬家狀況,如下圖:

網站製作 :SiteGround Migrator網站搬家

若確認無誤,接著就要進行 DNS 設定,讓你原有的網址,可以對應到新搬家完成的主機上。

順帶一提:若轉移完成後,SiteGround 會寄送一封通知信,傳送到你剛填入的信箱裡,裡面有 DNS 位置,若遺忘了可以來這查詢。

SiteGround 網站搬家,確認信
SiteGround 網站搬家,確認信

Step5. 進行 DNS 設定

提醒:若剛網址在 SiteGround 申請,則無需進行 DNS 設定,SiteGround 會自動設定好,這步驟可略過,可直接查看成果。

首先,把剛剛 2 行的 DNS 位置,前往你的網域商(就是你申請網域的地方),進行 DNS 更改。

讓訪客連結你的網址後,可以順利連結到 SiteGround 幫你搬家的新主機。

若一切順利,等待 DNS 設定完成(約 24 ~ 48小時),再連結你的網址,就會發現網站已經搬家成功囉:)

以上就是 SiteGround教學 ,有關於網站搬家的章節,希望有幫助到大家!


5. WordPress後台登入

網頁設計教學 :WordPress後台登入

有照著前面步驟,相信已經完成網址+虛擬主機+WordPress安裝了吧 😀 😀

若還沒有網址&虛擬主機,可點擊下面按鈕,依照本文教學,完成申請。

首先,前往 wordPress 後台,網址是:「 你的網域 」/wp-admin

網頁製作教學 :WordPress後台登入網址
網頁製作教學 :WordPress後台登入網址

輸入剛在 SiteGround 建立 WordPress 網站時,所設定的帳密。

網站製作 :wordpress 後台登入
WordPress後台帳密登入

登入後,會看到 SiteGround 的「 快速架站教學 」 ..

下一章節,我將帶著大夥們進行 WordPress佈景主題+外掛安裝。


6. 佈景主題+外掛安裝(SG引導)

開始 SiteGround 引導的「 網站製作 」教學,點擊 Start Now 前往下一步。

網站製作 :SiteGround wordpress 網站登入
SiteGround:wordpress 網站登入

選擇喜歡的 WordPress 佈景主題,左邊有分類列表,也可以用它來塞選,版型確認後點 Select

小提醒:這裡的佈景主題+外掛,之後在 WordPress 後台,都可以再修改唷,可以放心!

網站製作 :SiteGround wordpress 佈景主題+網站範例
SiteGround:wordpress 佈景主題+網站範例

接著,會跳出 WordPress 佈景主題的配合外掛(依每個主題不同,需安裝的外掛也不同,以下僅供參考)。

SiteGround 預設會協助安裝,選擇要安裝的 WordPress 外掛,點 Confirm 確認送出。

網站製作 :wordpress 外掛下載
WooCommerce 外掛下載:Wordpress 購物網站專用外掛
網站製作 :wordpress 外掛安裝,擴充後台功能
Contact Form(連絡表單外掛)& JetPack 綜合外掛(必裝)
網頁製作教學 :wordpress seo 外掛下載:Yoast SEO
WordPress seo 外掛下載:Yoast SEO

接著會開始跑 WordPress 外掛安裝,耐心等一下,就會完成安裝啦:)

這邊點擊 View Site,前往架設完成的 WordPress 網頁,來看看會發生什麼事。

網站架設 :wordpress 外掛安裝成功
wordpress 外掛安裝成功

兩個重要的路徑位置(要記得唷):

  • wordpress 網站前台: 「 你的網域 」
  • wordpress 網站後台: 「 你的網域 」/wp-admin

會發現 網站製作 ,如:個人網站架設 or 公司官網架設 or 購物網站架設等 .. ,已經順利完成啦  😛 😛

網站製作 :WordPress 佈景主題,網頁設計
wordpress 佈景主題:選取 cart 分類,呈現的簡單版購物頁面

若是不想使用 WordPress 免費主題,覺得功能太少無法客製化,卻又不知道哪款 WordPress 佈景主題適合你?

我推薦 Avada,是一款國內外超熱賣 WordPress主題,可以用它客製化網站設計,有興趣可參考 Avada教學,裡面有詳細教學。

當然 WordPress 網站優化,是一門學問,還有很多可以學習和改造的。

若想學習更多,我有準備一篇文章,協助你快速上手 wordpress 前後台,如下:

WordPress 前後台教學全文,完整學習 icon-arrow-down icon-arrow-down

WordPress教學 :25個後台課程(含安裝+主題推薦)

7. 網域確認信件

網站製作 :網域確認信件

使用 SiteGround 完成網域+虛擬主機申請,會有一封驗證域名註冊者的信件。

這是來自 ICANN 通過網域服務商,寄給使用者的信件,是用來確認註冊者的聯絡資料,是否正確。

先到 Email 收件夾,點 SiteGround 寄來的 「 VERIFICATION REQUIRED 」信件。

網頁製作教學 :網域驗證信件
網域申請完成,需點擊的認證信件

點擊信件中的驗證連結,如下圖:

網頁製作教學 :網域驗證信件
網頁製作教學 :網域驗證信件

確認無誤,點 VERIFY INFORMATION 送出。

網站製作 :網域註冊確認

如此一來,網域申請認證,就完成啦~恭喜:)

到此,本文的網頁製作教學,也順利完成了,希望大家都能完成網站製作!

接著,我將繼續對 SiteGround 的 Site Tools 網頁製作軟體後台,有進一步的教學。

若想學更多,可以往下繼續學習:)


Site Tools 教學(SiteGround)

經過一連串的努力,不知道有沒有順利完成 架設網站教學 呢?

若中間有遇到問題,都歡迎在下面留言給我 🙂 🙂

這一章節,我將簡單介紹 SiteGround 所開發的 Site Tools 工具,開始囉!

Site Tools 是什麼?

是 SiteGround 自己開發的系統管理後台,除了優美的網頁設計外,重要的是有多種系統功能,可供你使用。

例如:檔案管理員、FTP 帳戶建立、網站備份、SSL 安全憑證、CDN 內容傳遞、Caching 伺服器快取等 ..,都在 Site Tools 操作。

如何前往 Site Tools ?

前往 SiteGround ,然後點 Login 輸入帳密登入。

網頁製作教學 :SiteGround登入

登入後,到 Websites > Site Tools,直接進入。

網站製作 :架設網站軟體
Site Tools 進入位置:架設網站軟體

就會看到,超多功能列表 .. 出現了,因為長度限制,還沒全部截圖完成。

網站製作 :SG功能列表
Site Tools 功能列表(SiteGround)

File Manager 檔案管理員

前往 Site > File Manager。

File Manager 可用來編輯線上檔案,若官網架設是用 WordPress 網站,會看到許多 wp 開頭目錄。

可協助你 WordPress 主題、外掛上傳 / 新增 / 編輯 / 刪除等 .. 功能。

網站製作 :File Manager 檔案管理工具
File Manager 檔案管理工具

FTP Accounts 上傳帳號

前往,Site > FTP Accounts。

若是有大量檔案,需要上傳&下載,就可以使用 FTP 工具操作會比較快。

使用 SiteGround 的 FTP Accounts 會幫你建立 FTP 帳密,再配合 FileZilla(上傳工具),輸入帳密,即可進行檔案操作:)

網站製作 :FTP Accounts 上傳帳號
SiteGround 協助申請 FTP 相關訊息
網頁製作教學 :FTP登入帳號密碼
FTP Clients,如:FileZilla (上傳工具)登入需使用的資訊

Backups 備份

前往 Security > Backups。

SiteGround 有自動網站備份功能(30天範圍),若想手動備份網站,也可以手動操作。

想還原備份檔案,只要在選擇日期旁,點 Restore All Files and Databases(還原所有檔案和資料庫),即可完成:)

要刪除多餘的備份,就點 Delete

網站製作 :網站備份工具
SiteGround 有自動備份服務,若需要也可以手動備份:)

SSL Manager 憑證管理

先了解什麼是 SSL?

SSL 是一種安全協定,目的是為網路通訊提供安全及資料完整性保障。

簡單來說,若你的網址前面有一個鎖頭,那代表你正在使用 SSL 安全連線,如下圖:

網站架設 :SiteGround 的 SSL憑證申請

若網址前面無鎖頭(代表沒 SSL 憑證),就需手動 SSL 申請,這邊跟大夥兒教學一下,如下:

前往 Security > SSL Manager icon-arrow-right 選擇網址 icon-arrow-right 選擇 SSL 憑證種類(Let’s Encrypt)icon-arrow-right 點擊 GET icon-arrow-right 申請完成
網站架設 :SSL 憑證申請
使用 Site Tools 工具,開啟 SSL 憑證申請

HTTPS Enforce 強制安全傳輸

當 SSL 憑證申請完成,我們會希望未來的網路連線,都是經過 SSL 加密的方式。

所以就需要 HTTPS Enforce(強制安全傳輸)的功能。

前往 Security > HTTPS Enforce,打開按鈕即可完成。

網頁製作教學 :https-enforce 開啟
https-enforce 開啟

Blocked IPS 鎖IP

前往 Security > Blocked IPs。

Blocked IPs 是用來抵擋網站攻擊者,舉例:若是有來自某人的垃圾留言,就可以封鎖他 IP。

如此,該瀏覽者就無法看到你的網站。

網頁製作教學 :封鎖 IP
封鎖 IP 功能

Cloudflare 內容傳遞網路(CDN)

前往 Speed > CloudFlare。

Cloudflare CDN 可以把網站資料,放置各節點的機房中,當訪客瀏覽時,就挑選最近的機房資料讀取送出。

如:亞洲人就讀亞洲主機、美國人就讀美國主機等 ..

好處是:有效分流、加速網頁效能、安全性增加等 .. 優點。

網站製作 :Cloudflare 內容傳遞網路,功能使用
Cloudflare 內容傳遞網路,功能使用

Caching 伺服器快取

前往 Speed > Caching。

Caching 簡單來說,就是把第一次從伺服器請求回來的資料,先備份一份在電腦裡(如文字、圖片、所有檔案 ..),加快了網站速度。

之後再次瀏覽,直接電腦裡抓紀錄,就不用每次都要向伺服器重新拿。

網站製作 :SiteGround 的 SuperCacher使用
SiteGround 的 SuperCacher 伺服器快取功能

Install & Manage 安裝管理WordPress

前往 WordPress > Install & Manage。

除了前面的架設網站教學,也可在 Site Tools 新增 WordPresss 網站後台,如下圖:

網站製作 :WordPress網頁安裝
網頁設計教學 :WordPress網頁安裝
小提醒:上圖的後台帳號+密碼,是登入 WordPress後台的帳密,要保留下來唷:)

Staging 部署測試

前往 WordPress > Staging。

網站有重大更新,擔心會影響到原有網站,可以使用此功能。

SiteGround 會生成一個臨時網站,給站長測試使用(不會影響到原來網站)。

等網站完全建置或更新完畢,再進行 Full Deploy 正式部署(網站上線),若不需再使用,可點 Destroy 銷毀即可。

網站製作 :Staging 網站測試部署
若網站有大幅更新,可開啟測試環境,等確認無誤再部署上線:)
小提醒:可點前台網址 or 後台網址,前往測試網站。
網站製作 :臨時測試網域
臨時前後台網域,給站長測試環境使用

Redirects 301& 302 轉址

前往 Domain > Redirects。

常用情況:

  • 想更換新網域(使用 301 永久轉址)。
  • 網站搬家,怕網站流量或網站關鍵字排名流失(使用 301 永久轉址)。
  • 網站更新 or 維修中(使用 302 臨時轉址)。
網站製作 :使用 Redirects 轉址功能。
使用 Redirects 轉址功能

聯絡 SiteGround 客服

登入 SiteGround 後台,點問號標誌 > View Help Center,前往幫助中心。

網站製作 :聯絡SiteGround客服

簡單 4 步驟,完成問題解決 :

  1. 點 Contact US。
  2. 選擇你遇到問題的主分類 & 子分類。
  3. 遇到問題,文字描述。
  4. 聯絡 SG 專家,有線上聊天客服、電話模式、表單模式等 .. 協助問題解決(推薦使用:聊天客服 or 表單模式)。
網站製作 :SiteGround 客戶服務
如何製作網頁 :SiteGround 客戶服務

開始起飛

網頁製作教學 :官網快速架設

經過多個「 網站製作 」教學,相信你對 WordPress 網站架設,應該更熟練了!

自己架設網站流程,只要照著文章走,你的個人形象網站設計,相信一定很美的:)

更多 WordPress 前後台教學?25個課程,前往學習 icon-arrow-down  icon-arrow-down 

WordPress教學 :25個後台課程(含安裝+主題推薦)

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

1 COMMENT

  1. 你好,感謝小犬詳細解說,想問那如果是從痞客邦想搬到siteground,在SG的DNS設定上,該怎麼設定…我一直找不到詳細相關資訊><不知道小犬有無解答。萬分感恩

發表迴響