用 Windows 10 架網站 ,完成部落格/網站的步驟

對於創業或樂於分享的族群而言,如何提高品牌知名度呢?吸引更多的潛在客戶和粉絲,的確是很大的挑戰。而自架網站雖然可以大幅壓低資金成本可以 100% 設計網頁排版,但是就要付出更多的時間在網站維護網路防護

為什麼選擇在 Windows 作業系統上架設專屬 WordPress 網站呢?因為對於微軟系統與 Windows 軟體的接受度較高,大部分都是使用圖形化介面(GUI)就可以完成操作了。這一點就大幅降低自架網站的門檻,不需要記憶眾多指令接觸不熟悉的 Linux 系統查詢如何編輯網站設定文件

架設網站費用有哪些呢?

自架網站前,先思考網站設立目的是什麼。當決定網站類型 ( 電商網站、部落格、形象網站、活動網站…等等 )之後,才能更明確地進行網站整體的規劃與準備相關資料。

Patti的窩 為例子,並非以電商網站活動網站為目的。所以,不會有備份網路用戶個資的需要。簡單講,在資料庫裡儲存的都是文章內容與圖片,畢竟自架網站的初衷就是以分享資訊為出發點。表 1就是架設網站成本的明細:

項目費用備註
電腦主機少於 2 萬硬體: 一次性費用
系統: Windows 10
寬頻網路1,299/月中華電信光世代
500M/250M
防火牆1) 5,000/次
2) 免費
1) 入門款:
DrayTek
2) 進階款:
軟路由
電費100/月電腦主機 24 運作
XAMPP免費架站安裝包
WordPress免費CMS
(內容管理系統)
1) 免費: No-IP
2) 付費: GoDaddy
1) 免費
2) 600/年
1) 30 天驗證一次
2) 每年續約
Let’s Encrypt SSL免費90 天更新一次
1) 免費佈景主題
2) 付費佈景主題
1) 免費
2) 1,400/次
1) 2023
2) OceanWP
(黑五折扣)
外掛免費SEO、分享、
備份、快取
客製化設定免費CSS、廣告位置
Google Analytics、
Apache 效能設定、
網路安全設定
網頁圖片設計免費Canva
網頁圖片壓縮免費Squoosh
表 1:架設網站成本清單

5 套免費網站架設軟體

使用過 XAMPP、Bitnami、WAMPServer、MAMP、Local 這 5 套 Windows 架站安裝軟體後,結論會建議大家優先考慮 XAMPP 這一款安裝軟體。

17 架網站 xampp mapm bitnami wampserver local
5 套免費網站架設軟體

XAMPP

剛開始自架網站的時候是安裝 XAMPP ( 32bit ),但是都會遇過某一個外掛經常造成【 記憶體不足 】,試了好多方法都無法解決問題,所以才轉換成 XAMPP ( 64bit ) 來試試看,結果就不曾再發生【記憶體不足】的現象了。

錯誤碼:
Fatal error: Out of memory ( allocated 13107200 ) ( tried to allocate 458752 bytes ) in C:\ xampp \ htdocs \ tomchun \ wp-content \ pluginsa3-lazy-loadadminadmin-interface.php on line 2878

官網:https://www.apachefriends.org/zh_tw/index.html
缺點:XAMPP ( 32bit ) 會造成網站不穩定
優點:
1). 安裝方便
2). 網路中、英文資料很多
3). 軟體開發商幾乎每個月都會提供新版本安裝包
備註:安裝 XAMPP 似乎是不會遇到問題才對,記得將 Windows 防火牆【允許】Apache 與 mySQL 程式的網路存取權限。

MAPM

MAMP 是以 MacOS、Apache、MySQL 及 PHP or Python 的字首結合的開發工具,但也有支援 Windows 系統。版本分成免費版與付費版兩種,很多人都選擇 MAMP 免費版來使用。
曾經試著想改用這一套 MAMP 安裝包,看上它可以切換成 Nginx 網頁伺服器的功能。但是,後來爬文發現, 在 Windows 平台,Nginx 和 Apache 沒有太大的差異,就打消念頭了。另一個原因就是論壇中討論的結果都是說 Apache 相對於 Ngnix 穩定,問題 (Bug) 也比較少。對於新手而言,穩定、不出錯的確比效能來的重要。
官網:https://www.mamp.info/en/windows/
缺點:遇到 MySQL Server 開不起來的問題,最後就放棄了。

