HTML静态网站建设项目：cosmicray001.github.io

黑泡尖子

于 2024-11-21 15:41:53 发布

阅读量766

点赞数 7

本文链接：https://blog.csdn.net/weixin_28809949/article/details/143980622

版权

本文还有配套的精品资源，点击获取

简介：该个人或组织在GitHub上托管的项目“cosmicray001.github.io”可能是一个静态网站，使用HTML构建主体结构。网站可能包含CSS样式和JavaScript交互，通过GitHub Pages提供托管服务。通过项目的压缩包可以获取所有源代码和资源文件，以便于深入理解其技术细节和实施方法。

1. GitHub静态网站托管概述

1.1 概念与背景

GitHub静态网站托管是一种通过GitHub提供的服务来托管静态网页内容的方式。静态网页是指用户访问网站时，内容不会因用户交互而改变的网页。与传统的动态网站相比，静态网站具有加载速度快、安全性高、易于维护和托管成本低的特点。

1.2 基本流程

要开始使用GitHub托管静态网站，首先需要创建一个GitHub账户。接着，用户需要创建一个新的仓库，并将网站的静态文件（如HTML、CSS和JavaScript文件）上传至该仓库。GitHub Pages会自动将这些文件编译并发布，生成的网站可以通过特定的URL访问。

1.3 功能与优势

GitHub Pages不仅提供了简单的静态内容托管服务，还可以利用Jekyll等工具进行内容管理和发布。此外，GitHub Pages支持自定义域名，并提供了与GitHub仓库完全集成的优势，使得内容更新与版本控制变得轻而易举。通过它，开发者可以快速搭建个人博客、项目文档站点等，无需维护复杂的服务器端配置。

2. HTML基础结构和标签

2.1 HTML文档结构分析

2.1.1 HTML的头部和主体

HTML文档的基础结构由头部（head）和主体（body）两个主要部分组成。头部包含了元数据，描述了文档的标题和链接到样式表或脚本等信息。主体部分则包含了可见的网页内容。

<!DOCTYPE html>
<html>
<head>
    <title>文档标题</title>
</head>
<body>

    <!-- 主体内容 -->

</body>
</html>

在 <head> 部分中， <title> 标签用于定义网页标题，它会显示在浏览器的标题栏或页面的标签上。在 <body> 部分中，则是放置网页可见内容的地方，如文本、图片、链接等。

2.1.2 元数据标签的使用和重要性

元数据标签如 <meta> 标签，提供关于HTML文档的元信息，如字符集、页面描述、关键词等。这些信息不会直接显示在页面上，但它们可以对搜索引擎优化（SEO）以及网页的表现产生重要影响。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="description" content="网页描述">
    <meta name="keywords" content="关键词1, 关键词2, 关键词3">
    <title>网页标题</title>
</head>
<body>
    <!-- 主体内容 -->
</body>
</html>

2.2 HTML基本标签的应用

2.2.1 标题、段落、链接和图像标签

HTML标题标签（h1-h6）定义了标题的层级，从重要性最高的 <h1> 到重要性最低的 <h6> 。段落标签 <p> 用来定义文本块的段落。链接标签 <a> 通过 href 属性定义一个超链接，而图像标签 <img> 用于在网页中嵌入图片，通过 src 属性指定图片的来源。

<h1>主标题</h1>
<h2>副标题</h2>
<p>这是一个段落。</p>
<a href="https://www.example.com">访问示例网站</a>
<img src="image.jpg" alt="描述图片内容">

2.2.2 表格、列表和表单标签

表格标签（ <table> , <tr> , <th> , <td> ）用于创建表格，列表标签（ <ul> , <ol> , <li> ）用于创建无序或有序列表，而表单标签（ <form> , <input> , <button> ）则用于创建用户交互的表单。

<table>
    <tr>
        <th>标题一</th>
        <th>标题二</th>
    </tr>
    <tr>
        <td>行一，列一</td>
        <td>行一，列二</td>
    </tr>
</table>

<ul>
    <li>列表项一</li>
    <li>列表项二</li>
</ul>

<form action="/submit-form" method="post">
    <input type="text" name="username" placeholder="用户名">
    <button type="submit">提交</button>
</form>

2.3 HTML5新特性介绍

2.3.1 语义化标签的引入和作用

HTML5引入了新的语义化标签，比如 <header> , <footer> , <section> , <article> 等，它们帮助开发者明确区分页面中的不同部分，提高代码的可读性和可维护性。

