網站架設-23篇不藏私教學(網頁製作流程、Blog推薦、公司費用 ..)

6
2999
website-teach

你想免費 網站架設 ,卻找不到教學課程嗎?搜尋網頁製作公司,除了對網頁設計流程不熟悉,也覺得費用、價格過高?

今天,我將帶你全方位學習,從網域申請、wordpress主機教學、架設網站推薦軟體、網路開店平台、網路行銷賺錢等 .. 總共23篇教學課程,一次從門外漢進化成高手!

這23篇教學,你可以跳著看。我會都集合在一起,就是想給大家最完整的免費教學(因為網路上太多零碎文章 ..),你也不用再東找西找了,因為內容也不會有我這篇還全面,如果都順利看完,我保證你在「觀念+實戰」上,一定幹掉一票人,搞不好連「業界」上的人還沒你懂的多。

這篇我保證你會受用無窮,我們開始吧 😉  😉


subjec

前言(必看唷!)

「網址」+「虛擬主機」是 網站架設 兩大重點,申請模式有兩種:

申請模式

1. 拆開申請(網址 / 主機分開管理,分兩家)

「法蘭克玩行銷」用此種方式,網址使用「PcHome」、主機使用「SiteGround」。

Q:為什麼這樣申請呢?

A:網址「PcHome」是因為用久習慣了;主機原來是用「遠振」,但後來發現國外「SiteGround」價位更便宜,然後功能也多(如免費SSL、SuperCacher),所以我就跳過來了。

本文我也推薦多家網域商、主機商,不一定要跟我用的一樣,也可以找你喜歡的做申請。

2. 合併申請(網址 / 主機統一管理,同一家)

如果剛入門,你可以用此方式,Q:為什麼?A:因為簡單。

「網址」+「虛擬主機」都在同一家購買,可以少掉「DNS設定」的步驟、也省事,如:台灣遠振國外SiteGround,原本是主機商,後來都有提供網域服務,可以一併申請完成。

新手練習方法

如果剛入門,不想太快花錢,那可以先用 000webhost ,是一個免費空間+網址的地方,可以把他當新手村,等練完後再申請正式的(在這篇,我也有介紹:網域是什麼?)。

也歡迎加入「內容行銷&社群網路:精神時光屋」,這是我新成立的社團,裡面會分享多種行銷技巧 / 知識,快跟著我們一起教學相長吧 😆  😆

好,看完前言後,就讓我們正式開始吧!Let’s GO!! 😀  😀


subject-1

1. 網域是什麼?

網域是什麼?

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

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

法蘭克玩行銷:「https://frankknow.com/」,除了簡單好寫也方便瀏覽。

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

挑選你喜歡的網址吧!
挑選你喜歡的網址吧!

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

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

 

哪裡可以網域查詢?

購買網域之前,可先使用網域查詢功能,來做網址查詢。

你喜歡的網址已經被人註冊過了嗎?下面提供幾個地方,都可以用來做網址查詢唷:

如果只是想查詢是否網址申請過,後面的購買流程可先忽略唷  😎 

順帶一提,「Whois查詢」工具可以幫你查詢申請人資訊(這就是科技的威力 😯 ),你可以查詢到:

  1. 網域申請者
  2. 網域註冊商
  3. 網域有效時間

查詢到個人資料這件事,有些人會在意,有些人不在意,所以現在主機商也有保護資料不被查詢到功能,只不過很多是需要加錢的,需不需要使用「Whois個資保護」,就看自己囉 😀

 

用免費網址申請好嗎?

申請免費域名最大的好處就是「免費和學習

如果還在練習中,不想一次就花錢租主機或買網址,那推薦你一招,就是使用免費的「網址+網路空間」。

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

000webhost 使用
000webhost 使用

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

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

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

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

 

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

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

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

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

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

法蘭克玩行銷,我的網址就是品牌名:www.frankknow.com,這樣除了好記也有助SEO優化唷 🙂

我們的第一篇,是不是就很精彩了呢?在了解網域是什麼、概念,和哪裡可以免費練習等 ..教學後。

下一篇我將會帶著你,正式申請一個,屬於你自己的網址唷 😆


subject-2

2. 網域申請教學

網域申請的管道?

首先來看看,有哪幾個可以申請網址的地方:

 

國外 v.s 台灣申請網域,哪個好?

台灣申請網址,會比國外貴一點點,如果有預算考量那國外會比較好,但如果撇開預算不管,在台灣申請網址會比較方便,原因是沒有語言隔閡。

目前國外的 Godaddy官網也已經中文化,且也有中文客服,所以也滿推薦的 😆

目前我自己是使用「PCHOME」的網址,國外我使用「SiteGround」的主機,詳細可看:前言(必看唷!)

網址挑選的幾個重點

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

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

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

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

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

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

 

網址申請教學

接下來,使用國內外各一組當示範教學。國外使用 SiteGround / Godaddy 申請、國內使用 PCHOME,三家都是知名公司,使用起來相對安全有保障,就讓我們開始吧!

SiteGround (網址+主機示範)

小提醒:這是「網址」+「主機」一併申請教學(可省去DNS指向步驟),你也可以先看 虛擬主機推薦虛擬主機使用註冊,決定是否使用 SiteGround主機,再做申請。

Step1:

進入 SiteGround(網址申請),輸入想申請的網址,確定後按「Search」,如下圖:

siteground-網址申請
siteground-網址申請

如果網址被申請過,他會提示你換別組,如果沒問題,會直接進到 Step 2(選擇主機)。

Step2:

選擇主機,建議選擇 GrowBig(功能比較全),沒問題後就確認,前往Step3(檢查 / 完成)。

siteground-網址申請
siteground-網址申請

Step3:

最後一步,填寫基本資料(詳細可先看:虛擬主機使用註冊 的 SiteGround篇),再確認金額,沒問題就送出結帳。

siteground-結帳金額確認
siteground-結帳金額確認

如此一來,「網址」+「虛擬主機」就一併完成啦,接著就可以安裝 wordpress等 ..架站軟體,完成你的網站了。

(想越級打怪,可直接看這篇:wordpress快速安裝,就可以完成 網站架設 了:lol:  :lol:)

 

GoDaddy(只有網址示範)

Step1:

進入 Godaddy官網 進行註冊,在以前 GoDaddy 是英文介面,上手起來需要懂點英文,現在官網已經中文化,所以更好入門。

Godaddy-網址申請
Godaddy-網址申請

Step2:

回到首頁,在上面輸入想申請的網址,然後進行搜尋,查看是否被申請過。

若是被申請過,會提醒此網域有人使用,並貼心列出相似網域給你挑選,然後在喜歡的網址點選「加入購物車」,就可以準備進入付款流程了。

Godaddy-網址申請
Godaddy-網址申請

Step3:

最後會跳到 Godaddy 的附加功能選項,目前裡面有「隱私權防護」、「虛擬主機」等 ..,由於我們只需要網域,所以其他附加的都不選取。

接著進入結帳頁面,填寫付款訊息和確認商品,最後進行結帳,就大功告成啦!

Godaddy-網址申請
Godaddy-網址申請

 

PCHOME(只有網址示範)

Step1:

首先點擊下面連結,進入 PCHOME買網址 官網,然後我們進行會員註冊。

pchome-網域申請
pchome-網域申請
pchome-網域申請
pchome-網域申請
pchome-網域申請
pchome-網域申請

Step2:

註冊完後回到網址申請頁面,開始申請網址。在輸入框寫入想申請的網址,然後點擊「購買」。

pchome-網域申請
pchome-網域申請

Step3:

接下來就依照系統流程,一步步完成購買,就可以順利使用囉!

pchome-網域申請
pchome-網域申請

 


subject-3

3. 虛擬主機是什麼?

什麼是虛擬主機?

「虛擬主機」也是共享主機,也可以稱為網站空間、網頁空間、主機空間、虛擬空間、網站代管、網頁代管(這些都是同個東西 😯 😯 )。

簡單理解,就是買一台實體主機太貴了(包括主機費用、電路費用、人事成本等 ),所以就把這些費用給大公司出(如台灣最大的機房:中華電信),然後一般使用者就付月 / 年租費給主機公司,並獲得使用的權利。

虛擬主機」是用程式技術,在實體主機上切分成多個虛擬空間,並把這些空間,租給一般使用者使用。

每一台虛擬主機都有獨立功能,如:變數名稱、IP 位址、FTP、 Email等 .. 功能,虛擬主機之間完全獨立,並可由用戶自行管理,在外界看來, 每一台虛擬主機和一台獨立的主機完全一樣 😆  😆

使用虛擬主機的好處?

若要使用實體主機,那伺服主機、專線頻寬、專業人員技術,缺一不可,而專業的伺服主機動輒數十萬、專線每個月也是好幾萬、專業的技術人員更是不便宜。

若使用虛擬主機,專業的技術團隊,幫忙建制好一切網路設施與伺服主機設定,只需要每年花個幾千元,就可以開始使用主機,大大的節省了網站的製作成本

挑選主機的幾個小重點

A. 公司:基本上找任何服務,首先確定一下公司開了多久規模,自己也比較安心。想想自己的網站資料,放在一個不知名的地方,應該也會很擔心吧 🙄  🙄

B. 價位:通常國外的價格,會比國內便宜。但也不要完全價格取向,如果都選擇低價,但主機功能性不好,之後你也會選擇離開的。

C. 功能性:如果是一開始建立網站的新手,規格用入門款的應該就可以了,價錢也不會太貴;如果是經營一段時間的網站主,在挑選主機時,可以大致抓一下自己網頁的流量和狀況,選擇合適的。

  • 如果不太知道選哪款,也可以直接聯繫客服請他們幫忙推薦,避免租到不符合自己網站需求的規格,規格差的網站流量一多隨時會有掛掉的可能,規格太好價錢又太貴,所以大致上挑選中間的是理想的。

挑選主機的三個小重點:A. 公司  B.價位  C.功能性   😆  😆

認識「虛擬主機」後,接著就來教大家如何申請主機啦!在下一篇,我從國內、外個挑選幾家來做介紹,來吧!GO!


subject-4

4. 虛擬主機推薦

國內外虛擬主機推薦

推薦國內外知名的虛擬主機,這幾家公司都是廣為人傳的,使用起來相對安全有保障,衡量的重點不外乎就是公司規模、客服回覆速度、虛擬主機費用等 ..。

國外 – 虛擬主機推薦:SiteGroundGoDaddyHostGator
台灣 – 虛擬主機推薦:遠振

 

虛擬主機比較

SiteGround

WordPress.org 列為最佳 WordPress 最佳主機之一,在各界評價良好。

Siteground 是外界好評中的虛擬主機費用較為低廉,品質又不錯的,加上有免費的SSL憑證購買(安全),和SSD設備(快速),CDN服務(分散風險/快速).. 功能。

簡單來說就是CP值高啊 😛  😛

siteground教學
siteground教學

若你的網站是使用wordpress安裝的,記得選擇wordpress網站相關方案。

主機的部分可選新加坡,目前離台灣最近的虛擬主機機房,速度會比連美國快(購買虛擬主機都包含免費搬家服務,如果你需要的話)。

小提醒:若使用wordpress安裝的,記得選擇wordpress虛擬主機型號,提供的服務和一般主機服務不同。

siteground教學
siteground教學

不過,若是要買他們家的主機的話,建議購買GrowBig方案(包含以上),因為有他們自主研發的SuperCacher清除緩存外掛等功能 ..。

目前wordpress虛擬主機提供功能有,免費wordpress安裝(一鍵式安裝)、wordpress網站優化支持、wordpress自動版本更新等 .. 功能。

使用Siteground主機優點:

  • 價位在國外來說算是便宜(跟台灣來比更是)
  • 提供免費客製化功能,如:SuperCacher(超級快取)、Free Cloudflare CDN(分散風險)等..
  • SSL憑證費用(免費)

使用Siteground主機缺點:

  • 其實缺點一時也說不上來,如果要說,最大的缺點應該是國外的公司,若有虛擬主機上的問題,可能要用Email信件英文聯絡。

GoDaddy

GoDaddy 是目前最大的網域申請商,它也提供虛擬主機的租用服務。

