iT邦幫忙

12

網站架設 :17 篇佛心教學(網頁製作+費用推薦)

本篇全文請看:網站架設 :17 篇不藏私教學流程(網頁製作+費用推薦)

WordPress教學全文,請看:WordPress教學 :25個詳細課程(含安裝+主題推薦)

網域是什麼?

https://ithelp.ithome.com.tw/upload/images/20191128/20110874nntw3mMms5.png

網域也稱為「Domain Name」,像是住家地址一樣,是個網際網路中的門牌號碼。

主要用來取代 IP 號碼,如「123.123.123.123」等 ..,這些數字對電腦有意義,但相對於人 .. 就比較沒關聯性了。而為了方便記憶,舉例:

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

https://ithelp.ithome.com.tw/upload/images/20180802/20110874vyteok3rKl.png

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

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

用免費網址申請好嗎?

申請免費「 網址+網路空間 」最大的好處就是「 免費和練習 」,但可別用它來當正式網站的環境阿!

這邊我推薦 000webhost ,他是一個超好用的免費空間+網址的地方。

https://ithelp.ithome.com.tw/upload/images/20180802/20110874YUq2Hx9abj.jpg

以前在寫 Code 時,就是用這個不花半毛錢,但學習到把網站(程式碼)正式丟上線的地方,如果你也有預算考量,那也可以跟我一樣,先用這個練經驗,最後再花錢買網址+租用空間。

但 .. 未來都使用免費的「網址+網路空間」好嗎?

如果是單純練習用當然好!但如果想長久經營,用免費的是百分百不推薦!因為:

  1. 網址是子網域(公司倒了,你養的網址也沒了)
  2. 提供的免費空間,主機效能不好+有時容易被攻擊(因為免費)
  3. 用一段時間,大致上有 8~9 成會購買域名來更換(簡單來說就是,你從新手村畢業了)

網頁排名和網址有關係嗎?

應該是說,有一點點關係,但關係不大。

當然如果你選擇的是很難閱讀,或者是亂碼,那對搜尋引擎判斷難閱讀,那就有很大關係囉!

所以名字盡量簡單扼要就好,第一:方便記憶,第二:有關聯性。

關聯性對網站排名有正面加分,比如說:

小犬程式,我的網址就是品牌名:www.frankknow.com ?

我們的第一篇,是不是就很精彩了呢?在了解網域是什麼,網址和 SEO 優化影響,和哪裡可以免費練習等..。

下一篇我將會帶著你,了解 網站架設教學 的另一個重要元素「 虛擬主機推薦 」!


虛擬主機推薦

https://ithelp.ithome.com.tw/upload/images/20191128/20110874pPJzt4Ggk3.png

一開始架設網站,虛擬主機要選擇哪一家申請,也是常會遇到的問題!

小犬自己,從開始架設個人網站,到後來直接下去寫程式碼,前後也用過 10 幾家虛擬主機 .. ,發現還是這家最滿意,如下:

虛擬主機推薦:SiteGround

衡量的重點不外乎就是公司規模、主機速度、後台使用介面、客服回覆速度、虛擬主機費用、安全性、自動備份等 .. 。

在這些衡量標準上,都有超出滿意的達標,你也可以從中選擇自己喜歡的來用。

接著來做分析囉:)

SiteGround

https://ithelp.ithome.com.tw/upload/images/20191128/20110874gC7i8eeisY.jpg

首先登場的是 SiteGround ,它成立於2004年,直至今日,已發展成國外知名的虛擬主機公司之一。

同時 SG 也是 WordPress.org 推薦的虛擬主機,基本上就是一間老牌+穩定的虛擬主機公司:)

點我購買 SiteGround 虛擬主機

目前全球有 6 個資料中心(亞洲有新加坡據點),連結全球各地用戶,提升網站速度,管理超過 800,000 個網域,是很驚人的數字!

https://ithelp.ithome.com.tw/upload/images/20191128/20110874VPG68wi4nN.png

