網站架設教學 – 第 2 頁

打造部落格網站的 Schema.org 結構化資料：詳細介紹與規劃

大家好！今天我們要來學習如何使用 Schema.org 結構化資料來優化你的部落格網站。你可能聽過 SEO (搜尋引擎最佳化)，但你知道 Schema.org 可以讓你的部落格在搜尋結果中更醒目嗎？它能讓 Google 等搜尋引擎更了解你的網站內容，進而提升你的網站排名和流量！想像一下，一個關於台南美食的部落格文章，如果沒有使用 Schema，在 Google 搜尋結果中只會顯示單調的標題和網址，可能就錯失了許多點擊機會。而加入 Schema 後，Google 就能夠顯示文章的圖片、作者、發布日期，甚至評分，讓你的文章看起來更吸引人，更容易被使用者點擊！這正是 Schema.org 的威力！什麼是 Article Schema Schema.org 是一個合作開發的詞彙庫，提供了許多不同的 Schema 類型，讓你可以用結構化的資料來描述網站的內容。其中，「Article」Schema 特別適合部落格文章。Article Schema 又有不同的子類型，例如 BlogPosting (部落格文章) 和 NewsArticle (新聞報導)。常見的 Article Schema 屬性包含：

headline：文章標題 (例如：台南必吃美食十選)
author：作者 (例如：小明的台南美食日記)
datePublished：發布日期 (例如：2024-10-27)
image：文章圖片 (例如：網址連結至圖片) 一個台南旅遊部落格文章的 JSON-LD 範例：
```
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "台南安平老街深度遊記",
"image": "https://example.com/anping.jpg",
"datePublished": "2024-10-26",
"author": {
"@type": "Person",
"name": "小明"
},
"description": "探訪台南安平老街的歷史建築與特色小吃。"
}
```
規劃部落格網站在開始使用 Schema 之前，你需要先規劃你的網站結構。你的首頁可能顯示文章摘要，點擊摘要則連結到文章詳情頁。選擇適合的 Schema 子類型非常重要，例如，旅遊文章適合使用 BlogPosting，而新聞報導則適合使用 NewsArticle。確保所有文章的 Schema 資訊一致性，例如作者資訊要正確，日期要正確，避免混亂。在 WordPress 中實作 Article Schema WordPress 提供許多方便的工具來實作 Schema。
使用外掛：Yoast SEO 和 Schema Pro 都是相當普及的 WordPress 外掛，它們可以自動產生結構化資料，省去不少手動設定的麻煩。
手動添加 JSON-LD：如果你比較熟悉程式碼，也可以直接將 JSON-LD 程式碼添加到你的 WordPress 主題檔案中。例如，一個關於台南美食的旅遊文章，你可以使用以下方法標記標題、作者和圖片：
1. 使用 Yoast SEO 等外掛，在編輯文章時填寫相關資訊。
2. 手動加入 JSON-LD 程式碼到文章頁面底部： (請注意，這需要一定的程式能力) 將上述 JSON-LD 範例中的內容替換成你的文章資訊。驗證與測試完成 Schema 的設定後，務必進行驗證和測試。你可以使用 Google 的工具：
Google Rich Results Test：這個工具可以協助你檢測 Schema 的正確性，並找出潛在錯誤。
Schema Markup Validator：另一個驗證工具，可以提供更詳細的 Schema 驗證結果。此外，你也可以在 Google Search Console 中檢查你的網站是否正確顯示豐富的搜尋結果。課堂練習現在，請你在你的 WordPress 網站上為一篇部落格文章添加 BlogPosting Schema，提交頁面至 Google Search Console 並使用 Rich Results Test 驗證，最後記錄你的測試結果。結語學習使用 Article Schema 可以讓你的部落格文章在搜尋結果中脫穎而出，吸引更多讀者！這只是一開始，之後你可以探索更多 Schema 類型，例如 BreadcrumbList (麵包屑導航) 來改善網站導覽，或者使用 Google Tag Manager 來管理你的 Schema。別忘了，結構化資料對提升部落格網站的流量有很大的幫助，持續學習和應用，你一定可以打造一個成功的部落格網站！

打造活動網站的 Schema.org 結構化資料：詳細介紹與規劃

各位同學大家好！今天我們要學習如何利用 Schema.org 的結構化資料，為我們的活動網站加值！你們知道嗎？一個好的活動網站，不只是漂亮就好，更要讓搜尋引擎「看懂」你的網站內容。想想看，如果你的活動網站沒有明確告訴 Google 你的活動日期、時間和地點，Google 如何在搜尋結果中精準地展現你的活動資訊呢？這樣會讓許多潛在參與者錯失參與你精彩活動的機會！而 Schema.org 結構化資料，正是解決這個問題的關鍵。它能讓你的網站資訊更易於搜尋引擎理解，提升在搜尋結果中的能見度，讓更多人看見你的活動！什麼是 Event Schema Schema.org 是一個協作專案，它提供了一套標準化的語意標記語言，讓網頁開發者可以更清楚地向搜尋引擎說明網頁內容的意義。在 Schema.org 中，Event 是描述活動的關鍵類型。Event 類型下還有許多子類型，例如：MusicEvent (音樂活動)、BusinessEvent (商業活動)等等，可以更精確地描述你的活動內容。每個子類型都有其特定的屬性，例如：

name：活動名稱 (例如：台南秋季音樂祭)
startDate：活動開始日期及時間 (例如：2024-10-26T19:00) 記得使用 ISO 8601 格式！
endDate：活動結束日期及時間 (例如：2024-10-27T22:00)
location：活動地點 (例如：台南市立體育場)