比較方便的是,若你網址 / 虛擬主機都在這邊申請,DNS也不用轉了,基本上FTP檔案上傳完,直接就可以使用,是入門者相當不錯的選擇。

 godaddy虛擬主機費用
godaddy虛擬主機費用

GoDaddy 也支援信用卡、Paypal等 .. 方式付款,目前在台灣也有在地客服了,溝通成本降低許多。

godaddy虛擬主機費用
godaddy虛擬主機費用

Godaddy費用「優點」:

  • 在第一年時給你50%的虛擬主機費用優惠,之後費用恢復正常價。
  • 國外主機水平費用,但卻有中文客服的服務(目前Godaddy已在台灣設點),降低溝通成本。

Godaddy費用「缺點」:

  • SSL申請憑證的話,需要額外加錢(Siteground目前不用)。
  • Godday最大特色還在網域申請上面,若比整體虛擬主機費用,會比Siteground貴一點。

Hostgator

Hostgator 成立於2002年並已發展成為世界十大的領先虛擬主機服務商。

今天,Hostgator 的服務範圍,從個人的自由職業者至於世界財富500強企業(Fortune 500)在內,超過200多個國家的客戶。

hostgator教學
hostgator教學
hostgator費用
hostgator費用

簡單 HostGator 的虛擬主機比較:

  • Hatchling 方案:適合Blogger、簡單的公司官網,可以用此快速入門,因為此方案只能夠綁定一個網域名稱,也就是說,只能建立一個網站。
  • Baby 方案:如果預算沒這麼緊的話,使用 HostGator推薦的Baby方案,功能會比較齊全一點,從這方案以上,就開始無限網域,可以在上面架設多個網站也沒問題。
  • Business 方案:提供免費的SSL申請,和獨立IP,適合進階商務型的網站。

HostGator虛擬主機費用也是相對便宜,客服上的回覆速度也是滿快的。

網站免費搬遷等 .. 功能都有,目前也有45天用不習慣免費退款等優點(最可惜的是他把SSL申請,放在最高級的方案 😥 😥 )

遠 振

「遠振」大約在2003年,就開始了主機服務(當時名為「G型主機」),為國內不少企業提供了穩定的服務,加上有著全年無休、24小時的客戶服務,因此在台灣的虛擬主機比較中,算是出色且有名的。

遠振虛擬主機教學
遠振虛擬主機教學

虛擬主機費用,介紹遠振「入門款」虛擬主機機型(寫Blog、 形象網站設計、電子商務平台都很夠用)。

Linux SSD 單一網域虛擬主機

有S、M、L 三種方案,費用是年繳 NT $3600 / $7200 / $14400(平均每月$300 / $600 / $1200),如果是新入門且沒有太大需求,先用S方案,應該就可以了 😆  😆

法蘭克玩行銷 - 遠振費用
法蘭克玩行銷 – 遠振費用

台灣虛擬主機費用比國外貴一點,但最大好處就是遇到主機有問題時,聯絡的客服都是台灣人,也沒什麼語言上溝通的問題。

這篇讓大家瞭解,國內外有哪幾家好用的虛擬主機公司。當有些概念後,接著就到了要選用申請的時候啦,下一篇,我會正式帶領你們,申請屬於自己的虛擬主機 😆  😆


subject-5

5. 虛擬主機使用註冊

這章節,我國內外會各挑選一款虛擬主機商來做教學,所以不管你喜歡哪種的,都沒問題唷!

國外挑選「SiteGround」做教學(目前自己是用「SiteGround」),國內的我挑選「遠振」做教學。

SiteGround教學

Step1:

進入 SiteGround 首頁,然後順序選取「WordPress Services」 → 「WordPress Hosting」,選取 WordPress 用的主機型號。

如果你不是使用WordPress,就使用一般機型,選取「Web Hosting」 → 「Shared Hosting」。

siteground教學
siteground教學

WordPress 的虛擬主機費用,目前共有3種方案,分別是:

siteground教學
siteground教學
  • StartUp(新創型):單一網站、10GB網站空間、基本Wordpress功能、費用$3.95/mo (台幣$120/m,$1440/y)
  • GrowBig(成長型):多網站、20GB網站空間、進階Wordpress功能、費用$5.95/mo (台幣$180/m,$2160/y)
  • GoGeek(極致型):多網站、30GB網站空間、極致Wordpress功能、費用$11.95/mo (台幣$360/m,$4320/y)

SiteGround 虛擬主機,不管哪種方案,都有免費主機搬遷、免費SSL申請、每日備份、SSD設備、CDN、30天可退款等功能.. ,Wordpress 機型中,也包含內建 WordPress安裝。

進階功能多了 SuperCacher,是 SiteGround 開發的快取軟體(加快網站讀取速度),建議選GrowBig方案(以上)使用,使用在部落客 / 中小電商 / 官網等.. 已經很足夠,且功能也比較多。

目前我是使用 GrowBig 方案 😆  😆 

Step2:

選擇網址方案,第一種是「註冊網址」,第二種是「我已經有網址了」,選擇你的網址方案後,點選下面的「Proceed(繼續)」。

siteground網址選擇
siteground網址選擇

依序填入,帳戶資料 / 客戶資料 / 購買資訊等 .. ,有*號的都是必填的,要注意zip code記得要填5碼的,這邊附上連結 郵遞區號5碼查詢

還有,如果有些資料中文輸入不行,那就可能要換英文輸入囉。

siteground資訊輸入
siteground資訊輸入
siteground資訊輸入
siteground資訊輸入

選擇虛擬主機方案、主機地點選新加坡(SG)。

SG Site Scanner,是用來掃描有無惡意程式碼,並會立即通知功能,這要而外收錢,所以看自己需求選擇。

siteground資訊輸入
siteground資訊輸入

若確認一切都沒問題就可以準備付款了。

siteground資訊輸入
siteground資訊輸入

若是出現付款成功的畫面,也代表你的虛擬主機已經正式申請完成啦!

siteground申請成功
siteground申請成功

Step3:

最後,看一下登入FTP / cpanel / DNS指向 .. 等登入資料(如下圖):

FTP資料
FTP資料
  1. Account DNS:DNS指向用的,要進入你的網域商後台,填上這兩組,並等24-48小時轉址完成。(詳細可以看:DNS是什麼)
  2. cPanel Username:FTP架設連線的使用者名稱。
  3. FTP Details:「Hostname」是要連入的主機、「Password」是登入FTP的密碼(跟cPanel密碼一樣)。
  4. Change Password:設定密碼 / 更改密碼。

這樣SiteGround主機申請都完成啦!好好享用它吧 🙂  🙂

 

遠振教學

Step1:

首先進入遠振首頁,然後點選「虛擬主機」,再選台灣虛擬主機內的「SSD單一網域虛擬主機」,進入選購。

遠振虛擬主機費用
遠振虛擬主機費用

Step2:

先把遠振的虛擬主機比較一下,讓大家對遠振的虛擬主機規格有些概念:

A. Linux SSD單一網域虛擬主機

如果你的網站只有單一網域(如:www.frankknow.com),且只是用在一般的 網站架設 ,如部落格、線上購物、官網形象等..,就可以考慮這類型的主機。

有S、M、L三種方案(從左到右是S到L):

  • 磁碟空間分別為 20/30/40GB
  • 流量則為 600/750/900GB
  • 記憶體大小分別為 2/2.5/3GB
  • CPU限制則為 2/3/4GB
  • 費用則是年繳 NT$3600/$7200/$14400(平均每月$300/$600/$1200)。
遠振虛擬主機費用
遠振虛擬主機費用

B. Linux SSD多網域虛擬主機

如果有「多網域」需要管理,他一樣有三種方案,而磁碟空間、流量、CPU限制及記憶體都一樣,主要差別是這三種方案都能附加到50個網域,費用則為年繳 NT$4100/$7700/$14900。

遠振虛擬主機費用
遠振虛擬主機費用

C. 中華電信高速貼圖主機

網頁經營一段時間後,會累積大量圖片,這時有可能會需要一台「貼圖主機」來存放圖片。

主要是可以節省網站的流量、提升網站速度(圖片由另一台主機提供)、降低風險等..。

遠振虛擬主機費用
遠振虛擬主機費用

(但這不一定需要,可自由選購。)

Step3:

選購「Linux SSD單一網域虛擬主機的TW-S方案」,找到該品項後,點選下面的「申請與試用」開始購買,接著我們會進入到下圖畫面:

該型號主機,一般部落客/小電商使用已經足夠,再來是便宜,適合入門。

遠振虛擬主機費用
遠振虛擬主機費用

如果還沒申請網址,也可來這裡申請,假如已經有了,就選擇「自行變更DNS」並輸入網址,最後確認品項和價錢,沒問題的話就下一步(並依照後面流程完成步驟)。

如此一來,我們遠振的虛擬主機申請,就大功告成啦!! 😆  😆

小提醒:遠振有提供 1.免費的搬家服務 2. 虛擬主機免費試用(有限天數),的好康服務。

Step4:

申請完成後,會收到遠振信件,裡面有虛擬主機相關資訊、DNS伺服器資料、FTP上傳帳密、CPanel帳密等..,

這封信中的內容都「非常重要,一定要妥善保存,因為這幾組帳密也是你登入到虛擬主機、操作資料庫的帳密,所以不要不小心流出去了唷!

