如何架設網站《2024》30分鐘完整教學

在資訊爆炸的時代,你都從哪裡獲得你想要的資訊呢?我想網路絕對是一個重要的資訊獲取平台。那你有沒有想過,自己也能是一個資訊提供者,創造一個屬於自己的網站。如果是以前,架設一個自己的網站可能是一件不容易的事,畢竟相關的資訊獲取可能需要專業管道,同時這種技術流的東西也不是隨便學得會的,但到了現今,想要架設一個屬於自己的網站已經不是件難事,只需要開啟網路收尋,就可以找到各種資源,各種供應商提供的服務,都可以讓你輕鬆快速的找到架設 Blog 的方法。

這篇就以手把手的方式來帶著你架設網站的種種教學流程,一步步完成網站的建立,通通都一起從架設 WordPress 網站開始吧!


本文目錄
No headings found

自己架設網站的四個必做項目

架設網站教學

架設網站有四個最重要的重點,而這四個重點也是這篇會帶著你做的重要項目,畢竟架設網站缺少了這四項,就都不行了,這四項分別是網域申請虛擬主機網頁製作平台網頁設計

1. 網域申請

網站需不需要一個網址?需要吧!這邊講的網域就是網址,你得有一個屬於自己的網址,而通常我們會建議申請網域時有幾點要注意的。

  • 請讓網址簡單一,看看 Yahoo 或 Google 都是非常精簡的網址,你這樣才能夠達到好記得效果。
  • 其實你在設定網址時,通常只需要思考網域名稱,例如像是 Google.com 這個連結,Google就代表著一個品牌,所以你要思考網域申請時你要放上什麼樣的字,才能簡單又能代表品牌。
  • 以最簡單的方式,不要去用你不懂的東西,例如正常的網址後面就是接 .com,那你就不要用別的,因為不同的結尾是有不同的含義的,如果你只是一般網站用 .com 即可(其他的像是 .co 是公司或企業的英文縮寫、.net 是網路相關行業、.org 是非營利組織像政府才使用,不同的結尾會造成不同的意義)

無論你是在哪裡申請網域的,它都有著很好的引導效果以及防笨機制,例如有人已經註冊的網域你不會重新註冊到,以及它都已經將你的網址設定好了,你只需要選擇決定網域的名稱就好。

2. 虛擬主機

網站虛擬主機

試著想想,你的網站需不需要有一個地方可以存放東西的,你寫的文章,你上傳的圖片或是影片等等,其實都需要一個地方讓你能夠存放,而這個地方就是「虛擬主機」,租用虛擬主機就可以讓你的網站能正常的使用。

且通常在你辦理虛擬主機時,就會送一年的免費網域可以使用了,可以一起在處理虛擬主機時一併的把網域的問題也處理完。

挑選虛擬主機其實也有幾個重點如下:

  • 提供虛擬主機的公司是否為大公司,虛擬主機會影響到你網站許多的東西,所以請挑選知名的公司,特別是國外已經有做很久的虛擬主機供應商。
  • 通常虛擬主機的租借分成兩種,一種是年約,另一種則是月付,請仔細比較價格再決定。
  • 夠不夠安全?速度夠不夠快?如果你的網站用途是電商,這種會跟消費者有直接關係的類型,自然虛擬主機就一定要找很安全且穩定度夠的,三番兩頭網站出狀況,可不會給你的網站帶來很好的消費者體驗。

3. 網頁製作系統 – WordPress

好的,前兩個都確定了,再來就是你要在哪的網頁製作平台上面建立,市面上有許多的網頁製作平台,這次我們會以 WordPress 來講解,全球網站當中它們佔了 35%,算是佔比率相當的高,而也因為他們出色的後台系統以及外掛服務,只要是想要架網站的,第一個都會想到 WordPress。

4. 網頁設計

搞定了前三個,你就已經擁有一個網站了,網頁設計的部分在於美化你的網站,而除非你有寫程式的能力可以自己去美化網站,不然一定都是用免費或是付費的佈景主題,現在有許多提供 WordPress 佈景主題的供應商,讓設計師能夠在網站裡販售自己辛苦做出來的佈景整題可使用。

