# **【本地端架設 ＷordPress 測試 : XAMPP Apache + MariaDB + PHP + Perl】**

:::info
- Xampp 本地端伺服器環境
- WordPress.org 下載副本安裝
- Wordpress 基礎功能設置
- Hosting（主機）商選擇
- WordPress 網站託管到伺服器
- 設置免費 email
- 設置 SSL
- Sub Domain
- 更改登入入口
- 綁定子網域到雲端服務商
:::

<br/>

筆記越記越多，自覺應該來用一個網站來分類，考慮維護方便、SEO友善，便決定架 WordPress，先使用 Xampp，再部署到 host 的方式來架設

## Xampp 本地端伺服器環境

為什麼使用Xampp? 單純以前轉職班做專案嘗試過

WordPress 是基於PHP的語言，我們需要一個能跑的環境。XAMPP 是一個免費、開源的網頁伺服器套件，由 Apache Friends 團隊開發，主要用來建立本地端（localhost）的伺服器環境，讓開發者可以在自己電腦上模擬網站運行

[XAMPP Apache + MariaDB + PHP + Perl](https://www.apachefriends.org/index.html)

這裡我使用 mac os 版本，載好後會跳出（點兩下）

要授權（點強制打開）

打開後
其他資料庫也一併安裝

安裝好後，應用程式出現如圖，點開.app檔
工具點選start

這時！啟動 mysql 失敗了，因為我本機端已經裝過 mysql，預設的 port 3306 已經被佔據，點右邊 Configure 改為 3307 就可以了

apache server 也指定一下，預設是 8080 ，因為我 8080 裝了其他東西，這裡設置為 8081

現在到瀏覽器輸入 localhost:8081 就會出現

<br/>

## [WordPress.org](https://wordpress.org/) 下載副本安裝

download

下載好的檔案拖曳到 htdocs資料夾解壓縮（裡面先清空）

回到 localhost:8081 就會看到

這時把wordpress資料夾裡面檔案都拖曳到htdocs資料夾，zip檔刪除，回到 localhost:8081 就會自動跳轉到

htdocs 資料夾權限更改

wp-content,themes, plugins 也權限更改

現在到瀏覽器輸入 localhost:8081/phpmyadmin 就會出現

滑到下方，點選新增使用者帳號

點選左邊new新增資料庫，取名為wordpress

回到 localhost:8081 點 Let's go -> Submit -> Run the installation
Log in

<br/>

## Wordpress 基礎功能設置

### 更改主題
Ｍac Os 要安裝主題，需要另外搭配編輯器更改php檔案

回到 htdocs，wp-config.php 用vscode打開，增加

define( 'FS_METHOD', 'direct');


<br/>

## Hosting（主機）商選擇

很多企業會把網站放上AWS、GCP之類的雲端，但考量到備份、不需要太多後端技術及成本，可以找主機商，市面上有很多可以選擇

網上很多中文教學文是用 Bluehost，但職業病總想選CP高的，比較下來選了 Hostinger
PS. 選美版 .com 官網購買，有看到網友用中文版 .com.hk 遇到網站常掉線的災情


網路上可以找到 10%off Coupon

註冊後會有讓你輸入 domain（也就是url）的地方，第一年Ｈostinger免費，輸入你想要的，看是否有被人註冊過

我註冊了 www.datavoyageio.com

等大約5分鐘，到 domain 確定有 active

網址輸入我們的 domain
出現這個畫面就成功了

點到 domain，只有第一年是免費，之後要記得 renew 付費

Hosting Plan -> Resources Usage 可以看用量

<br/>

## WordPress 網站託管到伺服器
分成兩步驟，託管網站、託管資料庫

第一步驟：託管網站

進到 Hostinger 的 Website -> Website list -> domain的Dashboard

File Manager -< Access files of 我的domain

會進到這個畫面

點 Public_html

打開後會看到就是我們網站的預設頁面

現在進到本地端的 htdocs 資料夾

把檔案都傳到 public_html 資料夾

點上方移動，所有檔案移到 public_html 下，再刪除 htdocs 空資料夾


第二步驟：託管資料庫
到後台 Database 創建


db、user、剛輸入的密碼，都複製貼到 wp-config.php



現在進到 phpMyAdmin -> 右下角 Enter phpMyAdmin

現在要做的就是把localhost的db import 進來

現在先進到 http://localhost:8081/phpmyadmin

點選資料庫後 -> 點上方匯出 -> 匯出 sql 檔案


回到 Ｈostinger phpMyAdmin -> 右下角 Enter phpMyAdmin

import 剛剛下載的 sql 檔案


點 wp_options，把localhost都換成自己的domain

現在輸入 我的domain/wp-admin 就可以順利進到後台了！

網站頁面

<br/>

## 設置免費 email

跟 domain ㄧ樣，第一年網站 email 也是免費



點進下方會讓我們設置email帳戶，登入後就可以寄信了

從 email -> Mailboxes -> Webmail 可以進到信箱


設置不同使用者
email -> Mailboxes -> Create a mailbox

<br/>

## 設置 SSL


第一個view點進去，上方改成 301.htaccess

More info 的按 x

<br/>

## Sub Domain

設置 Website -> Website List -> Dashboard -> Domains -> Subdomains




確認一下 SLL 是否有自動出現

file manager 會自動出現 Subdomain的資料夾

這次我使用 Auto Installer
[
]

輸入 subdomain/wp-admin

會跳到新的網站

<br/>

## 更改登入入口

最後，為了更安全，不讓他人輸入/wp-admin，就可以進到我們的後台登入入口

可以裝個 Plugin

紅色輸入想要換掉wp-admin的文字

這時候再回到前端，/wp-admin 就會是404

<br/>

## 綁定子網域到雲端服務商

前面提到 Sub Domain

既然都買網域了，可以來整合一下之前的 side project

這裡用zeabur
到 domain networking，private 輸入想要的子網域，會出現下面這串（Type, Name, Value）

hostinger 從 Domains profolio -> domain name 點自己的 url

DNS/Nameservers，輸入從 zeabur 複製的 Type, Name, Value

過5-10分鐘後到 [dns checker](https://dnschecker.org/) 輸入網址，看下面是否有出現 Value

zeabur 變成 PROVISIONED 就綁定成功了