[教學]如何用 XAMPP 在自己的電腦架設第一個網站

Ray
6 min readAug 23, 2021

--

本篇將教學在 WINDOWS 10 安裝 XAMPP 這套網頁伺服器架站工具來建立 PHP 開發環境。

XAMPP 可以讓開發者輕鬆地在自己本機架設虛擬網站,做為平日開發、測試使用。而且是免費的!

步驟 :

  • 1. 下載並安裝 XAMPP
  • 2. 建立網站資料夾
  • 3. 設定 hosts 與 vhost
  • 4. 放入網站內容並在瀏覽器打開

1. 下載並安裝 XAMPP

首先到 XAMPP 官網下載安裝檔 https://www.apachefriends.org/zh_tw/download.html

如果不曉得要下載哪個 PHP 版本就選擇第一個吧 ~

下載下來後執行檔案開始安裝,不知道選哪些就按照預設的設定按 next 就好。(怕C槽太滿路徑可以改成 D:\xampp )

安裝完成按 Finish,然後就會看到 Apache 控制台(如果沒有自動開啟可到「開始」或安裝的路徑打開),點一下 Apache 的 Start 看能不能順利啟動。

這樣子 XAMPP 就安裝完成嘍 ~

2. 建立網站資料夾

接下來要在本機上建立你的網站要放的資料夾。資料夾名稱就取你想用的網址(mywebsite.com),最好是用英文數字來命名,應該很少看到別人網站的網址是中文的吧。也不要取跟平常會上的網站的網址一樣,你會發現你的電腦再也去不了那個網站,而是變成你自己的虛擬網站。

我的習慣是在C槽或D槽底下建一個web資料夾,把所有的專案收納進裡面。

3. 設定 hosts 與 vhost

接著要來設定 hosts 與 vhost,讓我們在本機的瀏覽器上可以用自己的網址開啟網站。當然只有你的電腦可以,可不要把網址傳給朋友叫他開來看看唷 ~

WINDOWS 的 hosts 檔案路徑在 C:/Windows/System32/drivers/etc/ 裡。

找到 hosts 檔案,因為有權限問題,我們沒辦法直接在這個資料夾編輯檔案,所以先將它複製一份到桌面,然後用記事本打開它。

打開後加入這行 127.0.0.1 mywebsite.com(你的網址) ,意思是當我們在瀏覽器輸入mywebsite.com後會自動開啟127.0.0.1這個IP的伺服器主機。如果想讓某個網址指向某個DNS位置,也可以透過這方法。 加上後就儲存檔案並關閉,然後將桌面的 hosts 拉回 C:/Windows/System32/drivers/etc/ 裡取代掉原本的 hosts,此時會跳出系統管理員提示,請選擇繼續。

設定完 hosts 之後現在來設定 vhost

vhost 檔案的路徑在 XAMPP 資料夾內的 apache/conf/extra/ 裡面。

找到 vhost 檔案直接用記事本開啟它,並在最下方加入以下這段程式碼。

<VirtualHost *:80>
<Directory C:\web\mywebsite.com(你的資料夾路徑)>
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order Deny,Allow
Allow from all
Require all granted
</Directory>
DocumentRoot “C:\web\mywebsite.com(你的資料夾路徑)”
ServerName mywebsite.com(你的網址)
ServerAlias mywebsite.com(你的網址)
</VirtualHost>

之後如果要開多個站一樣加這段程式碼就可以了 ~

加好後儲存並關閉檔案,這時我們需要將 Apache 重新啟動,之後每當有編輯 vhost 檔案時都必須將 Apache 重啟才會生效。

打開 Apache 主控台,把 Apache 給 Stop 然後再重新 Start 一次。

這樣 hosts 跟 vhost 就都設定好了,辛苦了 ~ 剩下最後一步就可以架好你的虛擬網站了 ~

4. 放入網站內容並在瀏覽器打開

好了,所有事前準備都完成了,現在可以在你的資料夾內放入網站內容。

如果你還沒有編輯器可以用的話,可以先直接用記事本建立一個新的文件。(建議可以找一個習慣的編輯器在開發上會比較方便)

加入以下程式碼:

<?php
echo “恭喜你成功建立了第一個網站:)” . “<br/>”;
echo “現在時間:” . date(“Y-m-d H:i:s”);
exit();
?>

我會建議這段程式碼不要用複製貼上,實際自己打出程式碼會比較有印象:)

寫好後儲存到你的網站資料夾內,檔名取 index.php,注意副檔名是 php 不要變成 index.php.txt了。(網址若沒有特別指定路徑,通常都會自動去找目錄裡的index檔案)

現在可以打開瀏覽器,用你的網址打開你的網站看看吧 ~

(時間如果是錯的是因為 php.ini 的時區沒有設定,這就留給各位自己研究了)

以上就是在 WINDOWS 安裝 XAMPP 的教學,之後就可以在自己本機練習開發了。

如果想做網站但不知道怎麼下手,建議可以去colorlib之類的網站下載免費樣版,直接用別人做好的樣版來修改練習會學得比較快也有個方向。

--

--

Ray

This is Ray, loves technology and also enjoys life.