建站代码教学-编程学习之家

想要一个属于自己的网站？本教程从域名注册开始，一步步带你完成服务器选购、页面编写、部署上线全流程。学完之后，你能独立上线一个完整的个人网站。

1. 域名注册

域名是网站的"门牌号"，例如 pgsr.cn。注册域名需要通过域名注册服务商，国内常用阿里云、腾讯云、西部数码等。

选择后缀：商业用 .com、国内首选 .cn、机构用 .org、个人 .me
命名建议：简短易记、与品牌相关、避免数字与连字符
价格区间：首年 30-80 元常见，续费 60-100 元/年

国内服务器绑定域名必须完成 ICP 备案，备案期间网站无法访问，建议提前 20 天办理。海外服务器则无需备案。

2. 服务器选购

服务器是网站文件的"存放地"，让网站 24 小时可被访问。新手推荐云服务器（VPS），性价比高、易管理。

# 常见配置参考
入门级：1核 CPU / 1G 内存 / 1M 带宽  ≈ 50 元/月
标准型：2核 CPU / 4G 内存 / 3M 带宽  ≈ 120 元/月
进阶型：4核 CPU / 8G 内存 / 5M 带宽  ≈ 280 元/月

操作系统建议选 Ubuntu 22.04 LTS 或 CentOS 7+。购买后记录公网 IP，下一步要用。安全组需开放 80（HTTP）、443（HTTPS）、22（SSH）端口。

3. 域名解析

将域名指向服务器 IP 的过程叫"解析"。在域名管理后台添加 A 记录即可：

记录类型：A
主机记录：@      （代表根域名 pgsr.cn）
记录值：  47.xx.xx.xx   （你的服务器公网 IP）
TTL：     600     （10 分钟生效，可加速）

# 补充 www 子域名解析
记录类型：A
主机记录：www
记录值：  47.xx.xx.xx

解析生效需要几分钟到几小时不等。可用 ping 域名 验证是否指向正确 IP。

4. HTML 页面结构

网页的本质就是 HTML 文件。先在本地写好页面，再上传到服务器即可被访问。下面是一个简洁的首页结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的个人主页</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <h1>你好，我是张三</h1>
    <p>前端开发者 / 摄影爱好者</p>
    <a class="btn" href="#contact">联系我</a>
  </header>
  <main>
    <section id="about">...</section>
    <section id="works">...</section>
  </main>
  <footer>© 2026 张三</footer>
</body>
</html>

5. CSS 视觉美化

HTML 提供骨架，CSS 给骨架穿上衣服。下面是配套的样式文件，实现一个清爽的首页：

* { margin: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", sans-serif; color: #333; }

.hero {
  min-height: 60vh;
  background: linear-gradient(135deg, #7EC4D9, #A8D8B9);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}
.hero h1 { font-size: 42px; margin-bottom: 12px; }
.hero p { font-size: 18px; opacity: 0.9; margin-bottom: 24px; }
.btn {
  display: inline-block;
  padding: 12px 28px;
  background: #fff;
  color: #2D6A8E;
  border-radius: 24px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s;
}
.btn:hover { transform: translateY(-2px); }

6. JavaScript 交互

给网页加一些动态效果，比如平滑滚动、表单校验、按钮反馈：

// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(a => {
  a.addEventListener("click", (e) => {
    const target = document.querySelector(a.getAttribute("href"));
    if (target) {
      e.preventDefault();
      target.scrollIntoView({ behavior: "smooth" });
    }
  });
});

// 返回顶部按钮
const backTop = document.querySelector(".back-top");
window.addEventListener("scroll", () => {
  backTop.style.display = window.scrollY > 300 ? "block" : "none";
});

7. 网站部署上线

页面写好后，需上传到服务器才能被全世界访问。最常用的方案是 Nginx 作为静态文件服务器。

# 1. SSH 登录服务器
ssh root@47.xx.xx.xx

# 2. 安装 Nginx
apt update && apt install -y nginx

# 3. 创建网站目录并上传文件
mkdir -p /var/www/mysite
# 本地上传（另开终端）
scp -r ./site/* root@47.xx.xx.xx:/var/www/mysite/

# 4. 配置 Nginx 站点
vim /etc/nginx/conf.d/mysite.conf

Nginx 站点配置文件：

server {
  listen 80;
  server_name pgsr.cn www.pgsr.cn;
  root /var/www/mysite;
  index index.html;

  location / {
    try_files $uri $uri/ =404;
  }

  # 静态资源缓存
  location ~* \.(jpg|png|css|js)$ {
    expires 30d;
  }
}

# 5. 重载 Nginx 让配置生效
nginx -t              # 检查配置语法
systemctl reload nginx

浏览器访问 http://pgsr.cn，你的网站就上线了！

8. HTTPS 配置

HTTP 是明文传输，浏览器会标"不安全"。生产环境必须配置 HTTPS，使用免费的 Let's Encrypt 证书：

# 安装 Certbot
apt install -y certbot python3-certbot-nginx

# 自动配置 HTTPS 证书
certbot --nginx -d pgsr.cn -d www.pgsr.cn

# 测试自动续期（证书 90 天过期，Certbot 会自动续）
certbot renew --dry-run

配置完成后浏览器会显示绿色小锁，访问安全。Certbot 会自动修改 Nginx 配置启用 SSL，并设置定时任务自动续期。

上线检查清单

网站上线前请逐一检查：

移动端适配是否正常（用 Chrome DevTools 切换设备测试）
所有链接是否有效，没有 404
图片是否压缩，首屏加载是否 < 3 秒
是否配置了 HTTPS
是否设置了 404 页面、sitemap.xml
是否提交了搜索引擎收录（百度站长、Google Search Console）

建议学完本节后，按上述步骤独立上线一个个人主页。完成"上线第一个网站"的成就感，会成为你继续学习的强大动力。后续可学习《源码优化讲解》提升性能。

建站代码教学

建站代码教学：从零到上线一个网站