05-GitHub Pages-免费搭建个人网站

【AI学习日记05】GitHub Pages：免费搭建个人网站

本文首发于微信公众号【AI学习日记】，同步更新于GitHub，欢迎关注交流。

GitHub提供的免费静态网页托管服务，用纯HTML+CSS+JS就能搭建！

一、GitHub Pages能做什么

|| 用途 | 示例 |
|—–|——|
|| 📝 项目介绍页 | 软件下载、截图、功能说明 |
|| 📄 个人简历 | 在线作品集、技能展示 |
|| 📂 导航站 | 常用链接聚合 |
|| 📦 工具站 | 小工具在线演示 |

访问格式： https://你的用户名.github.io

二、快速开始

第一步：创建仓库

仓库名必须严格设置为：

1
你的用户名.github.io

（如：zhangsan.github.io）

设为 Public（公开）

第二步：推送网页

1
2
3
4
5
6
git clone https://github.com/你的用户名/你的用户名.github.io.git
cd 你的用户名.github.io
echo "<h1>Hello World</h1>" > index.html
git add .
git commit -m "Initial commit"
git push

第三步：访问

浏览器打开：https://你的用户名.github.io

几秒后自动生效！

三、完整项目结构

1
2
3
4
5
6
7
8
9
zhangsan.github.io/
├── index.html          # 首页
├── style.css           # 样式表
├── script.js           # 交互脚本
├── projects.html       # 项目页面
├── assets/             # 资源文件夹
│   ├── images/
│   └── icons/
└── 404.html            # 404页面

四、完整代码示例

1. 首页 index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三次的个人网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-brand">张三</div>
        <ul class="nav-links">
            <li><a href="index.html" class="active">首页</a></li>
            <li><a href="projects.html">项目</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
        <button id="theme-toggle">🌙</button>
    </nav>

    <main>
        <section class="hero">
            <h1>你好，我是 <span class="highlight">张三</span></h1>
            <p class="subtitle">AI学习者 | Python开发者</p>
            <p>这里是我的个人网站，记录我的学习和生活</p>
            <div class="hero-btns">
                <a href="projects.html" class="btn btn-primary">查看项目</a>
                <a href="#contact" class="btn btn-secondary">联系我</a>
            </div>
        </section>

        <section class="stats">
            <div class="stat-card">
                <span class="stat-number" data-target="10">0</span>
                <span class="stat-label">个项目</span>
            </div>
            <div class="stat-card">
                <span class="stat-number" data-target="50">0</span>
                <span class="stat-label">篇文章</span>
            </div>
            <div class="stat-card">
                <span class="stat-number" data-target="1000">0</span>
                <span class="stat-label">访客</span>
            </div>
        </section>
    </main>

    <footer id="contact">
        <p>📧 zhangsan@email.com</p>
        <p>🔗 <a href="#">GitHub</a> | <a href="#">知乎</a></p>
    </footer>

    <script src="script.js"></script>
</body>
</html>

2. 样式 style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
/* 变量定义 */
:root {
    --primary: #6366f1;
    --secondary: #8b5cf6;
    --bg: #ffffff;
    --text: #1f2937;
    --card-bg: #f3f4f6;
    --navbar-bg: #ffffff;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 深色模式 */
.dark {
    --primary: #818cf8;
    --secondary: #a78bfa;
    --bg: #0f172a;
    --text: #f3f4f6;
    --card-bg: #1e293b;
    --navbar-bg: #1e293b;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* 基础样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'WenQuanYi Micro Hei', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    transition: background 0.3s, color 0.3s;
}

/* 导航栏 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--navbar-bg);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-brand { font-size: 1.5rem; font-weight: bold; color: var(--primary); }

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: var(--text);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
}

.nav-links a:hover, .nav-links a.active {
    background: var(--primary);
    color: white;
}

/* 主题切换 */
#theme-toggle {
    background: none;
    border: 2px solid var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem;
}

/* 主内容区 */
main { max-width: 1200px; margin: 0 auto; padding: 2rem; }

/* 首页横幅 */
.hero {
    text-align: center;
    padding: 4rem 2rem;
}

.hero h1 { font-size: 3rem; margin-bottom: 1rem; }

.highlight {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.hero-btns { margin-top: 2rem; }

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: transform 0.2s;
}

.btn:hover { transform: translateY(-2px); }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
}

.btn-secondary {
    border: 2px solid var(--primary);
    color: var(--primary);
}

/* 统计卡片 */
.stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}

.stat-card {
    text-align: center;
    padding: 1.5rem 2.5rem;
    background: var(--card-bg);
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary);
}

/* 页脚 */
footer {
    text-align: center;
    padding: 2rem;
    background: var(--card-bg);
    margin-top: 4rem;
}

