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

我不是 MIS 專職人員,也不是本科系的,純粹利用下班時間,在網路上蒐集資料,花了近三年的時間,對於【 架網站 】這件事,才稍微有一些小心得。

所以,只要你照著我的步驟做,相信你也可以不用額外花半毛錢,就可以在 Windows 10 的電腦上面,架設好屬於自己的專屬網站了。這篇分享文章,是寫給架站新手 / 小公司 / 部落客的,不適用於大型企業 / 大神級…

很多人會怕遇到各式各樣的問題,例如:

  • 覺得自己不懂網頁編輯軟體、語法、架構
  • 認為自己不懂什麼是網路傳輸安全協定
  • 也不知道網頁速度、網頁大小、友善的SEO
  • 看到 Linux 指令就頭痛

其實,以上的問題,我到現在也不是很了解細節,但還是可以完成一個像樣的個人網站。為什麼呢?個人覺得最大的原因在自由軟體通常都有強大的討論區,用來解決這些免費軟體的臭蟲。所以當我們遇到問題時,可以等其他人把臭蟲解決後,在安裝新版本來解決本身遇到的問題,算是搭順風車的概念。

另外,最直接的方式就是上 youtube 、 google 或臉書社團發問來找答案。所以,我才會說: 【原來架設一個堪用的個人網站】一點都不難!

唯一困難的就是需要不定期地發表【新文章】在網站/部落格上面!這一點,的確是在架設網站前,先問自己能不能夠把寫作當成興趣,持之以恆下去。而我發表文章的頻率大概是三個月兩篇文章,畢竟架設個人網站只是興趣而已,也只能利用下班後的空檔來寫作。這種模式已經維持了近三年了,至少還能夠得到 Google 搜索引擎的注意,流量看起來都符合預期。

跟其他人使用【 痞克邦 】、【 論壇 】…從事行銷的做法,就看得出明顯的差異性了,而且質感也會不一樣~

架網站 需要準備什麼呢?

軟、硬體清單

以我的案例,是將網站架設在個人電腦 ( Windows 10 Pro ) 上面,唯一額外的花費就是: 電腦需要 24 小時開機。使用了近 3 年,每期的電費其實還可以接受,所以就不考慮租用業界的伺服器主機了!

在架設網站的軟、硬體清單的圖當中,
【Step 1】包含了硬體清單:

  • 硬體成本
    • 既有成本
      • 桌上型電腦
      • 寬頻網路
    • 額外成本
      • 電費

【Step 2】涵蓋了架設網站需要的所有軟體清單:

  • 架設 WordPress 網站安裝包
    • WAMPServer、 Bitnami
      • 短暫使用過,目前已經不考慮了
    • Local
      • 在本地電腦安裝 WordPress 後,方便編輯然後再上傳到租的虛擬主機中。好像不適合將本機電腦的網站推上線服務,所以也沒再繼續使用了。
    • MAPM
      • 曾經試著想改用這一套安裝包,看上它可以切換成 Nginx 網頁伺服器的功能。但是,後來爬文發現, 在 Windows 平台,Nginx 和 Apache 沒有太大的差異,就打消念頭了。另一個原因就是論壇中討論的結果都是說 Apache 相對於 Ngnix 穩定,臭蟲也比較少。對於我這種非本科系背景的使用者而言,穩定、不出錯的確比效能來的重要。
    • XAMPP
      • 安裝方便
      • 網路中、英文資料很多
      • 軟體開發商幾乎每個月都會提供新版本安裝包
      • 目前使用這一套安裝包,幾乎沒遇到問題
      • 安裝 XAMPP 似乎是不會遇到問題才對,記得將 Windows 防火牆【允許】Apache 與 mySQL 程式的網路存取權限。接下來就是設定 phpMyadmin 與 WordPress了,詳細內容可以參考後面【流程圖】章節的【在 Windows10 架設 WordPress 網站】連結
  • NO-IP
    • 假使家中的寬頻網路屬於動態 IP 的話,就需要先完成 DDNS 的申請
    • 詳細內容可以參考後面【流程圖】章節的【申請 NoIP DDNS 的流程】連結
  • SSL 數位憑證
    • 就是當我們在上網時,瀏覽器網址列最前面出現的【綠色鎖頭】符號,這就是網路傳輸的安全協定。SSL 憑證除了可以保護網站資料不外洩,讓使用者更信任您的網站之外,還能讓網站優化提高 Google 搜尋的排名!
    • 免費的SSL/TLS 憑證,剛開始是申請 Let’s Encrypt 提供的憑證來使用,但是最近好像被其他公司合併了?!所以,都會自動轉連到 ZeroSSL 的網站中完成申請。
    • 詳細內容可以參考後面【流程圖】章節的【ZeroSSL 的網站中完成申請】連結
  • 軟體設定
    • 記得在路由器當中,設定好通訊阜轉發(Port forwarding),才能將【對外 IP 】連接到本機電腦的 WordPress 網站
    • 設定好 VirtualHost,詳細內容可以參考後面【流程圖】章節的【 VirtualHost 設定】連結
    • 將 SSL 數位憑證放到以下路徑:
