[筆記] 從0到1的初心者教學:自有網址與 Wordpress 架設

既然前陣子從Wordpress.com搬家了,那麼恰好趁這次機會紀錄一下自己買網域與架站全過程。自己在網路上查資料的時候,覺得並沒有一個網站真的從零到一寫得很清楚的,甚至有的服務都已經過期了。


基於地雷踩過,就放個警告看牌以防後人再度跌下陷阱的想法,於是決定著手這篇文章。

※ 寫在最前面的話:

  1. 我是純文學院科系,表示你看不懂code、沒有技術背景都沒關係。但你可能要看得懂英文(盡量啦)。
  2. 我用的是Macbook pro (osx系統),所以我並不確定某些程式是否只有windows或os版本。
  3. 預計花費時間: 半天?(一邊休息一邊唱歌,4–6小時可完成)

如此背景的初心者如我也可以成功,相信大家更不會有問題的。

首先,在建立網站之前,我覺得至少需要知道幾件事情:

1. 你是否有自己的網址?你是否想用自己的網址?

一般來說,免費網站服務是會提供給你網址的,如yahoo.com或pixnet.com的結尾,前面當然可以加上自己的帳號名稱,不過則會讓大家一眼知道你的網路服務提供者為誰。當然,如果你本身希望有獨立網址(如現在這網站 akichy.com 乾淨簡潔的網址),那麼通常就必須自己購買網域。

2. Wordpress 是不是你最理想的選擇?

Wordpress當然是自行架站很好的選項之一,但即便如此,也希望在架設網站之前能更了解這服務。實際上它是一個開放原始碼的網誌與後台管理系統,也因為他是開放的,因而大家才能下載後自行架站利用。更多細節請見官網> https://tw.wordpress.org/

提醒一下,wordpress.com與wordpress.org是不同的。前者為無名小站一般的網誌服務提供商,而後者則是我所言的開放原始碼的網誌、文章管理系統。(我這次的搬家,即是從wordpress.com的網域搬到自己架站的wordpress系統中)

3. 你想要用免費的虛擬主機服務還是付錢享有比較穩定的虛擬主機呢?

(以下為不專業說法,是我個人的理解,想要瞭解更多的人請善用Google)
所謂的虛擬主機是指你用來放置網頁的空間,在網路上的某頁面當中架設出你的網路磁碟空間,然後你再將網頁的設定上傳到此,才能夠開放讓大家知道與使用。就我所知,實際上如果家裡本身有NAS(雲端儲存伺服器)的朋友們,其實你也可以把網站架設在自己的NAS上,不過差別可能在如果你希望自己的網站24小時隨時都能被大家所使用與瀏覽的話,那麼你的電腦與NAS也應該24小時開著。

不過幸運的是,實際上免費的虛擬主機服務很多,而如果想要比較穩定流量的主機服務,實際上提供商選擇也不少。

由於這篇文章寫的是我自己架站的經驗,因而我主要是使用「免費的虛擬空間」但「綁定自有網域」,請特別注意。


那麼我們就開始吧。

架站階段如下:

  • 購買網址
  • 申請免費虛擬主機空間
  • 串接兩者(設定DNS)
  • 建立mySQL資料庫,上傳wordpress系統
  • wordpress初始設定

1. 購買網址

這次比較不同的是,因為想要經營屬於自己的網站,因而我很早就下定決心要購買網址。我選擇的是最大的網址網站Godaddy來購買網域,Godaddy有支援中文頁面,因而購買網域的流程變得清楚易懂。首先在他的首頁當中查詢你想要購買的網址,舉例而言我打了“abcxyz”,他會自動幫我搜尋目前可以購買的網域,包含.com、.net、.info等不同的網域結尾。

確定了自己想購買的網址後,在購物車結帳頁面可以選擇自己想要購買的年限,至少要買一年,若一年後還要再使用可以自行續約。

確定結帳後,請點選「新客戶(創建帳號)」,填寫會員資料表。需注意的是這裡的資料(姓名、住址、信箱)是會被登記為該網址擁有人,因而是半公開的資料。如果希望加密的話,那麼還要記得購買加密服務才行。在填寫完信用卡資料後便可以完成購買。你所購買的網域會在「我的產品」頁面中可見。

這邊確定購買成功後,我們就可以去申請虛擬網路空間連結到這個網址來了。

2. 申請免費虛擬主機空間

我之前在查資料時,原先參考了電腦王阿達的文章選擇了000webhost這家虛擬主機的服務,我所參考的原因是:

