图文并茂-手把手教宝子们3分钟用 GitHub Pages 搭建免费网站 (保姆级教程)
<p>@</p><div class="toc"><div class="toc-container-header">目录</div><ul><li>🌟 第一步：准备好你的 GitHub 账号</li><li>🌟 第二步：创建一个特殊的仓库 (Repository)，配置网站</li><li>🌟 第三步：把你的网站放上去哦</li><li>🌟 第四步：配置GitHub Pages</li><li>🌟 第五步：见证奇迹的时刻！🎉<ul><li><ul><li>查看搭建状态</li><li>查看网站</li></ul></li></ul></li><li>💖 Conclusion | 结语</li></ul></div><br>宝子们又来看我啦~欢迎！👋<p></p>
<p>是不是一直想拥有一个属于自己的网页？放放作品集、写写碎碎念，或者单纯用来分享一个个人网站？<br>
但是一听到“服务器”、“域名”、“部署”这些词就头大，而且还不想花钱？💸</p>
<p>来来来，今天教大家用 <strong>GitHub Pages</strong> “白嫖”一个静态网站！不需要你是程序猿，只要会点鼠标，<strong>三分钟</strong>就能搞定！✨</p>
<hr>
<h2 id="-第一步准备好你的-github-账号">🌟 第一步：准备好你的 GitHub 账号</h2>
<p>首先，你要有一个 GitHub 账号。<br>
如果你还没有，去 github.com 注册一个，起个好听的英文名哦！<br>
<img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209233251973-2096879680.png" alt="image" loading="lazy"></p>
<hr>
<h2 id="-第二步创建一个特殊的仓库-repository配置网站">🌟 第二步：创建一个特殊的仓库 (Repository)，配置网站</h2>
<p>登录后，点击右上角的 <code>+</code> 号，选择 <code>New repository</code>。</p>
<p><img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209233343460-1196981738.png" alt="image" loading="lazy"></p>
<p>确保选中 <strong>Public</strong> (公开)，然后点击最下面的绿色按钮 <strong>Create repository</strong>。搞定！✅<br>
<img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209233737383-1756680266.png" alt="image" loading="lazy"></p>
<hr>
<h2 id="-第三步把你的网站放上去哦">🌟 第三步：把你的网站放上去哦</h2>
<p>现在仓库是空的，我们需要放一个网页进去。<br>
为了演示方便，我们直接在网页上操作：</p>
<ol>
<li>点击蓝色的链接 <strong>creating a new file</strong>。</li>
<li>文件名填 <code>index.html</code> (这是网页的“大门”)。</li>
<li>在下面的大框框里，随便写点什么！比如：</li>
</ol>
<p>4.点击 <strong>Commit ...</strong> 保存。</p>
<p><img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209234156979-1437801380.png" alt="image" loading="lazy"></p>
<p><img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209234218828-1762317705.png" alt="image" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>WebGL 手势控制爱心粒子</title>
<style>
body { margin: 0; overflow: hidden; background-color: #000; }
#canvas-container { width: 100vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1; }
/* 隐藏摄像头视频流，只用于后台分析 */
.input_video { display: none; }
#loading {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
color: white; font-family: sans-serif; font-size: 24px; pointer-events: none; z-index: 10;
}
</style>
<!-- 引入 Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- 引入 MediaPipe Hands -->
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="loading">正在加载模型与摄像头...<br>请允许摄像头权限</div>
<div id="canvas-container"></div>
<video class="input_video"></video>
<script>
// --- 1. Three.js 场景初始化 ---
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 30;
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas-container').appendChild(renderer.domElement);
// --- 2. 创建爱心粒子系统 ---
const particleCount = 3000; // 粒子数量
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const targetPositions = new Float32Array(particleCount * 3); // 存储爱心形状的目标位置
const randomPositions = new Float32Array(particleCount * 3); // 存储散开时的随机位置
// 爱心方程函数
function getHeartPosition(t, scale = 1) {
const x = 16 * Math.pow(Math.sin(t), 3);
const y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t);
const z = 0;
return { x: x * scale, y: y * scale, z: z * scale };
}
for (let i = 0; i < particleCount; i++) {
// 生成爱心形状的目标点
// 为了让爱心立体一点，我们随机分布t，并在Z轴加一点随机扰动
const t = Math.random() * Math.PI * 2;
const scale = 0.5;
const heartPos = getHeartPosition(t, scale);
// 填充爱心内部 (随机缩放)
const r = Math.sqrt(Math.random());
targetPositions = heartPos.x * r;
targetPositions = heartPos.y * r;
targetPositions = (Math.random() - 0.5) * 5; // Z轴厚度
// 生成散开的随机位置 (爆炸效果)
randomPositions = (Math.random() - 0.5) * 100;
randomPositions = (Math.random() - 0.5) * 60;
randomPositions = (Math.random() - 0.5) * 50;
// 初始位置设为散开状态
positions = randomPositions;
positions = randomPositions;
positions = randomPositions;
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
// 粒子材质
const material = new THREE.PointsMaterial({
color: 0xff69b4, // 热粉色
size: 0.4,
transparent: true,
opacity: 0.8,
blending: THREE.AdditiveBlending
});
const particles = new THREE.Points(geometry, material);
scene.add(particles);
// --- 3. 交互逻辑变量 ---
let gatherFactor = 0; // 0 = 完全散开, 1 = 完全聚合成爱心
let targetGatherFactor = 0; // 目标聚合度，由手势控制
// --- 4. MediaPipe Hands 配置 ---
const videoElement = document.getElementsByClassName('input_video');
function onResults(results) {
document.getElementById('loading').style.display = 'none';
if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
const landmarks = results.multiHandLandmarks;
// 计算手掌开合程度
// 简单算法：计算拇指指尖(4)与其他四指指尖(8,12,16,20)到手腕(0)的平均距离
const wrist = landmarks;
const fingerTips = ;
let totalDist = 0;
fingerTips.forEach(idx => {
const tip = landmarks;
const dist = Math.sqrt(
Math.pow(tip.x - wrist.x, 2) +
Math.pow(tip.y - wrist.y, 2)
);
totalDist += dist;
});
const avgDist = totalDist / 5;
// 经验阈值：
// 握拳时，指尖距离手腕很近 (avgDist 约 0.1 - 0.2)
// 张开时，指尖距离手腕较远 (avgDist 约 0.4 - 0.6)
// 我们做一个映射：握拳(distance small) -> 聚合(factor 1), 张开 -> 散开(factor 0)
// 动态调整这些阈值以适应摄像头的距离
const closeThreshold = 0.25;
const openThreshold = 0.5;
let normalized = (avgDist - closeThreshold) / (openThreshold - closeThreshold);
normalized = 1 - Math.min(Math.max(normalized, 0), 1); // 反转：距离越小(握拳)，值越大(1)
targetGatherFactor = normalized;
} else {
// 如果没有检测到手，默认缓慢散开
targetGatherFactor = 0;
}
}
const hands = new Hands({locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
}});
hands.setOptions({
maxNumHands: 1,
modelComplexity: 1,
minDetectionConfidence: 0.5,
minTrackingConfidence: 0.5
});
hands.onResults(onResults);
const cameraUtils = new Camera(videoElement, {
onFrame: async () => {
await hands.send({image: videoElement});
},
width: 640,
height: 480
});
cameraUtils.start();
// --- 5. 动画循环 ---
function animate() {
requestAnimationFrame(animate);
// 粒子自身旋转动画
particles.rotation.y += 0.002;
// 平滑过渡聚合系数 (Lerp)
gatherFactor += (targetGatherFactor - gatherFactor) * 0.05;
// 更新粒子位置
const posAttr = particles.geometry.attributes.position;
const currentPositions = posAttr.array;
for (let i = 0; i < particleCount; i++) {
const idx = i * 3;
// 目标位置插值：从 randomPositions 过渡到 targetPositions
const tx = randomPositions + (targetPositions - randomPositions) * gatherFactor;
const ty = randomPositions + (targetPositions - randomPositions) * gatherFactor;
const tz = randomPositions + (targetPositions - randomPositions) * gatherFactor;
// 增加一点动态浮动效果
currentPositions += (tx - currentPositions) * 0.1;
currentPositions += (ty - currentPositions) * 0.1;
currentPositions += (tz - currentPositions) * 0.1;
}
posAttr.needsUpdate = true;
renderer.render(scene, camera);
}
animate();
// 窗口大小调整适配
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
</code></pre>
<hr>
<h2 id="-第四步配置github-pages">🌟 第四步：配置GitHub Pages</h2>
<ul>
<li>在GitHub仓库页面：</li>
<li>
<ol>
<li>点击"Settings"选项卡</li>
</ol>
</li>
<li>
<ol start="2">
<li>在左侧菜单中选择"Pages"</li>
</ol>
</li>
<li>
<ol start="3">
<li>在"Source"部分，选择要部署的分支（通常是main）</li>
</ol>
</li>
<li>
<ol start="4">
<li>选择根目录（/root）或文档目录（/docs）</li>
</ol>
</li>
<li>
<ol start="5">
<li>点击"Save"</li>
</ol>
</li>
<li>
<ol start="6">
<li>等待几分钟，网站将部署完成<br>
这里是<strong>最最关键</strong>的一步！⚠️<br>
<img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209234342939-1717689819.png" alt="image" loading="lazy"><br>
<img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209234931625-2067887250.png" alt="image" loading="lazy"></li>
</ol>
</li>
</ul>
<h2 id="-第五步见证奇迹的时刻">🌟 第五步：见证奇迹的时刻！🎉</h2>
<p>保存好之后，其实 GitHub 已经在后台偷偷帮你部署啦！<br>
稍等几十秒（有时候可能要一两分钟，喝口水的时间~ ☕️）。</p>
<h4 id="查看搭建状态">查看搭建状态</h4>
<p>点击仓库上方的 <strong>Actions</strong>-> 可以查看你的网站<strong>搭建状态</strong>。</p>
<p><img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209235021103-310484842.png" alt="image" loading="lazy"><br>
<img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209235157437-38552987.png" alt="image" loading="lazy"><br>
<img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209235443165-1145949435.png" alt="image" loading="lazy"></p>
<h4 id="查看网站">查看网站</h4>
<p>点击仓库上方的 <strong>Settings</strong> (设置) ⚙️ -> 左侧栏找到 <strong>Pages</strong>。</p>
<p>恭喜你！！点击那个链接，你就看到了你刚刚写的网页啦！🌏<br>
不管你在地球的哪个角落，只要有网，都能访问这个链接！<br>
<img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209235530756-1624940875.png" alt="image" loading="lazy"><br>
<img src="https://img2024.cnblogs.com/blog/1675284/202512/1675284-20251209235636156-821485957.png" alt="image" loading="lazy"></p>
<hr>
<h2 id="-conclusion--结语">💖 Conclusion | 结语</h2>
<ul>
<li>
<p>That's all for today~ -| 今天就写到这里啦~</p>
</li>
<li>
<p>Guys, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ See you tomorrow~~| 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~</p>
</li>
<li>
<p>Everyone, be happy every day! 大家要天天开心哦</p>
</li>
<li>
<p>Welcome everyone to point out any mistakes in the article~| 欢迎大家指出文章需要改正之处~</p>
</li>
<li>
<p>Learning has no end; win-win cooperation | 学无止境，合作共赢</p>
</li>
<li>
<p>Welcome all the passers-by, boys and girls, to offer better suggestions! ~~~| 欢迎路过的小哥哥小姐姐们提出更好的意见哇~~</p>
</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/1675284/202510/1675284-20251010001922452-1111442174.png" alt="image" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/sugartang/p/19328686
頁:
[1]