<header>
    <h1>网页标题</h1>
    <nav>
        <ul>
            <li><a href="#section1">链接1</a></li>
            <li><a href="#section2">链接2</a></li>
        </ul>
    </nav>
</header>

<section>
    <article>
        <h2>文章标题</h2>
        <p>这是文章内容。</p>
    </article>
</section>

<footer>
    <p>版权所有 &copy; 2023</p>
</footer>

2.3.2 HTML5 API的应用与实践

HTML5提供了大量API，包括地理位置、音频/视频、Canvas绘图、Web存储、离线应用等，极大地增强了Web应用的功能和交互性。比如 <audio> 和 <video> 标签允许在网页中嵌入媒体内容， localStorage 和 sessionStorage 用于客户端存储数据。

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持 video 元素。
</video>

<script>
    // Web存储示例
    localStorage.setItem('color', 'blue');
    console.log('已保存的颜色:', localStorage.getItem('color'));
</script>

通过使用这些标签和API，开发者可以构建更为丰富和动态的网页内容。在下一章节中，我们将继续探索CSS样式设计与应用的基础和高级技巧。

3. CSS样式设计与应用

3.1 CSS选择器与盒子模型

3.1.1 基础选择器的类型和用法

CSS选择器是网页布局和样式设计的基础。它们用于指定哪些HTML元素应该接收特定的样式规则。CSS提供了多种类型的选择器，每种选择器都有其特定的用途和优先级。

元素选择器 ：直接指定HTML标签名来选择页面上的特定元素。例如， p { color: blue; } 这条规则会将所有 <p> 标签内的文本颜色设置为蓝色。
类选择器 ：以点号（ . ）开头，用于选择具有特定类属性的元素。例如， .highlight { background-color: yellow; } 将所有具有 class="highlight" 的HTML元素背景色设置为黄色。
ID选择器 ：以井号（ # ）开头，选择具有特定ID属性的元素。例如， #main-content { width: 50%; } 会将ID为 main-content 的元素的宽度设置为50%。
属性选择器 ：用于选择具有特定属性的元素。例如， a[href="http://example.com"] 会选中所有 href 属性为 http://example.com 的 <a> 标签。
伪类选择器 ：例如 :hover 、 :active 、 :focus ，用于定义元素的特殊状态。例如， a:hover { text-decoration: underline; } 会在鼠标悬停在链接上时添加下划线。

这些基础选择器通过组合使用，可以更精确地控制页面上的元素。理解每个选择器的工作原理和使用场景对于设计响应式的网站至关重要。

3.1.2 盒子模型的构成及边距、填充、边框、尺寸的控制

CSS盒子模型是设计Web页面布局的核心概念之一。它将每个元素视为一个矩形盒子，每个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

内容区域 ：元素内容的实际区域，可以包含文本、图片等。
内边距 ：内容区域和边框之间的空间。可以通过 padding 属性设置。
边框：围绕内边距和内容的线框，可以有不同的样式、宽度和颜色。
外边距 ：边框外的空间，用于控制盒子之间的距离。

CSS通过 margin 和 padding 属性来控制元素的外边距和内边距。例如：

div {
    margin: 10px;  /* 设置上下左右外边距为10px */
    padding: 20px; /* 设置上下左右内边距为20px */
    border: 1px solid #000; /* 设置边框为1px黑色实线 */
}

盒模型的总宽度和高度计算公式为： width + padding-left + padding-right + border-left + border-right + margin-left + margin-right 。理解这一点对于布局设计尤为重要，尤其是在响应式设计中，正确地计算和管理盒子尺寸可以帮助我们创建适应不同屏幕大小的网站。

3.1.3 盒子模型的视觉演示

为了更直观地理解盒子模型，可以使用以下代码块中的代码和表格来展示不同盒子模型设置对元素布局的影响：

/* 样式规则 */
.box-model-example {
    width: 300px; /* 设置宽度 */
    height: 100px; /* 设置高度 */
    margin: 20px; /* 设置外边距 */
    padding: 10px; /* 设置内边距 */
    border: 5px solid #f00; /* 设置边框 */
}

| 属性 | 值 | | --- | --- | | width | 300px | | height | 100px | | margin | 20px | | padding | 10px | | border-width | 5px | | border-style | solid | | border-color | #f00 |

通过在HTML中使用一个带有 box-model-example 类的 div ，我们可以看到不同设置下的盒子表现。这种视觉演示有助于开发者理解各个盒模型属性如何共同作用于页面布局。

3.2 CSS布局技术