eventAttendanceMode：活動參與模式 (例如：OnlineEventAttendanceMode 或 OfflineEventAttendanceMode) 以下是一個台南音樂節的 JSON-LD 範例：

{
"@context": "https://schema.org",
"@type": "MusicEvent",
"name": "台南秋季音樂祭",
"startDate": "2024-10-26T19:00",
"endDate": "2024-10-27T22:00",
"location": {
"@type": "Place",
"name": "台南市立體育場",
"address": {
"@type": "PostalAddress",
"streetAddress": "XXX路XXX號",
"addressLocality": "台南市",
"addressRegion": "台南市",
"postalCode": "700"
}
},
"description": "精彩的音樂表演！"
}

規劃活動網站設計一個友善的活動網站架構很重要，它能幫助你有效地運用 Schema.org。建議的做法是：

首頁：簡潔地列出所有即將舉辦的活動，並提供活動名稱、日期和簡短描述，每個活動都連結到其詳細頁面。
活動詳情頁：提供活動的詳細資訊，包含時間、地點、票價、參與方式等，在此頁面加入詳細的 Event Schema 標記。選擇適合的 Schema 子類型，並確保所有資料的一致性，例如日期格式必須使用 ISO 8601 格式 (YYYY-MM-DDTHH:mm)。這能提升搜尋引擎理解你網頁資訊的效率。在 WordPress 中實作 Event Schema 在 WordPress 中加入 Schema.org 有幾種方法：
使用外掛：Yoast SEO 或 Schema Pro 等外掛能簡化這個過程，讓你更容易在 WordPress 後台設定 Schema 資料。
手動添加 JSON-LD：你可以直接將 JSON-LD 程式碼加入你的主題檔案，例如 header.php。這需要一些程式碼知識，但能提供更精準的控制。以音樂節活動為例，我們需要標記活動名稱、時間和地點。使用外掛時，通常只需要填寫對應欄位即可；手動加入時，則需要將 JSON-LD 程式碼放在 <head> 區段。驗證與測試完成 Schema 標記後，務必進行驗證和測試：
Google Rich Results Test：這個工具可以幫助你檢查你的 Schema 標記是否正確，並預覽在 Google 搜尋結果中的呈現方式。
Schema Markup Validator：這個工具也能驗證你的 Schema 標記是否符合標準。
Google Search Console：提交你的網站地圖，Google 會爬取你的網站，並分析你的 Schema 資料。如果發現錯誤，例如缺少 startDate 屬性，就要立刻修正。課堂練習現在，讓我們實際操作一下！請在你的 WordPress 網站上，為一個活動頁面添加 MusicEvent Schema。記住使用 GSC 提交頁面，並使用 Rich Results Test 驗證你的標記是否正確。完成後，請記錄你的測試結果，並和同學分享你的心得。結語學會使用 Event Schema 能讓你的活動網站更易於搜尋引擎理解，提升活動的曝光度，吸引更多潛在參與者。持續學習，嘗試更多 Schema 類型，例如 AggregateEvent (集合活動)，並善用 Google Tag Manager 等工具來優化網站，將有助於你進一步提升網站的效能！希望透過這次課程，你們都能打造出更成功的活動網站！

打造標準化的網站：Schema、Google Search Console 與結構化資料測試

大家好！這堂課我們將學習如何打造一個符合搜尋引擎標準的網站，讓你的網站更容易被搜尋到，吸引更多訪客！在現在這個 AI 驅動的搜尋時代，一個標準化的網站就像擁有一把開啟網路世界的金鑰匙。想像一下，一個學生精心撰寫的部落格文章，內容豐富精彩，卻因為缺乏標準化，而被搜尋引擎忽略，錯失了無數潛在讀者的目光，多可惜！而透過結構化資料（structured data），我們可以讓搜尋引擎更精準地理解網站內容，提升搜尋結果的豐富性，例如在搜尋結果中直接顯示星級評分、食譜資訊等等，讓你的網站更具吸引力！為什麼需要標準化網站

讓搜尋引擎更容易理解你的網站內容：搜尋引擎就像一個聰明的機器人，需要我們用它能理解的方式來「告訴」它你的網站是關於什麼的。標準化的網站就像一份詳細的說明書，讓搜尋引擎清楚知道每個頁面的內容，主題和重要資訊。
提升網站的點擊率：當你的網站使用結構化資料，搜尋引擎會在搜尋結果中顯示更豐富的資訊，例如產品的價格和評分，或食譜的準備時間，這能吸引更多使用者點擊你的網站連結，提升你的點擊率。研究顯示，豐富結果（rich results）可增加 20-25% 的點擊率。
提升 SEO 效能：良好的 SEO 策略包含讓搜尋引擎更容易理解你的網站，而標準化正是其中關鍵的一環。
為未來語音搜尋做好準備：隨著語音搜尋越來越普及，標準化的網站將更重要，因為語音助理需要更精確地理解網頁內容才能給出正確的答案。什麼是 Schema.org 結構化資料
Schema.org 是一個合作計畫，提供一套標準化的語意標籤（語意：內容含義），讓網頁開發者可以用機器可讀懂的格式描述網頁內容。
JSON-LD (JavaScript Object Notation for Linked Data) 是 Schema.org 建議使用的資料格式，它是一種輕量級的資料交換格式，易於閱讀和理解。

常見的 Schema 類型包含：Article（文章）、Recipe（食譜）、Product（產品）、Event（活動）等等。以下是一個簡單的 JSON-LD 範例，用於標記一篇部落格文章：

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "我的第一篇部落格文章",
"image": "https://www.example.com/image.jpg",
"datePublished": "2024-10-27",
"author": {
"@type": "Person",
"name": "你的名字"
}
}
</script>

