logo
0
0
WeChat Login
添加 Docker 部署支持

萝卜家族 - 个人主页

一个简洁优雅的黑白风格个人主页,展示个人信息、技能和项目。

功能特性

  • 现代简洁的黑白设计风格
  • 响应式布局,支持移动端
  • 平滑滚动和动画效果
  • 展示个人信息、技能、项目
  • 支持社交链接(CNB、GitHub、邮箱、微博)
  • 网站备案信息展示

项目结构

. ├── index.html # 主页面 ├── style.css # 样式文件 ├── script.js # 交互脚本 ├── avatar.png # 头像图片 ├── project1.png # 项目1封面 ├── project2.png # 项目2封面 ├── cnb-icon.svg # CNB图标 ├── Caddyfile # Caddy配置 ├── Dockerfile # Docker构建文件 └── server.js # Node.js测试服务器

本地预览

使用 Node.js

node server.js

访问 http://localhost:3000

Docker 部署

构建镜像

docker build -t luobo-homepage .

本地测试(HTTP 模式)

docker run -d -p 80:80 --name homepage luobo-homepage

访问 http://localhost

生产环境(自动 HTTPS)

docker run -d \ -p 80:80 \ -p 443:443 \ -p 443:443/udp \ -e DOMAIN_NAME=yourdomain.com \ -v caddy_data:/data/caddy \ -v caddy_config:/config/caddy \ --name homepage \ luobo-homepage

特性

  • 自动申请/续期 Let's Encrypt 证书
  • 通过 DOMAIN_NAME 环境变量设置域名
  • 挂载 /data/caddy 持久化证书
  • 支持 HTTP/3 (QUIC)
  • 内置健康检查
  • Gzip 压缩

Docker Compose 部署

version: '3' services: homepage: build: . ports: - "80:80" - "443:443" - "443:443/udp" environment: - DOMAIN_NAME=yourdomain.com volumes: - caddy_data:/data/caddy - caddy_config:/config/caddy restart: unless-stopped volumes: caddy_data: caddy_config:

自定义配置

修改个人信息

编辑 index.html 文件,更新以下内容:

  • 姓名、简介
  • 社交链接
  • 项目信息
  • 备案号

修改样式

编辑 style.css 文件调整颜色、布局等。

替换图片

  • avatar.png - 头像图片
  • project1.png - 项目1封面
  • project2.png - 项目2封面

技术栈

  • HTML5 / CSS3 / JavaScript
  • Caddy - 现代 Web 服务器
  • Docker - 容器化部署

许可证

MIT License