Github零成本部署网站

2024/11/30 6:49:04 来源：https://blog.csdn.net/w11111xxxl/article/details/140928301 浏览: 次关键词：Github零成本部署网站

网站的意义

网站是互联网上的信息平台，用于发布和交流内容。它们提供了从教育资料到商业服务等各种信息和服务。对企业和个人而言，网站是展示形象、沟通用户的重要渠道，有助于提升品牌认知度和促进业务发展。随着移动技术的进步，网站也成为了人们获取信息和进行互动的主要途径之一。

但是，自己部署网站要么买云服务器要么买公网IP（当然你也可以使用运营商分配的公网IPV6，不过较为麻烦）才能让别人在公网上访问你的网站。

不过以上方法都要花钱，那该怎么办呢？

答：使用免费的Github Pages服务。

教程

1.注册GitHub账号

打开`https://github.com/` 输入你的邮箱并点击 `sign up for github`

在这里插入图片描述

点击`continue` 输入密码（大小写字母、数字、符号）再点击`continue`

在这里插入图片描述

输入用户名（英文、数字）并点击`continue`

在这里插入图片描述

勾选此处并点击`continue`

在这里插入图片描述

通过人机验证

在这里插入图片描述

打开邮箱复制验证码

在这里插入图片描述

粘贴至GitHub

在这里插入图片描述

登录GITHUB

在这里插入图片描述

创建仓库（选择Public 仓库名填你的用户名+“github.io”）

在这里插入图片描述

添加文件

在这里插入图片描述

添加HTML内容（文件名填“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>XXXX</title><style>/* Reset some default browser styles */* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;background-color: #f0f8ff; /* Light blue background */color: #333;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}header {background-color: #fff;padding: 10px 20px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);display: flex;justify-content: space-between;align-items: center;border-radius: 5px;}nav ul {list-style-type: none;display: flex;}nav ul li {margin-left: 20px;}nav ul li a {text-decoration: none;color: #007bff; /* Blue links */transition: all 0.3s ease;}nav ul li a:hover {transform: scale(1.1); /* Button hover effect */}.hero {background-color: #fff;padding: 50px;margin-top: 20px;border-radius: 5px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}.hero img {width: 100%;height: auto;max-width: 500px;margin-bottom: 20px;}.exhibitions {background-color: #fff;padding: 50px;margin-top: 20px;border-radius: 5px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}.footer {background-color: #fff;padding: 20px;margin-top: 20px;text-align: center;border-radius: 5px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}.footer p {margin: 5px 0;}</style>
</head>
<body><div class="container"><header><h1>XXXX</h1><nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于我们</a></li><li><a href="#services">服务</a></li><li><a href="#contact">联系我们</a></li></ul></nav></header><section class="hero"><img src="https://via.placeholder.com/500x300" alt="Hero Image"><p>欢迎来到我们的官方网站！</p></section><section class="exhibitions"><h2>展览信息</h2><p>这里是我们即将举行的展览详情。</p></section><footer class="footer"><p>版权所有 © 2024 XXXXXXXXX 保留所有权利</p><p>ICP备案号: 浙ICP备291023号</p></footer></div><script>// Add button hover effect using jQuery (make sure to include jQuery in your actual project)$(document).ready(function() {$('nav ul li a').hover(function() {$(this).stop().animate({ transform: 'scale(1.1)' }, 200);}, function() {$(this).stop().animate({ transform: 'scale(1)' }, 200);});});</script>
</body>
</html>