博客搭建教程(1)：从零开始 — 安装环境与第一个网页

前言：这篇教程写给谁？

如果你对编程几乎不了解，只会用浏览器上网，但想拥有一个自己的博客网站——这篇教程就是为你写的。

我们会从安装软件开始，一步一步搭建出一个完整的博客。每篇教程预计 30-60 分钟可以跟着做完。

不需要任何基础，只要会打字、会用浏览器就行。

什么是 JavaScript 和 Node.js？

JavaScript（简称 JS）是网页的编程语言。你在浏览器里看到的所有动态效果（点击按钮、弹出窗口、动画）都是 JavaScript 做的。

Node.js 是让 JavaScript 脱离浏览器、在电脑上直接运行的工具。有了它，我们可以用 JavaScript 写服务器程序。

npm（Node Package Manager）是 Node.js 自带的包管理器。"包"就是别人写好的代码，你一句命令就能下载使用。比如 npm install xxx 就是下载 xxx 这个包。

比喻：Node.js 像是手机的操作系统，npm 像是应用商店，各种"包"就是 App。

第一步：安装 Node.js

Windows 用户

打开 https://nodejs.org
下载左边的 LTS 版本（长期支持版，最稳定）
双击安装，一路点 Next，全部默认选项即可
安装完成后，打开"命令提示符"（按 Win+R，输入 cmd，回车）
输入 node --version，如果显示 v20.x.x 之类的版本号，说明安装成功

Mac 用户

打开 https://nodejs.org，下载 LTS 版本的 .pkg 文件
双击安装
打开"终端"（在启动台搜索 Terminal）
输入 node --version，显示版本号即成功

验证安装

打开终端（或命令提示符），输入以下命令：

node --version
# 应该输出类似 v20.11.0

npm --version
# 应该输出类似 10.2.4

两个都显示版本号，就说明装好了。

第二步：理解我们要做什么

我们要搭建一个全栈博客。"全栈"是什么？

浏览器（前端）         服务器（后端）         数据库
   ↓                    ↓                   ↓
用户看到的页面    ←    处理逻辑和API    ←   存储文章数据

前端：用户在浏览器里看到的网页界面
后端：服务器上运行的代码，处理文章存储、用户登录等
数据库：存文章、评论等数据的地方

我们用的是 Next.js 这个框架，它把前后端合在一起，一个项目搞定所有事情。

第三步：创建项目

打开终端，输入：

npx create-next-app@latest my-blog --typescript --tailwind --app --src-dir

这个命令做了什么？

npx：运行 npm 包的命令（不需要提前安装）
create-next-app：Next.js 官方脚手架工具
my-blog：项目文件夹名字（可以自己改）
--typescript：使用 TypeScript（JS 的增强版，带类型检查）
--tailwind：使用 Tailwind CSS（写样式的工具）
--app：使用 App Router（Next.js 最新的路由方式）
--src-dir：代码放 src 目录里

运行后等一两分钟，看到 Success! 就说明创建好了。

cd my-blog
npm run dev

打开浏览器访问 http://localhost:3000，你应该看到一个 Next.js 的欢迎页面。

第四步：项目里有什么？

my-blog/
├── src/app/           # 页面代码
│   ├── layout.tsx     # 全局布局（所有页面的外壳）
│   ├── page.tsx       # 首页
│   └── globals.css    # 全局样式
├── public/            # 图片等静态文件
├── package.json       # 项目配置和依赖列表
├── tsconfig.json      # TypeScript 配置
└── next.config.ts     # Next.js 配置

第五步：修改首页

打开 src/app/page.tsx，删除里面的全部内容，改成：

export default function Home() {
  return (
    <div>
      <h1>你好，世界！</h1>
      <p>这是我的第一个 Next.js 页面。</p>
    </div>
  );
}

保存后回到浏览器，页面自动刷新了——这就是热更新，改了代码立刻能看到效果。

小结

这篇教程我们：

安装了 Node.js 和 npm
理解了前端/后端/数据库的概念
创建了第一个 Next.js 项目
运行了开发服务器
修改了首页内容

下一篇我们来设计数据库，用 Prisma 管理文章数据。