标题：如何通过 GitHub Pages 创建一个静态网站
GitHub Pages 是 GitHub 提供的一项免费服务，允许用户从 GitHub 仓库中托管静态网站。对于开发者和非开发者来说，这都是一个极其便利的工具，用于创建和发布个人博客、项目文档或作品集。
一、什么是 GitHub Pages？
GitHub Pages 是基于 GitHub 仓库创建的静态网站托管服务。用户可以把 Markdown 或 HTML 文档转化为网站来展示，并拥有一个免费的 github.io 域名。这些网站通常托管在 GitHub 的服务器上，任何人都可以通过浏览器访问。
优点：
- 易于使用：即使你没有开发经验，也可以通过简单的步骤创建美观的网站。
- 免费托管：对于个人和开源项目，GitHub Pages 是完全免费的。
- 自动部署：每次你更新 GitHub 仓库，网站会自动重新部署，无需手动操作。
- 支持自定义域名：您可以将自己的域名连接到 GitHub Pages 网站。
- 支持多种框架：例如 Jekyll、Hugo、React 等，使网站构建更灵活。
二、如何搭建一个 GitHub Pages 网站？
步骤1：创建 GitHub 仓库
- 登录到 GitHub（没有账号的需要创建账号，这里就不详细介绍了）。
- 点击页面右上角的 “+” 图标，然后选择 “New repository”。
红色标注的地方就是你的名字，我这边是wxd-infinity
- 给你的仓库命名为
<your-username>.github.io，确保仓库是公共的，然后点击“Create repository”。
步骤2：添加网站内容（使用git）
- 克隆你创建的仓库到本地：
git clone https://github.com/<your-username>/<your-username>.github.io - 在本地仓库目录中，创建一个
index.html文件。添加一些基本的 HTML 内容：<!DOCTYPE html> <html> <head><title>My GitHub Page</title> </head> <body><h1>Hello, World!</h1><p>Welcome to my GitHub Pages site.</p> </body> </html>
步骤3：上传内容到 GitHub（使用git）
- 提交更改：
git add . git commit -m "Initial commit" - 推送到 GitHub：
git push origin main
如果你不想使用 Git 客户端来管理 GitHub Pages 的网站内容，你可以直接在 GitHub 网站上进行操作。以下是如何在 GitHub 网站上直接添加或更新网站内容的步骤：
步骤4：访问你的网站（不使用git）
- 发布后，您可以通过
<your-username>.github.io访问您的网站。
通过 GitHub 网站直接编辑内容（不使用git）
步骤1：创建或访问现有的 GitHub 仓库（不使用git）
- 登录到 GitHub。
- 如果还没有仓库，点击页面右上角的 “+” 图标，然后选择 “New repository” 来创建一个名为
<your-username>.github.io的仓库。如果已有该仓库，则直接访问该仓库。
步骤2：创建或编辑文件（不使用git）
-
进入仓库页面后，点击 “Add file” 按钮，然后选择 “Create new file”。
-
在文件名输入框中输入
index.html，加入我们的 HTML 内容。比如：昨天的个人主页内容（我有进行了一定更改，大家按需使用）
个人主页文件结构
/my-website├── index.html├── about.html├── skills.html├── contact.html├── styles.css├── scripts.js
1. 新增内容和多页面
index.html
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="styles.css">
</head>
<body><!-- Navbar --><nav class="navbar navbar-expand-lg navbar-dark bg-gradient fixed-top"><a class="navbar-brand" href="#">个人主页</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav ml-auto"><li class="nav-item active"><a class="nav-link" href="about.html">关于我</a></li><li class="nav-item"><a class="nav-link" href="skills.html">技能</a></li><li class="nav-item"><a class="nav-link" href="#">项目</a></li><li class="nav-item"><a class="nav-link" href="contact.html">联系</a></li></ul></div></nav><!-- Header --><header class="header text-white text-center py-5"><div class="container"><h1>欢迎来到我的个人主页</h1><p>探索我最新的项目和学习旅程</p></div></header><!-- Main Content --><main class="content container mt-5 pt-3"><!-- Landing Page Content --><section id="introduction" class="text-center"><h2>探索更多</h2><p>了解我的技能和项目，或联系我以获取更多信息。</p><img src="images/profile.jpg" alt="Profile Image" class="rounded-circle mb-3" style="width: 200px;"></section><section id="intro-links" class="row text-center"><div class="col-md-4"><h3>关于我</h3><p><a href="about.html" class="btn btn-outline-primary">了解更多</a></p></div><div class="col-md-4"><h3>我的技能</h3><p><a href="skills.html" class="btn btn-outline-primary">查看技能</a></p></div><div class="col-md-4"><h3>项目案例</h3><p><a href="#" class="btn btn-outline-primary">浏览项目</a></p></div></section></main><!-- Footer --><footer class="footer bg-dark text-white text-center py-2"><p>联系我：<a class="text-white" href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p></footer><!-- JavaScript --><script src="scripts.js"></script><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
about.html
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="styles.css">
</head>
<body> <!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-dark bg-gradient fixed-top"> <a class="navbar-brand" href="index.html">个人主页</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="index.html">主页</a></li> <li class="nav-item active"><a class="nav-link" href="about.html">关于我</a></li> <li class="nav-item"><a class="nav-link" href="skills.html">技能</a></li> <li class="nav-item"><a class="nav-link" href="contact.html">联系</a></li> </ul> </div> </nav> <!-- Main Content --> <main class="content container mt-5 pt-5"> <section class="text-center mb-4"> <h2>关于我</h2> <p>你好！我是一个热爱前端开发的初学者，正在不断学习新技术以提升自己的技能。</p> <img src="images/profile.jpg" alt="Profile Image" class="rounded-circle mb-3" style="width: 200px;"> </section> <section class="mb-4"> <h3>我的背景</h3> <p>我在大学攻读计算机科学专业，并通过在线课程提升前端开发技能。目前，我致力于创建美观且用户友好的网页。</p> </section> <section> <h3>兴趣爱好</h3> <p>除了编程，我还喜欢阅读科技书籍，参与开源项目，并热衷于探索新的编程语言和框架。</p> </section> </main> <!-- Footer --> <footer class="footer bg-dark text-white text-center py-2"> <p>联系我：<a class="text-white" href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p> </footer> <script src="scripts.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
skills.html
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="styles.css">
</head>
<body> <!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-dark bg-gradient fixed-top"> <a class="navbar-brand" href="index.html">个人主页</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="index.html">主页</a></li> <li class="nav-item"><a class="nav-link" href="about.html">关于我</a></li> <li class="nav-item active"><a class="nav-link" href="skills.html">技能</a></li> <li class="nav-item"><a class="nav-link" href="contact.html">联系</a></li> </ul> </div> </nav> <!-- Main Content --> <main class="content container mt-5 pt-5"> <section class="text-center mb-4"> <h2>我的技能</h2> </section> <section class="mb-4"> <h3>编程语言</h3> <ul> <li>HTML - 熟练掌握</li> <li>CSS - 熟练掌握</li> <li>JavaScript - 掌握中</li> </ul> <div class="progress mb-2"> <div class="progress-bar bg-success" role="progressbar" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">HTML 90%</div> </div> <div class="progress mb-2"> <div class="progress-bar bg-info" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">CSS 85%</div> </div> <div class="progress mb-2"> <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">JavaScript 70%</div> </div> </section> <section> <h3>工具和框架</h3> <p>熟悉的框架与工具包括：Bootstrap、React、Git。</p> </section> </main> <!-- Footer --> <footer class="footer bg-dark text-white text-center py-2"> <p>联系我：<a class="text-white" href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p> </footer> <script src="scripts.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
contact.html
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="styles.css">
</head>
<body> <!-- Navbar --> <nav class="navbar navbar-expand-lg navbar-dark bg-gradient fixed-top"> <a class="navbar-brand" href="index.html">个人主页</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item"><a class="nav-link" href="index.html">主页</a></li> <li class="nav-item"><a class="nav-link" href="about.html">关于我</a></li> <li class="nav-item"><a class="nav-link" href="skills.html">技能</a></li> <li class="nav-item active"><a class="nav-link" href="contact.html">联系</a></li> </ul> </div> </nav> <!-- Main Content --> <main class="content container mt-5 pt-5"> <section class="text-center mb-4"> <h2>联系我</h2> <p>想了解更多信息或有任何问题，请随时通过以下表单与我联系。</p> </section> <section class="bg-light p-4 rounded shadow-sm"> <form id="contactForm"> <div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" id="name" placeholder="输入姓名"> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="email" class="form-control" id="email" placeholder="输入邮箱"> </div> <div class="form-group"> <label for="message">留言</label> <textarea class="form-control" id="message" rows="4" placeholder="输入留言"></textarea> </div> <button type="submit" class="btn btn-primary">发送</button> </form> </section> </main> <!-- Footer --> <footer class="footer bg-dark text-white text-center py-2"> <p>联系我：<a class="text-white" href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p> </footer> <script src="scripts.js"></script> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2. 样式更新 styles.css
body {margin: 0;font-family: 'Roboto', sans-serif;background: linear-gradient(to right, #f5f7fa, #c3cfe2);
}.header, .footer {text-shadow: 2px 2px 4px #000000;background: linear-gradient(to right, #141E30, #243B55);
}.navbar-dark .navbar-brand, .navbar-dark .navbar-nav .nav-link {transition: color 0.15s;
}.navbar-dark .navbar-nav .nav-link:hover {color: #ff7e5f;
}.card {border: none;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);overflow: hidden;transition: box-shadow 0.3s;
}.card:hover {transform: scale(1.05);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}.btn-outline-primary {transition: background-color 0.3s, color 0.3s;
}.btn-outline-primary:hover {background-color: #7b4397;color: #fff;
}.footer {background-color: #141E30;color: white;text-align: center;padding: 10px;width: 100%;box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.2);
}.bg-gradient {background: linear-gradient(to right, #373b44, #4286f4);
}
3. 动效脚本 scripts.js
document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); });
});document.getElementById('contactForm').addEventListener('submit', function(event) { event.preventDefault(); const name = document.getElementById('name').value; const email = document.getElementById('email').value; const message = document.getElementById('message').value; if (name && email && message) { alert(`谢谢您的留言, ${name}!\n我们会尽快通过 ${email} 与您联系。`); this.reset();} else { alert('请填写所有字段。'); }
});const cards = document.querySelectorAll('.card');
cards.forEach(card => {card.addEventListener('mouseover', () => card.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.2)');card.addEventListener('mouseout', () => card.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)');
});// Adding fade-in effect
window.addEventListener('scroll', () => {document.querySelectorAll('.fade-in').forEach(element => {if (isElementInViewport(element)) {element.classList.add('visible');}});
});function isElementInViewport(el) {const rect = el.getBoundingClientRect();return (rect.top >= 0 &&rect.left >= 0 &&rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&rect.right <= (window.innerWidth || document.documentElement.clientWidth));
}
- 在页面下方的“Commit new file”部分，填写 commit 信息，然后点击“Commit new file”按钮以保存更改。
步骤3：查看和更新网站（不使用git）
-
更改会立即部署，如果之前没有创建分支，通常托管在
main分支。 -
访问
<your-username>.github.io来查看网站。
我的在这里 (https://sxdxwxd.github.io/wxd-infinity.github.io/)
如果需要更新内容，可以直接选中任何文件进行编辑，然后在编辑器中进行修改，接着更新描述后保存更改（commit）。
提示：
- 若要使用 Jekyll 之类的生成器，可以创建一个名为
_config.yml的配置文件，并按照文档进行设置。 - 自定义域名可在 GitHub 仓库的设置中进行设置，需添加一个
CNAME文件并配置 DNS 设置。
通过以上步骤，您即可轻松地搭建起一个 GitHub Pages 网站，随时分享您的项目和作品。