footer a { color: var(--primary); }

/* 响应式 */
@media (max-width: 768px) {
    .navbar { flex-direction: column; gap: 1rem; }
    .hero h1 { font-size: 2rem; }
    .stats { flex-direction: column; align-items: center; }
}

3. 交互脚本 script.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 深色模式切换
const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark');
    const isDark = body.classList.contains('dark');
    themeToggle.textContent = isDark ? '☀️' : '🌙';
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

// 恢复主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
    body.classList.add('dark');
    themeToggle.textContent = '☀️';
}

// 数字动画
function animateNumbers() {
    const numbers = document.querySelectorAll('.stat-number');
    numbers.forEach(num => {
        const target = parseInt(num.dataset.target);
        const duration = 2000;
        const step = target / (duration / 16);
        let current = 0;
        
        const timer = setInterval(() => {
            current += step;
            if (current >= target) {
                num.textContent = target;
                clearInterval(timer);
            } else {
                num.textContent = Math.floor(current);
            }
        }, 16);
    });
}

// 滚动动画
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, { threshold: 0.1 });

document.querySelectorAll('.stat-card').forEach(card => {
    observer.observe(card);
});

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    animateNumbers();
});

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

五、项目展示页 projects.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的项目</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-brand">张三</div>
        <ul class="nav-links">
            <li><a href="index.html">首页</a></li>
            <li><a href="projects.html" class="active">项目</a></li>
            <li><a href="index.html#contact">联系方式</a></li>
        </ul>
        <button id="theme-toggle">🌙</button>
    </nav>

    <main>
        <h1 style="text-align: center; margin: 2rem 0;">我的项目</h1>
        
        <div class="project-grid">
            <div class="project-card">
                <div class="project-icon">🌸</div>
                <h3>鸢尾花分类器</h3>
                <p>基于PyQt6 + Scikit-learn的桌面应用</p>
                <div class="project-tags">
                    <span>Python</span>
                    <span>机器学习</span>
                </div>
                <a href="#" class="btn btn-primary">查看详情</a>
            </div>
            
            <div class="project-card">
                <div class="project-icon">🕷️</div>
                <h3>Python爬虫</h3>
                <p>Requests + Selenium + Scrapy系列教程</p>
                <div class="project-tags">
                    <span>Python</span>
                    <span>爬虫</span>
                </div>
                <a href="#" class="btn btn-primary">查看详情</a>
            </div>
            
            <div class="project-card">
                <div class="project-icon">🤖</div>
                <h3>AI学习日记</h3>
                <p>记录AI学习的点滴</p>
                <div class="project-tags">
                    <span>Notion</span>
                    <span>写作</span>
                </div>
                <a href="#" class="btn btn-primary">查看详情</a>
            </div>
        </div>
    </main>

    <script src="script.js"></script>
</body>
</html>

项目卡片样式（添加到style.css）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.project-card {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s;
}

.project-card:hover {
    transform: translateY(-5px);
}

.project-icon { font-size: 3rem; margin-bottom: 1rem; }

.project-tags {
    margin: 1rem 0;
}

.project-tags span {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--primary);
    color: white;
    border-radius: 1rem;
    font-size: 0.85rem;
    margin: 0.25rem;
}

六、部署到GitHub Pages

1
2
3
4
5
6
7
8
9
10
# 方法1：用VSCode
1. 初始化Git
   git init
   
2. 提交所有文件
   git add .
   git commit -m "Initial website"
   
3. 一键发布（VSCode左下角）
   点击「Publish to GitHub」
1
2
3
# 方法2：命令行
git remote add origin https://github.com/你的用户名/你的用户名.github.io.git
git push -u origin main

七、常见问题

|| 问题 | 解决方法 |
|—–|———|
|| 不显示内容 | 检查仓库名是否正确 |
|| 修改后没更新 | 等待1-2分钟，强制刷新 Ctrl+F5 |
|| 想绑定域名 | Settings → Pages → Custom domain |
|| 404错误 | 检查文件是否在根目录 |

八、进阶功能

1
2
3
4
5
// 访客统计（免费方案）
// 在script.js添加
const visitCount = localStorage.getItem('visitCount') || 0;
localStorage.setItem('visitCount', parseInt(visitCount) + 1);
console.log(`你是第 ${visitCount} 位访客`);
1
2
3
4
5
6
/* 玻璃拟态效果 */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

纯前端方案，无需Jekyll，开箱即用！

#GitHub #建站 #HTML #CSS #JavaScript

建站教程
#GitHub Pages #HTML #CSS #JavaScript
05-GitHub Pages-免费搭建个人网站
https://r0f2.my/post/05-github-pages-site/
作者
JA
发布于
2026年2月2日
许可协议