SiteGround 會如此出眾,並且有國內外超多人使用,不會沒原因的,原因在 ..

  • 虛擬主機速度快:所有的 SG 主機,都對速度進行高度優化,他們配備了超快速硬碟 SSD ,確保你網站速度,跟飛的一樣:)
  • 優質客戶服務:SG 提供超棒的客戶支持服務,24/7 的電話服務,也支持即時聊天,協助解決問題。
  • 免費的 SSL 和 CDN:SSL(安全加密)的重要性,相信不用再多說,連 CDN(快取+分散風險) 也提供免費服務 .. 實在狂 ..
  • 多個服務器位置:SG 在全球有多個數據中心,亞洲地區有新加坡據點,連線起來就是快!
  • WordPress 支持:WP 官方認證的主機,絕對不是蓋的,如:速度、SEO等 .. 都有大幅度的提升,也提供多種實用軟體,方便網站管理。
  • Site Tools 介面:SG 推出了新的後台介面,取代原來舊舊的 Cpanel 畫面,同時也增加了新功能。
  • 還有其他優點 :)

除此之外,還有每日自動備份、免費網站搬家、快速架設網站、wordpress 版本自動更新等 .. 功能,是不是很厲害:)

滿值得一提的是, SiteGround 免費的 SSL 憑證(網站安全性) 和 CDN(加速讀取速度).. 尤其在 SSL 重要性提高 的情況下!

點我購買 SiteGround 虛擬主機

(上面所提的功能,是任一 SiteGround 虛擬主機費用方案(初 / 中 / 高階),都擁有的功能唷!)

多功能軟體,提升網站速度

SiteGrround 在功能性的提供上,非常的出色,除了多功能外,近期也把過去 Cpanel 舊舊的後台介面(很多網路空間服務商,還在用這種),換成嶄新的 Site Tools 操作介面,整個質感 UP UP

這也是近期的一次後台操作介面改版,變得更美,使用起來更流暢,足以感受到 SiteGround 的用心!

https://ithelp.ithome.com.tw/upload/images/20191128/20110874CzrDkHyhj9.png

綜合以上,SiteGround 在有品質的虛擬主機當中,不管是軟體+硬體,整體服務水準都很高!

重要的客戶服務也表現很好,也提供如:24/7 的電話服務、即時聊天系統、表單快速處理等 ..

虛擬主機不論速度和穩定性的表現上,都非常出色,加上有免費的 SSL 憑證+CDN服務(分散風險)+多種功能性軟體,主機費用也算是中低價位,簡單來說就是CP值高啊:)

若等不及想開始 架設網站教學 ,可以從這章節直接開始!


網址+虛擬主機申請

https://ithelp.ithome.com.tw/upload/images/20191128/20110874FU7N7KiHxY.png

還沒確認要使用哪款虛擬主機,請先看 虛擬主機推薦 ,若確認好我們就開始吧!

一個 網站架設流程 ,會包含下列三要素,並且缺一不可!

架設網站三要素

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

在這章節,小犬會帶領大夥兒申請網址+虛擬主機,而 網頁設計教學 部分在下一章節,也會帶著大夥兒實做一次。

這裡用 SiteGround 主機,進行 網站架設教學 ,這款是小犬在使用的虛擬主機商,使用至今都非常滿意,教學起來會更有心得,就讓我們開始吧 :)

1. 前往 SiteGround,挑選主機方案

前往 Siteground ,挑選 wordpress 主機方案,小犬使用最多人申請的 GrowBig 來教學,若是新手入門可用 StartUp

點我購買 SiteGround 的 WP 虛擬主機

https://ithelp.ithome.com.tw/upload/images/20191128/20110874cIhUOhqipL.png

2. 申請喜歡的網址

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

https://ithelp.ithome.com.tw/upload/images/20191128/20110874b1uXe7CtvB.png

3. 填入申請資料

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

帳戶資訊,請務必記好,是要登入 SiteGround 的帳密唷!

地址 / 郵遞區號,都要用國際方式填寫,這邊上個「 中英地址翻譯 」工具,協助大家填寫:)

https://ithelp.ithome.com.tw/upload/images/20191128/20110874JNWUjlbuyC.png

https://ithelp.ithome.com.tw/upload/images/20191128/20110874K8EKkGZmd3.png

付款成功後,你的網址+虛擬主機就正式申請完成啦~~是不是很簡單:)

有了網址+主機,整個架設網站流程,大致上就完成了一半了!

下一章節,小犬將會帶著大夥兒,完整個人+公司網站製作流程 .. 我們接著看下去!


架設個人或公司網站

https://ithelp.ithome.com.tw/upload/images/20191128/20110874SWEokfYA5O.png

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

點我購買 SiteGround 的 WP 虛擬主機