如何架設網站

在架設網站之前的四個步驟如果你都瞭解了,那接下來就是要開始實作的部分。

1. 架設網站第一步:虛擬主機

bluehost 架設網站

上述提到,通常你第一次租用虛擬主機,它都會額外贈送一年免費使用的網域,所以基本上你可以在租用虛擬主機時,就順帶的將網域處理完畢,但虛擬主機供應商這的多,我們應該要選擇哪一種呢?

會看這篇手把手教學的人,通常一定都是第一次架設網站,或是對於架設網站有概念但卻不太了解的人,所以今天我會介紹一個虛擬主機供應商是適合新手入門的,它是「Bluehost

Bluehost 優點:

  • WordPress 認證的虛擬主機供應商,且能夠適用於 WordPress 的各種功能。
  • 價格與其他的供應商相比較為便宜。
  • 速度中等,以剛入門的新手是相當足夠的。
  • SSL 憑證安全性相當高,完全沒問題。
  • 優質的客服可詢問。

Bluehost 缺點:

  • 對於速度有要求的,這可能不是好選擇。
  • 只提供英文客服,怕英文的需要注意一下只能用翻譯溝通。

關於更多 Bluehost 評測可以參考:Bluehost 評價|速度、虛擬主機方案價錢分析

2. 架設網站第二步:Bluehost 申請

步驟一:前往 Bluehost 網站,並點擊 Get Started。由此前往 Bluehost 官網

步驟二:選擇最左邊最便宜的方案,且一次買月份較多越便宜。

架設網站 Bluehost 虛擬主機教學步驟二

步驟三:網域選擇

你可以直接在這裡決定網域的名字,或是之後再決定也可以。

所謂的網域名稱可以理解為【網站主要網址】,就是他人輸入你的網址可以到達的頁面。

架設網站 Bluehost 虛擬主機教學步驟三

步驟四:填寫基本資料,

注意這邊用的都是英文,依序要填寫的有姓名(外交部查詢)、姓氏(外交部查詢)、商業公司(非必填)、選擇國家、地址(中華郵政查詢)、縣市、郵遞區號、手機、信箱(會有確認信件,要填正確的)

因為信用較好的主機商大多數都是國外公司居多,在此比較不建議使用台灣地區的虛擬主機商。

架設網站 Bluehost 虛擬主機教學步驟四

步驟五:Bluehost 方案與價格

確認價格與方案是否正確,Package Information 就是你的方案、時間與金額,最後要付的價格,並且會送你免費一年的SSL憑證防護。

而下方的Package Extras則是一些附加功能,你可以依照你的需求選擇是否要加購,最後的Total就是你這次應該要付的總金額。

附加的選項中,我們並沒有任何推薦你使用的。你可以直接取消所有的附加功能即可。

架設網站 Bluehost 虛擬主機教學步驟五

步驟六:填入付款資訊

填寫信用卡基本資料

架設網站 Bluehost 虛擬主機教學步驟六

步驟七:確認購買明細以及創建帳號。

購買明細以及創建帳號。

架設網站 Bluehost 虛擬主機教學步驟七 - 1
架設網站 Bluehost 虛擬主機教學步驟七 - 2

步驟八:建立帳號

點選 Create your account,並填寫資料,依序往下要填入的是網域(填寫方式:網域名稱.com,例如apple.com)、密碼、再確認一次密碼,這個之後會變成你登入的 Bluehost 的帳號。

密碼的部分則是需要你的第一個英文字母是大寫,密碼的最後一個得是符號,像是@、#等等。

架設網站 Bluehost 虛擬主機教學步驟八

步驟九:等待中準備登入。

架設網站 Bluehost 虛擬主機教學步驟九

步驟十登入密碼。

架設網站 Bluehost 虛擬主機教學步驟十

步驟十一:準備開始建置網站囉!

架設網站 Bluehost 虛擬主機教學步驟十一

備註1:你不一定要選擇最便宜的方案,如果你是老手可以依照你的規劃去選擇功能較多價格較貴的方案。

