初出茅廬:WordPress.org 網站架設(一)

設計師通往架設自己網站的道路
自家電腦當網站伺服器 \ Domain name \ 網站初步架設

何佳泓
何佳泓
Sep 2, 2018 · 11 min read

自己架設的網站,已是一件很普遍的事,以往要架設網站需要找網站公司來幫你寫,而現在市面上以出現很多可以架設網站的網站(WordPress、Wix、Weebly、 Shopify、91App、Shopline、meepShop…),而且有很多也都有加入了電子商務的功能。WordPress因為有很多可以擴充的套件可以用,基本上要什麼功能都可以找到套件,直接加入使用,減少很多開發上的時間。Wordpress的統計到2017年,全球使用WordPress製作的網站就有7500萬,包含紐約時報TechCrunchMercedes-Benz也都是用WordPress架站。在2018年市占率達30%也讓 WordPress 成為 CMS 市場上市占率最高的軟體

WordPress 又有分WordPress.comWordPress.org"WordPress.com 與 WordPress.org? 這兩個之間有什麼差異?" 這篇寫的蠻清楚的,有興趣的可以連進去看。我最後選擇的是用WordPress.org來架設,能修改的東西比較多,限制比較小,但相對的很多東西都要自己來,所以這篇就是要跟大家分享在我鼓起勇氣踏入這個未知世界後,踩了一堆坑所學到的知識,希望大家看完這篇就能架設出屬於自己的網站!!

為了讓大家都一定能做出來以下使用的軟體都有免費的

以下開始進入正題....

網站會需要一個空間將你的網站資料庫放在裡面,你可以選擇
在自己的電腦上架設一個虛擬伺服器或架設在網路上的虛擬主機,
那這篇會先以架設在自己的電腦為主,後面會補充架設在虛擬主機上的流程。

整體流程:先在電腦上裝上虛擬伺服器,將WordPress.org的架站包放進去,環境設定好之後,設定WordPress的網站基本資訊,就算完成了你的基本網站,再來如果要對外開放跟Domain name,就要在做些設定,將你申請的網域指向過去~你的網站就能對外開放搂~就算大功告成~

第一步:架設虛擬伺服器

先從 Xampp 網頁伺服器架站工具 下載(我載的是 5.6.36/PHP 5.6.36)

安裝的時候全選
我安裝在D:\xampp
安裝完之後將Apache跟 MySQL 按 Start
按下Start後左邊的字就會有綠色的框出現了 表示成功 ~~

第二步:將WordPress.org的架站包放進去伺服器中

WordPress.org架站包 下載最新版本(我載的是4.9版)
下載好之後將壓縮檔的資料全部複製進 D:\xampp\htdocs
(htdocs裡原本的資料可以都刪掉)

這時你在google上輸入127.0.0.1 應該就會可以看到這個畫面

第三步:環境設定 - 新增資料庫

在網站上輸入127.0.0.1/phpmyadmin/ 你會進入到 MySQL的資料庫管理工具

MySQL的資料庫管理工具
在右邊新增一個資料庫
資料庫的地方輸入你自己要訂的資料庫名稱 右邊選 utf8_general_ci 在按下建立
右邊會出現你剛新增的資料庫,點選他,在上面切換到"權限",在按下新增使用者帳號
帳號:admin、主機名稱:主機、全域權限:全選打勾 都改好之後按一下右下角的執行

第四步:環境設定 — WordPress安裝設定

在網站上輸入127.0.0.1

WordPress安裝設定畫面
輸入剛剛在資料庫輸入的資料(資料表前綴可改可不改) ,完成後 送出
按下執行安裝
輸入網站基本資料,輸入完之後按 安裝WordPress
完成設定拉~ 這時就可以開始登入了
輸入帳密,就可以登入後台,之後要登入後台 就打:127.0.0.1/wp-login.php
後台畫面
你的網站初步完成了 ~ 在網址上輸入:127.0.0.1 應該就可以看到你的網站的畫面了 ~

第五步:設定對外開放連線 - 固定IP

要對外開放,需要先知道你電腦的固定IP,如果你家是只有一台電腦從外面牽線直接插在你的電腦上的話,只要透過"查詢固定IP" 查到電腦的固定IP就是你的IP就結束了,但通常都會是透過路由器轉接出來就要設定好固定IP。

