免費網頁空間 – 000webhost 免費虛擬主機,WordPress 網站架設教學

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – 免費網頁空間 – 000webhost 免費虛擬主機,WordPress 網站架設教學,架設網站前準備的首要功課,就是為網站找一個 “家”,可以放置以 PHP 為基礎,HTML 為主體的網頁資料,並能將網站內容在網路上正確而完整顯示,這樣存放網站資料的空間就稱之為虛擬主機 (Virtual Hosting ) ,而虛擬主機的運作原理,大致上而言就是在虛擬主機的空間邏輯基礎上共用CPU與記憶體,並透過核心運算統一分配主機資源給不同的網站,達到單一主機架設多網站的功用。
而本次教學的主旨,就是如何在免費虛擬主機上架設 WordPress 網站, 鵠學苑所推薦的免費虛擬主機是 000webhost 這個國外虛擬主機,000webhost 是由 HOSTINGER 這個在全世界超過 30 個國家提供免費網站架設虛擬主機空間的旗下產品之一,HOSTINGER 本身在虛擬主機服務的領域已發展多年,無論是在主機連線穩定性、PHP 版本相容性、MySQL資料庫支援度都不是目前市面上其他免費虛擬主機可以比較的, 而 000webhost 也承襲了HOSTINGER 具有高度穩定性的特點。
但在 000webhost 註冊後申請的免費虛擬主機帳戶,具有一些限制,像是有 10GB 流量限制、1GB的網站空間、網站架設數量限制為2等,如果說想要獲得更多功能,可以選擇升級付費方案,但對於練習網站架設、測試(除錯)網站內容、程式語言編輯學習等目的而言,免費帳戶就可堪使用了,不需要考慮到付費的部分。如果說目的是要架設長期經營的上線品牌網站,可以參考這一篇文章:VPS 雲端主機架設網站,提升十倍載入效。接下來跟著鵠學院的腳步,讓我們開始學習吧!
(小提醒:鵠學苑的本次教學以如何申請免費網頁空間虛擬主機帳戶與架設網站為主,詳細專有名詞解釋與設定方式可在實作中自行查找與練習)

000webhost 免費架站網址
https://www.000webhost.com/

了解如何在 000webhost 註冊帳號及架設 WordPress 網站

第一步:進入到 000webhost 網站,點選左上角的 Free Sign up 開始註冊帳戶。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

註冊表格非常簡單,輸入電子信箱 ( 等一下要收驗證信,請確保是真的可以收信的有效信箱 )、自定義登入密碼以及網站名稱就可以完成。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

網站名稱( website name )的部分輸入之後在下圖藍色方框標示處會有預覽網站網址所呈現的樣式,在 000webhost 中架設的網站網址中的網域名稱都會以 000webhostapp.com 作為結尾,比如說在 website name 欄位中輸入 school-hu ,網址就會是 school-hu.000webhostapp.com。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第二步:到註冊時輸入的電子信箱確認是否有收到如下圖的驗證信,點選 Verify email 就會導向圖二的畫面,至此註冊程序完成。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第三步:在 000webhost 網站登入後的會員控制頁面上方點選 Build website,會進入到以下畫面,有三種方式可以建立網站,第一種是以 000webhost 做為網站 CMS 來做內容編輯,第二種是一鍵安裝 WordPress ,會有 WordPress 網站後台系統及所有功能,第三種是將 HTML 網站檔案透過 File manger 上傳以建立網站。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

本篇教學以安裝 WordPress 網站為主,在下圖中點選 Install now 的按鈕

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第四步:如同一般安裝 WordPress 必須先在資料庫中建立登入帳號密碼一樣,在 000webhost 安裝同樣也需要此一步驟按照順序輸入登入名稱、密碼,並在 language 的欄位選擇繁體中文,如下圖一及圖二所示。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