小訣竅:如何得到更划算的價格呢?你可以在步驟四這裡,填資料時把滑鼠的鼠標網「關閉網頁」的地方移動,就會跳出一個更優惠的價格。

架設網站 Bluehost 虛擬主機教學 優惠

3. 架設網站第三步:安裝 WordPress 架站系統

Bluehost 既然是對最適合用來當作 WordPress 的虛擬主機,有著快速讀取的功能、專業技術與自動備份,且價格非常實惠,你很難找到比這個更划算的網站了。

步驟一:購買完成後會跳出這畫面,點選Create your Website

Bluehost 安裝 WordPress 架站系統 步驟一

步驟二:直接省略掉流程,跟著我做即可,可直接選擇最下方的 Skip this step 略過。

Bluehost 安裝 WordPress 架站系統 步驟二

步驟三:看你網站類型是什麼,這次先以Blog來建立。

Bluehost 安裝 WordPress 架站系統 步驟三

步驟四:一樣略過流程,點選Skip this step。

Bluehost 安裝 WordPress 架站系統 步驟四

步驟五:點選右邊的Best WordPress for beginners下方的Start building

Bluehost 安裝 WordPress 架站系統 步驟十五

步驟六:選擇你的部落格主題。

Bluehost 安裝 WordPress 架站系統 步驟六

步驟七:替網站取個名字(之後可以修改),接著按下Continue

Bluehost 安裝 WordPress 架站系統 步驟七

步驟八:調整圖片(之後可以修改)

Bluehost 安裝 WordPress 架站系統 步驟八

步驟九:上傳 Logo(沒有可以先不用,之後再補)

Bluehost 安裝 WordPress 架站系統 步驟九

步驟十:挑選字體樣式(之後可以修改)

Bluehost 安裝 WordPress 架站系統 步驟十

步驟十一:白底 JobStudio的底色與顏色(之後可以修改)

Bluehost 安裝 WordPress 架站系統 步驟十一

步驟十二:整體網站樣式(之後可以修改)

Bluehost 安裝 WordPress 架站系統 步驟十二

步驟十三:下方導航欄的基本資訊(之後可以修改)

Bluehost 安裝 WordPress 架站系統 步驟十三

步驟十四:等待中。

Bluehost 安裝 WordPress 架站系統 步驟十四

步驟十五:建置完成,到WordPress的後台囉。

Bluehost 安裝 WordPress 架站系統 步驟十五

這樣就完成囉,你的網站已經可以開始準備發第一篇文章了。

尚未購買網域,買完網域之後如何跟網站做結合?

剛剛前面提到,你可以先不設定網域而先將 Bluehost 虛擬主機購買完,如果你在當時要填入網域時就已經填了就不用看這一點了,繼續往下看吧!但如果你是那時候沒設定的人,這邊也是很重要的喔!

步驟一:登入 Bluehost 會員,並點選Domains,再點選Purchase Domains

Bluehost 網域註冊使用 步驟一

步驟二:輸入你要的Domain名稱

Bluehost 網域註冊使用 步驟二

步驟三:Use Privacy看你需不需要,不需要則不要點,另外最下方的I agree… 要點,最後按下Add to cart。

Bluehost 網域註冊使用 步驟三

步驟四:記得將年份調整為一年,你就可以看到這次的註冊網域是不用錢的,並點選 Process Free Order。

Bluehost 網域註冊使用 步驟四

步驟五:完成後,點選右邊的 Assign Your Domain

Bluehost 網域註冊使用 步驟五

步驟六:選擇你剛剛註冊的網域。

Bluehost 網域註冊使用 步驟六

步驟七:點選右下方的Assign this Domain

Bluehost 網域註冊使用 步驟七

步驟八:回到主頁面,接著點選My Sites,再點Manage site。

Bluehost 網域註冊使用 步驟八

步驟九:到settings裡面將網址 https://jobstudio888.com/ (示範)貼進去裡面,更改就可以了。

Bluehost 網域註冊使用 步驟九

如此一來就完成囉。

恭喜你,你終於有一個自己的網站了!不過在你開始之前,讓我透過幾個你應該要知道的功能,來替你先設定好 WordPress,例如像是中文化,像是安裝外掛,購買佈景主題等等的功能,在你發第一篇文章之前,如果可以先將這些設定好,對你來說會是比較好的。