https://ithelp.ithome.com.tw/upload/images/20191128/2011087449F7C4OclC.png

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

https://ithelp.ithome.com.tw/upload/images/20191128/20110874FlZ6VwQwbt.png

小提醒:設置的帳號密碼,是未來會用到的 wordpress 後台帳密唷(之後可改密碼,別擔心),要記得嘿!

點擊完成後,會到 Add Extras(額外服務)頁面,小犬自己是沒有做任何的加值服務(因為要 $$),端看個人選擇囉:)

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

https://ithelp.ithome.com.tw/upload/images/20191128/20110874apifzeVquL.png

小提醒:若原來就有網址(非在 SiteGround 申請),請把左邊 DNS 兩行保存下來(Site Tools 後台也找得到),並到自己的網域商,進行 DNS 設定(稍後設定也可以!)

我們先不點擊前往 Site Tools,有關 Site Tools(網站後台管理工具),稍後會跟大夥兒介紹,這是 SiteGround 開發來取代舊版 Cpanel 介面的超好用工具:)

到了這一步,小犬先恭喜你,已經順利的完成自己的網址+虛擬主機+Wordpress 安裝啦!

來看一下你努力的成果 .. 陽春版的 wordpress 畫面!?

https://ithelp.ithome.com.tw/upload/images/20191128/2011087473bwDX2vNy.png

別擔心,稍後我們會幫它做基本設定+換上美美的佈景主題,先暫時忍受一下吧!

下一章節,我會帶著大家調整自己的 wordpress 網站,變成自己喜歡的佈景+設定:)


WordPress教學+佈景外掛

https://ithelp.ithome.com.tw/upload/images/20191130/201108742MCTUGT7fQ.jpg

來到這章節,若有照著前面步驟,相信已經完成網址+虛擬主機+worpdress安裝了吧!

WordPress教學全文,請看:WordPress教學 :25個詳細課程(含安裝+主題推薦)

可惜美中不足的, wordpress 網站版型太陽春了 .. 實在需要給它打造一番!

首先,我們前往已建立好的 wordpress 後台,網址是:你申請的網址/wp-admin,然後輸入剛在 SiteGround 建立 wordpress 網站,所輸入的帳密。

https://ithelp.ithome.com.tw/upload/images/20191130/20110874RyDSNFBkFE.png

會看到 架設網站流程 ,開始我們的網站設計,點擊 Start Now 前往下一步。

https://ithelp.ithome.com.tw/upload/images/20191130/20110874cFHEU6Xo0z.png

這邊有很多免費的 wordpress 佈景主題+網站範例,可以挑選自己喜愛的網頁設計:)

左邊有分類列表,也可以用它來塞選,版型確認後點 Select

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

https://ithelp.ithome.com.tw/upload/images/20191130/20110874wbhVxir1wh.png

選擇 wordpress 佈景主題後,會跳出這款佈景所使用的主要外掛,SiteGround 預設會協助安裝,確認後點 Confirm

https://ithelp.ithome.com.tw/upload/images/20191130/20110874YaYZFIw3o6.png

接下來,wordpress 會推薦安裝幾款熱門外掛,如:Contact Form(聯絡表單)Jetpack(綜合外掛包,如:網頁速度優化 / 社群分享 / 熱門文章等 ..)

這邊我們就選擇這兩款,先來進行預先安裝:)

https://ithelp.ithome.com.tw/upload/images/20191130/20110874sCJXJ6z7qH.png

這頁我們選擇 Optimize for SEO,這款就是 wordpress seo 神器 Yoast SEO,確認後送出。

https://ithelp.ithome.com.tw/upload/images/20191130/201108746yhJA0rCNn.png

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

這邊點擊 View Site,前往新的 wordpress 網頁主題,來看看會發生什麼事:)

https://ithelp.ithome.com.tw/upload/images/20191130/201108740Gn7q0QaUi.png

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

  • wordpress 網站前台: yourdomain.com
  • wordpress 網站後台: yourdomain.com/wp-admin

會發現我們新的 wordpress 佈景主題,一個簡單的個人部落格網站、公司網站、購物網站,已經順利完成啦!

當然你喜歡的,可能跟我不同,這就是 wordpress 好玩的地方,把它打造好,吸引更多人前往你的網站光顧吧:)