等待 WordPress 安裝完成,就筆者的經驗而言,000webhost 安裝 WordPress 實在相當快速,省略掉非常多的步驟,對於網站架設初心者而言非常方便。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第五步:進度條跑完後會跳轉到以下畫面,點選藍色方框標示的紅色按鈕就可以進入到 WordPress 後台登入畫面。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第六步:登入畫面就是使用剛剛設定的帳號密碼來進入 WordPress 後台,在畫面右下角會有 000webhost 的圖示,表示是以 000webhost 架設網站。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第七步:進入到 WordPress 後台可以在外掛的地方看到已經預先裝好 All in one WP Migratiom 網站搬家外掛,詳細教學可參考:All In One WP Migration 教學 WordPress搬家 及 網站備份外掛

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

在主題的部分也有預先裝好一個網頁範例,可以直接開始新增網頁內容或者是安裝別的佈景主題。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

000webhost CPanel 網站設定選項解說

第一步:回到 Build website 頁面,簡單介紹使用 000webhost 內建編輯器來建構網站的方式。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

使用 000webhost 建立網站必須先選擇網站模板( template),在下圖標示處可以看到有許多不同網站主題模板,可以根據網站性質來導入相關類型的網站佈局。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

000webhost 的編輯器名稱為 ” zyro “,通過拖拉放的方式將網站內容元素加入到網頁中,全視覺化編輯頁面,適合架站新手使用。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第二步:Set web address 是可以設定網址,下圖中 Own domain 是指使用已經購買好的網址或已申請的免費網址 ; Buy domain 則是在  000webhost 直接購買網址,選定頂級域名後會列出可選則的域名及價位提供選擇,與一般購買網址的流程差不多,如果説有打算要在 000webhost 付出一定金額升級專業版並長久經營網站,可以考慮在此購買。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

 

點選 Own domain 後會跳出下圖的詢問框,內容大概是付費升級專業版可以挑選網址並且移除 000webhost 標示等,點選藍色方框標示的文字即可關閉。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

Park Domain 這一步驟就是設定自己想要顯示在網站上的網址名稱,下圖中 hu-school.tk 是筆者在 freenom 中申請的免費網址,用來作為教學範例。另外在此簡單解釋一下什麽是 Park Domain ( 網域指向 ),在上一個小節有提到,在申請帳號時所設定的網站名稱會是 school-hu.000webhostapp.com ,網址看起來非常的複雜,不好記憶,如果想要更換網址的話就可以利用 Park Domain 功能,將購買或申請的網址透過寄存到虛擬主機中,那麼無論從哪一個網址進入到網站都會顯示相同的內容。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

以這次教學的例子來說,如果正確的設定 Park Domain 就會出現如下圖中標示的欄位,無論是 hu-school.tk 或者是 school-hu.000webhostapp.com 在瀏覽器上都會呈現一樣的內容,另外如果想要購買網址可以參考這一篇教學文章:網域查詢及網址申請教學 流程,快速申請專屬網址名稱,架站必學知識!

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第三步: 在 000webhost 中 File manager 就相當於 CPanel 中的 FTP 上傳,也就是進入到網站資料庫中修改網站檔案。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

在上圖點選 upload files now 就會進入下圖畫面,所有操作按鈕都在方框標示處。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

筆者以上傳 robots.txt (對搜尋引擎宣告網站可索引內容的檔案)作為範例,點擊 upload files 按鈕後透過選擇檔案或拖拉檔案的方式來上傳,如圖二所示很快就完成上傳動作。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第四步:Manage Databases 是修改 MySQL 資料庫時會用到的選項,可以進入到 phpMyAdmin 的介面做修改,或者新增一個資料庫,基本上對於一般網站管理者而言這個部分比較不需要做修改。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

MySQL 資料庫設定畫面

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第五步:Manage emails 當我們在 000webhost 中建立網站後,會需要為網站設立一組服務用的電子信箱,再透過 Manage emails 的電子信箱轉發器將信件轉至我們指定的信箱,要知道的是 000webhost 的免費版帳戶是沒有建立網站信箱收信功能,只有付費升級後才能具有網站收信功能。另外指定轉發電子郵件位址在免費賬戶中最多只能設定五組。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

下圖就是設定網站信件轉發的畫面,筆者將網站電子信箱定義為 service@hu-school.tk,並在 Foward  to 欄位中設定想要收到電子郵件的信箱位址。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