遠振主機信件
遠振主機信件
  • DNS伺服器(Name Server):用來DNS指向,把這兩行貼到網址申請後台,等24-48小時網址指向成功(詳細可以看:DNS是什麼?
  • cPanel / FTP上傳帳密:cPanel是方便操作虛擬主機的介面(比黑壓壓的Dos視窗還好看 🙄 );FTP是用來上傳檔案到網路空間上的簡單工具。
  • FTP位置:你的主機名稱,有時候會是你的網址,通常會把這組填到FTP軟體上,才可以執行FTP上傳連線。
  • cPanel控制台:你的cPanel後台路徑,進去後輸入你的cPanel帳密,就可以登入了。

以上的 Step1-4 就是使用遠振虛擬主機,從申請到完成的步驟,你也學會了嗎 😆  😆

如果有照著上面教學,那基本上你已經會有「網址」、「虛擬主機」,兩樣不可或缺的東西了 😆  😆

接著要做的是「DNS指向」(如果網址和主機都在同一家購買,可能都直接設定完成)。

要如何開始呢?下一章,你將會學到DNS是什麼,和如何進行DNS設定,Follow me 😛  😛


subject-6

6. DNS是什麼?

什麼是DNS?

DNS 全名「Domain Name Server」,可以把它想成是一個資料庫,裡面存放許多網址+IP的資料,當進行網址搜尋後,會先跑來 DNS Server 辨識比對,如果「搜尋的網址」和「某 IP」(就是存放網頁的虛擬主機)比對成功,就會把該主機的資料取出,然後呈現在使用者面前,才會出現所謂的「網頁」。

(所以網址才需要做DNS設定,如果沒設定,就無法進行比對  😐 😐  )

小教學:IP位址(例如103.13.009.566)是網路世界的門牌號碼。每個網站都有一個IP位址。

使用者動作行為:

網路世界裡,舉個動作行為來說:「小明在Google輸入 frankknow.com 後,結果跳出來法蘭克玩行銷的網頁」。這個動作再自然不過,但其實每個搜尋的背後就有DNS Server在運作。

進行搜尋時,瀏覽器必須要先去一台有 Domain Name 和 IP 對應資料的主機,而這台被用來做比對的主機,我們稱呼為 Domain Name Server,簡稱 DNS。

DNS多久會生效?

DNS指向,理論上需24 – 48小時,大約1-2天轉換成功,當然也有幾小時就轉換完畢(或者更快),每個人長短不一定。

如何查詢是否生效?

很簡單:在瀏覽器輸入你的域名。若出現主機商的預設頁面,新的DNS設定即正式生效 😆  😆

了解DNS基本概念後,接著就開始進行DNS設定啦!

下一篇,我會帶著你進行設定,許多人很害怕的部分,其實也只是簡單幾步驟而已,GOGO!!


subject-7

7. DNS設定教學

DNS設定教學

架設網站的必要三元素:網址(門牌)、主機(土地)、網站(房子),這三者缺一不可。

做DNS設定前,先確認已經完成這兩件事:

  1. 網址申請(門牌)
  2. 虛擬主機租用(土地)

確認完成後,我們就要進行網址(門牌)的DNS設定囉!

如果DNS設定成功,之後若有人在瀏覽器上輸入你的網址(門牌),才會在正確的主機(土地)上,順利的找到你的網站(房子)。

接下來我會示範,國內 – PCHOME「DNS設定教學」,方便大家順利設定成功唷!

國內 – PCHOME

先進入「PCHOME買網址」,點選右邊的「管理我的網址」,進入網址管理的介面。

pchome-dns設定
pchome-dns設定

然後進入「DNS設定與修改」,開始設定DNS。

pchome-dns設定
pchome-dns設定

接下來操作(依順序):

1. 選擇「自管DNS」

2. 貼入主機商提供的DNS位置。

3. 最後按「送出」,完成儲存就大功告成啦!

小提醒:貼入主機商提供的DNS資訊(大部分皆為兩行網址)

pchome-dns設定
pchome-dns設定

DNS設定完成後,記得要等24 – 48小時(可能更短或更長)讓指向成功。

如果設定成功,恭喜你!當有人訪問你網址時,就能在你的主機上,找到你想讓他們搜尋的網站了 🙂 🙂


subject-8

8. cPanel介紹

cPanel是什麼?

cPanel 是管理主機的操作介面。在以前,若是想操作虛擬主機,多半是使用Dos指令框(工程師常用的小黑框),來輸入程式碼執行指定功能。

但這對一般使用者難度太高,於是有人開發cPanel(圖形介面),只要點點圖示、動動開關、或輸入點文字,就能處理大部分的功能,提高使用效率 😆  😆

不同主機商會在基礎的cPanel框架上開發自有功能,所以常會發現每家主機商的cPanel後台,長得不太一樣。

cPanel有什麼功能?

有建立Email帳戶、網域管理、一鍵WordPress安裝、備份 / 還原網站、設定網頁快取、FTP架設、資料庫、查網站流量/空間等 … 非常多功能(依不同主機商提供功能為準)。

簡單分成兩種進入方式

  1. 跟主機商官網綁在一起,登入後即可操作cPanel(例如:SiteGround)
  2. 虛擬主機購買成功後,主機商會寄信提供cPanel後台路徑網址,進入該連結然後登入。(例如:遠振)

SiteGround 的 cPanel功能

選擇「My Accounts」,然後點選「Go to cPanel」,進入cPanel頁面。

siteground - cpanel功能
siteground – cpanel功能

接著我們會看到琳瑯滿目的cPanel後台功能,這邊我把幾個功能列出來 🙂  🙂

CloudFlare(分散風險/提升速度)、SuperCacher(提升速度)、Wordpress Installer(一鍵wordpress安裝),這些比較常用(參考下圖):

siteground - cpanel功能
siteground – cpanel功能

MYSQL Database(新增/刪除資料庫和使用者)、phpMyAdmin(管理資料庫),參考下圖。

siteground - phpmyadmin
siteground – phpmyadmin

Let’s Encrypt(SSL加密功能),如下圖。

siteground - ssl申請憑證
siteground – ssl申請憑證

現在,相信對 cPanel 有進一步的認識了,這篇學到了cPanel是什麼、和 SiteGround 上部分 cPanel功能介紹!

下一章你將會學到,如何申請SSL憑證(Google已把它列入SEO評分選項之一),要如何做呢?Follow ME 😆  😆


subject-9

9. 申請SSL憑證

SSL憑證是什麼?

SSL憑證是一種企業標準規範,保護數百萬個網站線上交易與顧客安全,如果有機會瀏覽使用 https:// 在網址欄上的網站,那代表,你正在使用 SSL 所產生的安全連線。

SSL申請
SSL申請

(如上圖右邊,就是有SSL保護的網站!)

SSL教學,要如何開始呢?

SSL申請,目前主要有兩種方法:

  1. 使用各主機商在 cPanel 內建的「SSL功能」,如:SiteGround(比較容易)
  2. 進入 Let’s Encrypt 官網,申請憑證(比較麻煩)

 

SiteGround SSL教學

這邊我們進入 SiteGround 內的 cPanel → Let’s Encrypt(讓我們加密吧!)。

SiteGround-SSL教學
SiteGround-SSL教學

然後輸入自己的網址,並選 Let’s Encrypt(讓我們加密吧!),最後點選 Install(安裝),

成功的話狀態(Status)會出現綠色的 Active,如果正確出現,就代表網站已經正式加密完成囉 🙂  🙂

SiteGround-SSL教學
SiteGround-SSL教學

再來我們做些小修改,先點選 Action 的 「HTTPS Settings」 來更改設定,

法蘭客玩行銷-SSL教學
法蘭客玩行銷-SSL教學

把兩個按鈕都打開(見下圖),在按OK送出。

  • HTTPS Enforce:在網站上強制執行HTTPS SSL憑證。
  • External Links Rewrite:把原來散佈在外面的鏈接,都改用SSL方式連到你的網站。
SiteGround-SSL教學
SiteGround-SSL教學

以上是在 SiteGroud 內的SSL教學,其實也只是 SiteGround 工程師開發的一套跟 Let’s Encrypt 做連結的工具。

當然也可以直接到 Let’s Encrypt 為你的網站申請SSL,就算主機不是用 SiteGround,也一樣可以完成SSL憑證申請唷 😆


subject-10

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

網站架設推薦的4種方式

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

  1. 使用網頁製作軟體,如:WordPressJoomlaDrupal。
  2. 使用網頁製作平台,如:痞客邦MediumWixWeeblySHOPLINE91APPMeepShop
  3. 自學程式語法架設,如:HTML、CSS、JS、PHP、Python、Nodejs、Ruby、C#等 ..
  4. 請網頁設計公司製作。

看完這幾點,你可能會問:「哪一種比較好?」。

你小時候的選擇障礙!
你小時候的選擇障礙!

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

  • 官網主要目的是什麼?是否需要特殊的功能?
  • 我是否有足夠的架設網站知識(技術背景)或是足夠的財力?
  • 我對於曝光能力與行銷是否有把握?

如果網站本身就是產品(SAAS),也可能會不斷的更新或擴充功能,或需要高度客製化功能,這種情況,基本上你就是得自行開發啦(選3或4)!

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

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

針對這幾項,等在後面也都有做介紹,別著急:-)  或者你也可以先看下面連結:

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

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

網頁製作軟體(優缺點)

案例代表有:WordPressJoomlaDrupal ..

先說優點:首先你有屬於自己的網域(自有),像法蘭克玩行銷的網址:「https://frankknow.com/」,就是自己申請的,不會附屬在任何子網域下面。

wordpress v.s drupal v.s joomla
wordpress v.s drupal v.s joomla

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

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

cpanel教學
cpanel教學

儘管如此,但還是建議是定時的備份網站資料唷(以防萬一) 😉 

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

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

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

wordpress外掛搜尋
wordpress外掛搜尋

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

網頁製作平台(優缺點)

案例代表有:痞客邦MediumWixWeeblySHOPLINE91APPMeepShop ..

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

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

wix免費註冊
wix免費註冊
shopline月租費
shopline月租費

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

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

無名小站關站公告 - 範例(有提供匯出資料功能)
無名小站關站公告 – 範例(有提供匯出資料功能)

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

痞客邦子網域
痞客邦子網域

小建議:

  1. 如果是架設Blog(寫寫文章),我建議使用wordpress架設(或其他網頁製作軟體),自己取得完全控制權比較保險。
  2. 如果是要做電子商務(網路商店),那我才建議你使用此方案,如:Shopline、91App等 ..,這幾個網路開店平台功能都非常齊全,很適合賣家使用。

 

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

案例語法有:如:HTML、CSS、JS、PHP、Python、Nodejs、Ruby、C#等 ..。

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

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

saas幾種模式
saas幾種模式

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

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

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

 GitHub前端學習路線
GitHub前端學習路線

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

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

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

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

網頁設計網站
網頁設計網站

Q:「Frank,如果我想做一個叫車系統,有點像 Uber 一樣,有會員端和司機端,會員端的頁面要有即時車輛移動的畫面、和司機評價顯示、轎車類型選擇、線上支付、還可以一次叫兩台車(因為可能人很多),然後司機端功能需要 …,請問我該如何做?」。

A:「1. 自己學程式  2. 花錢外包製作  3. 請工程師朋友幫忙」,選一個吧!

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

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

花錢買時間 / 買技術
花錢買時間 / 買技術

所以乾脆直接花錢外包製作,速度還比較快一點,但 .. 在外包之前,我建議還是要懂些網頁設計的流程、概念,不然到時找到很「雷」的設計公司,或者是自己的需求也不知道跟人家如何談,那就麻煩了。

我建議可以看這篇:「網站設計公司挑選」,先好好補充一下,再開始尋找網頁設計公司。

結論

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

對比之前,不知道有幾種網站設計推薦,在選擇上不太容易做出正確的決定,但在這章節一次了解多種架設方式,再整理自己的需求,相信比較能做出正確的決定。

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


subject-11

11. 網頁製作軟體

說到網頁製作軟體,我直接先列出目前市場上,最受到歡迎的 WordPressJoomlaDrupal,各別為大家介紹:

WordPress

wordpress-banner
wordpress-banner

1. 簡介

WordPress 開始於2003年,當時只有一些簡單的代碼,與少數的使用者,他們藉此提升日常寫作排版的便利性。自那時以來,它以逐漸成長為目前世界上最大的自我架設部落格工具,也被數以萬計的網站所使用。

WordPress是一個 PHP 為主體的開放原始碼專案,這意味著全世界有數以百計的人正在為它付出心力(多於大多數的商業平台)。 這也意味著你可以完全免費的使用它。

GitHub 是目前全世界最大的開源碼網路服務,數以萬計的工程師在上面分享自己的原始碼,就如同工程師界的FB。

2.  wordpress.org  vs  wordpress.com 

WordPress分為 wordpress.org 以及 wordpress.com 兩種,不管使用哪一種都擁有 wordpress網頁製作軟體的特色,如:免費架設網站、寫Blog平台、網路開店平台等..。

wordpress.org 優缺點 

優點:整體來說開放性高、可自己管理網站程式碼、可自行管理虛擬主機、可在後台免費安裝wordpress外掛和主題(wordpress重要特色之一)、夠帥(咦!  😳 😳 )

缺點:網域申請、主機架設都要自己來,對於想省事的人可能會覺得麻煩一點。

wordpress.com 優缺點

優點:網域申請、虛擬主機架設,他們都已經幫你搞定,通常在安裝時,只要不斷的填資料然後點下一步,就可以安裝完成,簡單來說就是省事。

缺點:附屬在wordpress公司底下由他們直接管理,自由度低,且網域申請是子網域,如果你想安裝外掛是需要而外付費的,你無法管理自己的虛擬主機(沒有FTP帳密),所有相對高階的功能,他們會採用月/年租的方式收取。

使用 wordpress.com 網域,類似Blogger、痞客邦、Xuite隨意窩,以及付費的雲端架站服務,如 WIX、weebly 等..

3.  wordpress組成架構

WordPress主要分成「主程式」、「外掛」、「佈景主題」三種,

主程式:
目前 WordPress 由 wordpress.org 維護和發展,在台灣來說也有WordPress Taiwan正體中文社團,可供入門者詢問或老手技術研究+探討,目前社團人員有2W多位,對於想要學習wordpress的朋友來說,是很大的資源。

外掛:
Wordpress在外掛上的表現非常全面,大多任舉你想擴展在網站上的功能,都有程式開發者開發完畢,如:社掛、Email、網站優化、SEO、外觀主題、論壇討論區等 .. ,可說是超級豐富。對於最近電子商務,也可以使用Woocommerce,就可以擁有自己的網路商店平台了。

Theme佈景主題:
Wordpress 提供多數免費的佈景主題,在其內部系統就有許多可以選擇,若不喜歡,在網路上也有許多開發者開發的免費主題可以下載,若想功能更全面的話,也可以使用付費主題。

envatomarket 是國外可以購買主題和外掛的知名網站,也可以來這裡逛逛。

這邊列出國內外幾個使用WordPress架設網站的公司,如:BlackBerry黑莓機網誌Microsoft微軟新聞Sony Music科技報橘 等 ..,當然還有很多,就不全部列舉了 😀

4.  線上wordpress教學資源

 

Joomla

Joomla Banner
Joomla Banner

1. 簡介

Joomla! 是一套著名的 CMS 內容管理系統 (content management system),可以用來搭建商業網站、個人部落格、資訊管理系統、Web 服務等 ..

Joomla! 採用 PHP 程式語言開發,還可以進行二次開發以擴充其功能,他是一套自由的開源軟體,任何人隨時都能下載 Joomla! 並立即使用它。

2.人們使用 Joomla! CMS 來做什麼?

  • 企業官方網站
  • 電子商務
  • 線上預約系統
  • 政府功能系統
  • 社群論壇
  • 新聞媒體網站2

3.有誰在使用Joomla?

(還有很多,就不一一列舉了。)

4.其他的 Joomla! 相關資源

5.Joomla! 優缺點比較

Joomla!缺點部分:對於不會架設網站新手,上手起來有些難度,因為必須要搞懂Joomla!模組化的核心編排概念,才有辦法架設一個比較OK的網站設計,相對wordpress網站學習成本會比較高。

Joomla!優點部分:自訂熱門文章、新聞消息等.. 文章模塊,自由放在你架設網站的任何一頁,可以靈活設計網站每頁的編排方式,相對wordpress網站是靈活許多。

Drupal

drupal banner
drupal banner

1. 簡介

Drupal 是一個由 Dries Buytaert 創立的自由開源的內容管理系統,用PHP語言寫成。在業界Drupal常被視為內容管理框架(CMF),而非一般意義上的內容管理系統(CMS)。

整套平台把所有內容視為一個「節點」 (node),背後由大量「模組」 (module) 控制其顯示、修改、排列、分類等方式。

這種設計使 Drupal 不只可以建立普通的部落格網站,只要配合適當組件,控制內容顯示及處理權限的方式,它馬上能變成論壇、Wiki、社群網路。

2. Drupal組成架構

Drupal系統分為「主程式」,「模組」以及「佈景主題」。

主程式內容視為一個節點(node),再由大量的模組控制其顯示、修改、排列、分類。高度的訂製彈性,讓Durpal不只是早期的Blog系統,可以建立成論壇、WiKi、社群、或者跨國大型多網域網站。

模組Drupal 模組在定義上有點像 WordPress 的外掛,但與Joomla!的模組塊不太相同。Durpal到2013年已經具備超過兩萬三千種模組,可以自由搭配免費架設網站。

佈景主題現在大多數CMS(內容管理系統)都會把佈景和網站系統分開,每個網站都希望能有一個獨特的外觀,讓使用者自行變化網站樣式,也造就了很多CMS的佈景開發商。

Drupal畫面
Drupal畫面

3. Drupal優缺點比較

Drupal 是三套 CMS 中彈性、自訂能力最高的,相對也代表難度最高、學習曲線最高,甚至可以說Drupal 不是給一般使用者使用,而是設計給專業工程師們使用,利用Drupal搭建網站基礎框架,節省工作時間成本的。

drupal - 解決方案
drupal – 解決方案

Drupal在使用上時,常常會有模組之間的依賴性,比如說當你使用模組A,當在安裝使用後,才發現他需要模組B才能使用等 .. 問題可能會發生,所以建議是些程式基礎再使用 Drupal架設網站,會比較理想唷 🙂  🙂


subject-12

12. 網頁製作軟體比較

一般來說,CMS(內容管理系統)如果有高市佔率,代表經過多人的認可,而且越多人使用的軟體,他的生態圈會越大,也會吸引開發者進來開發套件,越多套件功能(方便性提升),能吸引更多使用者,形成正向循環 🙂  🙂

在猶豫要選哪款「網頁製作軟體」前,先來看看統計過的市佔率圖,如下圖:

cms市佔率比較
cms市佔率比較

WordPress 以58.8%的市場佔有率牢牢佔據第一,Joomla、Drupal分別居第二、第三位。

所以我們挑選「Wordpress」、「Joomla」、「Drupal」這三款主流CMS(內容管理系統)來做 網站架設 推薦。

虛擬比喻:

  • WordPress:很像一間都裝潢完善的房子,要做的就只是入住而已,最容易上手且方便。
  • Joomla:比較像把建材都丟給你,舉例如:鋼筋、磚塊、木頭、室內設計等材料 ..,讓你拼裝自己的房子(網站)。
  • Drupal:比較像只有一塊土地,擁有最大的自由性,你可以選擇往上蓋房子,也可以選擇往地下開挖,簡單說就是靈活性最大,但相對最耗工。

實際比較:

  • WordPress:非常容易上手,新中老手都適用(適合小型、中型網站以及博客、小型商城 ..)
  • Joomla:適合博客、中小行網站、社交、商城類型的網站,但需要基本的免費 網站架設 概念。
  • Drupal:最難,功能也最強大,但是對使用者的技術要求較高,需要對HTML, CSS and PHP非常熟悉,對整體的網站架設流程也要相當熟悉。
wordpress-banner
wordpress-banner

Frank 當初是選用 WordPress免費架設網站,最喜歡的原因是他非常容易上手,加上有超多外掛可以安裝,所以就決定使用它架設blog平台 😆  😆

小建議:若你喜歡wordpress網站,不妨可以先使用免費的 wordpress.com 試試水溫唷!

現在輪到你囉,你喜歡哪一個呢?就挑選一個最適合你的來開始部落格之旅吧 😆  😆


subject-13

13. WordPress快速安裝

接下來,到了「wordpress安裝」的時候了,這章節國內外會挑選一款做 WordPress教學,國內的選擇「遠振」、國外的就是「SiteGround」囉 😆  😆

wordpress安裝
wordpress安裝

通常虛擬主機公司,cPanel會有開發的「wordpress一鍵安裝」,讓使用者快速安裝,如果沒有這功能,可能就要土法煉鋼架設網站囉(關於這個,之後我會出一篇有關於 wordpress 完整教學文章,敬請期待 😎 😎 )。

小提醒:在安裝wordpress之前,你需要先完成「網址申請」、「虛擬主機申請」、「DNS設定教學」,如果還沒請先閱讀:

總而言之,先讓大家可以快速架設出一個Blog網站 😉  😉

國外-SiteGround

申請 SiteGround 虛擬主機後,我們登入SiteGround,前往cPanel後台,
siteground - cpanel後台
siteground – cpanel後台

找到 「wordpress tools」 的 「wordpress installer」 進行 wordpress安裝,如下圖:

siteground-wordpress安裝
siteground-wordpress安裝
siteground-wordpress安裝
siteground-wordpress安裝

選擇 http / https 方面,先看網站有無申請SSL憑證,如果還沒申請SSL憑證,可以先看看這篇:申請SSL憑證,再做wordpress安裝,或先安裝後再申請SSL憑證也可以 😆  😆

SiteName、SiteDescription這兩個之後都能再作修改,還想不出來的之後慢慢想也OK!

重要的我用紅色框標註,就是「Username」和「Password」,是之後用來登入wordpress網站後台的帳密,請務必要記得哦 😎  😎

語言選中文,最後點「Install」給他用力安裝下去就對了 🙂  🙂

如果wordpress安裝順利,也會看到自己的wordpress網站,成功出現啦!如下圖:

siteground-wordpress安裝
siteground-wordpress安裝

 

國內 – 遠振

進入遠振的 cPanel(申請完後,遠振會寄主機資料信件,cPanel連結在裡面),輸入帳密並登入 😎  😎

找尋是否有 wordpress 一鍵安裝功能,若沒有就點選右上角的「瀏覽更多」進行搜尋。

遠振 - cpanel
遠振 – cpanel

點選後,應該會看到很多安裝項目,找到wordpress選項,點擊進入wordpress安裝頁面。

遠振wordpress安裝
遠振wordpress安裝

點擊安裝此應用程式,

遠振wordpress安裝
遠振wordpress安裝

接著在網域名稱填上自己網址,預設會把wordpress安裝到根目錄下。

遠振wordpress安裝
遠振wordpress安裝

找到下圖區塊,紅線區(用戶名、密碼)是之後登入wordpress後台的帳密,所以一定要記得,並好好保存起來唷!

藍色線是wordpress blog網站名稱和標語,之後還能修改,先簡單輸入就好,如下圖:

遠振wordpress安裝
遠振wordpress安裝

其他選項,先暫用預設即可,除非很確定再修改,最後點選「安裝」,進行wordpress安裝,其中包括目錄檔案、軟體、資料庫等安裝項目,等個幾秒鐘,恭喜你 .. 免費網站架設完成 😀  😀

最後來看看網站是否順利架設完成,直接在網址列輸入你的網址,登登登 .. 如果你的網站有順利出現,恭喜你!順利安裝成功 😆  😆

遠振wordpress安裝
遠振wordpress安裝

小提醒:記得要先做DNS指向(你也可以參考這章節:DNS設定教學),網頁製作內容才會順利出現唷!

 

完整的網域+SSL憑證,和你的wordpress官網,你也順利完成了嗎?

當然 Frank 已經架設過了,接下來換你大顯身手啦!可以開始著手設計 Logo、你的網站內容等,加油!衝吧,一切都會很有趣的 😆  😆


subject-14

14. Google、Yahoo、Bing網站登錄

前言
這篇是手動提交Sitemap教學流程(網站登錄),若是你使用網頁製作軟體架設如wordpress,內部也有外掛:Google XML Sitemaps 可以幫你生成sitemap和提交給Google、Bing搜尋引擎。

但寫了這章節是想讓大家對網站登錄有更深一層的認識,這是直接在Google上操作的,如果照步驟走,是100%有提交出去的,還有多懂一些知識,這樣也比較帥(咦!) 😎  😎

網站登錄是什麼?
網站登錄的目的:「主動將網站提交給搜尋引擎,讓使用者可以透過關鍵字排名,找到你的網頁」,目前台灣搜尋引擎主要是Google、Yahoo(搜尋引擎已經和Bing合併),所以Google註冊網站就使用Google search console,Yahoo和Bing註冊網站就使用Bing網站管理員

因為每天新增的網頁十分的多,主動出擊提交文章給搜尋引擎,會加速你網頁被搜尋到的速度,所以網站管理員(Google search consolebing webmaster)是不是非常重要呢 🙄 🙄

搜尋引擎數據比較
目前全球搜尋引擎市場,幾乎都由Google、Yahoo、Bing三家所瓜分,讓我們來看看下面的圖表:

Bing-vs-Google-Search
Bing-vs-Google-Search

第一名 Google 高達64%的搜尋引擎市場,第二名 Bing 也有22%,第三名 Yahoo 則是佔了12%左右,由數據也告訴我們,如果想獲得網路流量,往這三大搜尋引擎做SEO優化準沒錯。

接著再來看這張,與我們比較相關的國家,搜尋引擎比例:

Google、Yahoo、Bing網站登錄
Google、Yahoo、Bing網站登錄

會發現在台灣是由Google、Yahoo寡占市場(搜尋引擎已經和Bing合併),那當然想在Google、Bing取得良好的關鍵字排名,首先最重要的一步就是先到 Google網站登錄Bing網站登錄

Yahoo 自 2009 年起就跟 Microsoft 簽約,採用 Bing 作為他們的搜尋引擎,所以網站登錄只要到Bing註冊網站即可。

那這邊我就使用「Google網站登錄」來做教學,就讓我們開始吧 😆  😆

Google網站登錄

網站登錄主要分成兩步驟,

  1. 新增內容到 Google search console網站管理員
  2. 提交Sitemap

首先我們先到 Google search console網站管理員,輸入網址並點選「新增內容」。

接下來我們會看到下面畫面,然後我們分步驟執行,如下圖:

google註冊網站
google註冊網站

下載HTML驗證檔,然後使用FTP上傳的畫面(第1.2點),如下圖:

google註冊網站
google註冊網站