https://ithelp.ithome.com.tw/upload/images/20191130/201108745cTWnAwqyX.png

當然 wordpress 網站優化,其實是一門學問,有許多可以學習和改造的,這部分未來會陸續與大夥兒分享:)

下一章節,小犬將帶著你們,了解 網站架設推薦 的 4 種方式,讓大夥兒對網站掌握度,變得更高 .. 衝吧!


網站架設-方式(4種方式)

通常要架設網站,不外乎4種方式(等等進行評比):

  1. 使用網頁製作軟體,如:WordPress、Joomla、Drupal。
  2. 使用網頁製作平台,如:痞客邦、Medium、Wix、Weebly、SHOPLINE、91APP、MeepShop。
  3. 自學程式語法架設,如:HTML、CSS、JS、PHP、Python、Nodejs、Ruby、C#等 ..
  4. 請網頁設計公司製作。

看完這幾點,你可能會問:「哪一種比較好?」。
https://ithelp.ithome.com.tw/upload/images/20180802/20110874LBvqVzsvjn.jpg

請網頁設計公司製作?還是使用免費網頁製作軟體、網頁製作平台?覺得很難選嗎,請先問自己三個問題:

  • 官網主要目的是什麼?是否需要特殊的功能?
  • 我是否有足夠的架設網站知識(技術背景)或是足夠的財力?
  • 我對於曝光能力與行銷是否有把握?
  • 如果網站本身就是產品(SAAS),也可能會不斷的更新或擴充功能,或需要高度客製化功能,這種情況,基本上你就是得自行開發啦(選3或4)!

不過,如果你的主要目的是「寫Blog平台、網路開店平台、官網形象展示 ..」,其實不一定要花大錢,也可以透過第三方平台來達到,這樣不但省錢,而且也快速(選1或2)。

如:近來很夯的 WordPress、Medium 都很方便,而且使用網頁製作軟體、平台,多少會有些固定社群流量,對於一開始什麼資源都沒有的,是比較好入門的選擇!

針對這幾項,等在後面也都有做介紹,別著急:)

4種方式優缺點,簡單小評比

這邊先看看,剛上面提到的4種 網站架設 方式,並做簡單的評比:

1. 網頁製作軟體(優缺點)

https://ithelp.ithome.com.tw/upload/images/20180802/20110874ixWc1VuzFp.jpg

主機可以自己管理,可以使用主機公司提供的 Cpanel 做檔案備份、和一些擴展功能(如:信件傳輸、排程執行等 .. ),就算不懂程式,一樣可以使用Cpanel管理自己的虛擬主機。

也不用擔心使用網頁製作平台(如:痞客邦、Wix等 ..),若公司出了狀況那附屬在下面的網站會不會有危險、 資料會不喪失等 ..,因為你就是網站的持有人。

https://ithelp.ithome.com.tw/upload/images/20180802/20110874ZKPriNeYeS.png

那至於如何備份,其實多數虛擬主機公司都有備份功能,你只要點選,就可以把網站檔案+資料庫,全都給下載下來。

網頁製作軟體(如:wordpress、joomla等 ..)還有很多好處,他們有超多套件可以安裝,不論你是想要討論區、會員系統、電子報設計、主題背景等 .. 應有盡有!

想的到的幾乎上面都有開發者已經開發好,不太用再花錢請網頁設計公司開發,自己搞定就可以了。

https://ithelp.ithome.com.tw/upload/images/20180802/20110874qMHiayrsIi.png

舉例來說,如果使用 WordPress,那要做的就是照著教學安裝,就算你不會程式,還是可以自己完成一個 網站架設 ,整體成本降低很多!

2. 網頁製作平台(優缺點)

對於第二點(網頁製作平台)的看法,好處是都建置好了,只要專注在自身專業上,如:文字撰寫 / 商品銷售等.. ,程式這些難懂的人家都處理好了,不懂打個客服問也沒問題。

大多數也是免費軟體,有收錢的話是用月/年租方式(如:Shopline等 ..開店平台),用的不習慣終止也行,所以壓力也小很多。

https://ithelp.ithome.com.tw/upload/images/20180802/20110874VBikqbyyy9.png

https://ithelp.ithome.com.tw/upload/images/20180802/20110874vZTZMqGMfq.png

比較麻煩是資料都綁在平台上,假如某天平台公司倒了(不是不可能的),想當然資料就 ..。