Local

在本地電腦安裝 WordPress 後,方便編輯然後再上傳到租的虛擬主機中。但是,這套軟體好像不適合將本機電腦的網站推上線服務,所以也沒再繼續使用了。
官網:https://localwp.com/
缺點:找不到方法解決將網站上線。試了幾天後,就放棄了。

WAMPServer

WAMPServer 是一款由法國人開發的 Apache Web 伺服器、PHP 解釋器以及 MySQL 資料庫的整合軟體包。剛開始使用的時候,覺得好像很容易上手。久了之後,就會發現檔案路徑並不容易找到。
官網:https://www.wampserver.com/en/
缺點:1). 安裝包的更新似乎不如 XAMPP 頻繁。2). 檔案路徑並不容易找到。

Bitnami

Bitnami 在安裝過程當中,無法使用指定的 WordPress 資料表的前綴名稱。假使想要修改的話,需要具備專業知識來進行修改,這一點就不適合新手來操作了,動到資料庫可是很危險的事情,一個不小心可能會把網站整個毀掉。想要參考如何安裝 Bitnami 的話,可以參考: 在 Windows10 安裝 Bitnami WordPress
官網:https://bitnami.com/
缺點:安全性考量,無法更改 WordPress 資料表的前綴名稱

選用 WordPress 架站的理由

挑選 Wordpress 來建置自己的形象網站,最棒的地方在於有很多免費的佈景主題、外掛程式可以使用。而且使用 WordPress 架站的人也很多,所以當遇到問題時,幾乎可以在網路上找到答案,解決自架網站遇到的問題。

WordPress 程式下載:https://tw.wordpress.org/download/
佈景主題: 免費
外掛程式: 免費
問題諮詢: 免費 ( Google 大師 )
優點:
1). WordPress 架站有助於 Google 排名
2). WordPress 網路學習資源很多
3). WordPress 是一個開放資源
4). WordPress 架站,採用視覺化編輯方式
5). WordPress 可用來架設部落格網站、形象網站、企業官網、個人網站、電子商務網站

浮動 IP 可以透過 No-IP DDNS 免費架站

假使家中的寬頻網路屬於浮動 IP 的話,可以先到 No-IP 網站申請帳號,使用免費方案的 DDNS 服務,再下載 No-IP 專用的 DDNS 自動連線程式,也可以實現自架網站的目的。假使要長期經營網站的話,建議還是購買專屬的域名。
官網:https://www.noip.com/
服務:提供免費方案與付費方案
免費方案限制:
1). 一個帳戶只能註冊三個主機名稱。
2). 只能使用標準 DNS 服務,不能使用高級 DNS 服務。
3). 每 30 天需要確認一次帳戶,否則主機名稱將被刪除。
4). 每次動態 DNS 更新後,需要等待 30 分鐘才能再次更新。
DDNS 軟體名稱:Dynamic DNS Update Client (DUC) for Windows
DDNS 軟體下載網址:https://www.noip.com/download?page=win
備註:No-IP DDNS 免費方案申請,可以參考自架網站的流程章節中的【免費Let’s Encrypt SSL憑證】。

免費取得 Let’s Encrypt SSL 憑證

SSL 數位憑證就是當我們在上網時,瀏覽器網址列最前面出現的【綠色鎖頭】符號,這就是網路傳輸的安全協定。SSL 憑證除了可以保護網站資料不外洩,讓使用者更信任您的網站之外,還能讓網站優化提高 Google 搜尋的排名!

免費 SSL/TLS 憑證的發行單位:
1. Let’s Encrypt: https://letsencrypt.org/
2. Certbot: https://certbot.eff.org/
3. Free SSL Certificate: https://www.freesslcertificate.org/
備註:SSL 憑證申請有點複雜,可以參考自架網站的流程章節中的【免費域名:NoIP DDNS】。

