Github Pages 快速搭建个人网站教程_github pages搭建个人主页

作者：从前慢现在也慢 | 2024-02-08 13:25:03

踩

github pages搭建个人主页

hello，大家好，我是wangzirui32，今天我们来学习如何使用Github Pages快速搭建个人网站，开始学习吧！

1. 创建存储库

创建存储库
这里有一点必须注意，存储库名称必须为用户名.github.io。

2. 上传网站文件

在本地，有wangzirui32.github.io文件夹，目录内容如下：
目录文件
在此目录打开Git，依次输入如下命令：

git init
git add .
git commit -m "init"
git branch -M main
git remote add origin https://github.com/用户名/用户名.github.io.git
git push -u origin main
1
2
3
4
5
6

如果本地已经提交好Git，只要执行后3条命令就OK了。
注：git push -u origin main可能会失效，要多试验几次。
在Github上，我们看到刚才上传的网站文件：

3. 创建站点

打开项目主页，找到Settings：

点击左侧栏下的Pages，Github Pages就会部署我们的站点，并为其生成域名：

例如，我的域名为https://wangzirui32.github.io，访问结果：

你也可以根据用户名访问自己的站点。

4. index.html

最后贴index.html的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wangzirui32 个人Github博客页面</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        html{
            height: 100%;
        }
        body {
            background-image: url("/bg.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="jumbotron">
            <div class="container">
                <h1>Wangzirui32 个人网站 <small>Github Pages</small></h1>
                <p>这里是wangzirui32的个人网站，更多信息请往下继续浏览，站点由Github Pages提供！</p>
            </div>
        </div>
        <h3>CSDN专栏文章</h3>
        <ul class="list-group">
            <li class="list-group-item"><a href="https://blog.csdn.net/wangzirui32/category_10745800.html">Python</a></li>
            <li class="list-group-item"><a href="https://blog.csdn.net/wangzirui32/category_10923311.html">Python网络爬虫</a></li>
            <li class="list-group-item"><a href="https://blog.csdn.net/wangzirui32/category_10769409.html">Python模块介绍使用</a></li>
            <li class="list-group-item"><a href="https://blog.csdn.net/wangzirui32/category_10807102.html">HTML</a></li>
            <li class="list-group-item"><a href="https://blog.csdn.net/wangzirui32/category_11747585.html">Boostarp</a></li>
            <li class="list-group-item"><a href="https://blog.csdn.net/wangzirui32/category_10812072.html">JavaScript</a></li>
            <li class="list-group-item"><a href="https://blog.csdn.net/wangzirui32/category_10926142.html">jQuery</a></li>
        </ul>
        <h3>其他资源</h3>
        <div class="links">
            <a href="https://github.com/wangzirui32" class="btn btn-primary">Github</a>
            <a href="https://blog.csdn.net/wangzirui32" class="btn btn-danger">CSDN</a>
            <a href="https://gitee.com/wangzirui32" class="btn btn-warning">Gitee</a>
        </div>
    </div>
</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

好了，今天的课程就到这里，我是wangzirui32，喜欢的可以点个收藏和关注，我们下次再见！

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