有良心的會提供匯出系統,可以讓你把商品/文章資料會出,如果沒提供那就只能節哀了 ..(想想你的好幾百件上架的網路文章、商品要重上 ..,整個辛苦經營的SEO歸零,整個很點點點 ..)。

https://ithelp.ithome.com.tw/upload/images/20180802/20110874Ftqcq6GLGu.png

還有,你的網域申請只是子網域,如:痞客邦網址(yourname.pixnet.net/xxx/xxx .. ),雖然還是可以經營自媒體,但你的網站,終究不是你自己的。

https://ithelp.ithome.com.tw/upload/images/20180802/20110874T1Z12dtK9W.png

可參考學更多:網頁製作平台

3. 自學程式語法架設(優缺點)

第三點方式架設(學程式,自己架設網站):優點是你有最高的網站控制權,從網址、 主機、 程式架構、 擴展性等.. 你就是王,不用依附任何平台的改變。

不用被迫調整自己的商業走向,所有變化性完全自己決定,如果你要做SAAS(軟體即服務),那這一定是必須的,舉例有名的如:FB、 Line、 User等 .. 都是,就是很夯的「網路新創」公司。

https://ithelp.ithome.com.tw/upload/images/20180802/20110874wUocA7oAMi.png

如果你的商業策略不需如此,只需要單純自媒體來行銷自己。那對於初心者來說,如果為了 網站架設 ,花了好幾年學習程式語法,可能有點太大費周章了。

當然,如果你是要完全客製化的或是要很特別功能,那你還是要懂程式語法才行,不然還是要花錢請人製作了。

想自學程式架站這也可行,但在我學習程式的路途上,確實發現這個領域非常的「深」,沒幾年時間,想架設出像樣的網站(架構、 功能、速度)等都不太可能的,這不是在潑冷水,看看下面的圖應該會有所感。

https://ithelp.ithome.com.tw/upload/images/20180802/201108741zl3CYeWlO.jpg

上圖只是網頁前端領域(每一個長方形格子,代表著一個需要學習的技術),後台程式和主機架構又是各另一張學習領域,所以 .. 如果要踏入,強烈建議一定要有決心或興趣才會走的久。

當然懂些基本程式語法一定有幫助,如:Html(身體)、Css(衣服)、JS(動作),在編寫文章時,可以直接操作語法,有時也來的更快、更漂亮,這邊附上學習的好物:W3school

4. 請網頁設計公司製作(優缺點)

如果預算足夠,「花錢外包製作」也是一個好的選項,因為只需要出錢,其他交給設計公司完成就好,也能享有高度的客製化。

https://ithelp.ithome.com.tw/upload/images/20180802/20110874RVvKvlExCh.jpg

想高度客製化網站,可能就需要花錢外包製作、或自己學程式完成、或找工程師朋友幫忙 ..,不建議使用任何一個網路架站平台,會很難做成你想要的。

因為他們程式碼幾乎不給修改(如:痞客邦、Medium、Shopline等 ..),就算開放修改(如:wordpress、joomla等 ..),程式碼框架也是他們訂的,之後也難維護/擴充。

https://ithelp.ithome.com.tw/upload/images/20180802/20110874OGcRQzhuIN.jpg

結論

看到這裡,恭喜對 網站架設 的方式,有了更深一步的認識了。

接下來輪到你了,還沒有自己的網站嗎?快選擇一種喜歡的方式,開始打造自己的網站吧!

如果想提升更多,請點入文章閱讀,保證你在「觀念+實戰」上一定大幅提升:)

WordPress教學全文,請看:WordPress教學 :25個詳細課程(含安裝+主題推薦)

本篇全文請看:網站架設 :17 篇不藏私教學流程(網頁製作+費用推薦)


1
jack_len77
iT邦新手 5 級 ‧ 2018-08-02 17:08:30

非常感謝,謝謝好文分享,受教了!/images/emoticon/emoticon08.gif/images/emoticon/emoticon08.gif

謝謝你的鼓勵!

0
He.Chun
iT邦新手 5 級 ‧ 2019-03-30 11:39:26

學習學習! /images/emoticon/emoticon41.gif

一起加油:)

0
World
iT邦新手 5 級 ‧ 2019-11-12 11:19:40

好文拜讀 /images/emoticon/emoticon13.gif

謝謝你的支持:)

我要留言

立即登入留言