一、核心方案选择
1. 网站托管
✅ GitHub Pages（永久免费）
- 支持自动部署静态网站
- 自带SSL证书
- 免费二级域名：
你的用户名.github.io
2. 建站工具
✅ Hugo + PaperMod主题（开源免费）
- 全球最快的静态网站生成器
- 内置2000+精美主题
- 支持Markdown写作
3. 自定义域名（可选）
✅ Freenom 免费域名（.tk/.ml等）
✅ 或 Namecheap 首年$0.88的.xyz域名
二、详细搭建步骤（含代码）
1. 基础环境配置（5分钟）
# 安装Hugo（Mac）
brew install hugo
# Windows用户使用Scoop
scoop install hugo-extended
2. 创建网站框架（3分钟）
hugo new site my-portfolio
cd my-portfolio
git init
git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod
3. 配置主题（5分钟）
# config.yml 核心配置
theme: PaperMod
baseURL: "https://你的用户名.github.io/"
title: "张三的个人网站"
params:
profileMode:
title: "全栈开发者"
imageURL: "images/avatar.jpg"
buttons:
- name: "查看作品集"
url: "#portfolio"
4. 添加内容（10分钟）
<!-- content/_index.md -->
---
layout: about
title: 关于我
---
### 技术栈
- Python | JavaScript | Go
- React | Vue | Docker
5. 部署到GitHub（2分钟）
# 创建部署脚本 deploy.sh
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m\n"
hugo
cd public
git add .
git commit -m "Rebuild site"
git push origin main
三、进阶美化技巧
1. 配色方案
在assets/css/extended/colors.css添加：
:root {
--primary: #2C3E50; /* 深邃蓝 */
--secondary: #E74C3C; /* 活力红 */
--accent: #27AE60; /* 生态绿 */
}
2. 响应式布局优化
<!-- 添加移动端优化 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media (max-width: 768px) {
.portfolio-grid {
grid-template-columns: repeat(1, 1fr);
}
}
</style>
3. 免费素材资源
- 图片：Unsplash（免版权高清图）
- 图标：Font Awesome免费版
- 动画：Animate.css库
四、零成本技术栈清单
| 服务类型 | 推荐方案 | 成本 |
|---|---|---|
| 网站托管 | GitHub Pages | 免费 |
| 域名 | Freenom | 免费 |
| 建站框架 | Hugo | 免费 |
| 主题模板 | PaperMod | 免费 |
| 持续集成 | GitHub Actions | 免费 |
| 表单功能 | Formspree | 免费 |
| 统计分析 | Google Analytics | 免费 |
五、效果对比
| 传统方案 | 本方案 |
|---|---|
| WordPress主机 $5/月 | 完全免费 |
| 手动编写HTML/CSS | Markdown极简写作 |
| 需要维护服务器 | 全自动Git部署 |
| 加载速度1-3秒 | 全球CDN加速<500ms |
六、常见问题解决
图片加载优化
使用imageOptim压缩图片，添加懒加载：<img data-src="image.jpg" class="lazyload"> <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>中文支持
在config.yml中添加：languageCode: zh-CN hasCJKLanguage: trueSEO优化
安装SEO插件：git submodule add https://github.com/peaceiris/hugo-mod-seo.git modules/seo