網站架設教學:CMS WordPress 與 XAMPP 設定

基於網站安全性考量與客製化需求,某些檔案的確需要更改預設的設定值。基本的設定值更改,會統一放在【自架網站常見問題】章節中,提供給大家參考。在這個章節中,會分享幾個進階設定,相信你也能快速架設網站並讓網站成功上線。

如何更改網站域名?

剛開始使用 WordPress 自架網站時,是申請免費域名來實現免費網站架設的目的。但是讓我決定花錢買一個專屬域名的原因就是: 免費域名,常常會被其他申請者連累,讓社群網站認定是【惡意網域】,導致無法將文章分享到 Facebook、Google 相關服務。

如何將舊網站資料庫改成新的網域名稱呢?首先,開啟 XAMPP 控制面板,然後登入 phpMyAdmin

05-Astra-theme-網站搬家與網頁速度的調整心得-XAMPP-控制面板
登入 phpMyAdmin

在 phpMyAdmin 首頁中,按照下列順序操作(記得先完成資料庫與網站資料的備份!):

  1. 點選 WordPress 資料庫
    • 也就是 WordPress 網站所使用的資料庫名稱
  2. 點選 SQL
  3. 輸入 SOL 指令
    • 範例在圖片下方,直接複製執行
  4. 點選執行
08 Astra theme 網站搬家與網頁速度的調整心得 mySQL 更新網址
SQL指令: WordPress 網址異動(程式碼如下)

將下面範例中的 https://hipay0.com,改成您目前正在使用的網址
然後在新網址中,改成您未來要使用的新網址。(例如: http://123.mehttps://xyz.co)

UPDATE wp_options SET option_value=REPLACE(option_value,’https://hipay0.com‘,’新網址‘);
UPDATE wp_posts SET post_content=REPLACE(post_content,’https://hipay0.com‘,’新網址‘);
UPDATE wp_posts SET guid=REPLACE(guid,’https://hipay0.com‘,’新網址‘);
UPDATE wp_postmeta SET meta_value = replace(meta_value,’https://hipay0.com‘,’新網址‘);

添加 Google Analytics WordPress 追蹤碼到 WordPress 自架網站

登入您的 Google 帳號後,進入 Google Analytics 開始申請:
1). 首先設定帳戶ID,下方選項保持預設設定即可
2). 勾選網頁的選項
3). 設定網站名稱,網站位址就是您要追蹤的網址(把您的域名貼上來),產業類別請您自行選擇,報表時區選擇臺灣時間,之後就建立成功了

接著參考下圖,前往 Google Analytics 的畫面點選左下方的管理,進入後找到【追蹤資訊】,在下方可以看到【追蹤程式碼】,點開後就可以看到您的追蹤碼了

12 如何加 Google Analytics WordPress 的追蹤碼
Google Analytics WordPress 的追蹤程式碼

基本上,我們就是要把下面程式碼加到 WordPress 網站中。

13 全域網站代碼 (gtag.js)
全域網站代碼 (gtag.js)

打開 header.php (路徑在: C:\xampp\htdocs\wp-content\themes\oceanwp\ ),把上圖的程式碼全部貼在 <head>的下方,然後存檔。請注意,利用這個方法後,就不需要再安裝其他 GA 外掛或開啟相關功能了,不然流量會重複統計。

14 add Google Analytics WordPress 的追蹤碼 到 oceanwp header php
加入 Google Analytics 的追蹤碼 WordPress OceanWP 佈景主題中

使用圖片外掛將網站圖片優化後,為什麼 pagespeed 還是有點慢呢?

一直困擾我很長一段時間,即使調整了 OceanWP 佈景主題中 CSS/JS 的設定、使用許多 Cache Plugins、換了圖片優化外掛….,也一直都看到在 Google Pagespeed Insights 的網頁速度測試結果都不怎麼理想。

最後,找到了原因,假使在網頁開啟的畫面中(above-the-fold),存在任何圖片的話,就必須將圖片的 ID 或 Class 加到圖片外掛(Smush)緩載入(lazyload)的選項裡。以我的例子為例,網頁開啟後有兩張圖片,一張是網站標示圖,另一張是背景圖片。所以在網頁中,點擊滑鼠右鍵開啟【檢查】的功能,將滑鼠上下移動,找到圖片使用的 ID 或 Class,將值複製下來,貼到 Smush 外掛中的【 Lazy Load】->【Classes & IDs】的欄位裡面。記得在值的前面要加上【.】代表是 Class,【#】代表是 ID。

15 使用圖片外掛將網站圖片優化後,為什麼 pagespeed 還是有點慢呢
使用圖片外掛將網站圖片優化後,為什麼 pagespeed 還是有點慢呢

Blog WordPress 網站上線前的最後步驟

分成兩部分說明,一個是【區域網路:網站只對內使用】,另一個是【網際網路:網站對外開放】。

區域網路:自架網站只對內使用

假使網站只在家裡區域網路使用的話,完成上述任一網站架設軟體與資料庫設定後,就可以在區域網路內使用了。
1). 不需要申請 SSL 憑證
2). 不需要申請 DDNS 服務
3). 不需要設定路由器通訊阜轉發。