先到控制台的網路和共用中心(1)點乙太網路、(2)點內容、(3)點網際網路通訊協定地4版(TCP/IPv4)、(4)輸入框內的內容(在開始的地方輸入CMD 找到命令提示字元,輸入 ipconfig 找到紅框的地方 資料就從這邊填過去)(IP位置最後一個數字可以填 0 - 255 之間的數字)p.s.在同一個網路底下每台電腦的IP不能重複歐

設定固定IP
命令提示字元 資料參考的地方

第六步:設定對外開放連線 — PORT設定

以ASUS的路由器為例
登入你的路由器 (1)點外部網路 (2)虛擬伺服器 (3)新增新的Port

通訊埠範圍跟本地通訊埠 http預設是80port,所以一般可以輸入80port就好,但因為我的80port已有使用過所以我輸入9999 (1024–65535之間)

如果你跟我一樣port 不是使用80port的話 就要進資料庫更改 (使用80port的可以跳到第七步驟)

打開xampp control panel 找到Apache 的 Config 點Apache(httpd.conf)

把藍字框起來的地方改成你設定的port 然後存檔
重新啟動Apache

第七步:設定對外開放連線 — 網站網址設定

在網址上輸入http://127.0.0.1/wp-admin/
如果不是預設的80port 要改成 http://127.0.0.1:9999/wp-admin/
(9999換成你的port)

找到設定/一般
將wordPress位址(URL)跟網址位址(URL) 都改成 ”固定IP”
記得"wordPress位址(URL)跟網址位址(URL)這兩個網址一定要一模一樣"不然會出事
如果不是預設的80port 後面要加上 :你的port

這時你可以在任何一台電腦上輸入固定IP,以我的網站為例就輸入http://211.23.119.186:9999,就可以連到你的網站~

走到這裡就可以跟你的朋友分享你的網站了 XDD

第八步:設定對外開放連線 — Domain name設定

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

在第七步時就可以讓大家連到你的網站了,但需要輸入你的固定IP, 我們要將這些美化,就需要一個另一個名子來包裝。舉個例子:google的固定IP是 108.177.104.94,你可以在網址上打 108.177.104.94一樣可以找到google但你通常會輸入google.com.tw,來找到google。

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

也有其他類型的網址

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

我們這次是申請免費的網域名稱,在freenom 免費網域申請

進入freenom 點選右側登陸 註冊帳號
在中間直接輸入想要的網站名稱 按右邊的按鈕
找到你要的網名後 按右邊的馬上獲取
右邊會變綠色的 再按付款
在右側選擇你要租這個網域的時,最長是1年免費,所以一年後要再重新申請 選好後按下Continue
填寫基本資料後 按 Complete Order
到這裡表示你已獲得你的domainname了,再來就要讓這個domain指向到你的網站
回到開始畫面找到services的My Domains
選擇Manage Domain
填上你的固定IP 完成後按下Save Changes

第九步:設定對外開放連線 — 網站網址 與 Domain 串聯

這步驟跟第七步一樣,只是要將打入的固定IP改成你的Domain name

在網址上輸入http://你的固定IP/wp-admin/
如果不是預設的80port 要改成 http://你的固定IP:9999/wp-admin/
(9999換成你的port)

找到設定/一般
將wordPress位址(URL)跟網址位址(URL) 都改成 ”你的Domainname”
然後一樣記得"wordPress位址(URL)跟網址位址(URL)這兩個網址一定要一模一樣"不然會出事,如果真的出事了參考底下的補充一
如果不是預設的80port 後面要加上 :你的port

照片中的網址是我之前做的所以有點不一樣,不要介意XDD
這時你可以在網址上輸入你的新網址了~

第十步:擁抱你的新網站,開始下一段的旅程

完成以上九個步驟後,你就可以在世界各地連到你的網站了~

下一步就是將你的網站,開始加入屬於你的內容!!

下集待續….

補充一:wordPress位址(URL)跟網址位址(URL)兩個填的不同,而連不進去

如果很不幸的你因為wordPress位址(URL)跟網址位址(URL)兩個填的不同不小心存檔,而連不進去,請找到wp-config.php檔案。用記事本編輯。

並加入以下程式碼:
define(‘WP_HOME’,’http://127.0.0.1');代表wordPress位址(URL)
define(‘WP_SITEURL’,’http://127.0.0.1');代表網址位址(URL)

改過之後,之後要改網址就都在這裡改。

何佳泓

Written by

何佳泓

從設計的角度擁抱程式,走進互動世界

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade