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 网站，随时分享您的项目和作品。

相关推荐
拾光拾趣录18 分钟前
for..in 和 Object.keys 的区别：从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区28 分钟前
把 SearchBox 塞进项目，搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
王小义笔记1 小时前
创建属于自己的github Page主页
github
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门（九）Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案，优雅实现记住表单历史搜索记录！
前端·vue.js
UncleKyrie2 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_2 小时前
深入解析前后端分离中的 /api 设计：从路由到代理的完整指南
前端·javascript·api
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02扣子开源本地部署教程 丨Coze智能体小白喂饭级指南03Coze 开源了，送上保姆级私有化部署方案【建议收藏】04全球最强模型Grok4，国内已可免费使用！（附教程）05vue数据变化但页面不变06KGG转MP3工具|非KGM文件|解密音频0701-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验08干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！09腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）10【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致