在 WordPress 中實作 Schema

使用外掛：Yoast SEO 和 Schema Pro 是常用的 WordPress 外掛，能自動生成 Schema 結構化資料，簡化操作流程。

手動添加 JSON-LD：你可以直接將 JSON-LD 程式碼添加到你的 WordPress 主題檔案中，例如 header.php。這需要一定的程式碼知識。以食譜頁面為例，你可以標記食材、烹飪時間、營養資訊等等：

{
"@context": "https://schema.org",
"@type": "Recipe",
"name": "美味咖哩雞",
"prepTime": "PT20M",  // 20分鐘準備時間
"cookTime": "PT45M",  // 45分鐘烹飪時間
"recipeYield": "4 servings",
"ingredients": [
"1公斤雞肉",
"1大匙咖哩粉"
// ...更多食材
]
}

使用 Google Search Console

設置 Google Search Console (GSC)：驗證你的網站所有權，提交網站地圖，讓 Google 搜尋引擎更容易抓取你的網站內容。
檢查結構化資料錯誤：在 GSC 的「增強功能」報告中，你可以查看 Schema 結構化資料的錯誤訊息，並進行修正。
監控搜尋效能：追蹤你的網站關鍵字排名和點擊率，評估 Schema 的使用效果。通過結構化資料測試
使用 Google 的 Rich Results Test：這個工具可以測試你的頁面是否正確使用 Schema 結構化資料，並顯示預覽效果。
使用 Schema Markup Validator：這個工具可以驗證你使用的 Schema 程式碼是否符合標準。
在 GSC 確認測試結果：在 GSC 的「增強功能」報告中，可以確認測試結果，並查看是否有任何錯誤訊息。課堂練習
在你的 WordPress 網站上，為一篇食譜文章添加 Recipe Schema。
使用 GSC 提交網站地圖。
使用 Rich Results Test 驗證結構化資料，並記錄測試結果。結語恭喜你完成這堂課的學習！希望你已經掌握了 Schema、Google Search Console 和結構化資料測試的基本方法。記住，標準化網站是提升網站 SEO 效能，提升網路能見度的重要步驟。建議你繼續探索其他 Schema 類型，例如 Event Schema，或者學習使用 Google Tag Manager 來管理你的網站標籤。持續優化你的網站結構化資料，讓你的網站在搜尋引擎中脫穎而出，在長遠的網路競爭中保持優勢！

如何備份與還原網站：給想自己架站的學生

開頭：大家好！各位同學們，你們都對建立自己的網站充滿熱情，這真是太棒了！但在開始動手之前，有一個非常重要的觀念需要學習：那就是如何備份與還原網站。想像一下，你辛辛苦苦建立了一個個人部落格，寫滿了你的心得和想法，但因為伺服器故障或意外操作，所有資料都消失了，這將是多麼令人沮喪的事情！學習備份與還原，就像為你的網站上了保險，能有效保護你的心血，避免不必要的損失。即使是經驗豐富的網站開發者，也會定期備份，因為意外隨時都可能發生。這堂課將會教你如何保護你的網站，讓你安心地享受架站的樂趣。為什麼要備份網站：網站備份的重要性不言而喻，它就像一座堅固的防護牆，保護你的網站免受各種風險的侵害。主要原因包括：

防止數據丟失：意外刪除、伺服器故障、病毒攻擊等都可能導致網站數據丟失，備份可以讓你快速恢復資料。例如，你花費一個月時間撰寫的部落格文章，因為沒有備份而全部遺失，將會非常可惜。
應對伺服器故障：伺服器可能因為硬體或軟體問題而發生故障，導致網站無法訪問。備份可以讓你將網站快速遷移到其他伺服器，盡量減少停機時間。
方便搬站：將網站遷移到新的主機或伺服器時，備份可以讓你輕鬆地將網站資料複製到新環境，省去很多麻煩。想想看，將一個大型網站的手動複製有多耗時！
輕鬆測試：備份可以讓你建立一個測試環境，安心地進行網站更新和測試，不怕影響到線上網站。舉例來說，一個學生正在經營一個分享攝影作品的部落格，他勤奮地備份網站資料。某天，他的主機商發生問題，導致網站無法訪問。但他因為有備份，很快就將網站恢復到另一個主機上，只花了幾小時就解決問題，沒有影響到讀者瀏覽他的作品。備份網站的組成部分：一個完整的網站備份包含兩個主要部分：
文件：網站的程式碼、圖片、CSS 檔案、Javascript 檔案等等，所有構成網站前端顯示的檔案。以 WordPress 網站為例，這包含 themes、plugins、以及 wp-content 目錄下的檔案。
資料庫：網站的數據，例如部落格文章、使用者評論、網站設定等等。WordPress 網站的數據通常儲存在 MySQL 資料庫中，包含 wp_posts、wp_users、wp_options 等資料表。使用工具備份 WordPress 網站：使用外掛是備份 WordPress 網站最方便的方法。我們推薦使用 UpdraftPlus 外掛：
1. 在 WordPress 後台安裝並啟用 UpdraftPlus 外掛。
2. 設定備份目標：你可以選擇備份到本地電腦、Google Drive、Dropbox 等雲端空間，或是 AWS S3、Cloudflare R2 等雲端儲存服務。
3. 設定備份排程：UpdraftPlus 允許你設定自動備份的頻率，例如每天、每週或每月備份一次。
4. 開始備份：點擊「備份」按鈕，UpdraftPlus 將會自動備份你的網站文件和資料庫。 UpdraftPlus 的操作介面簡單易懂，即使是初學者也能輕鬆上手。它可以備份整個網站，包含檔案和資料庫，方便快速還原。手動備份網站：對於一些更進階的使用者，或希望更精確控制備份流程，可以使用命令列工具：
備份文件：使用 rsync 命令備份網站文件到你的本地電腦或雲端儲存空間。例如： rsync -avz /var/www/yourwebsite/ /path/to/backup/ (記得替換 /var/www/yourwebsite/ 和 /path/to/backup/ 為你的實際路徑)
備份資料庫：使用 mysqldump 命令備份 MySQL 資料庫。例如： mysqldump -u yourusername -p yourdatabase > yourdatabase.sql (記得替換 yourusername、yourdatabase 為你的資料庫使用者名稱和資料庫名稱)
上傳備份：將備份檔案上傳到雲端儲存空間，例如 AWS S3 或 Cloudflare R2，可以使用 aws s3 cp 或其他工具。還原網站的步驟：還原網站的步驟與備份步驟相反：
使用 UpdraftPlus 還原：在 UpdraftPlus 的介面中選擇備份檔案，點擊「還原」按鈕即可。
手動還原文件：使用 rsync 命令將備份文件複製到新的伺服器。例如： rsync -avz /path/to/backup/ /var/www/newwebsite/
手動還原資料庫：使用 mysql 命令導入資料庫備份檔案。例如： mysql -u yourusername -p yourdatabase < yourdatabase.sql 在搬站時，你可以利用備份快速將網站遷移到新伺服器。課堂練習：
1. 在你的本地電腦或 VPS 上安裝 WordPress。
2. 安裝 UpdraftPlus 外掛。
3. 設定備份目標到 Cloudflare R2 (需要先建立一個免費帳號)。
4. 執行一次完整的網站備份。
5. 創建一個新的 WordPress 實例。
6. 將備份還原到新的 WordPress 實例。
7. 記錄整個過程，並分享你的心得。結語：定期備份網站，如同定期保養你的汽車一樣重要。養成良好的備份習慣，可以讓你高枕無憂，專注於網站的開發與維護。除了學習今天的內容，建議你進一步研究進階的備份策略，例如異地備份、版本控制等，以及如何將備份與 CDN 整合，提升網站的可用性。祝大家網站架設順利！

