網頁的構成：HTML, CSS, JS
使用開源工具自架網站一定要對網頁構成有基本理解，架設網站本來就是工程師在做的事情，只是現在資訊流通、工具整合因此門檻越來越低，然而門檻變低不代表用戶可以什麼都不懂，而且我們用的是免費的開源工具不是付費服務，想對基本構成毫無理解的使用是緣木求魚，在你需要自定義1的時候這些問題就會顯露出來。
標記語言
會用到 Markdown 因此就要介紹 Markdown 是什麼：一種標記語言。
標記語言就像 Latex, HTML 一樣，是一種用於標記「文件結構」的語言，不是可運作的程式語言。
比如說 Markdown 設定兩個星號之間是粗體，或是 HTML 標記 <p> </p> 之間就代表一個 paragraph。透過這兩個例子可以清楚理解標記語言是一種在純文字中嵌入結構性標記的語言，而不是可運行的程式語言。
也就是因為 Markdown 和 HTML 都是標記語言，因此 SSG 工具才會使用 Markdown 轉 HTML，因為 Markdown 規則簡單易懂適合人類編輯，且身為標記語言，因此能夠被轉換成另一種標記語言，轉換成 HTML 這種網頁用的標記語言後2，Markdown 文件就搖身一變成為網頁。
HTML
HTML（HyperText Markup Language 超文本標記語言）是一種標記語言而不是程式語言。以下是一個基礎範例，可以清楚看出網頁的基本結構由 html 在外，裡面包含 head 和 body 構成。
<!DOCTYPE html>
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是一段文字內容。</p>
<p id="count">你已經點擊了 0 次</p>
<button onclick="addCount()">點擊我</button>
</body>
</html>
CSS
但是 HTML 沒有樣式，因此需要 CSS（Cascading Style Sheets 級聯樣式表）設定外觀，CSS 只是樣式表，不是標記語言也不是程式語言。
<!DOCTYPE html>
<html>
<head>
<title>我的第一個網頁</title>
<style>
body {
/* 如果不設定 max-width 文字會延伸到整個螢幕寬度，閱讀會非常吃力 */
max-width: 80ch;
margin: 0 auto;
padding: 20px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是一段文字內容。</p>
<p id="count">你已經點擊了 0 次</p>
<button onclick="addCount()">點擊我</button>
</body>
</html>
JavaScript
現在我們知道網頁就是由標記語言和樣式表組合成的靜態文件，完全沒有動態效果該怎麼辦？為了解決這個問題因此發明了一個全新的程式語言：JavaScript，他的誕生目的就是為了讓網頁有互動性。
JS 和 Java 有同樣名稱的原因只是當年 Java 很火於是故意蹭風頭把 Java 加進名字裡。
<!DOCTYPE html>
<html>
<head>
<title>我的第一個網頁</title>
<style>
body {
max-width: 80ch;
margin: 0 auto;
padding: 20px;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
}
</style>
<script>
let clicks = 0;
function addCount() {
clicks++;
document.getElementById('count').textContent = '你已經點擊了 ' + clicks + ' 次';
}
</script>
</head>
<body>
<h1>歡迎來到我的網站</h1>
<p>這是一段文字內容。</p>
<p id="count">你已經點擊了 0 次</p>
<button onclick="addCount()">點擊我</button>
</body>
</html>
這個範例展示了三者的協作：HTML 定義結構，CSS 設定外觀，JavaScript 實現互動，你可以把這份 HTML 文件存成 file.html 然後用瀏覽器打開，就已經建立了自己的第一個網站。