FTP上傳完成後,訪問上傳檔案連結(第3點),若能正常訪問就代表OK,最後按下「驗證」鈕(第4點)就新增內容完成了,成功的話會看到網站訊息,如下圖:

google註冊網站
google註冊網站

接著選要編輯的網站資源,下一步就是要「提交Sitemap」給「GoogleBot機器人」搜尋,我們先找到側邊欄內的「檢索」→ 「Sitemap」,如下圖:

google註冊網站
google註冊網站

最後,推薦一個可以免費sitemap製作工具 xml-sitemaps 。

目前一天最多可以生成500頁,其實對於中小型網站已經很夠用了,生成完成後再提交出去,一切順利的話將看到提交的網頁資訊囉(如上圖第4點) 😆 😆

P.S 網頁收錄需要些時間,要耐心等候嘿 🙂  🙂


subject-15

15. CloudFlare(CDN)& SuperCacher

CDN是什麼 & 優點?
CDN是什麼呢?全名是「內容傳遞網路」(Content delivery network或Content distribution network)。

Cloudflare-banner
Cloudflare-banner

簡單說CDN伺服器會分散於全球各地,這些伺服器會去抓取你網站的內容快取,當網頁瀏覽者進行搜尋,CDN會找取離他最近的CDN伺服器(如果你人在美國,就會去讀取美國的CDN伺服器),並把原來存取在裡面的網頁內容取出,最後呈現在瀏覽者面前。

Cloudflare示意圖
Cloudflare示意圖

優點就是:可以節省主機流量、網站全球加速、分散風險、降低主機被攻擊的機率等(不容易找到你真實主機的位置)  ..

小缺點:但使用CDN有時候也會發生修改後但前台沒變動的狀態,這是後就要清除一下CDN的暫存才會看到新畫面唷 😆  😆

CloudFlare是什麼?
CloudFlare是一家提供CDN服務的公司,也是目前最廣為人知的,國外有眾多大公司均使用其服務,如:nasdaq、cisco等 ..,且背後有微軟、Google、百度等贊助,所以想啟用CDN服務,先使用CloudFlare就對了。

CloudFlare簡易教學
到 cPanel 選取 CloudFlare 開始管理,一開始雲朵會是灰的(代表還沒啟動),正確啟動後會變成橘色雲朵,且會出現「Manage」的按鈕(可以管理DNS),如下圖:

cloudflare教學
cloudflare教學

進入Settings面板,我們會看到許多CND功能,我用紅筆標注地方,是比較需要留意的地方,其他都用默認就好,如下圖:

cloudflare教學
cloudflare教學
  • Cache Purge(快速清除):當使用CDN時,會發現有時文章修改了,但前台沒反應。是因為讀取到分流主機的舊檔案,但實際上主流主機上的檔案已經改變,這時就可能要用到這個按鈕,快速清除舊檔案(小提醒:太頻繁更新可能會拖累主機速度,必要才使用他)。
  • Development Mode(開發者模式):當有修改如 html / css / js 等.. 程式碼時,可以開啟這個模式,只要有修改,前台都會立即見效。在開啟3小時之後系統會自動把此模式關閉,所以如有頻繁修改網頁,這個會比較建議使用。
  • Auto Minify (網頁優化):多數html / css / js 程式碼都是適合閱讀的模式,但如果沒壓縮(優化),有時會造成線上資源比較大,網頁會稍微讀取慢,這時就可以把這3個按鈕打開,讓系統自動優化。(我自己有開著 😆 😆 )

經過這章節,相信你已經充分了解,CDN介紹、優點、操作方式。

但就算不是使用SiteGround主機也沒關係唷,這邊附上他們官網連結 Cloudflare,有興趣可以去他們官網看看,照著流程走,一樣也可以在你的網站上加上CDN唷 😆  😆

SuperCacher簡易教學
SuperCacher 是 SiteGround 開發的一組「超快速緩存」程式,該程式還強調有:4倍速網頁、優化多數應用程式等.. 。

實際使用過後,發現速度真的有變快,不知道是否有4倍速這麼快XD,但確實快很多,見下圖:

SuperCacher教學
SuperCacher教學

操作步驟:首先到 cPanel 選取「SuperCacher」,選 Level1 並在下面新增自己的網址(下面是我的官網網址),然後再記得把按鈕打開就完成了,非常容易上手。

SuperCacher教學
SuperCacher教學

SuperCacher 還有 Level2 和 Level3,在 Level2 中 SiteGround 還有自行開發一個給 wordpress 使用的外掛,可以直接擴充這項功能(wordpress 外掛,搜尋:「SG Optimizer」),來完成Level2 – 3的功能唷 😀


subject-16

16. 網頁製作平台

目前評價比較好的網頁製作平台,有Wix、Weebly、Strikingly ..使用他們就算不會程式碼,
也能成功架設網站唷!

這邊跟大家教學,使用這三款網頁製作平台做出一個漂亮的網站,最後再來做一個簡單的評比,我們開始吧 😛  😛

Wix

首先進入 Wix ,點擊「Get Started」,然後選擇登入方式,進行註冊,目前提供Email、FB、Google註冊方式。

Wix目前平台上還沒有中文化,如果英文沒這麼OK的,別忘了我們有Google翻譯 😎  😎

wix教學
wix教學

註冊完成後,依照指示點擊,Wix提供兩種個人網頁製作的方式,

  • 左邊:使用Wix ADI,會依照你想創造的類型:如:部落格、作品集等進行模板推薦。
  • 右邊:自己選喜歡的模板,裡面有好幾百種供你選擇。

我們選擇右邊的模式,製作個人網頁,如下圖:

wix教學
wix教學

進去後,選擇一款你喜歡的模板,開始進行編輯,下圖是我開始編輯的畫面:

Wix是一款標準的「所見即所得」網頁製作平台,這邊我劃分了3區塊:

法蘭克玩行銷-wix教學
法蘭克玩行銷-wix教學

頁面功能區(綠色):由上到下分別是:

  • Menus & Pages :新增頁面和選擇編輯頁面的地方。
  • Background:背景選擇。
  • Add:新增文字、圖片、按鈕、輪播圖、功能選項的地方,這部分是編輯的核心。
  • Add Apps:Wix有開發一些外掛,可以用來新增如社群、Blog擴充功能。
  • My Uploads:選擇你上傳的資料,當作素材。
  • Bookings:類似行事曆的功能。
  • My Blog:文章管理區,新增文章/編輯文章的地方。

拖拉編輯區(橘色):所見即所得的編輯區,可點選修改文字、圖片、大小等。

系統功能區(紅色):主要是儲存、預覽、發佈網站、一些系統功能等選項。

當完成網頁製作後,點選系統功能區(紅色)的儲存(Save)、預覽(Preview)看看樣式,若一切都沒問題我們就來進行發佈(Publish)啦 😛

如果順利成功,你也會跟我一樣,看到你的網頁製作成功囉 😆  😆

wix教學-完成頁面
wix教學-完成頁面

順帶一提,wix試用期14天,之後就需要收費了。

由於是使用第三方網頁製作平台架設的網站,所以一開始網域都會是他們的子網域(上圖紅色標記的地方),加上會有wix廣告,所以如果想要申請自有網域或是免除廣告,就要付費升級唷!

Wix額外教學

該如何更改網站名稱、網域名稱呢?來看看下面的教學:

首先進入要編輯的網站,然後點選「Dashboard」 → 「Manage & Edit Site」,開始設定網站基本訊息,如下圖:

wix教學
wix教學

接著會看到Site Name(網站名稱) 和 Site Address(網域名稱),這兩個就是要更改的資訊啦,點擊即可設定!

wix教學
wix教學

Wix收費費用

wix費用列表
wix費用列表

Wix 目前分成5種收費費用,建議如果未來要使用Wix,最少要使用「Unlimited」(紅色框)方案以上是最理想的,為什麼呢?

先來看看「Unlimited」方案功能:

  • Connect Your Domain:連結你原有的網域(如果原來已經有網域但不想換,這就是必須的)。
  • Free Domain:第一次架設網站,想要有自己的專屬網域。
  • Remove Wix Ads:移除Wix廣告。
  • Customized Favicon:自訂化頁籤icon。
  • Form Builder App – $48 Value:所見即所得編輯器。

基本上這方案提供的功能,都是絕對需要用到的,所以若未來要用wix,使用這方案以上是最基本款,那再往上,就是有提供網路商店平台的功能,就看每個人的需求了!

Weebly

Weebly 網站目前已經支援中文,如果看英文會很痛苦的有福了,也可以使用Weebly架設你的網頁,Weebly評價在台灣不比Wix遜色,讓我們來看看Weebly教學文章吧!

點擊紅色框,註冊會員並開始weebly 網站架設 ,如下圖:

法蘭克玩行銷-weebly教學
法蘭克玩行銷-weebly教學

照著步驟往下點,我們就可以開始選擇主題啦,選完喜歡的weebly主題然後開始編輯,如下圖:

weebly教學
weebly教學

接著會跳出「選擇網站域名」,我們先選擇「weebly.com子網域」,再點「繼續」下一步,如下圖:

註冊新網域、使用您擁有的域名,這兩個都是weebly付費功能,先選擇子網域是weebly免費的。

weebly教學 - 網址
weebly教學 – 網址

再來會看到weebly範例區(參考下圖),

  • 左側(紅框):可以添加文字、圖片、輪播圖、地圖、聯絡表單等,其實跟Wix網站滿像的。
  • 上側(淺藍框):可以新增頁面、更換主題、網站/網域申請、和最重要的發佈網站功能。
  • 中間(所見即所得):網站的編輯區,用「所見即所得」的方式設計。
weebly教學 - 編輯區
weebly教學 – 編輯區

我有標記幾個上側(淺藍框)的功能:

  1. 頁面:新增頁面、修改頁面的地方。
  2. 設定:命名網站名稱、修改網域、SEO設定等.. 功能的地方。
  3. 發佈:就是發佈文章囉!

接著我們就可以動手來玩玩啦!Weebly可以用拖拉的方式,讓你一步步完成網站。

當看到網站快完成,我相信你也會很有成就感的 🙂  🙂

Weebly收費費用

weebly收費費用
weebly收費費用

基本上「入門款」、「Pro」兩款,主要在Pro可以有網路開店平台的功能(但其實也只能上10樣商品 ..),如果你沒有網路開店需求(weebly購物車),就先選入門款試試看水溫就可以了,用的不錯再慢慢升級。

那如果有電子商務的需求呢?我們來看看下面這張圖:

weebly-電子商務
weebly-電子商務

上圖分別對照weebly付費方案,會發現最高階的網路開店功能最多,那至於想使用哪種方案,就看個人需求囉 😎  😎

Strikingly

Strikingly平台,也是一款容易入門的網頁製作平台,除了Strikingly官網教學是中文,Strikingly在畫面設計上,也是簡單明瞭、美觀,果然應證了他的宣傳文案 ..

Strikingly - 網站描述
Strikingly – 網站描述

好的!我們開始Strikingly教學吧,首先進入 Strikingly台灣

Strikingly 需要有個人資訊才能做使用,當然右下角還有小小的FB註冊選項可以使用(想要個資的FU 😳 😳 ),如下圖:

Strikingly-官網
Strikingly-官網

接下來挑選喜歡的模板,可以藉由分類會更容易挑到喜歡的哦,如下圖:

Strikingly-模板選擇
Strikingly-模板選擇

選完模板後進入內容編輯區,來看一下淺藍的區塊,分別是預覽、設計風格、發佈、設定等功能,主要設定大致涵蓋在這裡,那右區就是「所見即所得」編輯區,就跟Wix、Weebly一樣。

Strikingly-編輯區
Strikingly-編輯區

當然最基本的,需要改一下網站基本資料、網域申請等 ..,如下圖:

Strikingly-網站編輯
Strikingly-網站編輯

順利把Strikingly範例完成,我們就進行發佈,就會看到你的可愛網站正式上線囉 😆  😆

Strikingly-個人網站
Strikingly-個人網站

只不過Strikingly免費版的網站,會有惱人的廣告,他是放在畫面底部 🙄  🙄

Strikingly收費費用

Strikingly收費費用
Strikingly收費費用