使用雲端儲存進行網站圖片管理：AWS S3、Cloudflare R2 與 Google Cloud Storage

大家好！今天我們要學習如何有效管理網站圖片，讓你的網站又快又好維護！你可能聽過要把文字內容儲存在資料庫（像 MySQL），而圖片則放在雲端（例如 AWS S3、Cloudflare R2、Google Cloud Storage）。為什麼這麼做呢？因為這樣可以讓你的網站變得更靈活、更強壯！想像一下，你的學生部落格慢慢長大，文章和圖片越來越多。有一天，你想要把網站搬到效能更好的伺服器，或者換個新的主機商。如果圖片都直接儲存在你的伺服器裡，那可就麻煩了！你得把所有圖片都複製過去，非常耗時又容易出錯。但如果圖片放在雲端，你只需要更新資料庫裡的圖片網址連結，網站就能順利搬家，圖片也跟著完美遷移！這就是分離儲存文字和圖片的巨大優勢。圖片管理對網站效能和維護性至關重要，良好的圖片管理能讓你的網站更快速、更穩定，也更容易維護。為什麼分離文字與圖片儲存

優點：將文字資料儲存在資料庫，圖片儲存在雲端，可以有效降低伺服器負載，因為圖片檔案通常比文字資料大很多。這能讓網站載入速度更快，提升使用者體驗。
易於搬站：網站遷移時，只需要修改資料庫中圖片的網址連結，就能輕鬆將網站搬到新的伺服器或主機，而無需重新上傳所有圖片。例如，你的學生部落格原本在 A 主機，現在要搬到 B 主機，你只需要更新資料庫裡所有文章圖片的連結指向新的雲端儲存網址，就能輕鬆完成搬遷。
提升網站速度：減少伺服器負載意味著網站載入速度更快，這對使用者體驗至關重要，也能提升網站的搜尋引擎排名。
成本效益：雲端儲存通常提供可擴展的儲存空間，根據你的實際使用量付費，比起自行購買和維護伺服器更具成本效益。雲端儲存服務比較
AWS S3：Amazon S3 是業界領先的雲端儲存服務，功能強大，但價格相對較高。
Cloudflare R2：Cloudflare R2 是新興的雲端儲存服務，價格具有競爭力，特別是它的零出口費用非常吸引人，適合低成本的網站專案，像是學生的個人網站。
Google Cloud Storage：Google Cloud Storage 也提供了可靠且具有擴展性的儲存服務，功能與 AWS S3 相當，價格也相當具有競爭力。建議：如果你預算有限，Cloudflare R2 是個不錯的選擇；如果你需要更強大的功能和更成熟的生態系，AWS S3 也是個好選擇；Google Cloud Storage 則是一個穩健且價格合理的選擇。設置雲端儲存
創建儲存桶（Bucket）：在 AWS S3、Cloudflare R2 或 Google Cloud Storage 上創建一個儲存桶，這就像建立一個線上資料夾來存放你的圖片。每個服務的步驟略有不同，請參考各家服務的官方文件。
上傳圖片：使用各家服務提供的工具或 API 將圖片上傳到儲存桶。
設置公開讀取權限：設定儲存桶的權限，讓你的網站可以訪問這些圖片。這通常涉及設定存取控制清單 (ACL) 或存取策略。以 WordPress 為例，你需要取得圖片的公開 URL，將其儲存在資料庫中，而不是直接上傳到 WordPress 媒體庫。整合雲端圖片到網站
在 WordPress 中，你可以使用一個外掛程式來管理雲端儲存的圖片，或將圖片網址儲存在自訂欄位中。
以下是一個使用 PHP 顯示雲端圖片的範例：
```
<?php
$imageUrl = "你的圖片網址"; // 從資料庫或其他地方取得
echo "<img src='$imageUrl' alt='圖片說明'>";
?>
```
這個程式碼片段會將儲存在雲端儲存中的圖片顯示在你的網頁上。便於搬站的實務
備份資料庫：搬站前，務必備份你的資料庫，這只包含文字內容和圖片的網址連結。
重新映射雲端圖片 URL：搬站後，你需要確保圖片網址仍然有效。如果雲端儲存服務沒有變更，你通常不需要修改任何東西。但如果變更了雲端儲存的服務商，則需要更新所有圖片網址。
WordPress 搬站：你可以在不同主機間移動你的 WordPress 網站，只要確保你的資料庫備份包含了正確的雲端圖片連結即可。課堂練習請在 AWS S3 或 Cloudflare R2 上創建一個儲存桶，上傳一張圖片，取得公開 URL，並在 WordPress 測試文章中嵌入該圖片。結語使用雲端儲存管理網站圖片，可以讓你的網站更有效率、更易於維護，而且更能輕鬆面對網站遷移。希望今天的課程能幫助你建立良好的網站圖片管理習慣。建議你接下來學習進階的圖片優化技巧，例如使用 CDN 加速圖片載入速度，讓你的網站效能更上一層樓。記住，選擇適合你的圖片管理方法，並持續學習，才能讓你的網站運作得更好！