WordPress 中文化

對於很多 WordPress 新手來說,後台都是英文真的是很吃力的一件事情,但其實 WordPress 針對亞洲地區也有繁中的選項囉,做法非常簡單。

步驟一:點選後台的左邊的 Setting 再來 General。

WordPress 中文化步驟一

步驟二:點選 Language 並選擇繁體中文。

WordPress 中文化步驟二

WordPress 佈景主題

WordPress 在全球的網站當中佔了 35% 的數量,一定有些特別的原因,佈景主題就是其中一個,因為 WordPress 提供了相當多的免費佈景主題可供使用,而如果你不喜歡這些免費的佈景主題,也可以購買其他網站所提供的付費佈景主題。

佈景主題與網站整體的速度將會有直接的關係,一個真正好的佈景主題應該要具備以下幾個要件:

  • 對SEO要友善,SEO是經營網站一個非常重要的關鍵。
  • 網頁速度要快速,正常的閱讀者都希望能夠不要載入太久的時間。
  • 能夠與 WordPress 的外掛相容。
  • 排版清晰簡單,且容易控制與編輯

如果看過一輪免費的佈景主題,都不滿意的話,建議你可以用以下兩個網站的佈景主題來找找看有沒有自己喜歡的。

GeneratePress:市面上最受歡迎之一的佈景主題,無論你的網站內容性質是什麼,通通都可以在這裡找到你想要的,速度快又好操作。

ThemeForest:這同樣也是一個非常受歡迎的佈景主題,裡面依照價格區分各種不同的佈景主題。

該如何購買 WordPress 佈景主題並且安裝呢?

這裡將會以“ThemeForest“作為示範。

步驟一:開啟網頁到 ThemeForest進入網站。

如何購買佈景主題步驟一

步驟二:點選導航欄上的 WordPress,有很多主題可選擇,隨意點一個。

如何購買佈景主題步驟二

步驟三:進來之後有很多佈景主題可挑選,請自己挑一個你喜歡的。

如何購買佈景主題步驟三

步驟四:選定之後右邊點下 BUY

如何購買佈景主題步驟四

步驟五:填入資料。

如何購買佈景主題步驟五

步驟六:信用卡付款後即可。

如何購買佈景主題步驟六

步驟七:點選download。

如何購買佈景主題步驟七

步驟八:解壓縮。

如何購買佈景主題步驟八

步驟九:會看到你的佈景主題壓縮檔(以這個為例就是asona.zip)

如何購買佈景主題步驟九

步驟十:點選安裝佈景主題。

如何購買佈景主題步驟十

步驟十一:上傳佈景主題。

如何購買佈景主題步驟十一

步驟十二:點選asona.zip這個,這樣WordPress就會幫你安裝囉。

如何購買佈景主題步驟十二

WordPress 必用外掛程式

  1. SEO 外掛程式
Rank-Math-logo

推薦外掛:Rank Math

上述提到,SEO對於網站來說至關重要,而WordPress當然也注意到這點,所以有許多的SEO外掛可以使用,每一款都有免費版與付費版可用,而如果依照你的網站性質,你可以考慮往上升級付費版,如果只是一般使用則免費版即可。

  1. 提升網站速度
WP Super Cache

推薦外掛:WP Super Cache

雖然說Bluehost本身就有自己的快取外掛了,但還是許多人會使用WP Super Cache,由官方自己開發的外掛程式,與WordPress一定是非常符合的,且可以加速你的網站速度,這絕對是你必須要下載的外掛之一(重點是免費的)

  1. 網頁編輯器

推薦外掛:Elementor Pro、Thrive Architect

想要把網頁做得精緻漂亮,就得用一些好排版的編輯器,WordPress上提供了兩種我個人認為非常便利好用的編輯器,透過編輯器則可以達到美化版面的效果,且能做到一般編輯器做不到的排版。

  1. 圖片壓縮

推薦外掛:ShortPixel