Strikingly費用分成三種,這三種都有自訂網域功能(免費版沒有),且都有去除Strikingly廣告、電子商務等 .. 功能,只不過基本款最多只能上5種商品 🙄  🙄

使用Strikingly網站,選擇專業版以上比較好(功能比較全),「專業版」跟「VIP套餐」方案最大差別在上架商品數多寡,如果商品不多選擇專業版就好,也省錢!


subject-17

17. 免費部落格

台灣比較知名Blog平台有痞客邦、天空部落等 ..,而最近比較火紅的 Medium(國外來的),主打優質文章推薦(比較少內容農場),也吸引了不少的部落客使用。

這邊我先挑選「痞客邦」、「Medium」跟大家做簡易Blog教學 😎  😎

痞客邦

台灣長青Blog平台「痞客邦」,在 2018 / 5月改版完成,結合「興趣牆」、「邦邦」、「部落格」三大服務,將優質內容推送給感興趣族群,並形成良好的社群循環。

因為要痞客邦教學,所以我大致上Run過了整個平台。

整體網頁設計變得更美,也不單只是Blog而已,更把社群功能加進去,有「興趣牆」、「邦邦」等 ..功能,確實打破之前的老舊印象 😆  😆

痞客邦 - 新頁面
痞客邦 – 新頁面

痞客邦登入/註冊後,會看到個人痞客邦首頁,主要切成5塊版面設計(如上圖):

  1. 追蹤資訊:感興趣的Blog網站(依照興趣分類)、關注的「邦邦」(類似FB社團)、關注的「人」(類似IG)。
  2. 興趣牆:類似FB的「塗鴉牆」,會出現大大小小你選擇的興趣相關文章。
  3. 邦邦:類似FB社團,可以創建「邦邦」也可以追蹤人家的並參與討論。
  4. 部落格、邦邦一覽:可以在裡面找尋喜歡的文章、社團。
  5. 管理後台:寫blog、網誌的網站後台、帳戶資訊、個人資訊等 ..修改地方。

網站設定&側邊欄位設定?

進入部落格網站後台,選基本設定就可以更改部落格名稱/描述囉 😉  😉

blog基本設定
blog基本設定

再來可以更改側邊欄位,裡面有站方公告、個人資訊、廣告等功能,若用不到也可以把它們丟到右邊的版位暫存區。

側邊欄設定
側邊欄設定

像免費部落格有時會有廣告置入,這是無法移除掉的,除非成為網頁設計平台的付費會員 🙄

那如何發文就不多敘述了,因為痞客邦的網站設計流程算是容易上手的!

如何更改痞客邦樣式?

首先來介紹痞客邦樣式教學、版面設計,點選(如下圖):

痞客邦教學
痞客邦教學

再來會看到痞客邦後台,然後依照順序點選,如下圖:

痞客邦主題樣式
痞客邦主題樣式

就會發現許多種網頁設計範例的主題啦,接著你就可以選擇自己喜歡的樣式囉 🙂  🙂

如何使用痞客邦賺錢?

如何使用痞客邦賺錢,首先來看一下痞客邦的「MIB廣告分潤」。

紅色區塊是廣告設定地方,可以設定側欄廣告、影音廣告等 ..這些是否開啟、帳戶資訊、廣告金成效等追蹤(如下圖):

法蘭克玩行銷-分潤計畫
法蘭克玩行銷-分潤計畫

這是痞客邦賺錢的管道之一,但如果使用廣告賺錢,除非你是人氣部落客,不然真的少得可憐 😥 😥

所以,目前大多數在痞客幫的人氣部落客,主要都是靠「業配文」在痞客邦賺錢的。

來看個範例,這個版主的 Blog 平常都在分享3C用品,理所當然會有3C廠商請他寫「業配文」囉(如下圖):

法蘭克玩行銷-業配文
法蘭克玩行銷-業配文

Blog業配文收入大致上在幾千元不等,好一點的可以拿到萬以上,再更高就很困難了(除非有名氣)。

如果想接業配,網誌月流量在3w是建議水平(日流量1000人),會比較容易接的到唷 😛  😛 

Medium

「Medium中文」是近幾年,國外最有潛力的部落格平台,由wordpress網站成員跳出來成立的,他的最大特色:

  • 原創優質文章
  • 漂亮的網頁設計畫面

我們來看看他的優質網站設計範例,如下圖:

medium平台
medium平台
優點:簡單的網頁設計排版、白色背景、和充滿原創優質的文章,都是吸引我的原因。
缺點:稍微可惜的是,上手有點麻煩、版面無法像wordpress這麼客製化。

如果痞客邦、天空部落、Medium要做選擇,我推薦的部落格平台是「Medium」,因為是國際化的平台,也是流行的趨勢 🙂

等等我會做Medium教學,有Medium平台概念、基本設定、雜誌創立和發佈文章等 ..,就讓我們開始吧!

Medium平台概念

Medium部落格架設方式,主要可以分成兩塊:

  • 個人文章發表:個人BLog,可以在上面分享心情、觀點、介紹等 ..。
  • 出版物文章發表:讓 User 成為出刊者的角色,可以創立一個或多個頻道,並在頻道上分享文章,如果瀏覽者喜歡,也可以追蹤你的頻道。

Publications are collections of articles. Anyone on Medium can start a publication, and write and edit it alone or as part of a team.

簡單來說,只要是Medium上的會員,都可以跟你一起寫文章來經營頻道,是不是很棒呢?

Medium使用設定

個人基本設定

寫Blog之前,先來調整一下個人名稱和照片吧,先點選右上角頭像,選取「Profile」,如下圖:

P.S 等等點選頭像出來的小視窗,下面都稱為“功能表”唷(方便教學)

medium基本設定
medium基本設定

雜誌(Publications)建立和設定

點取右上角圖示,並選取「Publications」新增/編輯雜誌,接著填寫Medium雜誌資料,如下圖:

publications設定
publications設定

完成後點下一步(Next)就可以開始設定版型了,為了方便網頁設計教學,簡單分成4大塊:

medium使用
medium使用
1. 雜誌標題 / 雜誌Logo設定:
滿直覺使用的,可以點點看哪個最適合自己,要留意的是若想要雜誌標題/Logo同時都出現,Size最少要M以上,然後再點Layout要選Both。
2. 導航列背景設定:
可以填單一顏色,也可以使用背景圖片。
3. 讀取文章方式:
Latest stories(最新文章)、Featured stories(精選文章)、Stories in a tag(標籤文章)、Promo(促銷)。
  • Latest stories(最新文章):讀取最新的文章。
  • Featured stories(精選文章):可以自行選擇指定文章呈現。
  • Stories in a tag(標籤文章):讀取該標籤分類下的文章。
  • Promo(促銷):上傳圖片可以加上外站連結,進行行銷。

4. Medium版面設計:可以選擇文章版面,有多種搭配,也可以點加減設定區塊文章數量(會影響版面)。

Medium雜誌 – 新增文章

雜誌完成後,會發現右上角圖像右邊多了一個雜誌Logo,之後若要新增/編輯雜誌文章,點這個進去就對了 😉  😉

medium新增文章
medium新增文章

接著選擇「New Story」,新增第一篇文章,如果文章建立成功,雜誌首頁就會順利出現文章囉(如上圖) 😆  😆

以上是部落格平台的簡單介紹,如果喜歡用台灣的,我網站設計推薦的是「痞客邦」,是目前台灣最大的blog平台。

若是你喜歡簡約風、國外成長快速的Blog平台,我會推薦「Medium中文」,可以感受一下Medium在台灣獨特的魅力 🙂  🙂


subject-18

18. 網站設計公司挑選

除了免費 網站架設,或許你網站需要很「客製化」功能,如特別的會員管理系統、購物車網站設計、SAAS(軟體及服務)等 ..。

trivago客製化網站
trivago客製化網站

舉個例子:像Trivago網站,相信不管是什麼網頁製作軟體(平台),都無法做出來吧 .. 😯  😯

免費網頁軟體無法辦到時,如wordpress(雖然很彈性,但還是有上限),就需要付費請網站設計公司,協助你架設網站了。

本章節會教大家如何挑選好的網站設計公司,需要注意些什麼,還有網頁設計流程等概念 ..。

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

1. 公司還是個人(SOHO族)
2. 網頁設計作品集
3. 網頁設計報價價格

知道這3點後,接下來我們各別來說明細節部分:

1. 公司還是個人?

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

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

[ 個人:可以說不幹就不幹 ,公司:員工不幹,老闆可以再請人 ]

通常一個人要在網頁接案領域長久經營,除非本身業務力強,不然是很容易中途放棄的,若是幫你架設網站的人不做了,你的網站資料可能就不翼而飛了。

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

大多數人,都會請網頁製作的人 or 公司代管主機,如果個人不見要找到是比較困難的,公司的話還比較有辦法追溯。

當然相比「請人代管主機」,我最推薦的是「自己管理主機」,因為程式碼+資料庫都在你手上,可以放一百萬顆心,比較麻煩的是本身要懂些架設網站的觀念。

( 還好這篇文章,就是在教你這些技術 😎  😎 )

這邊也建議,不管是請個人 or 公司製作網站,假如是請網頁設計公司協助你代管主機,切記一定要拿到完整的程式碼,不然到時候人或公司怎麼了,你的錢也白花了。

記得,如果是請網站架設公司製作網頁,也先打聽一下公司成立多久,也會安心許多!

我來整理一下重點:

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

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

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

2. 網頁設計作品集

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

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

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

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

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

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

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

3. 網站設計報價價格

最常見的架設網站費用,就是 套版客製化 兩種,但最近由於網路商店平台的興起,如91APP、Shopline等 ..,有些網頁設計公司也搞了個 租用型 的方式,所以目前大致上是這三種。

  • 套版方案
  • 客製化方案
  • 月/年租型方案
架設網站費用
架設網站費用

[ 套版方案 ]

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

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

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

[ 客製化方案 ]

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

    1. 如果想做出一個網頁版FB,那你覺得網站設計公司會跟你說多少錢呢?
    2. 如果想做出一個類似17直播的APP,那你覺得又會花多少錢呢?

(基本來說,我覺得應該沒人會接,因為真的太難做,就算做出來效能也超差,而且也不符合成本 🙄 🙄 )

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

(有點像你想要一套音效良好的音響設備,告訴業務你的預算,他就能幫你選購主機+音響+擴大機等 .. 搭配,而不是籠統的說我想要一個好音響,這樣會讓他無從下手。)

網頁設計範例 - 客製化網站
網頁設計範例 – 客製化網站(企業+購物+賽事等功能 ..)

上圖,是客製化的購物網站設計,還結合了跑步的報名系統、折扣系統、商家定位等功能 .. 想當然費用會比較高。

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

但記得唷,一樣貨比三家不吃虧,還有一點就是設計品質比價格更重要!

我來整理一下重點:

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

[ 月/年租型方案 ]

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

如果是我,假如要用月租型方案,我會用在兩個地方:

  1. 網站設計費用太高,先月租試看看水溫
  2. 使用網路開店平台(如91APP、Shopline等 ..)

A. 基本上客製化是沒有租用型的方案(都為你直接客製了,當然要直接賣給你!),租用型方案多用在套版上,但如果套版費用覺得貴,又怕做出來的成品不喜歡,那可以先「租用」來試看看,不喜歡就別再續約就好了。

網頁設計月租報價
網頁設計租用報價

B. 網路開店平台,使用租用費是滿合理的,目前網路開店平台也大多用此方式,如果一開始沒預算,用這樣模式也不錯,繳單付個租用費,就可以開始網路開店,也是一個好選擇 😎  😎

網頁設計報價
網頁設計租用報價

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

接著,對於一個完整的網站組成,主要由「設計」+「程式」兩塊構建而成,

下一篇我會跟大家分享「設計」和「程式」的教學和資源,提升大家對網站架設教學的 Know-How!


subject-19

19. 網頁設計教學/資源

有人問我說,若自己想學習架設網站(類似網頁設計師),而不是用軟體或外包,那需要會些什麼?

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

網頁設計(程式+設計)
網頁設計(程式+設計)

網頁設計 – 業界小概念

