博客搭建全记录

从零开始搭建 DoseTech Blog 静态博客首页

项目概述

本篇记录了如何为域名 www.dosetech.top 搭建一个静态博客首页，包含完整的操作步骤和技术细节。

项目 内容
域名 www.dosetech.top
类型 静态博客首页
服务器 Docker Nginx 容器
本地路径 /var/www/dosetech_blog/
容器路径 /usr/share/nginx/html/

架构图

用户请求
www.dosetech.top → DNS 解析
/etc/hosts → 本机 IP
127.0.0.1 → Docker Nginx
:80 → 博客首页
index.html

详细操作步骤

第一步：创建本地博客目录

1 创建博客文件存放目录
mkdir -p /var/www/dosetech_blog

第二步：编写静态网页

2 创建 index.html 首页文件

使用纯 HTML + CSS 编写静态博客首页，包含：

  • 响应式设计，适配移动端和桌面端
  • 渐变紫色主题背景
  • 顶部导航栏
  • 首页英雄区域
  • 博客文章卡片列表
  • 文章分类标签
  • 页脚信息

第三步：配置 hosts 文件

3 添加域名解析记录
echo "127.0.0.1 www.dosetech.top" >> /etc/hosts

说明：由于是本地测试环境，添加 hosts 记录将域名解析到本地。生产环境需要在 DNS 服务商处配置 A 记录。

第四步：查看现有 Docker 服务

4 检查运行中的 Docker 容器
docker ps --format "table {{.Names}}\t{{.Ports}}\t{{.Image}}" # 输出结果： NAMES PORTS IMAGE my-nginx 0.0.0.0:80->80/tcp nginx:latest chat-app 0.0.0.0:5000->5000/tcp flask-chat-app

第五步：复制文件到 Nginx 容器

5 将博客文件部署到 Nginx 容器
docker cp /var/www/dosetech_blog/index.html my-nginx:/usr/share/nginx/html/index.html

使用 docker cp 命令将本地创建的博客首页复制到 Docker Nginx 容器中。

第六步：验证部署结果

6 测试博客访问
curl -s http://www.dosetech.top/ | grep -E "(DoseTech|Blog)" # 输出结果： <title>DoseTech Blog - 技术分享与生活记录</title> /* Blog Cards */ <h1>DoseTech Blog</h1>

文件结构

/var/www/dosetech_blog/ # 本地博客目录 └── index.html # 博客首页文件 /etc/hosts # hosts 域名解析配置 └── 127.0.0.1 www.dosetech.top /www/server/panel/vhost/nginx/ # Nginx 虚拟主机配置 └── www.dosetech.top.conf

关键技术点

1. Docker Nginx 容器

使用 Docker 容器化方式运行 Nginx，通过 docker-proxy 将宿主机的 80 端口映射到容器内部。

2. 静态文件服务

Nginx 直接服务 HTML 静态文件，无需后端动态处理，访问速度快，资源占用低。

3. 响应式设计

使用 CSS Flexbox 和 Grid 布局，配合媒体查询实现移动端适配。

4. hosts 本地解析

在 /etc/hosts 中添加记录，实现本地域名解析。

后续扩展建议

  • 添加更多页面：文章详情页、关于页面、标签分类页
  • 集成框架：可使用 Hexo、Hugo、Jekyll 等静态博客框架
  • 添加博客功能：评论系统（Disqus/Valine）、搜索功能、文章归档
  • HTTPS 配置：配置 SSL 证书启用 HTTPS
  • CDN 加速：接入 CDN 提升访问速度
← 返回博客首页