0基础学前端 day6 -- 搭建github pages静态网址

标题：如何通过 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 内容：<!DOCTYPEhtml><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）

提交更改：gitadd.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

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>我的个人主页</title><linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"rel="stylesheet"><linkrel="stylesheet"href="styles.css"></head><body><!-- Navbar --><navclass="navbar navbar-expand-lg navbar-dark bg-gradient fixed-top"><aclass="navbar-brand"href="#">个人主页</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarNav"aria-controls="navbarNav"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav ml-auto"><liclass="nav-item active"><aclass="nav-link"href="about.html">关于我</a></li><liclass="nav-item"><aclass="nav-link"href="skills.html">技能</a></li><liclass="nav-item"><aclass="nav-link"href="#">项目</a></li><liclass="nav-item"><aclass="nav-link"href="contact.html">联系</a></li></ul></div></nav><!-- Header --><headerclass="header text-white text-center py-5"><divclass="container"><h1>欢迎来到我的个人主页</h1><p>探索我最新的项目和学习旅程</p></div></header><!-- Main Content --><mainclass="content container mt-5 pt-3"><!-- Landing Page Content --><sectionid="introduction"class="text-center"><h2>探索更多</h2><p>了解我的技能和项目，或联系我以获取更多信息。</p><imgsrc="images/profile.jpg"alt="Profile Image"class="rounded-circle mb-3"style="width: 200px;"></section><sectionid="intro-links"class="row text-center"><divclass="col-md-4"><h3>关于我</h3><p><ahref="about.html"class="btn btn-outline-primary">了解更多</a></p></div><divclass="col-md-4"><h3>我的技能</h3><p><ahref="skills.html"class="btn btn-outline-primary">查看技能</a></p></div><divclass="col-md-4"><h3>项目案例</h3><p><ahref="#"class="btn btn-outline-primary">浏览项目</a></p></div></section></main><!-- Footer --><footerclass="footer bg-dark text-white text-center py-2"><p>联系我：<aclass="text-white"href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p></footer><!-- JavaScript --><scriptsrc="scripts.js"></script><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></body></html>

about.html

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>关于我 - 我的个人主页</title><linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"rel="stylesheet"><linkrel="stylesheet"href="styles.css"></head><body><!-- Navbar --><navclass="navbar navbar-expand-lg navbar-dark bg-gradient fixed-top"><aclass="navbar-brand"href="index.html">个人主页</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarNav"aria-controls="navbarNav"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav ml-auto"><liclass="nav-item"><aclass="nav-link"href="index.html">主页</a></li><liclass="nav-item active"><aclass="nav-link"href="about.html">关于我</a></li><liclass="nav-item"><aclass="nav-link"href="skills.html">技能</a></li><liclass="nav-item"><aclass="nav-link"href="contact.html">联系</a></li></ul></div></nav><!-- Main Content --><mainclass="content container mt-5 pt-5"><sectionclass="text-center mb-4"><h2>关于我</h2><p>你好！我是一个热爱前端开发的初学者，正在不断学习新技术以提升自己的技能。</p><imgsrc="images/profile.jpg"alt="Profile Image"class="rounded-circle mb-3"style="width: 200px;"></section><sectionclass="mb-4"><h3>我的背景</h3><p>我在大学攻读计算机科学专业，并通过在线课程提升前端开发技能。目前，我致力于创建美观且用户友好的网页。</p></section><section><h3>兴趣爱好</h3><p>除了编程，我还喜欢阅读科技书籍，参与开源项目，并热衷于探索新的编程语言和框架。</p></section></main><!-- Footer --><footerclass="footer bg-dark text-white text-center py-2"><p>联系我：<aclass="text-white"href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p></footer><scriptsrc="scripts.js"></script><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></body></html>

skills.html

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>我的技能 - 我的个人主页</title><linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"rel="stylesheet"><linkrel="stylesheet"href="styles.css"></head><body><!-- Navbar --><navclass="navbar navbar-expand-lg navbar-dark bg-gradient fixed-top"><aclass="navbar-brand"href="index.html">个人主页</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarNav"aria-controls="navbarNav"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav ml-auto"><liclass="nav-item"><aclass="nav-link"href="index.html">主页</a></li><liclass="nav-item"><aclass="nav-link"href="about.html">关于我</a></li><liclass="nav-item active"><aclass="nav-link"href="skills.html">技能</a></li><liclass="nav-item"><aclass="nav-link"href="contact.html">联系</a></li></ul></div></nav><!-- Main Content --><mainclass="content container mt-5 pt-5"><sectionclass="text-center mb-4"><h2>我的技能</h2></section><sectionclass="mb-4"><h3>编程语言</h3><ul><li>HTML - 熟练掌握</li><li>CSS - 熟练掌握</li><li>JavaScript - 掌握中</li></ul><divclass="progress mb-2"><divclass="progress-bar bg-success"role="progressbar"style="width: 90%"aria-valuenow="90"aria-valuemin="0"aria-valuemax="100">HTML 90%</div></div><divclass="progress mb-2"><divclass="progress-bar bg-info"role="progressbar"style="width: 85%"aria-valuenow="85"aria-valuemin="0"aria-valuemax="100">CSS 85%</div></div><divclass="progress mb-2"><divclass="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 --><footerclass="footer bg-dark text-white text-center py-2"><p>联系我：<aclass="text-white"href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p></footer><scriptsrc="scripts.js"></script><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></body></html>

contact.html

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>联系我 - 我的个人主页</title><linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"rel="stylesheet"><linkrel="stylesheet"href="styles.css"></head><body><!-- Navbar --><navclass="navbar navbar-expand-lg navbar-dark bg-gradient fixed-top"><aclass="navbar-brand"href="index.html">个人主页</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarNav"aria-controls="navbarNav"aria-expanded="false"aria-label="Toggle navigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapse navbar-collapse"id="navbarNav"><ulclass="navbar-nav ml-auto"><liclass="nav-item"><aclass="nav-link"href="index.html">主页</a></li><liclass="nav-item"><aclass="nav-link"href="about.html">关于我</a></li><liclass="nav-item"><aclass="nav-link"href="skills.html">技能</a></li><liclass="nav-item active"><aclass="nav-link"href="contact.html">联系</a></li></ul></div></nav><!-- Main Content --><mainclass="content container mt-5 pt-5"><sectionclass="text-center mb-4"><h2>联系我</h2><p>想了解更多信息或有任何问题，请随时通过以下表单与我联系。</p></section><sectionclass="bg-light p-4 rounded shadow-sm"><formid="contactForm"><divclass="form-group"><labelfor="name">姓名</label><inputtype="text"class="form-control"id="name"placeholder="输入姓名"></div><divclass="form-group"><labelfor="email">邮箱</label><inputtype="email"class="form-control"id="email"placeholder="输入邮箱"></div><divclass="form-group"><labelfor="message">留言</label><textareaclass="form-control"id="message"rows="4"placeholder="输入留言"></textarea></div><buttontype="submit"class="btn btn-primary">发送</button></form></section></main><!-- Footer --><footerclass="footer bg-dark text-white text-center py-2"><p>联系我：<aclass="text-white"href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p></footer><scriptsrc="scripts.js"></script><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/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');}});});functionisElementInViewport(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 网站，随时分享您的项目和作品。

标签：前端 github

本文转载自: https://blog.csdn.net/wxdzuishaui/article/details/142611903
版权归原作者 无限大. 所有，如有侵权，请联系我们删除。