300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > Github Pages 快速搭建个人网站教程

Github Pages 快速搭建个人网站教程

时间:2020-06-25 12:39:05

相关推荐

Github Pages 快速搭建个人网站教程

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

1. 创建存储库

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

2. 上传网站文件

在本地,有wangzirui32.github.io文件夹,目录内容如下:

在此目录打开Git,依次输入如下命令:

git initgit add .git commit -m "init"git branch -M maingit remote add origin /用户名/用户名.github.io.gitgit push -u origin main

如果本地已经提交好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="/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><script src="/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="/wangzirui32/category_10745800.html">Python</a></li><li class="list-group-item"><a href="/wangzirui32/category_10923311.html">Python网络爬虫</a></li><li class="list-group-item"><a href="/wangzirui32/category_10769409.html">Python模块介绍使用</a></li><li class="list-group-item"><a href="/wangzirui32/category_10807102.html">HTML</a></li><li class="list-group-item"><a href="/wangzirui32/category_11747585.html">Boostarp</a></li><li class="list-group-item"><a href="/wangzirui32/category_10812072.html">JavaScript</a></li><li class="list-group-item"><a href="/wangzirui32/category_10926142.html">jQuery</a></li></ul><h3>其他资源</h3><div class="links"><a href="/wangzirui32" class="btn btn-primary">Github</a><a href="/wangzirui32" class="btn btn-danger">CSDN</a><a href="/wangzirui32" class="btn btn-warning">Gitee</a></div></div></body></html>

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。