3.2.1 常用的布局方式（如浮动、定位）

CSS布局技术的发展经历了从最初的表格布局到现代的Flexbox和Grid布局的演变。这些技术各有优势和适用场景。

浮动布局 ：通过 float 属性，可以使元素向左或向右浮动，从而实现列式布局。浮动布局简单易用，但易引起布局塌陷等问题，需要合理使用 clear 属性或 overflow 属性等方法来解决。
定位布局 ：通过 position 属性，可以将元素定位到页面上的任何位置。常见的定位方式有 relative （相对定位）、 absolute （绝对定位）、 fixed （固定定位）和 sticky （粘性定位）。定位布局可以精确控制元素的位置，常用于复杂布局中。

以下示例展示了如何使用浮动布局来创建两列：

<div style="float: left; width: 50%;">第一列内容</div>
<div style="float: left; width: 50%;">第二列内容</div>

3.2.2 Flexbox与Grid布局详解

Flexbox 是一种灵活的一维布局模型，非常适合于页面布局中的垂直居中或水平居中等场景。Flexbox特别适合于创建具有弹性布局的组件。

.container {
    display: flex; /* 启用flex布局 */
}

.item {
    flex: 1; /* 每个项目平分空间 */
}

Grid 是一种二维布局系统，可以同时控制行和列。与Flexbox不同，Grid布局更适合于复杂的页面布局，如创建响应式网格系统。

.container {
    display: grid; /* 启用grid布局 */
    grid-template-columns: 1fr 2fr; /* 两列布局，第一列宽度为第二列的一半 */
    grid-gap: 10px; /* 设置网格间隙 */
}

Flexbox和Grid是现代CSS布局技术中的两个重要工具，它们可以解决之前只能通过复杂的HTML结构和JavaScript才能实现的布局需求。

3.2.3 CSS布局技术的对比和适用场景

| 布局技术 | 适用场景 | 优缺点 | | --- | --- | --- | | 浮动布局 | 列布局、图片环绕等 | 简单易用，但布局复杂时处理复杂 | | 定位布局 | 特定元素的精确布局 | 精确控制，容易引起布局重叠 | | Flexbox布局 | 简单的行或列布局、弹性盒子 | 布局灵活，适合组件化布局 | | Grid布局 | 复杂的网格系统 | 强大的二维布局能力，但需要一定的学习曲线 |

正确选择布局技术可以大大简化页面设计工作，同时保持代码的可维护性和可扩展性。开发者应该根据具体的项目需求和布局复杂度来选择最合适的技术方案。

3.3 CSS高级技巧

3.3.1 CSS预处理器的使用

CSS预处理器如Sass、Less和Stylus等，提供了编程语言般的特性，如变量、嵌套规则、混合（mixins）、继承等，使得CSS的开发和管理变得更加高效。

以Sass为例，以下展示了变量和嵌套的基本用法：

// 设置变量
$primary-color: #333;

// 使用变量
body {
    color: $primary-color;
}

// 嵌套规则
ul {
    list-style-type: none;
    li {
        display: inline-block;
    }
}

3.3.2 动画、过渡与变换的应用

CSS动画、过渡和变换是增强用户界面交互体验的常用技术。它们可以为元素添加平滑的过渡效果，或者创建复杂的动画序列。

过渡（Transitions） ：可以给元素的样式变化添加动画效果。例如，以下代码可以让 <div> 元素的背景颜色在鼠标悬停时平滑变化：

div {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: background-color 0.5s;
}

div:hover {
    background-color: blue;
}

动画（Animations） ：与过渡相比，动画可以更加复杂，可以控制动画的每一个关键帧。以下是一个简单的关键帧动画示例：

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

CSS预处理器和高级技巧的应用可以大大提高开发效率和设计的灵活性，同时也能让最终的网页效果更加吸引用户。掌握这些高级技巧对于现代Web开发人员来说是必不可少的。

3.3.3 CSS布局的未来趋势

随着CSS技术的不断演进，我们已经看到了诸如CSS Grid和CSS Flexbox等强大布局技术的出现。未来的CSS布局将更加注重灵活性、可访问性和响应式设计。

CSS Grid ：已经成为了构建复杂布局的首选技术。
CSS Flexbox ：适用于一维布局，如卡片式布局和导航栏。
CSS Variables ：使得样式的维护变得更加简单。
CSS Custom Properties for Cascading Variables ：为样式提供了更多的可定制性和灵活性。

开发者应当持续学习和关注最新的CSS技术，以适应未来网页设计的需求，确保网站在各种设备上都能提供优秀的用户体验。

3.3.4 使用CSS预处理器进行样式设计的实战案例

在实际开发中，使用CSS预处理器可以帮助我们更好地管理样式。以Less为例，以下是一个简单的案例展示如何使用Less来组织样式：

// 变量定义
@primary-color: #009688;
@secondary-color: #2196f3;

// 使用变量和混合
.box {
    background-color: @primary-color;
    border: 1px solid darken(@primary-color, 10%);
    &:hover {
        border-color: @secondary-color;
    }

    .text {
        color: white;
    }
}

// 编译后的CSS
.box {
    background-color: #009688;
    border: 1px solid #007970;
}

.box:hover {
    border-color: #2196f3;
}

.box .text {
    color: white;
}

通过预处理器，我们可以将复杂的样式逻辑封装成易于理解的Less代码，并在编译时生成简洁明了的CSS。这种分离关注点的方法不仅提高了开发效率，还让样式维护变得更加轻松。

4. JavaScript交互功能实现

4.1 JavaScript基础语法回顾

4.1.1 数据类型和变量

在JavaScript中，数据类型可以分为两大类：基本类型和引用类型。基本类型包括Undefined、Null、Boolean、Number和String。引用类型则是对象，包括了Object、Array、Function等构造。每种数据类型的使用方式和场景都不尽相同，理解这些基础数据类型对于编写高效和可维护的JavaScript代码至关重要。

变量在JavaScript中用来存储数据值，通过 var 、 let 或 const 关键字进行声明。 var 声明的变量有其作用域限制，而 let 和 const 则引入了块级作用域，它们的声明提供了更精确的作用域控制和变量使用限制，这是ES6中引入的重要特性之一。

let counter = 0; // 使用let声明块级作用域变量
const pi = 3.14; // 使用const声明常量

if (true) {
    let hiddenValue = 1; // 块级作用域变量
}
console.log(hiddenValue); // 这里会报错，因为hiddenValue不在这个作用域内

在上述代码块中， counter 和 pi 分别是通过 let 和 const 声明的变量。 hiddenValue 是在 if 语句块内声明的，它在该语句块外是不可见的，显示出 let 关键字块级作用域的特性。而尝试访问 hiddenValue 将会抛出错误，因为该变量超出了其声明的作用域。

理解变量的作用域，以及如何正确地使用不同的变量声明方法，对于编写可预测和可维护的JavaScript代码是非常重要的。

4.1.2 控制结构和函数

控制结构是编程中用于控制代码执行流程的结构，JavaScript提供了多种控制结构，包括条件语句（ if 、 else if 、 else ）和循环语句（ for 、 while 、 do-while ）。这些控制结构使得代码可以根据特定条件执行或者重复执行某些任务。

let num = 5;

if (num > 0) {
    console.log('Positive');
} else if (num < 0) {
    console.log('Negative');
} else {
    console.log('Zero');
}

for (let i = 0; i < num; i++) {
    console.log('The number is ' + i);
}

函数是组织代码、重用代码和模块化代码的基石。在JavaScript中，可以使用函数声明或函数表达式来定义函数。箭头函数（自ES6起引入）提供了一种更简洁的函数书写方式，并且它们不绑定自己的 this ， arguments ， super 或 new.target 。它们非常适合用作回调函数。

function add(a, b) {
    return a + b;
}

let sum = add(3, 4);
console.log('Sum is ' + sum);

let multiply = (x, y) => x * y;
let product = multiply(3, 4);
console.log('Product is ' + product);

在这个示例中，我们定义了一个名为 add 的函数，它接受两个参数并返回它们的和。然后，我们使用了一个箭头函数 multiply ，它执行类似的操作。两种函数都展示了基本的函数声明和使用，以及如何通过函数来实现代码的封装和复用。

函数的定义和使用是任何JavaScript程序中不可或缺的部分，掌握它们是进行更复杂交互功能实现的基础。无论是进行简单的数据处理还是复杂的业务逻辑，合理使用函数都能提升代码的清晰度和可维护性。

4.2 JavaScript DOM操作

4.2.1 元素的选择与遍历

文档对象模型（DOM）是JavaScript用于操作网页内容的接口。通过DOM，JavaScript可以获取、修改、添加或者删除网页上的元素。选择DOM元素是进行后续DOM操作的前提。

// 通过ID选择元素
let elementById = document.getElementById('myElement');

// 通过类名选择元素
let elementsByClass = document.getElementsByClassName('myClass');

// 通过标签名选择元素
let elementsByTag = document.getElementsByTagName('div');

// 通过CSS选择器选择元素
let elementsByCSS = document.querySelectorAll('.myClass');

在上述代码块中，我们分别使用了 getElementById 、 getElementsByClassName 、 getElementsByTagName 和 querySelectorAll 方法来选择页面中的元素。其中， querySelectorAll 方法非常强大，它允许我们使用CSS选择器来定位页面中的元素。

一旦选定了DOM元素，我们经常需要遍历它们以进行更复杂的操作，如绑定事件监听器、修改样式等。以下是一个遍历所有 div 元素并改变它们背景颜色的示例：

let allDivs = document.getElementsByTagName('div');
for (let i = 0; i < allDivs.length; i++) {
    allDivs[i].style.backgroundColor = 'lightblue';
}

在此代码段中，我们首先获取了页面上所有的 div 元素，然后通过一个 for 循环遍历这些元素，并为每一个元素的 backgroundColor 样式属性赋值为 lightblue 。

DOM元素的选择和遍历是实现交互式网页的基础，只有灵活掌握了这些基本操作，才能进一步进行深入的DOM操作和交互功能实现。

4.2.2 事件监听与事件处理

事件是用户或浏览器自身执行的某些操作，如点击、按键、页面加载等。事件监听是一种机制，它允许JavaScript代码侦听这些事件，并在事件发生时执行相应的函数（事件处理函数）。

// 绑定点击事件监听器到按钮元素上
document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked!');
});

在上面的代码中，我们获取了一个按钮元素，并为其添加了一个点击事件监听器。当按钮被点击时，事件监听器会触发一个匿名函数，该函数会在控制台输出一条消息。

// 获取所有链接并为它们添加点击事件监听器
let allLinks = document.querySelectorAll('a');
allLinks.forEach(function(link) {
    link.addEventListener('click', function(event) {
        event.preventDefault(); // 阻止链接的默认行为
        console.log('Link clicked, but not followed:', this);
    });
});

在这个例子中，我们首先获取了页面上所有的链接元素，然后遍历这些链接，并为每个链接绑定点击事件的监听器。在点击事件的处理函数中，我们调用了 event.preventDefault() 方法来阻止链接的默认行为（即跳转到链接指向的URL），然后在控制台中输出点击的链接。

掌握事件监听和事件处理对于创建动态和交互式的网页体验是至关重要的。事件不仅限于用户交互，还涉及许多浏览器触发的事件，如窗口加载事件 window.onload 和键盘事件 keydown 。了解如何监听和处理这些事件可以增强网页功能，提供更丰富的用户体验。

4.3 JavaScript与HTML5 API

4.3.1 Web Storage和Web SQL的使用

Web Storage API为网页应用提供了在客户端存储数据的接口，它包括 localStorage 和 sessionStorage 两种类型。 localStorage 提供了一个持久存储数据的解决方案，即使关闭浏览器，数据依然存在；而 sessionStorage 只在同一个会话中有效，关闭标签页或窗口后数据会消失。

// 使用localStorage存储数据
localStorage.setItem('myKey', 'myValue');
let myValue = localStorage.getItem('myKey');

// 使用sessionStorage存储数据
sessionStorage.setItem('mySessionKey', 'mySessionValue');
let mySessionValue = sessionStorage.getItem('mySessionKey');

在以上代码示例中，我们演示了如何使用 localStorage 和 sessionStorage 来存储和获取数据。 setItem 方法用于存储数据，而 getItem 方法用于检索之前存储的数据。

Web SQL是一种客户端数据库解决方案，它允许在浏览器中使用SQL语句创建、查询、修改和删除数据。尽管它提供了强大的数据库功能，但目前已经不再被主流浏览器支持，并已被标准化组织废弃。因此，在现代网页开发中，开发者更倾向于使用IndexedDB或Web Storage。

// 示例代码，已废弃，不推荐使用
let db = openDatabase('myDatabase', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS test_table (id unique, data)');
});

上述代码展示了如何使用Web SQL创建一个数据库和表。不过，请注意，Web SQL API已经不被推荐使用，这里仅作为历史背景提供。

4.3.2 Canvas和SVG图形绘制

HTML5引入了 <canvas> 元素，允许使用JavaScript在网页上绘制图形和动画。Canvas API为开发者提供了丰富的绘图接口，包括绘制路径、绘制文本、图像合成和像素操作等。

// 获取canvas元素并设置上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 绘制矩形
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);