C:\apache\conf\ssl.crt\certificate.crt
C:\apache\conf\ssl.crt\ca_bundle.crt
C:\apache\conf\ssl.key\private.key
01-1 架網站 免費 架設任何類型網站 U0614
架設網站的軟、硬體清單

不關機的電腦主機電費貴嗎

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

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

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

但是,以上這些服務並非 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 8GBx2
    3. WD SN750 500GB SSD
    4. Toshiba 1TB 7200rpm HDD(存監視器錄影檔)
    5. WD NAS RED 4TB HDD x3(用途: FreeNAS, 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 網站
  • 監視器主機 ( 錄影檔存檔、即時撥放 )
  • Plex server ( 區域網路瀏覽照片、影片 )
  • nextCloud 個人雲端備份

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

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

免費 架網站 的安裝包

挑選 WordPress 的原因

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

  • 佈景主題: 免費
  • 外掛程式: 免費
  • 問題諮詢: 免費 ( Google 大師 )

五套 架網站 懶人包可以選擇

首先先安裝架站懶人包,過去三年使用過 XAMPP 、 Bitnami 、 WAMPServer 、 MAMP 、 Local,五套架站安裝包,但是最後我選擇 XAMPP( 64bit ) 來使用。原因:

  1. 使用 XAMPP( 32bit ) 的時候,因為有一個外掛經常造成【 記憶體不足 】,試了好多方法都無法解決問題,所以才轉換成 64bits Apache 來試試看,結果就不曾再發生【記憶體不足】的現象了。
    • e.g. 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
  2. Bitnami 在安裝過程當中,無法使用指定的 WordPress 資料表的前綴名稱。假使想要修改的話,需要具備專業知識來進行修改,這一點就不適合我這種非本科系的人來操作了,動到資料庫可是很危險的事情,一個不小心可能會把網站整個毀掉。想要參考如何安裝 Bitnami 的話,可以參考: 在 Windows10 安裝 Bitnami WordPress
  3. WAMPServer是一款由法國人開發的 Apache Web 伺服器、PHP 解釋器以及 MySQL 資料庫的整合軟體包。剛開始使用的時候,覺得好像很容易上手。久了之後,就會發現檔案路徑並不容易找到,而且安裝包的更新似乎不如 XAMPP 頻繁。
  4. MAMP是以MacOS、Apache、MySQL及PHP or Python的字首結合的開發工具,但也有支援Windows系統。版本分成免費版與付費版兩種,很多人都選擇 MAMP 免費版來使用。但是我卻遇到一些問題,MySQL Server 開不起來,最後就放棄了。
  5. Local的缺點是: 我還找不到方法解決將網站上線。試了幾天後,就放棄了。

為什麼需要更改 WordPress 資料表的前綴名稱呢?因為 Google 大師說: 當有一天有人對 wp_ 開頭的資料庫發動攻擊時,你就會知道了….

06 免費架設任何類型網站 三套架站懶人包可以選擇 XAMPP WAMPServer Bitnami
三套架站懶人包的差異

個人網站連線測試

區域網路內連線到網站

假使網站只要在家裡內部網路使用的話,完成上述任一安裝包與資料庫設定後,就可以在區域網路內使用了,不需要申請 SSL憑證,也不需要申請 DDNS 服務與路由器通訊阜轉發。直接在網址列輸入架設網站那台電腦的 IP (192.168.1.2)後,就可以連到 WordPress 網站了。

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

讓網站與網際網路連線

一旦完成網址申請、 DDNS 設定、 SSL 申請、 Virtual Host 設定、通訊阜轉發 ( port forwarding ),就可以跟我一樣,透過網路跟大家分享文章了。利用這個方法,我們可以利用很短時間, 建立各種高素質的網頁,達到行銷的目的。下一步就是開始進入網站領域了,有很多項目會有看沒有懂,這些事需要時間在社團中發問與學習的。例如:

  • Google Adsense 被停用了,怎麼辦?(解決方法: 請點我)
  • 網站標題在 Google 搜索引擎的顯示不正確,怎麼辦?(解決方法: 請點我)
  • Google SEO是什麼呢?跟流量有什麼關係?
  • 網站速度怎麼那麼低分呢?會有什麼影響嗎?
09 免費架設任何類型網站
讓網站可以連上網際網路

自架網站的流程圖

看完上面的說明後,可能還不是很清楚整個自架網站的流程或順序,所以幫有興趣嘗試自架網站的朋友,整理了一張流程圖讓大家參考。根據流程順序,一步一步將需要的軟體設定好,接下來就是進階的網站上線階段了,在這時就會遇到的各式各樣問題了,而我也在社團中學習、成長!

網站DIY流程圖

Step 1、準備好硬體

– 電腦主機
– 路由器
初期
: 拿現有的路由器,具備設定通訊阜轉發就可以了。
後期: 決定要持續維護網站後,最好更換成具備防火牆功能的產品。畢竟防火牆功能的路由器,價格都不便宜。本身使用的都是入門款的防火牆(Vigor2120n使用心得),到現在,網站還沒中毒或被駭的經驗。只是每天在後台都看到一堆惡意連線,心裡難免怕怕的,所以只能靠硬體防火牆多少排除一下這些狀況。
進階: 自架免費防火牆OS(pfsense的使用心得),可以操作的細部功能更多了,防火牆設定也變得靈活。

Step 2、安裝架站安裝包

– 安裝 XAMPP 要記得在最後允許 Windows 防火牆存取【公用網路】與【私人網路】
– 設定 phpMyadmin (可以參考: 在Windows10架設WordPress網站)
– 設定 WordPress(可以參考上面連結: 在Windows10架設WordPress網站)

Step 3、申請 DDNS

使用 NoIP DDNS 的服務,將 IP 轉換成專屬網址,申請流程請參考: 申請 NoIP DDNS 的流程

Step 4、申請 SSL 數位憑證

當網站加入 SSL 加密協定(HTTPS,網址列會是綠色鎖頭圖示,申請流程請參考: ZeroSSL 的網站中完成申請),就不會被讀者誤會是危險網站或詐騙網站了(HTTP,是紅色鎖頭圖示)。也有利於 Google 搜尋排名。

Step 5、軟體設定

– VirtualHost 目的是使用同一個網頁伺服器 ( Apache ) 架設多個網站 ( e.g. hipay0.com ; www.hipay0.com ),當使用者以不同網域名稱 ( e.g. hipay0.com ; www.hipay0.com… ) 連到主機時, Apache 會依據不同的網址,回應不同的網頁內容。
– Apache 、WordPress、mySQL、phpMyadmin…的參數微調,全部都集中在VirtualHost 設定這一篇做分享。

6、網站上線

接下來要面對的問題,就是根據您的網站應用、屬性,在社團中發問,尋找解決方法了,例如:
– 如何提供 Pagespeed Insights 的分數
– 如何提高網站排名
– 如何改善SEO 的問題
– 如何提高流量
– 如何增加被動式收入、加入聯盟行銷
– 如何使用 Google Keyword Planner
-…
接下來的部分,會分享一些進階版的內容,有興趣的人,可以參考下一個章節。

進階版分享: WordPress 架站心得

如何更改網域名稱?

剛開始使用 WordPress 自架網站時,當然也是申請免費網域來使用。既然是免費的服務,就會有一些不方便的地方,譬如說:要定期前往【No-IP網站】點擊繼續使用網域名稱的按鈕。關於這一點,個人是沒有排斥。

但是讓我決定花錢買一個專屬網域名稱的原因就是: 免費網域,常常會被其他申請者連累,讓社群網站認定是【惡意網域】!導致無法將文章分享到 Facebook、Google 相關服務。

如何將舊網站資料庫改成新的網域名稱呢?首先,先登入 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.me 或 https://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 的追蹤碼

首先登入您的 Google 帳號後,進入 Google Analytics 開始申請:

  1. 首先設定帳戶ID,下方選項保持預設設定即可
  2. 勾選網頁的選項
  3. 設定網站名稱網站位址就是您要追蹤的網址(把您的網域名稱貼上來),產業類別請您自行選擇,報表時區選擇臺灣時間,之後就建立成功了
  4. 前往 Google Analytics 的畫面點選左下方的管理,進入後找到【追蹤資訊】,在下方可以看到【追蹤程式碼】,點開後就可以看到您的追蹤碼了
12 如何加 Google Analytics WordPress 的追蹤碼
Google Analytics WordPress 的追蹤程式碼

基本上我們就是要把下面程式碼加到網頁裡面

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

打開 header.php (路徑在: C:\xampp\htdocs\wp-content\themes\oceanwp\ ),把程式碼全部貼在 <head>的下方,然後存檔。

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

請注意,利用這個方法後,就不需要再安裝其他 GA 外掛或開啟相關功能了,不然流量會重複統計。

使用圖片外掛將網站圖片優化後,為什麼 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 還是有點慢呢

架網站 常見問題

以我的經驗而言,安裝好 XAMPP 後,難免會遇到小問題,但是這些問題,都來自於因為本身不具備專業背景所造成的。所以,在這裡就跟大家分享了,避免浪費時間走冤枉路。

網站運作久了,可能中毒或檔案誤刪導致不正常,如何重新安裝網站或搬家網站呢?

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

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

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

提高登入 phpMyadmin 的安全性措施

在 C:\phpMyAdmin\config.inc.php 找到以下兩行,把值改成’cookie’與False,這樣子就會強迫登入 phpMyadmin 時要輸入密碼。
Line 19:
$cfg[‘Servers’][$i][‘auth_type’] = ‘cookie’;
Line 23:
$cfg[‘Servers’][$i][‘AllowNoPassword’] = False;

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

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

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

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

你可能有興趣>>> DIY 居家監視器系統的心路歷程~

回到頂端