很多人搭博客只会点“一键安装”，却连自己博客的首页文件放在哪里都不知道。本文带你手写第一个HTML页面，并用宝塔面板亲手传上服务器，彻底搞懂博客的本质。
无论你用 WordPress、Typecho 还是 Hexo，最终呈现给你和读者的，都是浏览器里一个个网页。而任何一个网页的骨架，都是由 HTML 搭起来的；皮肤的样式，由 CSS 来控制；动作交互，由 JavaScript 来做。
所以，在接触任何“一键搭建”工具之前，我们先亲自写一个最简单的博客页面——哪怕只有一篇文章。你会发现，搭建博客根本没那么神秘。
在你的电脑上新建一个文本文档，重命名为 index.html（注意后缀是 .html 而不是 .txt）。用记事本或 VS Code 打开，输入以下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个博客</title>
<style>
/* 这里写CSS样式，用来美化页面 */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
padding: 20px;
}
.blog-post {
background-color: white;
max-width: 800px;
margin: 0 auto;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
}
.date {
color: #999;
font-size: 14px;
}
p {
line-height: 1.6;
color: #444;
}
</style>
</head>
<body>
<div class="blog-post">
<h1>我的第一篇博客文章</h1>
<div class="date">2026年4月24日</div>
<p>这是我亲手用HTML和CSS写出的第一个博客页面。原来博客就是这样一个个文件组成的！</p>
<p>只要把这种文件放到一台永不关机的电脑（服务器）上，别人就能通过互联网访问了。</p>
</div>
</body>
</html>保存文件，然后用浏览器打开这个 index.html，你会看到一篇干净整洁的博客文章。恭喜，你已经“手搓”了一个博客页面！
确实。如果你要写 100 篇文章，难道要做 100 个 .html 文件，然后手动改标题、日期、内容吗？这就是为什么我们需要博客系统——它可以自动根据你的文章内容，生成结构统一的页面。
但无论如何，最终生成到浏览器里的，仍然是 HTML+CSS。理解了这一点，后面所有的工具你都能看透本质。
既然最终都是 HTML 文件，我们要做的无非是两件事：
根据你想投入的时间和技术水平，选一条路：
| 你的情况 | 推荐方案 | 生成原理 |
|---|---|---|
| 完全不懂代码，但愿意用鼠标操作 | WordPress（动态博客） | 程序实时从数据库读取文章，动态合成HTML |
| 会一点Markdown，想省服务器资源 | Hexo + GitHub Pages | 在电脑上生成整套HTML文件，然后传上去 |
| 想亲手控制一切，了解原理 | 纯手写HTML+CSS（少量页面） | 手动写每个页面文件 |
| 新手最省心 | 宝塔面板 + Typecho | 通过可视化界面安装系统，自动生成页面 |
本文重点讲解“新手最省心”的方案，并彻底讲透如何上传文件到服务器。
你本地的电脑，别人是无法直接访问的（因为在家里路由器后面）。要让全世界看到你的博客，你需要一台有公网IP、24小时开机的电脑这就是服务器。
以 腾讯云 为例（阿里云、华为云同理）：
购买后，你会得到一个 公网 IP，比如 123.45.67.89。
如果你直接在命令行操作 Linux，可能要背很多命令。宝塔面板 提供网页版图形界面，像操作电脑桌面一样管理服务器。
bashwget -O install.sh https://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh ed8484bec你的手写 index.html 或博客系统的文件，必须放到服务器上特定的目录，才能通过网址访问。宝塔面板提供了两种上传方式，按你喜欢来。
现在，这个文件已经在你服务器上了。 但怎么通过浏览器访问呢？我们需要设置站点。
在宝塔左侧点击 “网站” → “添加站点”：
现在，打开浏览器，访问 http://你的IP/（比如 http://123.45.67.89/），你写的那个博客页面就显示出来了！
如果你喜欢用专业的 FTP 软件（如 FileZilla），宝塔面板默认支持 FTP 服务。你只需在宝塔“FTP”菜单里添加一个 FTP 账号，然后用 FileZilla 连接到服务器的 21 端口，就能像操作本地文件夹一样拖拽上传。
你已经知道，只要把一个 index.html 文件放到服务器相应目录，并设置好网站，别人就能访问。但是手动写每一篇文章的效率太低了。接下来我们利用博客系统自动生成文章页面。
Typecho 是一个非常小巧的博客程序，你不需要手动写 HTML，只需要在后台写文章，它就会自动生成并保存到数据库中，当用户访问时动态合成 HTML 页面。
你会发现，你写的文章会按照漂亮的固定格式显示这一切不需要你懂 HTML，因为 Typecho 的主题已经帮你写好了 CSS 和页面结构。如果你好奇主题是怎么工作的，可以在 /www/wwwroot/typecho/usr/themes/ 目录下找到一个 post.php 文件，里面就是控制每篇文章样式的模板。
Hexo 是在你本地电脑上，把你写的 Markdown 文章“编译”成一堆 HTML 文件，然后你再把这堆文件通过宝塔的“上传”功能，整个传到服务器的某个目录里。
步骤简述：
npm install hexo-cli -g无论哪种方法，你最终上传到服务器的，仍然是 HTML、CSS、JS 这些浏览器能看懂的文件。
通过这篇文章，你学到了：
