基于github使用原生的html/css/js搭建个人网页-w
2023-10-25 本文已影响0人
一车小面包人
背景：在不使用服务器的情况下，依托github搭建个人网页。主要使用前端老三套html/css/js。
-
github托管
注册个人github账号并登录，进入主页：
image.png
点击repositories新建个人仓库，进入后设置域名为：
个人账号.github.io
image.png
其他不用设置，点击创建即可。
进入该仓库，新建一个名为index.html，这个文件就是以后的网页主页面。 - 配置index.html文件
index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是我的个人网页</title>
</head>
<body>
<div id="div" style="position: fixed;right: 0px;bottom: -307.33px;">
<button id="button">关闭</button></br>
<img src="images/熊猫人.jpg" style="height: 280px;width: 380px;">
</div>
<script>
var div=document.getElementById("div");
var button=document.getElementById("button");
function moveUp(){
var styles=document.defaultView.getComputedStyle(div,null);
bottom=parseInt(styles.bottom);
if(bottom<0){
bottom+=5;
div.style.bottom=bottom+"px";
}else{
clearInterval(timer);
timer=null;
}
}
function moveDown(){
var styles=document.defaultView.getComputedStyle(div,null);
bottom=parseInt(styles.bottom);
if(bottom>-308){
bottom-=5;
div.style.bottom=bottom+"px";
}else{
clearInterval(timer);
timer=null;
}
}
var timer=null;
var time_2=null;
time_2=setTimeout(function(){
timer=setInterval(moveUp,50);
},5000);
button.onclick=function(){
timer_2=null;
if(timer==null){
timer=setInterval(moveDown,50);
}else{
clearInterval(timer);
timer=null;
timer=setInterval(moveDown,50);
}
time_2=setTimeout(function(){
timer=setInterval(moveUp,50);
},5000);
};
</script>
</body>
</html>
将index.html文件内容复制到github的index.html文件中。
并新建images文件夹，将网页所需要的图片上传进去。
image.png
-
使用域名github账号名.github.io即可访问主页
image.png
-
使用github desktop管理代码
安装github desktop软件，打开软件登录个人github账号
image.png
将右上角的仓库选择为github账号名.github.io仓库，在中间页面选择使用vscode打开，即可本地修改网页的所有文件。
修改完成后推送本地代码到仓库进行更新，即可瞬间更新github账号名.github.io仓库的所有内容。
总结：欢迎大家访问我的个人主页这是我的个人网页 (ianutin.github.io)