在網路剛剛開始盛行時,若有個網站就很帥了,「設計」那時還不是很重要。但現在,如果rwd網頁設計不好看,那「跳出率」自然就會高,當然得不到好的Google網站排名。

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

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

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

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

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

網頁設計「靈感參考」:

Dribbble:最有人氣的設計靈感網站,挖寶的好地方。
Behance:支援中文版,後面有Adobe老大哥站台。
Pinterest:圖片界的Google,有大量圖片素材可供搜尋,很多人愛不釋手。
站酷:眾多網頁設計作品案例,靈感來源參考。
Awwwards:常會舉辦設計作品投票,當作設計趨勢指標。
CollectUI:眾多網頁設計作品案例,靈感來源參考。

網頁設計「軟體教學」:

學UI網:學習PS、 AI等軟體好地方,也有影片學習。
UI中國:中國知名的UI/UX設計,教學分享網站。
PS Lession:Adobe的photoshop相關頻道,分享很多使用PS的影片教學。

網頁設計「素材來源」:

iconfinder:很多扁平化 Icon 圖示可以使用 ,適合作為介面設計的圖示來源。
flaticon:國外有名的icon素材網站,挖寶的好地方。
sketchappsources:提供 Sketch 軟體可用模版與素材的網站,收錄許多漂亮的樣板。
pexels: CC0 圖片搜尋引擎,收錄了許多網站的 CC0 圖片,方便尋找想要的圖片。
pixabay: 大量 CC0 圖片可供搜尋,適合用在商業文章或網頁設計範例中。
freepik:提供大量圖像設計素材的搜尋引擎,滿多向量圖型可以下載來使用。

網頁設計「程式學習」:

W3School在線課程(簡中):蒐集大量程式語法的基礎知識點,新手入門程式的好地方。
Codecademy:網頁設計課程/教學,可以從HTML、 CSS 開始學起,註冊會員後有一系列的教學。
Tuts+ Web Design:網頁設計教學網站,挖寶好地方。
Teamtreehouse:主打網頁開發語言的線上學習平台,從HTML、 CSS、 JS、 IOS等.. 都有。
慕課網:擁有多種語言的線上視屏教程,網頁設計、 APP開發都有。

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

sublime:編輯器的入門款選項,簡潔風格讓很多使用者喜愛。
vscode:由微軟開發新一代強大且優秀的編輯器,內含豐富外掛可供安裝。

在這章節,相信大家應該也初步了解,一個網站設計組成的基本要素了,也分享了一些網頁設計資源,如果更有興趣的,還可以成為「設計師」「工程師」一起入坑(喂~)  😆  😆

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

但若想請網頁設計公司製作漂亮的網站,自己也要懂些基本概念流程才可以,才不會要求設計師做出「很雷」的網站(其實設計師被「雷客戶」要求改設計,也很無言 ..)

可以學習的:A)基本的設計美感  B)程式的話,稍微懂工程師主要是用哪些語言開發的即可


subject-20

20. 網路開店模式(上)

想在網路開店嗎?現在想在網路上經營商店,其實方法有以下幾種:

1. 使用大型拍賣 / 網路商城

代表:PChome商店街、露天拍賣、蝦皮購物、蝦皮商城、旋轉拍賣、momo摩天商城、yahoo超級商城、yahoo拍賣、樂天市場(下面有個別介紹唷 😆 😆 )

PChome商店街

pchome商店街
pchome商店街

截至目前,是台灣商品數/店家數量最多的,在台灣算老字號電子商務公司,擁有許多豐沛的資源,有時釋放給店家/個人賣家的優惠也比較多。

但手機版/APP上的設計體驗,還是讓很多人詬病,論UI/UX(使用者體驗).. 不太像老大哥該有的作風。

露天拍賣

露天拍賣
露天拍賣

露天拍賣小歷史:PChome Online網路家庭與eBay合作成立露天拍賣,以取代原有的eBay台灣網站。

加上,原本站穩龍頭的Yahoo!奇摩拍賣,因錯誤的多重收費政策(論件的上架費+3%成交手續費),導致大量客戶因不滿而迅速流失,紛紛轉移至免費的露天拍賣。

所以目前露天拍賣,在台灣的拍賣圈,是非常有名的。BUT .. ↓

當前露天拍賣的首要難題,應該是如何扳倒這隻短時間從小蝦米進化成大龍蝦的「蝦皮拍賣」 😮  😮 

蝦皮購物

蝦皮購物
蝦皮購物

蝦皮是什麼?

蝦皮應該是近幾年成長最快的網路拍賣平台,在一開始潛伏許久後,開始大玩補貼戰(免運費),玩的老大哥(PChome)不要不要的,所痛擊對方的點就是,老大哥超級難用的手機版 / APP 設計介面。

在台灣殺出一條血路的蝦皮拍賣,在蝦皮賣家讚譽有加之下,造福的是整體蝦皮會員。

蝦皮符合流行的設計介面,吸引很多年輕人 / 女性使用,形成瘋潮的口碑行銷。

蝦皮商城

蝦皮商城
蝦皮商城(簡單乾淨的設計介面)

在蝦皮拍賣打響市場的第一炮之後,蝦皮成立「蝦皮商城」將觸角延伸至 B2B2C 市場,並開始廣邀商家進駐,現在更有「蝦皮24h購物中心」準備切入B2C市場。

在把戰線拉長後,接下來蝦皮會有什麼表現,讓我們拭目以待 😎  😎

蝦皮成立「蝦皮商城」將觸角延伸至 B2B2C 市場,與PChome商店街、Momo摩天商城、Yahoo超級商城等 .. 直接競爭。

旋轉拍賣

旋轉拍賣
旋轉拍賣

Carousell 旋轉拍賣為社群拍賣平台,讓賣東西跟拍照一樣簡單、買東西跟聊天一樣容易。

對旋轉拍賣的印象,應該是在幾年前蝦皮還沒成熟時,常常被拿出來跟蝦皮一起討論,但不出幾些日子兩家同樣是從手機APP發源的拍賣平台,在台灣不論用戶數和知名度,接已經不能相比。

話雖如此,但旋轉拍賣還是有許多愛用粉絲,喜歡他簡潔的介面、和新創公司的那種創新力 😉 

momo摩天商城

momo摩天商城
momo摩天商城

momo購物網2016年營收達新台幣205.8億元,僅小於PChome網路家庭的257.41億元,是台灣第二大的網路購物業者。

從原本商家只能當批發商的角色供應給momo購物網去賣,到後來也搞出了一個momo摩天商城,讓批發商直接變成店家的角色(B2B2C),可以直接在上面賣東西。

momo摩天商城後面也有個富爸爸,就是富邦集團。平台上常常會有些優惠活動,回饋給廣大的使用者們。

Yahoo超級商城

yahoo超級商城
yahoo超級商城(左側的商店分類很清楚)

Yahoo超級商城也是Yahoo提供的B2B2C,提供商家進駐網路商店平台。

在設計方面,個人覺得小輸蝦皮一點,但也贏了不少家(個人喜歡簡約風),且在商家分類上很明顯,可以先點選「商品分類」,然後再選取分類內的喜歡的商家去購買。

在台灣,Yahoo / Bing搜尋是第二大搜尋引擎,使得Yahoo商城/拍賣,剛開始發展就有穩定的基礎。

Yahoo拍賣

yahoo拍賣
yahoo拍賣

先來說說歷史,Yahoo拍賣在台灣是老字號的電子商務公司,最早是Yahoo拍賣先吃了台灣的絕大部分市場。但後來露天拍賣殺出,又加上Yahoo奇摩拍賣的網站改版失利,Yahoo拍賣失掉了大半片江山。

為了寫這篇,也直接操作了Yahoo拍賣,發現裡面的商品數量也是很多,也有支援自家的即時通聊天,可以直接詢問賣家商品狀況。

目前整體拍賣市場由蝦皮購物、露天拍賣、Yahoo拍賣分了大部分的市場份額。

樂天市場

樂天市場
樂天市場

台灣樂天市場股份有限公司是由日本最大規模的電子商務平台-樂天株式會社於海外成立的第一家子公司。

整體使用介面,可能由於是源自日本關係,使用者體驗也是十分流暢,雖然在台灣相對前面幾家略為低調點,但也是有不少的愛用者唷 😛  😛

2. 月年租網路商店平台

月年租平台代表: 91APPShoplineCyberbiz ..

全通路佈局+新零售新電商:

91APP、Shopline、Cyberbiz .. ,這幾家都是不錯的品牌,月年租網路商店平台好處是,不管電腦版 / 平板(手機版)/ APP,都已經幫你開發到好,不用煩惱。

三家系統商中,91APP 提供零售業者的 Omni-CRM (全通路客戶管理系統) 、Cyberbiz 推出的 Enterprise 版本(提倡線上+線下+物流),都是近期開發的。

這些系統商,除了原有的O2O(Online to Offline)特色,也開始往更新的OMO(Online Merge Offline 線上和線下融合)切入。

聽說明會辨真假:

基本上若是決定選用「月年租網路商店平台」當作商店平台,那各家的說明會建議可以去聽看看,才能分析出自己最適合哪家系統商。

我來列一下,這三家系統商的說明會:91APP 說明會Shopline 說明會Cyberbiz 說明會

各家系統商代表客戶:

91app
91app零售開店平台

91APP – 代表客戶:

