gitee搭建的靜態網頁
版本庫Git安裝
🎓 概述
Git是一個開源的分布式控制系統，可以有效高速的處理從很小的到非常大的項目版本管理，是目前使用范圍最廣的版本管理工具。
🎓 下載安裝 下載后傻瓜式一鍵安裝，建議安裝在英文目錄下，安裝完成后點擊鼠標右鍵能夠找到如下程序
Git Base Here
Git GUI Here
系統配置
🎓 點擊鼠標右鍵、單擊 Git Base Here 、打開Git控制台在命令行輸入下列命令
# name可以是中文，郵箱建議使用自己QQ郵箱，方便記憶
git config --global user.name "Your Name"
git config --global user.email "email@example.com"
🎓 生成SSH公鑰、許多Git服務器都使用SSH公鑰進行認證，所以我們也我們也需要配置公鑰
# 輸入如下命令、三次回車即可生成 ssh key
# 郵箱同上面注冊的郵箱一致 "email@example.com"
ssh-keygen -t rsa -C "email@example.com"
🎓 生成SSH公鑰文件的磁盤位置 .ssh文件夾、文件位置
C:\Users\admin\.ssh\id_rsa.pub
碼雲公鑰配置
🎓 使用編輯軟件[記事本]打開生成的公鑰文件id_rsa.pub、Ctrl+C 、 登陸個人注冊好的碼雲(gitee)賬號 、點擊右上角設置頭像找到 設置 - 點擊左側SHH公鑰 - Ctrl+V - 確定、操作如下：
🎓 創建項目，提交本地倉庫
git clone git@gitee.com:bingziweb/cartoons.git
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="images/1.jpg" alt="">
</div>
<div class="contentBx">
<div>
<h2>Post Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum.
Fugit minus inventore sit, et officiis architecto porro esse? Aperiam
fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
inventore.
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="images/2.jpg" alt="">
</div>
<div class="contentBx">
<div>
<h2>Post Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum.
Fugit minus inventore sit, et officiis architecto porro esse? Aperiam
fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
inventore.
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="images/3.jpg" alt="">
</div>
<div class="contentBx">
<div>
<h2>Post Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum.
Fugit minus inventore sit, et officiis architecto porro esse? Aperiam
fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
inventore.
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="images/4.jpg" alt="">
</div>
<div class="contentBx">
<div>
<h2>Post Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum.
Fugit minus inventore sit, et officiis architecto porro esse? Aperiam
fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
inventore.
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="images/2.jpg" alt="">
</div>
<div class="contentBx">
<div>
<h2>Post Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum.
Fugit minus inventore sit, et officiis architecto porro esse? Aperiam
fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
inventore.
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="images/3.jpg" alt="">
</div>
<div class="contentBx">
<div>
<h2>Post Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, illum.
Fugit minus inventore sit, et officiis architecto porro esse? Aperiam
fuga enim impedit similique aspernatur facilis eaque ad, perspiciatis
inventore.
</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
section{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
transform-style: preserve-3d;
width: 1100px;
}
section .card{
position: relative;
width: 320px;
height: 320px;
margin: 20px;
transform-style: preserve-3d;
perspective: 1000px;
}
section .card .box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: 1s ease;
}
section .card:hover .box{
transform: rotateY(180deg);
}
section .card .box .imgBx{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section .card .box .imgBx img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section .card .box .contentBx{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #333;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
transform: rotateY(180deg);
}
section .card .box .contentBx div{
transform-style: preserve-3d;
padding: 20px;
background: linear-gradient(45deg,#fe0061,#ffeb3b);
transform: translateZ(100px);
}
section .card .box .contentBx div h2{
color: #fff;
font-size: 20px;
letter-spacing: 1px;
}
section .card .box .contentBx div p{
color: #fff;
font-size: 16px;
}
images
Step1：創建如下目錄
F:/workbace/firstgit/
Step2：進入該目錄、將如下格式的文件拖到firstgit目錄下
html.index
css/style.css
images/{1.jpg、 2.jpg、 3.jpg、 4.jpg}
Step3：初始化倉庫，打開git控制台分別執行如下命令
#進入工作台
cd F:/workbace/firstgit/
#初始化本地倉庫
git init
#添加當前版本
git add .
#提交到本地暫存區
git commit -m "卡通特效素材"
新建碼雲倉庫
🎓 打開gitee-我的-右上角加號-新建倉庫
🎓 創建步驟如下
本地倉庫關聯碼雲倉庫
🎓 創建成功之后 -- 點擊克隆下載 -- 選擇SSH --復制
🎓 打開剛才的Git控制台，輸入命令進行關聯
關聯命令使用詳解：git remote add origin “把上面克隆/下載 處復制的ssh地址粘貼到這里”
git remote add origin git@gitee.com:yeBingtop/cartoons.git
🎓 執行如下命令從碼雲倉庫master分支拉取文件(分支合並操作)
git pull --rebase origin master
---------------------------------------------
warning: no common commits
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 5 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (5/5), done.
From git@gitee.com:yeBingtop/cartoons.git
* branch master -> FETCH_HEAD
* [new branch] master -> origin/master
First, rewinding head to replay your work on top of it...
🎓 執行如下命令，推送文件到碼雲倉庫
git push -u origin master
------------------------------------------------------------
Counting objects: 4, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (4/4), 335 bytes | 335.00 KiB/s, done.
Total 4 (delta 1), reused 0 (delta 0)
remote: Powered by GITEE.COM [GNK-5.0]
To git@gitee.com:yeBingtop/cartoons.git
428ecc7..9c9abc4 master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.
🎓 完成之后 查看提交日志
配置碼雲靜態網站
🎓 打開倉庫 -- 服務 -- Gitee Pages --啟動
🎓 啟動成功，點擊生成的鏈接就可以看到你的網頁了
使用命令配置流程
- git init
- git add .
- git commit -m "卡通特效素材"
- git remote add origin git@gitee.com:yeBingtop/cartoons.git
- git pull --rebase origin master
- git push -u origin master
- git branch -a // 查看所有分支
- git branch 分支名 // 創建分支
- git checkout 分支名 // 切換分支
Git 工作區、暫存區和版本庫
🎓 我們先來理解下 Git 工作區、暫存區和版本庫概念
- 工作區：就是你在電腦里能看到的目錄。
- 暫存區：英文叫 stage 或 index。一般存放在 .git 目錄下的 index 文件（.git/index）中，所以我們把暫存區有時也叫作索引（index）。
- 版本庫：工作區有一個隱藏目錄 .git，這個不算工作區，而是 Git 的版本庫。
- 下面這個圖展示了工作區、版本庫中的暫存區和版本庫之間的關系：
常用命令
| 命令 | 備注 |
|---|---|
| git clone git@gitee.com:bingziweb/cartoons.git | 克隆項目 |
| git status | 查看倉庫的改變情況，會有相關的提示操作出現 |
| git config --list | 查看當前用戶信息以及其他的一些信息 |
| git add | 直接添加所有改動的文件 |
| git commit -m "node" | 確認生成的本地版本、node是版本特點說明 |
| git plus | 將改動上傳到github、若沒有指定分支、則需要用git push origin master |
| git log | 查看版本更新情況 |
| git reset -hard x | 回退到某個本地版本、x為git log中出現的hash值的第七位 |
| git clean -xf | 清除所有的未提交文件 |
| touck | 創建文件 |
| mkdir | 創建文件夾 |
| clear | 清空當前控制台 |
| rm、rmdir-rm | 刪除文件，rmdir刪除文件夾 |
| dir/ls | 列出當前目錄下的文件夾 |
🎏推介下載可視化工具 小烏龜