下圖為例,直接在瀏覽器的網址列輸入架設網站那台電腦(PC)的 IP (192.168.1.2)後,就可以連到 WordPress 網站了。

08 免費架設任何類型網站 純區域網路內使用網站: 輸入 192.168.1.2
區域網路內使用網站: 輸入 192.168.1.2

網際網路:自架網站對外開放

一旦完成域名申請、DDNS 設定、SSL 憑證申請、 Virtual Host 設定、路由器通訊阜轉發 ( port forwarding )後,就可以透過網際網路連上。利用這個方法,我們可以利用很短時間, 建立各種高品質的網頁,達到行銷或資訊分享的目的。

09 免費架設任何類型網站
自架網站對外開放
16 router port forward example
路由器通訊阜轉發 ( port forwarding )

架設網站流程

總結以上內容,下圖就是完整的自架網站流程。只要你一步一步將需要的軟體設定好,相信您自行架設網站也可成功進入上線階段!

架站硬體

電腦安裝 Windows 10
路由器入門防火牆進階防火牆
寬頻網路中華電信光世代

架站軟體

5套免費架站懶人包
(參考第 2 章節,推薦使用 XAMPP)

網域名稱

免費域名:NoIP DDNS
(建議購買專屬域名)

SSL憑證

免費Let’s Encrypt SSL憑證

網站設定

軟體參數微調

自己架網站,電費會很昂貴嗎?

個人電腦在待機狀態下耗電嗎?很多人都說電費太貴,不划算,所以就去租用主機。但是我發現個人電腦架設網站,電費是在可接受範圍內。假使用相同電腦規格與租用主機的費用來比較的話,電費絕對比租用主機的費用便宜。

然而當電腦在運作許多服務的時候,多耗電呢?以我的例子而言,這個問題就取決於是不是全部硬碟都在存取資料,例如:

  • 小孩是不是使用 Plex Server 的服務,在觀看學校的英文課程呢?(將CD片轉檔成影片檔,放在電腦中,使用平板來複習)
  • 家人是不是將手機照片同步到電腦的 nextCloud 呢?
  • 而 WordPress 網站是不是也在寫作、編輯照片、檔案或連線呢?

但是,以上這些服務並非 24 小時都在執行,當晚上睡覺時或白天上班、上學時,這些服務都會進入閒置狀態,所以電腦耗電量是會回到待機狀態的耗電量。

下圖是個人電腦待機時的耗電資訊,大致上都在 25 W 到 30 W 的區間跳動。就來計算一下 30W 的耗電量,一期電費會是多少:

  1. ( 30W x 24hrs x 60days ) / 1000Wh = 43.2度
  2. 電費: 43.2 x 3元 = 129.6 元 (假設一度電費是 3 元)
  3. 電腦規格:
    1. Intel i5-7500(內建顯示晶片)
    2. DDR4-2400 8GBx4
    3. WD SN750 500GB SSD
    4. Toshiba 1TB 7200rpm HDD(存監視器錄影檔)
    5. WD NAS RED 4TB HDD x3(用途:NAS, Plex Server, nextCloud)