第五章：維護網站安全的最佳實踐

在這個網路時代，擁有一個網站不只是展現個人或企業形象的工具，更是一個重要的數位資產。然而，網路世界也充滿了潛在的威脅，像是駭客攻擊、資料外洩等，都可能造成網站損失慘重，甚至影響個人或企業的聲譽。因此，學習如何維護網站安全，是每位網站開發者都必須具備的重要技能。這一章將教你一些維護網站安全的最佳實踐，讓你更放心地在網路上分享你的作品。網站安全的基礎許多網站安全問題都源自於程式碼的漏洞。像是SQL注入攻擊，駭客可以透過在輸入欄位中插入惡意SQL語法，竊取網站資料庫的資訊；XSS (跨站式腳本攻擊) 則允許駭客在網頁中植入惡意腳本，竊取使用者資訊或控制使用者的瀏覽器。想像一下，你的線上商店沒有做好安全防護，駭客入侵後竊取了顧客的信用卡資料，這將造成巨大的損失和法律問題。因此，保護網站安全，不只是為了保護你的網站，更是為了保護你的使用者和你的聲譽。設置 SSL/TLS SSL/TLS 證書能加密你的網站與使用者之間的通訊，確保資料在傳輸過程中不會被竊聽。HTTPS就是使用SSL/TLS加密的標誌，在網址前面會有個小鎖頭圖示。使用 Let’s Encrypt 可以免費取得 SSL 證書。在之前的章節中，我們已學習如何設定 Nginx，現在我們將進一步設定 SSL。步驟如下：

取得 Let’s Encrypt 證書：使用 Certbot 工具，根據你的伺服器系統和 Nginx 版本，執行相關指令，自動取得並安裝證書。
配置 Nginx：在你的 Nginx 設定檔中，新增 SSL 相關的設定，指定證書和金鑰的檔案路徑。這需要修改 Nginx 的 server 區塊，添加 listen 443 ssl; ssl_certificate 和 ssl_certificate_key 指令。
驗證設定：重新啟動 Nginx 伺服器，並使用瀏覽器訪問你的網站，確認網址前面出現小鎖頭圖示，表示 HTTPS 已成功啟用。定期更新與備份如同我們定期更新手機上的應用程式一樣，網站的軟體也需要定期更新，才能修補潛在的安全漏洞。
更新 WordPress：定期檢查 WordPress 的更新，並及時更新核心程式、外掛程式和主題。
更新 PHP：確保你的伺服器上的 PHP 版本是最新的，或至少是安全更新過的版本。
更新伺服器軟體：定期更新伺服器作業系統和相關軟體，例如 Apache 或 Nginx。
定期備份：使用 UpdraftPlus 等外掛程式，定期備份你的網站資料，包含資料庫和檔案。建議每天或每週都備份一次，以防萬一。其他安全措施除了上述方法外，還有許多額外措施可以增強網站安全性：
使用強密碼：設定一個長度夠長、包含大小寫字母、數字和特殊符號的密碼，避免使用容易猜到的密碼。
限制後台登錄嘗試：設定錯誤登入嘗試次數限制，防止暴力破解密碼。許多主機控制面板或 WordPress 外掛程式都提供此功能。
安裝安全外掛：使用 Wordfence 等安全外掛程式，可以偵測惡意軟體、防止入侵和阻擋惡意流量。Wordfence 甚至可以記錄所有登入嘗試，方便你檢測可疑活動。
雙因素驗證：啟用雙因素驗證，增加帳號安全，即使密碼被竊取，駭客也無法登入。課堂練習
為你的網站設定 SSL/TLS，讓你的網站使用 HTTPS。
安裝一個安全外掛程式，例如 Wordfence。
手動執行一次網站備份，熟悉備份流程。結語維護網站安全是一個持續的過程，需要你定期檢查和更新。學習並實踐這些安全最佳實踐，可以有效降低網站被攻擊的風險。除了本章節的內容，你還可以進一步學習更進階的安全工具和技術，例如防火牆、入侵偵測系統等等。記住，安全意識是網站長久運營的基石，唯有持續關注網站安全，才能讓你的網站穩定、安全地運作。