(傳送門:https://www.000webhost.com

  • 免費空間: 2GB
  • 提供的流量: 20GB/月
  • 可架設資料庫數量:2個
  • 有網頁端管理後台
  • 提供email主機帳號:5個

註:這裡的email主機帳號指的是企業信箱,換言之結尾並非gmail.com或yahoo.com.tw結尾的信箱帳號,你可以自己設定為abc@marketing.com,看起來變得專業許多,因而許多企業信箱結尾會直接設定為[company name].com

免費流量20GB非常吸引我,雖然說平常也沒什麼人在看我的網站,但實在不希望自己網站的loading速度很慢或時常卡住,因而我希望挑流量本身多一點的。另外,信箱五個聽起來很厲害,但我認為使用gmail個人信箱就足夠了,所以本身對此的需求不大。然而,在我實際使用000webhost卻發現它會鬼打牆地不讓我上傳第四步驟的wordpress系統,或是安裝完後卻沒有辦法完成第五步(mySQL)的初始設定。

在連續試過幾次之後,毅然決然換虛擬主機空間,換成現在使用的 Freehosting.com

(傳送門:https://www.freehosting.com/

  • 免費空間:10GB
  • 提供流量:250GB/ 月
  • 可架設資料庫數量:1個
  • 有網頁端管理後台
  • 提供email主機帳號:1個

Freehosting沒有中文頁面且個人覺得他的UI設計蠻詭異的。以下一邊配圖教學:

1. 進入到Freehosting頁面後,請點選Sign up(註冊)

2. 由於免費的服務就足夠我日常使用,因而我選擇左邊的Free的來購買,點選下方Order now。(別擔心,購物車會顯示為0元)

3. 接著會進入到3 steps購買畫面,第一步是必須先選擇「網址」,在此我選擇的是「我已有自備網址」。

(由於Freehosting.com並沒有提供免費網址的服務,因而即便大家選第一個Register new domain(註冊新網址)也只是跳出購買畫面而已。)

(btw, 如果大家本身沒有自備網址但又想找同時提供虛擬主機的服務,我朋友推薦了一個服務 > https://thisistap.com/

4. 如果確定該網址是可以使用的(他們確定該網址沒有人在使用),則會問你是否要加買其他服務。

有需要的人可以像是挑自助餐一樣,選自己可能會用到的個別服務,而不需要的人也可以直接跳過結帳。

5. 最後一步,則是在購物車頁面直接註冊會員。填寫完左邊的資料後,點選右邊的「確定訂購」。

6. 約10–30分鐘,就會收到信箱驗證信。請記得點選驗證連結回到Freehosting.com,才算是正式啟用服務了。

這時候,建議登入點選「我的產品」確定剛剛自己註冊的網域是否在處理中的狀態。

由於圖片為完成服務後補圖,在此顯示為「已撤銷」是因為之前我有重新設定過其他網址。

如果確實在處理中的狀態的話,接下來應會收到兩封與該服務相關的信件。

1. 確認服務訂購信

2. 虛擬主機開通信件(這封信我等了一陣子,所以中間約有1–2小時時間差)

收到第二封信,就表示我們這步驟完美結束了。

3. 串接虛擬主機與自備網址(DNS設定)

在freehosting.com寄給我們的第二封信中,實際上包含了許多要用在設定上的資料。其中一個就是Domain configuration,簡單來說就是我們需要把原本網域的域名伺服器改到虛擬主機上面,讓兩邊能串接起來。在信件當中有提供兩個域名伺服器。

回到Godaddy的網站中,點選「網域」-> 「我的網域」,選擇你想要安裝系統的網址,則會進到網域詳情的頁面。

在網域詳情當中,有「域名伺服器」,點選自訂、編輯即可新增剛剛Freehosting.com給你的兩個域名伺服器,並儲存送出。需注意的事情是,設定並不會馬上生效,可以注意一下在網域詳情頁面中,下面是否有出現「已更新」的字樣即可知道是否已完成設定。

另外根據我這次經驗,設定要等一小時比較保險。

換言之,即便你這邊設定成功,直接在瀏覽器打上你的網址依然不會顯示任何內容,這是相當正常的現象。

在Freehosting.com寄給我們的第二封信中,有提供一個預覽網址(temporary preview URL),若有點不安心則點選這連結看看內容預覽吧。

4. 建立mySQL資料庫

在等待的過程中,當然也不能閒著。我們現在已經有了網址也有了虛擬主機,我們還要在主機空間上安裝我們的頁面,所以得建立一個這虛擬主機服務中的資料庫。需要用Cpanel頁面進入到虛擬主機的後台,而Cpanel的連結網址也在Freehosting.com寄給我們的第二封信中。

點選連結後,填入Freehosting.com提供的帳號密碼即可進入後台。(值得開心的是有中文支援)

如果是第一次設定mySQL資料庫的話,請記得點選MySQL Database Wizard來新增一個全新的資料庫。

建立的方法很簡單:

1. 取一個資料庫的名字

2. 設定使用者的名字與密碼

3. 將此使用者的權限全部點選(讓他有該資料庫的最高權限)

就完成了!

退出到Cpanel後台,改點選左邊的MySQL databases來確認資料,可以在這邊看到目前的資料庫、使用者,以及擁有的權限。我自己當時在設定時,有幾次後面上傳wordpress卡關是因為我忘記把權限全部打開,結果變成我沒有權限編輯這資料庫,因而請特別檢查是否有把權限「全部選取」噢。

接著要做另外一件麻煩的事情了,就是透過FTP來把wordpress整套系統上傳到這個虛擬主機上。因此,我們需要到wordpress官網把最新版本的中文系統下載下來,傳送門> https://tw.wordpress.org/

下載完會是個.zip的檔案,請在你的桌面新增一個全新的資料夾,然後將剛剛的.zip 解除壓縮於新資料夾中。

推薦大家使用一個程式來讓我們上傳剛剛wordpress的系統:FileZilla,是一個免費且同時支援mac/ windows的FTP(註:File Transfer Protocol, 一種透過網路傳輸檔案的協定)軟體。傳送門> https://filezilla-project.org/

(我下載的是Mac版本)軟體本身蠻直觀的,左邊是你目前電腦端的檔案,而右邊則是你要連線到的網路空間。我們需要在上方的登入設定填入資料。資料在Freehosting.com的第二封信中,當中FTP client configuration就是我們需要的資訊,Host/ 帳號/ 密碼都已經一併提供了。

填入資料後點選,點選quick connect登入。若右邊的欄位出現資料,則表示你已經成功連線到網路空間了。請在右邊欄位中找到 public_html 的資料夾,那將是你的網頁點進來之後的內容。

!重點!

在上傳的時候請特別注意,根據我幾次失敗經驗,我建議大家用下面的操作方式:

  1. 請在右手邊欄位刪除掉public_html當中所有其他的內容,意即,index.php或其他資料都請點選後右鍵刪除
  2. 在空的public_html中上傳檔案,才會直接在顯示在你的網址頁面中
  3. 左手邊的欄位全選 「新資料夾」-> 「wordpress」中的所有資料,請注意不是上傳wordpress那個資料夾,而是他裡面的資料
  4. 如果按照這方式上傳,成功的話會直接看到public_html中有一大堆散落的wp-admin, wp-content…資料,這樣才成功

接著,確定Filezilla跑完所有的資料上傳後即完成這項步驟。(須等待10–15分鐘)

5. Wordpress初始設定

恭喜你,如果你一路走到這一步的話,那麼剩下的事情就完全不需要你傷腦筋了。在完成耗費時間的第四步驟之後,這時候我們可以測試一下我們的網址是否已經ready to go。由於當時沒有及時截圖因而以下引用電腦王阿達的圖片(沒有任何侵權意圖,僅供大家參考。)

你如果在瀏覽器中打入自己的網址後看到這個畫面,就表示你剛剛上傳wordpress系統成功了!

接著,你必須將你在前面步驟所累積的資料,一齊提供給wordpress的安裝檔案。你需要的是:

  1. mySQL資料庫名稱(第四步驟)
  2. mySQL帳號名稱(第四步驟:資料庫使用者)
  3. mySQL密碼(第四步驟:資料庫使用者密碼)
  4. 資料庫主機位置:若你是按此文章使用freehosting.com的話,請選擇維持原樣localhost
  5. 資料表前綴:這無需做任何更動噢!

送出資料後,若有資料庫相關的問題則會直接顯示,若沒有的話就可以直接安裝了。

接著,我們順利進到網頁設定畫面了。在此,可以設定網站的標題、使用者帳號與密碼、電子郵件等個人資料,這就是未來用來登入網站後台的資料。填寫完畢之後點選「安裝wordpress」。

成功的話,就可以到wordpress後台登入頁面(通常是你的網址後面加上/wp-admin 即可)來登入自己的網站了!

到這邊,終於大功告成!一切辛苦的過程終於換來成就感了吧。

參考資料:


以上,就是我這次的架站教學與全記錄。由於當時自己還有幾次試錯,因而有些畫面就沒有及時截圖,可能沒有辦法讓大家參考。但我希望文字本身夠清楚詳細,如果大家按照這步驟有遇到任何問題的話,也歡迎告知我噢:)
最後說一聲,我覺得自己寫網站的樣式也是非常有趣的過程呢。有機會再分享給大家。

希望大家都架站成功!