02 架網站 免費 架設任何類型網站 電腦運作時耗 29.2 W
電腦運作時耗 29.2 W
03 架網站 免費 架設任何類型網站 電腦運作時耗 28.2 W
電腦運作時耗 28.2 W
04 架網站 免費 架設任何類型網站 電腦運作時耗 28.0 W
電腦運作時耗 28.0 W

將電腦實現一機多用的例子

假使你的個人電腦只是單純架網站使用,電費會更低。因為我的個人電腦除了架設 WordPress 網站之外,還扮演以下幾個角色:

WordPress 網站

個人雲端

監視系統

所以,每期 ( 2 個月 ) 電費預估至少會是 NTD 129.6 元!下圖是電腦的工作管理員畫面,將 Plex Server、TrueNAS、nextCloud 等服務關閉,可以看到 CPU 使用率最高的就是監視器錄影軟體了。

05 免費 架設任何類型網站 除了架網站之外,還有一機多用的功能
Home Server 一機多用例子

自架網站常見問題

以我的經驗而言,安裝好 XAMPP 後,難免會遇到小問題,但是這些問題,都來自於因為本身不具備專業知識所造成的。所以,在這裡分享幾個基礎架站檔案的設定,避免大家也浪費時間走冤枉路。

如何重新安裝 WordPress 網站或搬家網站呢?

很多人會建議用【UpdraftPlus 】這類的備份/還原外掛來重新安裝網站。但是你有想過一種狀況嗎?假使連備份檔案也中毒或遺失檔案的話,這樣子還原回去有用嗎?
釜底抽薪的方法就是:重新架設 WordPress 網站!
不過,卻不是要你再重新寫所有的文章與設定所有細節。細節可以參考我的作法: 【網站搬家】與【網頁速度調整】心得

如何提高資料庫安全性呢?

打開 XAMPP控制面板,然後登入【phpMyadmin首頁】,除了【你的登入帳號】外,刪除其餘帳號。
例如: “任何”、”root(127.0.0.1)”、”root(::1)”

提高登入 phpMyadmin 的安全性措施

在 C:\phpMyAdmin\config.inc.php 找到以下兩行,把值改成’cookie’與False,這樣子就會強迫登入 phpMyadmin 時要輸入密碼。

$cfg[‘Servers’][$i][‘auth_type’] = ‘cookie’;
$cfg[‘Servers’][$i][‘AllowNoPassword’] = False;

更改 php.ini 參數,調整上傳檔案大小、加大記憶體容量、更改時區與開啟Gzip壓縮功能

開啟 php.ini (路徑:C:\xampp\php\php.ini),更改以下參數值:
Line:388-> max_execution_time : 300
Line:409-> memory_limit = 512M
Line:694-> post_max_size = 80M
Line:846-> upload_max_filesize = 80M
Line:1971–> Asia/Taipei
Line:259-> zlib.output_compression = On
Line:262-> zlib.output_compression_level = -1

Line:262的值是代表壓縮率。”-1″是由系統自己決定;”10″是最大壓縮率,檔案最小但是CPU使用率會最高;”0″則是相反。官方文件建議設定值為”7″。

避免資料庫產生很多無用的數據

在 C:\htdocs\wp-config.php 中,加入以下兩行來避免當你每次修改文章時,WordPress 會自動幫你保存修改之前的文章版本,導致資料庫的無用資料越來越多,拖慢整體效能。
define(‘WP_POST_REVISIONS’, false );
define (‘EMPTY_TRASH_DAYS’, 7);

啟動Gzip網頁壓縮

在 C:\apache\conf\httpd.conf 中,將以下幾行的#刪除。
LoadModule deflate_module modules/mod_deflate.so
LoadModule filter_module modules/mod_filter.so
LoadModule headers_module modules/mod_headers.so

