如何将cv模板部署到nginx:从webroot到HTTPS的完整部署指南(含SSL证书与缓存策略配置)

📅 2026/8/24 16:43:01
如何将cv模板部署到nginx:从webroot到HTTPS的完整部署指南(含SSL证书与缓存策略配置)
如何将cv模板部署到nginx从webroot到HTTPS的完整部署指南含SSL证书与缓存策略配置【免费下载链接】cv:mortar_board: Best in Class modern CV, Resume and Portfolio website template. All-in-One-Page site with simply customizable builder.项目地址: https://gitcode.com/gh_mirrors/cv5/cvcv 是一款现代化的简历CV、作品集与个人主页单页模板内置可视化自定义构建器通过make build/make deploy即可生成静态网站目录webroot非常适合用 nginx 直接托管。本指南带你完整走一遍克隆仓库 → 构建 webroot → 配置 nginx 虚拟主机 → 签发 SSL 证书实现 HTTPS → 配置静态资源缓存策略最终得到一个安全、快速、可公开访问的 cv 模板站点。一键构建 webroot部署 cv 模板的第一步整个项目使用 Makefile 管理构建流程部署到 nginx 之前只需要三步git clone https://gitcode.com/gh_mirrors/cv5/cv cd cv make setup # 安装 gulp、bower 等构建依赖 make build # 编译静态站点 make deploy # 生成 webroot 目录执行完成后项目根目录会出现webroot目录实际是指向dist的软链接里面就是可直接被 nginx 托管的静态文件index.html、压缩后的 CSS/JS、图片资源等。 在部署前记得先把自己的姓名、经历、技能等信息填入 config/person.json它会被构建器替换进页面模板。make deploy的具体逻辑可以查看 Makefile核心就是dist→webroot的发布动作。配置 nginx 虚拟主机指向 webroot 根目录项目自带了一份可直接参考的 nginx 虚拟主机配置 etc/nginx/sites-available/010-cv它是部署的核心server { listen 443 ssl; listen [::]:443 ssl ipv6onlyon; server_name cv.example.com; # 换成你自己的域名 root /var/www/html/cv.git/webroot; # 指向构建产物 index index.html; access_log /var/log/nginx/cv.access.log main; error_log /var/log/nginx/cv.error.log warn; location / { include /etc/nginx/proxy_params; try_files $uri $uri/ 404; } location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 15d; } }三个必须确认的关键点root必须指向make deploy生成的webroot目录否则访问会 404server_name替换为你的域名并在系统 hosts 或 DNS 中解析到本机 IPtry_files $uri $uri/ 404静态文件不存在时明确返回 404而不是落到其他 location。配好后把该文件软链到sites-enabled/然后nginx -t sudo systemctl reload nginx。配置 SSL 证书Certbot 自动签发与 HTTP 跳转同一份 vhost 中还包含 HTTPS 相关配置由 Certbot 自动管理ssl_certificate /etc/letsencrypt/live/cv.example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/cv.example.com/privkey.pem; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; include /etc/letsencrypt/options-ssl-nginx.conf;操作流程先用 80 端口裸配置把站点跑通去掉 ssl 相关行确保 Certbot 能通过 HTTP 完成域名验证运行sudo certbot --nginx -d cv.example.com它会自动写入上面四行 SSL 配置同时生成一个HTTP → HTTPS 301 跳转的 server 块见 010-cvserver { server_name cv.example.com; listen 80; listen [::]:80; if ($host cv.example.com) { return 301 https://$host$request_uri; } return 404; } 注意服务器防火墙需要放行80和443端口其中 80 端口是 Lets Encrypt 证书续签所必需的。配置缓存策略让图片、CSS、JS 秒开缓存策略是静态站点性能的关键。项目提供了两份可直接复用的 snippet1. 按内容类型精细控制过期时间— cache_expiration.conf通过map $sent_http_content_type按 MIME 类型设置expires规则很合理资源类型过期时间说明HTML0每次请求服务器保证内容更新CSS / JS1 年内容变更时配合文件名哈希更新图片 / 字体 / 音视频1 个月体积大、变更少favicon1 周文件名固定无法哈希2. 按扩展名快速配置— cache_settings.conflocation ~* \.(css|js|json)$ { expires 0; } location ~* \.(jpg|jpeg|png|gif|ico|webp|mp4)$ { expires 365d; } location ~* \.(eot|svg|ttf|woff|woff2)$ { expires 365d; }在nginx.conf的http {}块中通过include引入即可全局生效。cv 模板自带的 nginx.conf 就是示例同时开启了 gzip 压缩、UTF-8 字符集character_encodings.conf、隐藏版本号server_software_information.conf这些安全与性能细节建议一并保留。部署验证与常见问题部署完成后按顺序验证sudo nginx -t # 语法检查 curl -I http://cv.example.com # 应返回 301 → https curl -I https://cv.example.com # 应返回 200 curl -sI https://cv.example.com/logo.png | grep -i expires # 检查缓存头常见问题速查现象原因与解决访问 404root未指向webroot或未执行make deploy无法签发证书80 端口未放行或域名未解析到本机HTTPS 循环跳转server_name与跳转块中的域名不一致改动不生效HTML 被浏览器缓存先强刷或确认 HTMLexpires 0按照以上流程你的 cv 简历/作品集站点就完成了从 webroot 静态发布到 HTTPS 缓存策略的完整部署——安全、快速、且内容更新只需重新执行一次make deploy即可生效。【免费下载链接】cv:mortar_board: Best in Class modern CV, Resume and Portfolio website template. All-in-One-Page site with simply customizable builder.项目地址: https://gitcode.com/gh_mirrors/cv5/cv创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考