背景：在不使用服務(wù)器的情況下垄分，依托g(shù)ithub搭建個人網(wǎng)頁。主要使用前端老三套html/css/js娃磺。
-
github托管
注冊個人github賬號并登錄薄湿，進(jìn)入主頁：
image.png
點擊repositories新建個人倉庫，進(jìn)入后設(shè)置域名為：
個人賬號.github.io
image.png
其他不用設(shè)置吆倦，點擊創(chuàng)建即可坐求。
進(jìn)入該倉庫，新建一個名為index.html须妻，這個文件就是以后的網(wǎng)頁主頁面泛领。 - 配置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>這是我的個人網(wǎng)頁</title>
</head>
<body>
<div id="div" style="position: fixed;right: 0px;bottom: -307.33px;">
<button id="button">關(guān)閉</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文件內(nèi)容復(fù)制到github的index.html文件中渊鞋。
并新建images文件夾，將網(wǎng)頁所需要的圖片上傳進(jìn)去锡宋。
image.png
-
使用域名github賬號名.github.io即可訪問主頁
image.png -
使用github desktop管理代碼
安裝github desktop軟件员辩，打開軟件登錄個人github賬號
image.png
將右上角的倉庫選擇為github賬號名.github.io倉庫鸵鸥，在中間頁面選擇使用vscode打開，即可本地修改網(wǎng)頁的所有文件妒穴。
修改完成后推送本地代碼到倉庫進(jìn)行更新，即可瞬間更新github賬號名.github.io倉庫的所有內(nèi)容杰赛。
總結(jié)：歡迎大家訪問我的個人主頁這是我的個人網(wǎng)頁 (ianutin.github.io)
