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

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

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

WordPress 又有分WordPress.com 跟 WordPress.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)

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