// 绘制圆形
ctx.beginPath();
ctx.arc(125, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(125, 75);
ctx.arc(125, 75, 35, 0, Math.PI * 2, true); // Inner circle
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();

在这段代码中，我们首先获取了ID为 myCanvas 的canvas元素，并获取了它的2D渲染上下文。接着，我们使用 fillRect 方法绘制了一个蓝色矩形，然后使用 arc 方法绘制了一个圆形路径，并填充为绿色。

SVG（可缩放矢量图形）是一种基于XML的矢量图形格式，用于描述二维图形和图形应用。SVG可以被嵌入到HTML页面中，并且可以通过JavaScript或CSS进行操作。

<!-- SVG示例 -->
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

在这个SVG示例中，我们使用了SVG标签定义了一个100x100像素的区域，并在其中绘制了一个半径为40像素的圆形。该圆形有绿色边框和黄色填充。

SVG和Canvas各有优势。SVG适合创建静态图形和矢量图形，而且易于缩放，不会失真；而Canvas则适合动态和交互式图形，特别是在需要大量计算和动画时，它的性能更优。选择使用Canvas还是SVG，取决于具体的应用场景和性能需求。

Canvas和SVG提供了一种强大的方式来展示和操作图形内容，它们是JavaScript实现动态交互功能的关键组成部分。利用这些API，开发者能够创建引人注目的视觉效果，提升用户体验，并实现复杂的数据可视化和动画效果。

5. GitHub Pages服务使用

5.1 GitHub Pages基础介绍

5.1.1 创建和配置个人或项目站点

GitHub Pages 是一个由 GitHub 提供的静态网站托管服务。它允许用户直接从 GitHub 仓库中发布网站，并且可以为个人、组织或项目创建网站。创建一个个人或项目站点非常简单，以下是基本步骤：

登录 GitHub 并导航到你的仓库。
点击仓库的“Settings”（设置）标签。
滚动到“GitHub Pages”部分。
从“Source”（源）下拉菜单中选择一个分支（通常是 master 或 main），然后选择一个文件夹。
点击“Save”（保存）按钮。

一旦保存，GitHub 将为你的网站提供一个URL，通常是以 github.io 结尾的域名。你还可以使用自定义域名来托管你的网站。

5.1.2 静态网站托管和自定义域名

GitHub Pages 主要用于托管静态网站，这意味着你可以托管HTML、CSS和JavaScript文件，而服务器端编程（如PHP或Python）不被支持。这对于简单的个人或项目介绍页面非常有用。若要使用自定义域名，你需要进行以下操作：

在你的网站根目录添加一个名为 CNAME 的文本文件，其中包含你想要使用的自定义域名。
在你的域名注册商处设置一个A记录，将IP地址指向GitHub的服务器（192.30.252.153 或 192.30.252.154）。
在 GitHub 设置中验证你的域名。

验证域名后，用户就可以通过你提供的自定义域名来访问你的 GitHub Pages 网站。

5.2 GitHub Actions和CI/CD

5.2.1 GitHub Actions的基本概念和用法

GitHub Actions 是一个功能强大的自动化工具，允许你自动化软件开发工作流程。CI/CD（持续集成和持续部署）是一种常见的实践，用于自动化测试和部署过程。GitHub Actions 可以与 GitHub Pages 配合使用，以便在代码提交到仓库时自动构建和部署网站。

要使用 GitHub Actions，你需要在仓库中创建一个 .github/workflows 目录，并在该目录中添加一个 YAML 文件来定义工作流。例如：

name: GitHub Pages Deploy

on:
  push:
    branches:
      - main  # 或者 master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Setup Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '12'
    - name: Install Dependencies
      run: npm install
    - name: Build
      run: npm run build
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./build

这个工作流定义了一个简单的构建过程，其中包含了安装依赖、构建项目和部署到 GitHub Pages 的步骤。

5.2.2 自动化工作流的构建与部署

利用 GitHub Actions，你可以构建一个复杂的工作流，包括代码检查、测试、构建、部署等多个步骤。部署到 GitHub Pages 是这些步骤中的最后一步。

在上面的例子中，我们使用了 peaceiris/actions-gh-pages 这个 Action 来部署我们的网站。你需要在 with 部分提供 github_token 和 publish_dir 参数。 publish_dir 参数指定了构建产物所在的目录，而 github_token 是自动填充的，无需手动编辑。

工作流运行完成后，你的网站将自动部署到 GitHub Pages 上，用户就可以立即看到最新的内容。