PHILIPS 飛利浦、Timberland、全家便利商店、86 小舖、STUDIO A、SONICE、早餐吃麥片  ..(看更多可點我

shopline
shopline

Shopline – 代表客戶:

宏佳騰機車、Studio A、谷阿莫鳳梨酥、Dazzling、美珍香 .. (看更多可點我

Cyberbiz
Cyberbiz

Cyberbiz – 代表客戶:

台灣正官庄、Dr.Hsieh達特醫、ABOKI、JSMIX、跟著董事長吃好吃、奧黛莉 .. (看更多可點我

來做結論溜:

目前系統商推薦的話,就上述幾家比較推薦,

91APP: 是整體系統功能更全面,目前也有 enterprise 版本可加速OMO虛實融合,但費用相對較高。

Shopline: 無發辦費且不抽成(很適合預算有限的賣家),很多店家愛用。

Cyberbiz :相對前面2個系統商比較新,但因為系統功能全面、主打OMO虛實融合,聲勢也越來越強大。

你喜歡哪種呢?如果想經營網路商店,就做些功課選擇你喜歡的來使用吧 😆  😆

3. 網頁設計軟體架設

軟體代表:Woocommerce 、Opencart 、Magento  ..

Woocommerce

Woocommerce 是一款CMS購物網站系統,附加在 wordpress 上,可以變成商業網站、購物網站、會員網站、CMS網站、其他各種類型網站,幾乎難不倒他。

如果是用 wordpress.com 架設網站,那可以直接進入他的官網,進行網站+購物車連接,如下圖:

Woocommerce
Woocommerce 購物車系統推薦

如果是用 wordpress.org 開設網路商店,那可以直接搜尋 woocommerce 外掛下載,如下圖:

woocommerce外掛
woocommerce外掛

接著再按步驟操作,就能完成網路商店經營啦 😎  😎

如果預設版型你不太喜歡,也可以到 envato market 選購喜歡的購物版型唷。

如果你已經使用 wordpress 架設網站,但想擴充成購物站系統,那我會建議你使用 woocommerce,因為他們是一體的 😛  😛 

Opencart

OpenCart 是一套PHP開源購物系統,已針對搜尋引擎做最佳化設計,功能豐富、操作簡單並具有新穎的視覺化界面,外掛數量非常多,效能也高,是剛創業或小型店商不錯的一個選擇。

opencart教學
opencart教學

在台灣,雖然使用上的人數不多,但在國際上算是熱門的購物軟體平台。

詳細的話,你也可以參考 opencart 的 前後台demo,玩玩看他的系統 😆  😆

Magento

Magento 是國際知名的購物車系統,在歐美與中國都已被大量使用,其電商功能強大、也可客製化,能滿足商家與消費者的多種需求,尤其適用於中、大型企業。

國內外超過10萬的商家使用(國外居多),其社區最為龐大,技術支持也最為成熟。

Magento教學
Magento教學

Magento 購物車系統,也是國際品牌愛好使用的一款平台系統,如:Nike運動品牌、Skybe國際電話、Toms線上鞋子 .. 等。

Magento官網
Magento官網

最近 Adobe 花了16億多美元併購了 Magento,這意味 Magento 多了一個可以幫忙宣傳的富爸爸,未來在推廣上更如虎添翼(併購新聞:挑戰 Salesforce!Adobe 16.8 億美元併購開店平台 Magento

如果對他有興趣,也可以使用他當作你的購物車系統 😎  😎

P.S:Magento 和 Woocommerce 不同地方是,Magento是一個獨立的系統,而 Woocommerce 需依附在wordpress上。


subject-21

21. 網路開店模式(下)

小提醒:這章節是網路開店模式(上)的下集,建議可以先看 網路開店模式(上),了解完整的網路開店方式 😆  😆

4. 網頁設計外包

請網頁設計公司製作,最大的好處是可以完全客製化(但要有錢 ..),因為有些店家 / 公司網站不一定只有購物的需求,也可能在上面舉辦一些活動(需要客製化功能),這時就需要外包才能完成。

優點:可以高度客製化。
缺點:架設網站成本支出、後續維護也需要靠那家公司。

小提醒:若在預算有限下,先了解各方免費的網頁製作軟體、或者月年租平台等 ..,都無法滿足需求時,可以再使用外包製作 😉  😉 

5. 自己寫code架設網站

當初會涉入到程式領域,是因為看了「社群網站」這部電影,覺得 coding 的那種黑視窗,帶點黑客反派的感覺有點帥(自己想的 ..)。

coding
coding

又加上可以使用程式(科技),解決一些重複無聊的事情(比如說:爬蟲),所以也踏入程式領域,開始寫起網頁。

過來人的經驗分享:

若只需要有平台可以賣東西,那直接找免費 / 月年租的網路商店平台就可以了,不用大費周章學程式。

但若是希望架設出SaaS(軟體及服務)的網站,或者對目前很夯的「新創公司」有憧憬,那建議你就必須要會寫code(或者是你的合夥人會),才比較有辦法帶領公司成長。

saas案例
saas案例

( 上圖這幾個,都是 SaaS 的相關公司唷 🙂 🙂  )

6. 社群軟體

代表軟體:Facebook、Line ..

Facebook

Facebook 有許多拍賣社團,各式各樣主題都有,只要搜尋想要的主題,然後點選社團分類,基本上就會跑出一堆有的沒的,然後挑選人多的加入就是了。

fb拍賣社團
fb拍賣社團

比較值得留意的是, Facebook 新推出的 Marketplace 功能,更是把拍賣訊息散發給所有人,如下圖:

fb-marketpalce
直接放在 網頁版FB 左側欄裡 ..

Marketplace 功能教學,黃色側邊欄(商品一覽、社團整合、塞選條件 – 價格/地點等 ..),綠色框(搜尋你想買賣的商品),如下圖:

marketpalce教學
marketpalce教學

簡單來說,Facebook 的 Marketplace 最大優勢就是台灣人用FB還是占大宗,有高流量當然商品數也會多,然後越多商品數又會吸引更多的人來買(一種正向循環),商品觸及人數多,可以增加許多售出機會。

若個人店家只想拍賣一些小物且不太需要其他功能的話,也可以考慮使用FB操作唷 😆

Line

Line 在電子商務方面的拓展,有 Line@口袋商店Line購物 兩種玩法,

Line@口袋商店(行動商店)

LINE@內建的電子商務服務,讓LINE@商家一站式輕鬆打造電商平台!充分利用Line上廣大的使用者,轉化成你的顧客。

商家:
LINE@管理後台營運電商生意,不需額外使用其他電商平台。
顧客:可以到 LINE@口袋商店下單、付款購物。

line口袋商店
line口袋商店

目前 Line 也放了版面,增加口袋商店的曝光率(增加導流量),如下圖:

line口袋商店
line口袋商店

Line口袋商店,目前還是持續招商中,如果想成為上面的店家(可以點我)也可以進入了解申請細節唷 😆  😆

Line購物

Line購物,把口袋商店的商家,也一併整入了Line購物,所以如果有申請口袋商店,那在Line購物上也可能看得到你。

Line購物也和知名電商合作,如:蝦皮、東森購物、Friday購物、3C市場等 ..,所以整體使用量、商品量,都有一定的競爭水準 😛  😛

line購物
line購物

在Line購物,也可以得到Line Points的點數回饋唷 😆  😆


subject-22

22. Blog網路賺錢

如何使用Blog網路賺錢?對我而言,要使用部落格平台賺錢,大致上有幾種方式:

  1. 提升知名度
  2. 網路商店經營
  3. 業配文
  4. 廣告收入

(依創造未來收入+知名度高低比,由上到下排名推薦)

1. 提升知名度

經營部落格賺錢(或任何的內容行銷),好好培養「網路流量」和「粉絲培養」就對了。

網路流量增加+排名
網路流量增加+排名

舉個例子來說:若是你的Blog網站,每個月有30000的瀏覽量,不論你想推銷、經營網路商店、販賣專業服務(網頁設計、室內設計等 ..),我們抓轉化率1%就好了,每個月也有300筆新增的訂單 😯  😯

假如一筆單可以淨賺100元,300筆 x 100元 = 30000元,沒看錯一個月可以從網路上多賺30000元的額外收入!

(以此類推 ..)

寫部落格,算是行銷自己的一種最容易上手的方式,你可以挑選某種有興趣的主題來寫,舉例來說↓

如果你喜歡「煮菜」:

分享煮菜的相關文章(如:自己的做菜流程、幾步驟完成某某料理、3分鐘完成番茄炒蛋等 ..)。

如果你喜歡「遊戲」:

分享遊戲的相關文章(如:遊戲破關技巧、如何成為該遊戲的神手、直播遊戲和網友互動等 ..)。

寫這些文章,為的就是好好抓住你的粉絲,因為這些粉絲也是未來會花錢捧你場的人,所以需要用優質的內容來餵飽他們(咦!)

當然,經營網站 / 網站流量(網站排名),有件很重要的就是「要有耐心」,基本上沒有一年半載是不會有什麼好成績的,所以這也不是什麼牟取暴利、什麼不踏實的賺錢方式,一切都是要花時間和心力經營「自媒體」,並提升你的網路知名度。

網路知名度、網紅、自媒體等 ..都是常聽到的名詞,一切都建築在「網路流量」和「粉絲培養」上唷 😆  😆

2. 網路商店經營

經營部落格的好處,當還沒商業模式時,可以先寫Blog開始培養網路流量、粉絲。

當名氣累積起來後,假如你是用 wordpress 經營部落格,你也可以直接安裝套件變成網路商店,就可以開始「變現」,是不是很方便 😆  😆

WooCommerce中文
WooCommerce中文(安裝套件,直接變購物網站架設)

或者你用的是別種平台(或外包請人寫)的網站,都沒關係,你可以用「置入性行銷」,就是在文章中置入你新成立的品牌商店(就是所謂的「導流」),是不是就能開始做生意了呢?

(如下圖,文章內滿滿的外站鏈接 😯 😯 )

痞客邦美食blog
痞客邦美食blog

很多知名的網路商店(業績好),都是從經營Blog開始發跡的,再轉型成電子商務後,還是不斷的寫優質文章,除了賣實用的東西給粉絲們,也提供實用的資訊跟粉絲們一起成長茁壯。

記得,當在做行銷時,切記要考量讀者的感受,若是行銷太重,小心你的粉絲會離你遠去唷!

P.S 寫blog網站,可以當做經營網拍的第一步,先培養粉絲再銷售 😉

3. 業配文

當網路使用者越來越多,發現「業配文」這東西真是無所不在,果然是人潮到那裏,行銷公司的腳步就到哪裡  😯  😯

業配文賺錢
業配文賺錢

撇開這個不說,當創作優質文章時,接些合理的業配文價格,養家糊口一下也是不為過的(因為優質作者們也要生活阿 ..),那目前業配文的種類主要有2種:

  1. 部落格業配文
  2. YouTube業配影片

部落格業配文

部落格業配,算是比較早之前就有的作法,也不太是新鮮事,例如:美食、服飾、美妝、旅遊等 .. 大概這幾個廠商需要找業配也最多,所以也會常聽到美食部落客、服飾部落客等 .. 接了很多業配。

那至於業配文的價格怎麼算呢?

根據三立新聞網報導,日流量破萬的部落客每篇至少五千起跳,聽起來好像有點少(真的有點少 ..),所以就多接一點,或者提高知名度拉高價位吧 😯

部落格行情-價錢
部落格行情-價錢

YouTube業配影片(順帶一提)

YouTube上的業配影片,應該算是肉比較多的一塊,因為影片類業配相對文章類的,模式來的更新穎,所以只要你有名氣,自然會有廠商找上你,並跟你談業配價錢。

由於現在社群媒體很普遍,如FB、YouTube、眾多直播軟體等 .. ,許多年輕人都開始經營「自媒體」,開始打造個人品牌,所以現在也有所謂的「網紅經濟」出現。

那「網紅經濟」其中之一,當然就是影片的業配文啦,找個例子給大家看:

youtube拍片網紅
youtube拍片網紅 – howhow

HowHow算是少數Youtuber排行裡,狂接業配的人 .. ,通常Youtuber都會抓大概的業配量,主要怕網友覺得行銷太重就退追蹤,

但看樣子HowHow可能沒這個煩惱,原因可能是他個人特質太強烈了 😯  😯

那至於YouTube的業配收入,主要還是以頻道的追蹤人數做衡量,一個業配影片3w、5w、8w、10w以上都有,全看知名度決定價錢。

經營YouTube頻道跟經營Blog一樣,都不是一觸可及的,都是需要花一段時間灌溉和經營的唷 🙂

4. 廣告收入:

部落格上不論是使用現成平台(如:痞客邦等 ..),基本上都難賺到爆,

以前還有點搞頭,後來在平台分潤趴數給的超少下,這種賺錢方式,在我心中,永遠不可能是第一(所以我把它放最後)。

但他還是一種賺錢方式,只是提出來讓大家認識下,使用這種方式除非網站流量真的很大,才能有明顯收入,不然真的建議打工會比較快 😯  😯


subject-23

23. 開始起飛!

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

startup-rocket
startup-rocket
P.S 網域是什麼、虛擬主機教學、DNS設定、cPanel介紹、SSL、免費網路平台、網路開店模式等 ..(還有很多),我全部一次教會你  🙂  🙂

許多人認為架設網站一定要工程師才能完成,但事實是,在現在免費架設平台這麼多下,就算是門外漢,其實只要照著步驟走,也能親手架設屬於自己的網站(上面我教學了許多種方式)。

沒錯,就是要有信心!特別是在「自媒體」這麼盛行的年代,應該有一個自己的專屬網站,

開始動手架設網站吧!
開始動手架設網站吧!

不論是寫寫心情、分享你的專業、美食/旅遊 ..分享都可以,增加自己的曝光率,讓更多人可以認識你。

行銷學不僅適用於產品與服務,也適用於組織與人,所有的組織不管是否進行貨幣交易,事實上都需要搞行銷

—— 菲力浦。科特勒

現在輪到你了 

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

現在我想聽聽你的意見:

你打算先試試文章的哪種架設網站方式?

你打算開始經營你的「自媒體」了嗎?

還是你在操作上,有遇到的任何問題?

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

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

最後,好東西就要和好朋友分享!

如果這篇文章對你有幫助,請幫我分享出去,衷心感謝!

(點擊社群快速分享 😀 😀 )

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

遠振主機

Joomla! 內容管理系統簡介

三個CMS系統的比較

Bing vs Google: SEO Strategy Across Search Engines

CloudFlare: 維基百科

奧革設計資源彙整

DNS: 維基百科

長期關注「網路行銷」+「網站分析」,有SEO、內容行銷、社群行銷、廣告投放、網站設計、網頁切版、後台建置等 ..。 平常的休閒娛樂,就是游泳+健身,偶爾彈彈琴。

6 COMMENTS

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

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

      祝你一切順利:)

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

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

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

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

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

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

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

發表迴響