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

无限大.2024-10-04 16:41

标题：如何通过 GitHub Pages 创建一个静态网站

GitHub Pages 是 GitHub 提供的一项免费服务，允许用户从 GitHub 仓库中托管静态网站。对于开发者和非开发者来说，这都是一个极其便利的工具，用于创建和发布个人博客、项目文档或作品集。

一、什么是 GitHub Pages？

GitHub Pages 是基于 GitHub 仓库创建的静态网站托管服务。用户可以把 Markdown 或 HTML 文档转化为网站来展示，并拥有一个免费的 github.io 域名。这些网站通常托管在 GitHub 的服务器上，任何人都可以通过浏览器访问。

优点：
  1. 易于使用：即使你没有开发经验，也可以通过简单的步骤创建美观的网站。
  2. 免费托管：对于个人和开源项目，GitHub Pages 是完全免费的。
  3. 自动部署：每次你更新 GitHub 仓库，网站会自动重新部署，无需手动操作。
  4. 支持自定义域名：您可以将自己的域名连接到 GitHub Pages 网站。
  5. 支持多种框架：例如 Jekyll、Hugo、React 等，使网站构建更灵活。

二、如何搭建一个 GitHub Pages 网站？

步骤1：创建 GitHub 仓库
  1. 登录到 GitHub（没有账号的需要创建账号，这里就不详细介绍了）。
  2. 点击页面右上角的 "+" 图标，然后选择 "New repository"。


红色标注的地方就是你的名字，我这边是wxd-infinity

  1. 给你的仓库命名为 <your-username>.github.io，确保仓库是公共的，然后点击"Create repository"。
步骤2：添加网站内容（使用git）

  1. 克隆你创建的仓库到本地：

    复制代码 
    git clone https://github.com/<your-username>/<your-username>.github.io

  2. 在本地仓库目录中，创建一个 index.html 文件。添加一些基本的 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）

  1. 提交更改：

    bash 复制代码 
    git add .
git commit -m "Initial commit"

  2. 推送到 GitHub：

    bash 复制代码 
    git push origin main

如果你不想使用 Git 客户端来管理 GitHub Pages 的网站内容，你可以直接在 GitHub 网站上进行操作。以下是如何在 GitHub 网站上直接添加或更新网站内容的步骤：

步骤4：访问你的网站（不使用git）
  • 发布后，您可以通过 <your-username>.github.io 访问您的网站。

通过 GitHub 网站直接编辑内容（不使用git）

步骤1：创建或访问现有的 GitHub 仓库（不使用git）
  1. 登录到 GitHub。
  2. 如果还没有仓库，点击页面右上角的 "+" 图标，然后选择 "New repository" 来创建一个名为 <your-username>.github.io 的仓库。如果已有该仓库，则直接访问该仓库。
步骤2：创建或编辑文件（不使用git）

  1. 进入仓库页面后，点击 "Add file" 按钮，然后选择 "Create new file"。

  2. 在文件名输入框中输入 index.html，加入我们的 HTML 内容。比如：

    复制代码 
     昨天的个人主页内容（我有进行了一定更改，大家按需使用）

个人主页文件结构

复制代码 
/my-website
  ├── index.html
  ├── about.html
  ├── skills.html
  ├── contact.html
  ├── styles.css
  ├── scripts.js

1. 新增内容和多页面

index.html
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
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
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
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

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

javascript 复制代码 
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)
    );
}
  1. 在页面下方的"Commit new file"部分，填写 commit 信息，然后点击"Commit new file"按钮以保存更改。
步骤3：查看和更新网站（不使用git）

  1. 更改会立即部署，如果之前没有创建分支，通常托管在 main 分支。

  2. 访问 <your-username>.github.io 来查看网站。

    我的在这里 (https://sxdxwxd.github.io/wxd-infinity.github.io/)

如果需要更新内容，可以直接选中任何文件进行编辑，然后在编辑器中进行修改，接着更新描述后保存更改（commit）。

提示：
  • 若要使用 Jekyll 之类的生成器，可以创建一个名为 _config.yml 的配置文件，并按照文档进行设置。
  • 自定义域名可在 GitHub 仓库的设置中进行设置，需添加一个 CNAME 文件并配置 DNS 设置。

通过以上步骤，您即可轻松地搭建起一个 GitHub Pages 网站，随时分享您的项目和作品。

相关推荐
Leinwin1 小时前
微软开源GitHub Copilot Chat，AI编程领域迎新突破
microsoft·github·copilot
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function：TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云＆流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS：网页设计入门
前端·css
老虎06273 小时前
JavaWeb（苍穹外卖）--学习笔记04（前端：HTML，CSS，JavaScript）
前端·javascript·css·笔记·学习·html
灿灿121384 小时前
CSS 文字浮雕效果：巧用 text-shadow 实现 3D 立体文字
前端·css
热门推荐
01GPU 进阶笔记（二）：华为昇腾 910B GPU02Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案03Coze扣子平台完整体验和实践（附国内和国际版对比）04MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法05扣子空间的使用教程与大模型技术思考06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07KGG转MP3工具|非KGM文件|解密音频08Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面09DeepSeek各版本说明与优缺点分析10django中用 InforSuite RDS 替代memcache