第四章安裝與配置部落格平台

大家好！這章我們將學習如何安裝和配置一個部落格平台，讓你們親手建立自己的線上空間！學會架設部落格不只是技術能力的提升，更能讓你將自己的想法、作品，甚至學習心得分享給全世界，這可是展現自我和建立個人品牌的第一步喔！正確的安裝和配置更是網站順利運作的關鍵，讓我們一起開始吧！選擇 WordPress 作為範例為什麼我們選擇 WordPress 作為教學範例呢？因為 WordPress 是目前全球最普及的部落格平台之一，它擁有龐大的社群支持、豐富的外掛程式和主題，而且操作相對容易，非常適合初學者入門。學習 WordPress，可以為你未來學習其他網站架設技術打下良好的基礎。要運行 WordPress，你需要準備以下環境：

Nginx：一個高效能的網頁伺服器，負責處理網站的訪客請求。你可以把它想像成網站的門面，接待每位到訪的讀者。
PHP：一種伺服器端腳本語言，WordPress 依靠 PHP 來執行各種功能。它是網站的幕後推手，負責處理網站的運作邏輯。
MySQL：一種關係型資料庫管理系統，用於儲存 WordPress 的文章、圖片和其他資料。你可以把它想像成網站的資料庫，安全地儲存所有重要的資訊。安裝 WordPress 現在，我們開始在 Ubuntu 系統上安裝 WordPress：
安裝 PHP 和 MySQL：你可以使用 apt 命令在 Ubuntu 上輕鬆安裝： sudo apt update sudo apt install php libapache2-mod-php php-mysql php-mbstring php-xml php-curl sudo apt install mysql-server。安裝完成後，記得設定 MySQL 的密碼。
下載 WordPress：從 WordPress 官方網站下載最新版本的 WordPress，將壓縮檔解壓縮到你的網頁伺服器目錄 (例如：/var/www/html)。
配置資料庫：在 MySQL 中建立一個新的資料庫，並為它建立一個使用者帳號和密碼。你需要記住這些資料，因為稍後安裝 WordPress 時會用到。
完成安裝向導：將解壓縮好的 WordPress 資料夾內容放到你的網頁伺服器目錄後，開啟你的瀏覽器，在網址列輸入你的網站位址 (例如：http://你的伺服器IP位址)，按照 WordPress 安裝向導的步驟，填入資料庫名稱、使用者名稱、密碼等資訊，完成安裝。配置基本設置 WordPress 安裝完成後，讓我們進行一些基本設定：
設定網站標題：在 WordPress 後台的「設定」>「一般」中，設定你的網站標題，這將顯示在你的網站頂端。例如：你的名字 + 部落格，例如：「小明的學習筆記」。
設定固定連結結構：在 WordPress 後台的「設定」>「固定連結」中，選擇一個固定連結結構，例如「文章名稱」。這可以讓你的網址更簡潔易記，對搜尋引擎也更友善。
安裝基本外掛：我們推薦安裝 Yoast SEO 外掛，它可以幫助你優化你的文章，讓你的網站更容易被搜尋引擎找到。搜尋「Yoast SEO」並安裝啟用即可。
舉例：如果你要建立一個學生部落格，你可以將網站標題設定為「大學生活點滴」，固定連結結構設定為「文章名稱」，並使用 Yoast SEO 來優化你的文章，以便讓其他同學更容易找到你的部落格。課堂練習現在，請大家嘗試在自己的本地環境或 VPS 上安裝 WordPress，並完成以上的基本設定。最後，請撰寫一篇測試文章，並發布到你的部落格上！這將是你學習成果的最佳證明！結語恭喜你完成了 WordPress 的安裝與基本配置！這只是開始，還有很多更進階的功能等待你去探索。建議大家接下來可以學習網站安全相關知識，確保你的部落格安全穩定地運作。記住，實作是學習網頁開發的最佳方式，多練習，多嘗試，你就能成為一個優秀的網頁開發者！別忘了，在學習的過程中，隨時發問，互相交流，大家一起學習，一起進步！

選擇適合的部落格平台

大家好！這堂課我們將學習如何建立個人網站，而建立網站最快速、最有效率的方法之一，就是利用部落格平台。透過部落格平台，即使沒有程式設計基礎，你也能擁有屬於自己的線上空間，分享你的想法、作品，或是建立一個精美的個人履歷網站！是不是很興奮呢？讓我們一起來學習如何選擇最適合自己的部落格平台吧！什麼是部落格平台？部落格平台，簡單來說，就是一個幫你快速建立和管理網站的工具。它就像一套已經搭建好的房子，你只需要搬進去，佈置裝潢就可以了，不需要自己從地基開始蓋。常見的部落格平台主要分為兩種：內容管理系統 (CMS) 和靜態網站生成器。

內容管理系統 (CMS)：像是 WordPress、Ghost 等，它們提供使用者友善的介面，讓你透過圖形化的操作來管理網站內容，例如新增文章、圖片、調整版面等等。你不需要撰寫程式碼就能輕鬆建立一個功能完整的網站。
靜態網站生成器：像是 Jekyll、Hugo 等，它們需要你使用程式碼（通常是 Markdown 語法，相對容易學習）來撰寫網站內容，然後再將這些內容轉換成靜態網頁檔案。靜態網站速度快，安全性高，適合用於個人網站或部落格。比較主流平台現在讓我們來比較幾種常見的部落格平台，看看它們的優缺點： WordPress：
優點：功能強大且擴展性高，有大量的佈景主題和外掛程式可以選擇，讓你可以高度客製化你的網站。社群活躍，遇到問題很容易找到解答。
缺點：需要一定的學習成本，你需要學習如何使用它的介面，安裝和管理外掛程式，以及基本的網站維護。 Ghost：
優點：介面簡潔直觀，專注於寫作和內容呈現，非常適合喜歡專注於文字創作的使用者。
缺點：功能相對 WordPress 較少，客製化選項也較少。 Jekyll：
優點：速度快，安全性高，適合追求效能的使用者。因為是靜態網站，所以非常穩定，且維護成本低。
缺點：需要一定的程式碼基礎，需要學習 Markdown 語法和 Jekyll 的使用方法。如何選擇合適平台？選擇部落格平台時，你需要考慮以下幾個因素：
易用性：你是個程式設計新手嗎？那麼選擇 WordPress 或 Ghost 會比較適合你，它們的圖形化介面比較容易上手。
成本：大多數部落格平台都是免費使用的，但有些高級功能或額外的空間可能需要付費。
可自訂性：你想要一個高度客製化的網站嗎？WordPress 的擴展性最高，可以讓你完全按照自己的想法設計網站。舉例來說，如果你是一位大學生，想要建立一個記錄學習心得和生活的部落格，那麼 WordPress 或 Ghost 都是不錯的選擇。 WordPress 功能強大，可以讓你日後擴展更多功能，例如加入圖片集、留言區等。而 Ghost 則能讓你更專注於寫作，簡潔的介面也能讓你的部落格看起來更清爽。如果你是想建立一個簡單的個人網站，展示你的作品集，那 Jekyll 也許更適合你。課堂練習現在，我們來做個小練習吧！請你選擇一個你感興趣的部落格平台，例如 WordPress，然後到它的官方網站上研究一下它的功能。列出至少五個你認為對你建立網站有幫助的功能，並簡短說明為什麼這些功能對你來說很重要。例如：
文章編輯器：方便撰寫和排版文章。
媒體圖庫：方便管理和上傳圖片。
佈景主題：讓我的部落格看起來更美觀。
外掛程式：可以擴展更多功能，例如 SEO 優化。
留言功能：讓讀者可以與我互動。

選擇適合的部落格平台是建立網站的第一步，也是非常重要的一步。希望透過今天的學習，你對不同部落格平台有了更深入的了解，並能根據自己的需求選擇最合適的平台。別忘了，選擇對的工具能事半功倍！現在，就開始你的網站架設旅程吧！接下來，我們將學習如何安裝並設定你所選擇的部落格平台。

影片：

在 Ubuntu Linux 上設置 VPS 主機

大家好！歡迎來到第二章的學習！在上一章我們學習了網站架設的基本概念，這一章我們將更進一步，學習如何使用虛擬專用伺服器（VPS）來建立屬於你自己的網站！什麼是 VPS，為什麼它對你很重要？ VPS，也就是虛擬專用伺服器，可以想像成你在大型伺服器上租用了一塊獨立的空間。不像共享主機，你的網站不會與其他網站共用資源，擁有獨立的作業系統和資源，這讓你的網站運行更穩定、速度更快，而且擁有更高的安全性。如果你想要建立一個屬於自己的部落格，記錄生活點滴，分享你的學習心得，那 VPS 將是絕佳的選擇，因為你可以完全控制你的網站環境，並且可以根據你的需求擴展資源。常見的 VPS 提供商包括 DigitalOcean、Linode 和 Amazon Web Services (AWS) 等，他們都提供不同的方案和價格，你可以根據自己的預算和需求選擇。舉例來說，你可以在自己的學生部落格上安裝你喜歡的程式，設定自己的主題，甚至開發一些客製化的功能，這在共享主機上是比較困難的。設置 Ubuntu VPS 讓我們開始在 Ubuntu Linux 上設置你的 VPS 吧！以下步驟將引導你完成整個過程：選擇 VPS 提供商

首先，你需要選擇一個 VPS 提供商。DigitalOcean、Linode 和 AWS 都是不錯的選擇，他們都提供免費試用或免費方案，非常適合初學者練習。你可以參考各家提供的方案比較，選擇最適合你需求和預算的方案。創建 Ubuntu 22.04 實例
在選擇好提供商之後，你需要創建一個 Ubuntu 22.04 的 VPS 實例。這就像是在線上租用一台虛擬電腦，預先安裝了 Ubuntu 作業系統。你只需要按照提供商的指引，選擇伺服器位置（選擇離你較近的地點可以提升速度）、CPU、記憶體和儲存空間等規格即可。記得選擇 Ubuntu 22.04 LTS 版本，因為它具有較長的支援期限。通過 SSH 連接到伺服器
創建實例後，提供商會提供你伺服器的 IP 位址和 SSH 密鑰或密碼。你需要使用 SSH 客户端（例如終端機）來連接到你的伺服器。在終端機輸入以下指令，將 <你的伺服器IP位址> 和 <你的使用者名稱> 替換成你的資訊： ssh <你的使用者名稱>@<你的伺服器IP位址> 第一次連接時，系統可能會提示你確認伺服器金鑰，輸入 “yes” 即可。更新系統
連接到伺服器後，你需要更新系統套件。這可以確保你的伺服器運行最新的軟體版本，並提升安全性。輸入以下指令： sudo apt update sudo apt upgrade sudo 指令表示你以系統管理員權限執行指令。安裝基本服務安裝 Nginx 網頁伺服器
Nginx 是一個強大且高效的網頁伺服器，我們將使用它來提供你的網站內容。輸入以下指令安裝 Nginx： sudo apt install nginx 配置防火牆 (UFW)
UFW (Uncomplicated Firewall) 是一個簡單易用的防火牆，我們需要設定它來允許外部訪問你的網站。輸入以下指令來允許通過 80 端口 (HTTP) 和 443 端口 (HTTPS) 的連接： sudo ufw allow 'Nginx Full' sudo ufw enable 簡單的 Nginx 配置範例
雖然預設的 Nginx 配置已經足夠簡單，你也可以進一步修改它來客製化你的網站。Nginx 的設定檔通常位於 /etc/nginx/sites-available/default。請注意修改此檔案需要小心謹慎，錯誤的設定可能導致網站無法正常運行。例如，你可以修改 server_name 指令來設定你的網站域名。課堂練習
現在，請大家利用 AWS 免費方案（或是其他提供商的免費試用方案），按照上述步驟，建立一個 Ubuntu 22.04 的 VPS，安裝 Nginx，並確認伺服器是否正常運行。你可以通過瀏覽器訪問你的伺服器 IP 位址來確認，如果一切正常，你應該會看到 Nginx 的預設網頁。結語恭喜你完成了 VPS 的設置！現在你已經擁有了自己的虛擬伺服器，可以開始建立你的網站了！接下來你可以選擇一個你喜歡的部落格平台，例如 WordPress，並將它安裝到你的 VPS 上。學習伺服器管理技能在未來的網頁開發工作中至關重要，請持續努力學習，相信你一定可以成為一名優秀的網頁開發者！有任何問題，歡迎隨時提問。

網站架設入門：理解與配置 DNS

大家好！歡迎來到網站架設的奇妙世界！在開始動手建立你的個人網站之前，我們需要先了解一個重要的概念：DNS。 DNS，全名是域名系統 (Domain Name System)，簡單來說，它就像一個電話簿，將我們容易記住的網域名稱（例如：google.com, facebook.com）轉換成電腦能理解的IP地址（例如：172.217.160.142）。沒有DNS，我們就只能用一堆數字來存取網站，那會非常不方便！學會配置DNS，是架設網站的第一步，也是非常重要的一步，它決定了你的網站是否能夠被其他人訪問。所以，這堂課我們將深入淺出地學習如何理解和配置DNS。什麼是 DNS？ DNS 的核心功能是將域名轉換為 IP 地址。想像一下，你的網站叫做 myblog.com，它實際上存在於一台伺服器上，這台伺服器有一個獨特的 IP 地址。當你在瀏覽器輸入 myblog.com 時，你的電腦會先向 DNS 伺服器查詢 myblog.com 的 IP 地址，然後再根據獲得的 IP 地址連接到伺服器，最後顯示你的網站內容。 DNS 裡面包含許多不同的記錄類型，其中最常見的有：

A 記錄：將域名映射到一個 IPv4 地址。例如，將 myblog.com 映射到你的伺服器 IP 地址 192.168.1.100。
CNAME 記錄：將一個域名映射到另一個域名。這通常用於簡化管理和提高靈活性。例如，可以將 www.myblog.com 映射到 myblog.com。
MX 記錄：指定郵件伺服器的地址，讓你的網站可以接收電子郵件。這些記錄就像電話簿裡的不同項目，每個項目都指向不同的資訊。選擇域名與註冊商在配置 DNS 之前，你首先需要一個域名。選擇一個好記、簡潔、與你的網站內容相關的域名非常重要。你可以參考一些建議：
保持簡短：容易記憶和輸入。
使用關鍵字：方便搜尋引擎找到你的網站。
選擇合適的頂級域名（TLD）：例如 .com, .tw, .net 等。接下來，你需要選擇一個域名註冊商來註冊你的域名。常見的域名註冊商包括 GoDaddy、Namecheap、Cloudflare 等。這些註冊商提供域名註冊、DNS 管理等服務。選擇哪個註冊商取決於你的需求和預算，建議多比較幾家。註冊域名的步驟通常包括：
搜尋可用的域名。
選擇域名並加入購物車。
填寫你的個人資訊和付款資訊。
完成付款並等待域名註冊成功。配置 DNS 記錄註冊好域名後，你就可以開始配置 DNS 記錄了。以下步驟以一個虛構的 myblog.com 網站為例：
登入你的域名註冊商後台。每個註冊商的後台介面可能略有不同，但基本功能都差不多。
找到 DNS 設定頁面。
添加一個 A 記錄：
主機名稱：@ (通常代表根域名)
指向的 IP 地址：你的伺服器 IP 地址 (例如：192.168.1.100)
TTL (Time To Live): 這是記錄的快取時間，一般預設值即可。
添加一個 CNAME 記錄 (可選)：
主機名稱：www
指向的域名：@
(如果需要接收email，請添加MX記錄，詳細步驟請參考你的域名註冊商說明)
保存設定。完成以上步驟後，你需要等待一段時間 (通常幾分鐘到幾小時) 才能讓 DNS 更新生效。課堂練習為了讓你更好地理解 DNS 配置，我們來做一個小練習。你可以使用 Freenom 註冊一個免費的子域名 (例如：yourname.tk)，然後嘗試為它配置一個 A 記錄，指向一個免費的線上 IP 位置測試網站所提供的 IP 位置。之後，使用瀏覽器輸入你的子域名，看看能否正確解析並顯示結果。結語恭喜你完成了 DNS 配置的學習！理解和配置 DNS 是架設網站的基礎，它確保你的網站能夠被全世界的人訪問。完成這個步驟後，你就可以開始準備你的伺服器環境(例如 VPS)，並開始真正地構建你的網站了！希望今天的課程對你有幫助，讓我們在下一章繼續學習更多網站架設的知識！

優惠推廣