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

2024-10-06 07:16:14

标题：如何通过 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.****.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.****.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
上一篇：案例-表白墙简单实现
下一篇：【在Linux世界中追寻伟大的One Piece】System V共享内存

码农公寓