黑客灵魂

这个屌丝很懒，什么也没留下！

热门标签

Github零成本部署网站

作者：黑客灵魂 | 2024-08-12 09:07:53

踩

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

配置PAGES服务

进入SETTINGS选项并设置成图片中那样点击save
在这里插入图片描述

网站上线

等待1分钟左右，记得没过一会儿刷新以下，直到出现类似于一下图片的样子
在这里插入图片描述
点击网址连接即可访问

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/968765

Github零成本部署网站

网站的意义

教程

1.注册GitHub账号

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

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

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

勾选此处 并点击continue

通过人机验证

打开邮箱 复制验证码

粘贴至GitHub

登录GITHUB

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

添加文件

添加HTML内容（文件名填“index.html”）并点击绿色按钮提交

配置PAGES服务

网站上线

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

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

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

勾选此处并点击`continue`

打开邮箱复制验证码