設定完成後會在下圖中的位置出現已設定的電子郵件轉發位址資訊。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

以另外一個信箱測試是否能夠順利轉發成功。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

在指定的信箱順利收到測試郵件,至此完成網站郵件轉發設定。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第六步:000webhost CPanel 中最後一項 Settings 很多細向設定,筆者將挑選重點跟各位介紹。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第七步:Website Settings 中比較重要的項目以下列出:

  1. FTP details:如果想要具有上傳檔案的功能必須要將此選項打開,在其右方資訊欄中也會提供登入 FTP 的帳戶名稱,基本上與網站登入的帳號密碼是一樣的數值。
  2. Password:變更網站及 FTP 的登入密碼。
  3. PHP version:變更 PHP 的版本,如果說是使用匯入資料的方式建立網站,要特別注意 PHP 版本相容性,不然很容易導致網站出問題。
  4. Category:選擇網站所屬類型,比如:盈利事業、教育單位等…
  5. Repair my Website:當遇到網站問題時可以點選此選項提供的按鍵來修復網站,一個小時只能點選一次。
  6. Reset website / Delete website:重置網站所有設定 / 刪除整個網站。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第八步:Statistics 網站的統計數據,這裡詳細記錄所有網站的狀況,如果只是使用免費版架站練習,這裡的數據可以忽略不計,但要注意的是之前提到的流量及磁碟空間限制在這裡會做出統計,因此如果網站出了狀況,可以先到這裡看看是否有項目的基本上限達到了。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第九步: Security 免費版本有三種網站安全防護功能,以下介紹:

    1. Manage IP addresses:阻擋特定 IP 位置的使用者連線到網站,可以防止一些惡意程式或垃圾留言的入侵。
    2. Manage hotlink protection:保護網站檔案不有心人士盜取連結,比如防止圖片、文章等被惡意轉發。
    3. Manage password protection:設定特定網站目錄資料夾需要帳號密碼才能夠開啟,受保護的資料夾其子目錄中所有檔案在開啟時都需要帳號密碼。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第十步:Manage redirects 重定向網頁網址,當網頁內容有做更動或者網站內部有失效的連結,都可以利用此功能來修復並重定向網址。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第十一步:Redirect From 是輸入要被重定向的網址,像是失效連結, Redirect To 輸入要定向的網址,比如更換名稱後的新網址,而下方的 301 及 302 以列表做解釋:

  • Permanent (301):永久轉址,舊的網址已刪除或者為無效連結,請使用此選項。
  • Temporary (302):暫時轉址,舊的網址所連結的內容要做修改,但在修改期間不希望被瀏覽者觀看,並且想保留舊的網址,就可以使用此選項來將網址暫時轉到其他頁面。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

第十二步:Website Logs 所有網站的修改記錄都會存放在這裡,如果網站是多人共用管理,那麼就可以在這裡觀看修改記錄。

免費網頁空間 - 000webhost 免費虛擬主機,WordPress 網站架設教學

結語:

在第二小節的網站設定中其實還有 Backup ( 備份網站 )這個相當重要的功能,可惜的是必須要付費到專業版才能具有,但如果是使用 WordPress 架設網站,就可以使用備份外掛來做替代。另外在最後筆者想要給初次架設網站的朋友一些小建議,如果說是想要建立一個比較正式的網站,比如形象網站、品牌網站、電子商務網站、專屬部落格等,不建議使用免費虛擬主機以及免費網址來建立,先不說免費的流量及網站空間限制,當網站資料日積月累後所造成的麻煩,光是那一天要收起來不做了都無法掌握,到時候辛苦經營的網站流量都將付諸流水。今天的教學到這裡告一段落了,不要忘記持續關注鵠學苑的最新文章,想學習超詳細的WordPress攻略嗎??來 鵠學院 就對了!我們下次的教學見~

WordPress相關教學文章:

網站資訊文章推薦

Google Search2020再進化,如何提升網頁品質?
重複內容 會影響SEO?如何正確把內容分享到社群平台!
網站架設打造高流量的形象網站細節及關鍵因素!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

返回頂端