利用github免费部署网站

1 篇文章 0 订阅
1 篇文章 0 订阅

#github部署网站教程,注意事先准备好index.html文件
#1.0首先需要注册一个github的账号,我们进到github.com官网点击sign up注册一个账号。
在这里插入图片描述
=在这里插入图片描述

#2.0注册完成后自己登录就好了,登录后界面如下,当然如果没有创建过仓库好像不是这个界面,所有需要点击右上角加号处,下面的图箭头有点偏了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cDN5UtsG-1583466673572)(image/github2.png)]

#3.0然后点击new repository进入新建仓库界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B7T3fjBR-1583466673573)(image/github3.png)]

#4.0输入仓库名称,由于是网页仓库,需要和Github用户名保持一致,填写好后创建即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-96fXyFVk-1583466673575)(image/github4.png)]

#5.0然后上传文件,我这里显示的是已经上传过了的界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oIfo91XP-1583466673577)(image/github5.png)]

#6.0将你的html工程拖到上传区,按如下方式,写好说明即可上传

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dhuIg6S-1583466673577)(image/github6.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x75kq3Za-1583466673578)(image/github7.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sHMpyTVY-1583466673578)(image/github8.png)]

#7.0点击settings,然后一直下滑直至Github Pages,因为网页就是利用github的这个功能,当然github也只能实现一些简单的静态网页,做个人博客再适合不过,按如下图片操作即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CLgLFzUB-1583466673578)(image/github9.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hrD4F8pR-1583466673579)(image/github10.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B91vtNiM-1583466673580)(image/github11.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cvB4IIpD-1583466673581)(image/github12.png)]

##如果没有html文件,想先尝试是否可以部署网站怎么办,以下提供我个人写的简单html程序,供测试部署使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tlZ0PdyK-1583466673581)(image/github13.png)]

##复制以下类容到index.txt,复制后保存,并将index.txt重命名为index.html即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9VwhzB1Q-1583466673582)(image/github14.png)]

index.html

<!doctype html>
<html>
<head>	
<meta charset="utf-8">
<title>SEASKY系列教程</title>
	<style>
		.hello_git
		{
			width:500px;
			height:300px;
			background:black;
			margin: auto;
			margin-top:300px;
			border-radius: 10px;
		}
		.hello_git li
		{
			
			color: aliceblue;
			margin-top:10px;
			margin-left:40px;
		}
	</style>
</head>
<body>
	<div class="hello_git">
		<br><br><br><br>
		<ul>
			<li>Hello Github</li>
			<li>欢迎使用SEASKY教程</li>
			<li>SEASKY交流讨论群QQ:893445794</li>
		</ul>
	</div>

</body>
</html>

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pB0JRKOc-1583466673583)(image/github15.png)]

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值