解決 Leverage browser caching 的方法

在 C:\apache\conf\httpd.conf 中,將以下這行的#刪除。
LoadModule expires_module modules/mod_expires.so

如何啟動 http/2 ,加快網頁連線速度呢?

在 C:\apache\conf\httpd.conf 中,將以下這行的#刪除。
LoadModule http2_module modules/mod_http2.so

然後到 C:\apache\conf\extra\httpd-ssl.conf 中,找到 SSLEngine on 後,加入以下這行:
Protocols h2 http/1.1

再找 SSLProtocol all -SSLv3 這一行,改成以下這一行:
SSLProtocol all -SSLv3 -TLSv1 -TLSv1.1

最後,重新啟動 Apache。利用這個連結檢查使否有成功: https://tools.keycdn.com/http2-test

讓 Windows 10 自動啟動 Apache / MySQL 的設定方法

1. 在開始程式集當中,找到 XAMPP,然後滑到 XAMPP Control Panel -> 點選滑鼠右鍵 -> 以系統管理員身分執行 -> 啟用 xampp
2. 點選 Apache 前面的 x,出現【Click Yes to install the Apache service】視窗,點選 yes
3. 點選 MySQL 前面的 x,出現【Click Yes to install the MySQL service】視窗,點選 yes
4. 觀察 Apache 與 MySQL 有沒有都變成綠色勾勾,有的話,表示設定成功。

以後,電腦重新開機後,Apacha / MySQL 就會自動啟動,網站也跟著上線了。

NAS也可以架網站,為什麼要用一台電腦來架設網站呢?

看個人需求,並沒有說 NAS 不行。
但是一開始架網站時,有把握一定會走下去嗎?萬一放棄了,那麼花一兩萬買個 NAS 放在家裡,還要維護它;相對的,電腦的功能性還是比 NAS 來的靈活、強大,可以做的運用也比 NAS 多。

家用寬頻網路的速度,會不會導致網頁連線緩慢呢?

頭兩年使用的是社區寬頻網路(120M/30M),現在換成 HiNet 光世代(500M/250M),一直以來都會注意網頁速度,而我的觀察是家用寬頻網路好像也沒有很差!
在 Google PageSpeed Insights的測試結果當中,過去 28 天不論是桌上型電腦或手機用戶,分別在 4 個項目中(FCP、FID、LCP、CLS),都在 Google 定義的標準之內。所以也就維持現況,並沒有針對程式碼、JS、CSS做優化,因為我也不會!
10 架網站 免費 架設任何類型網站 pagespeed insight U0614

哪一個佈景主題速度比較快呢?

在社團中,常常聽到網頁開啟速度要快,就是考慮某幾個佈景主題。聖誕節時,廠商都會提出很多優惠方案,所以買了 OceanWP、Astra 兩個佈景主題來試看看。以我的例子而言,在相同的電腦主機、相同的文章下,這兩套佈景主題的速度,並沒有差異,就如同上圖一樣!
我覺得要加快速度的話,還是要靠專業的網路公司/大師級站長,針對程式碼、JS、CSS做優化才能達到。

架設網站自學心得

如同文章開頭講的:自架網站雖然可以大幅壓低資金成本可以 100% 設計網頁排版,但是就要付出更多的時間在網站維護網路防護

雖然架設 WordPress 網站存在一定的門檻,但是過程中所遇到的問題,大部分都可以花時間找到答案解決。在臉書社團中,也有相當多的專家願意協助。所以,假使自己架設網站沒有時間壓力的話,真的會建議大家嘗試看看!

Patti's Blog

Patti 是一位從事美容 SPA 多年的店長,利用工作之餘,與團隊共同經營【Patti Blog】。透過部落格分享經驗、見解和專業知識,同時也想讓讀者了解我的美容事業。透過【Patti Blog】的平台,除了建立了個人品牌外,也想與讀者建立了良好的信任關係。總之,【Patti Blog】是展現團隊創意和熱情的平台。 Email: support@hipay0.com