替各位科普一下,在網站當中顯示的圖片如果檔案過大的話,是會影響網站跑的速度的,所以今天你一定要注意自己圖片的大小,再上傳到網站上放在網頁裡,而一種比較麻煩的做法是每一張都先壓縮過之後再上傳,另一種則是透過 WordPress 的外掛替你自動壓縮每一張上傳的圖片,不過缺點是要付費,看你怎麼取捨囉。

  1. 專業電子報系統

推薦外掛:ConvertKit

如果今天你做的是內容型網站的話,那麼電子報系統則可以替你在行銷上面幫上不少忙,在平台上創建內容病傳送郵件到訂閱者的信箱裡,省去一封封寄電子信件的困擾,一次替你把電郵行銷做到好。

Bluehost 架站常見問題

1. 不能用免費的部落格平台嗎?痞客邦也很好用。

痞客邦LOGO

當然可以,痞客邦是台灣最大的部落格網站,如果你求方便的確可以直接使用他們的平台作為你的網站,不過你可能會遇到下面幾個缺點。

  • 不夠專業:痞客邦能夠自己調整的地方太少,會導致你的網站不夠專業,且廣告非常多看看起來會很雜亂,如果你使用 Bluehost 建置出來的 WordPress 網站則可以用外掛做出非常多不同的變化,讓你看起來非常專業。
  • 沒有保障:如果今天痞客邦倒閉,你的所有文章可能都會因為這樣而消失,除此之外,你累積下來的流量可能都會消失不見,這對於一個靠流量賺錢的部落客來說是非常嚴重的損失,而 Bluehost 是提供一個空間讓你放資料的,只要有備份,隨時都可以在將檔案抓出來。
  • 網域不是你的:你可以仔細看一下你自己的痞客邦網域,是不是跟一般正常的網址看起來不太一樣,這是因為你的網域是屬於痞客邦的,並不是你的。

2. 建置自己的網站需要花多少錢?

這點很難講,因為看你要做到多高等級的網站,性質是什麼?這都是考量因素之一,不過可以知道的是,如果你單純只是想要先以試試看的方式的話,Bluehost 選擇最基本的價格就可以了,直到你流量大增時,再開始也不遲。

而建置自己的網站有三個必需花費

  • 虛擬主機:使用 Bluehost 的最基本方案,一個月大概台幣80到400不等。
  • 網域名稱:雖然 Bluehost 會送你一年,但第二年開始就沒有了喔,大概一年的費用是 270 台幣。
  • 外掛插件:剛剛提到 WordPress 有很多外掛可以選擇,但你知道的有些好用的外掛是需要付錢的,這也可能會成為你付費的其中一個因素。

3. SEO 是什麼?對經營網站有什麼幫助?

SEO 是經營網站一個很重要的點,試著想想,如果你發的每一篇文章,都可以在搜尋頁面上排在前三頁,甚至是前三個,那是不是能帶來的流量與曝光就相當的可觀,無論你的網站是做內容還是電商,只要能夠透過 SEO 的概念去提升自然排序,就等同於是讓 Google 替你做廣告,但卻不用支付任何一毛錢,聽起來是不是非常不錯呢?

然而要做 SEO 也是一門專業,透過 WordPress 提供的外掛即可做到基本的 SEO,而其他的則必須要從其他地方補足相關的知識才能讓網站的排序越來越好喔。

4. 在痞客邦有固定流量了,還是應該轉嗎?

老實說,有固定流量了其實表示你已經有一定的觀看數,並不是要你把痞客邦給關掉,而是利用目前痞客邦的優勢把流量帶到新的網站去做一個銜接,而我認為你還是應該轉,因為這未來將會是成為你品牌的一個重要里程碑。

總結

看到這裡,你也已經有架設一個屬於自己的網站了嗎?其實要經營一個網站不簡單,從頭開始更是一件困難的事情,唯有每天好好的產出優質的內容,以及深入去瞭解各種與提升 Google 排名相關的問題,才可以讓你的網站成效越來越好。

還在思考要不要架設一個網站嗎?相信我,無論你是剛接觸的新手,還是想轉換虛擬主機的老手,都非常適合用 Bluehost 架設一個全新的網站喔!