Git + 码云(gitee)托管配置、搭建静态网站
<h2 id="gitee搭建的静态网页">gitee搭建的静态网页</h2><iframe height="this.Document.body.scrollHeight" width="100%" src="https://bingziweb.gitee.io/cartoons" frameborder="0" allowfullscreen="">
</iframe>
<h2 id="版本库git安装">版本库Git安装</h2>
<p>🎓 概述</p>
<blockquote>
<p>Git是一个开源的分布式控制系统，可以有效高速的处理从很小的到非常大的项目版本管理，是目前使用范围最广的版本管理工具。</p>
</blockquote>
<p>🎓 下载安装下载后傻瓜式一键安装，建议安装在英文目录下，安装完成后点击鼠标右键能够找到如下程序</p>
<blockquote>
<p><mark><strong>Git Base Here</strong></mark><br>
<mark><strong>Git GUI Here</strong></mark></p>
</blockquote>
<h2 id="系统配置">系统配置</h2>
<p>🎓 点击鼠标右键、单击 <strong>Git Base Here</strong> 、打开Git控制台在命令行输入下列命令</p>
<pre><code># name可以是中文，邮箱建议使用自己QQ邮箱，方便记忆
git config --global user.name "Your Name"
git config --global user.email "email@example.com"
</code></pre>
<p>🎓 生成SSH公钥、许多Git服务器都使用SSH公钥进行认证，所以我们也我们也需要配置公钥</p>
<pre><code># 输入如下命令、三次回车即可生成 ssh key
# 邮箱同上面注册的邮箱一致 "email@example.com"
ssh-keygen -t rsa -C "email@example.com"
</code></pre>
<p>🎓 生成SSH公钥文件的磁盘位置 <strong>.ssh文件夹</strong>、文件位置</p>
<pre><code>C:\Users\admin\.ssh\id_rsa.pub
</code></pre>
<h2 id="码云公钥配置">码云公钥配置</h2>
<p>🎓 使用编辑软件[记事本]打开生成的公钥文件<strong>id_rsa.pub</strong>、Ctrl+C 、 登陆个人注册好的码云(gitee)账号 、点击右上角设置头像找到 设置 - 点击左侧SHH公钥 - Ctrl+V - 确定、操作如下：</p>
<p><img src="https://img2020.cnblogs.com/blog/2054869/202009/2054869-20200925104807041-799651826.png" alt="" loading="lazy"></p>
<p>🎓 创建项目，提交本地仓库</p>
<blockquote>
<p>git clone git@gitee.com:bingziweb/cartoons.git</p>
</blockquote>
<details>
<summary>index.html</summary>
<pre><code><!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>
</code></pre>
</details>
<details>
<summary>style.css</summary>
<pre><code>*{
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;
}
</code></pre>
</details>
<details>
<summary>images</summary>
<pre><code>
<img src="https://images.cnblogs.com/cnblogs_com/bingziweb/1853231/o_2009251908141.jpg" width="50%">
<img src="https://images.cnblogs.com/cnblogs_com/bingziweb/1853231/o_2009251908182.jpg" width="50%">
<img src="https://images.cnblogs.com/cnblogs_com/bingziweb/1853231/o_2009251908223.jpg" width="50%">
<img src="https://images.cnblogs.com/cnblogs_com/bingziweb/1853231/o_2009251908274.jpg" width="50%">
</code></pre>
</details>
<blockquote>
<p><strong>Step1：</strong>创建如下目录</p>
</blockquote>
<pre><code>F:/workbace/firstgit/
</code></pre>
<blockquote>
<p><strong>Step2：</strong>进入该目录、将如下格式的文件拖到firstgit目录下</p>
</blockquote>
<pre><code>html.index
css/style.css
images/{1.jpg、 2.jpg、 3.jpg、 4.jpg}
</code></pre>
<blockquote>
<p><strong>Step3：</strong>初始化仓库，打开git控制台分别执行如下命令</p>
</blockquote>
<pre><code>#进入工作台
cd F:/workbace/firstgit/
#初始化本地仓库
git init
#添加当前版本
git add .
#提交到本地暂存区
git commit -m "卡通特效素材"
</code></pre>
<h2 id="新建码云仓库">新建码云仓库</h2>
<p>🎓 打开gitee-我的-右上角加号-新建仓库</p>
<p><img src="https://img2020.cnblogs.com/blog/2054869/202009/2054869-20200926013208322-1315205096.png" alt="" loading="lazy"></p>
<p>🎓 创建步骤如下</p>
<p><img src="https://img2020.cnblogs.com/blog/2054869/202009/2054869-20200926013022239-1809105640.png" alt="" loading="lazy"></p>
<h2 id="本地仓库关联码云仓库">本地仓库关联码云仓库</h2>
<p>🎓 创建成功之后 -- 点击克隆下载 -- 选择SSH --复制</p>
<p><img src="https://img2020.cnblogs.com/blog/2054869/202009/2054869-20200926013303667-77905474.png" alt="" loading="lazy"></p>
<p>🎓 打开刚才的Git控制台，输入命令进行关联</p>
<blockquote>
<p>关联命令使用详解：git remote add origin “把上面克隆/下载 处复制的ssh地址粘贴到这里”</p>
</blockquote>
<pre><code>git remote add origin git@gitee.com:yeBingtop/cartoons.git
</code></pre>
<p>🎓 执行如下命令从码云仓库master分支拉取文件(分支合并操作)</p>
<pre><code>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
* master -> origin/master
First, rewinding head to replay your work on top of it...
</code></pre>
<p>🎓 执行如下命令，推送文件到码云仓库</p>
<pre><code>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
To git@gitee.com:yeBingtop/cartoons.git
428ecc7..9c9abc4master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.
</code></pre>
<p>🎓 完成之后查看提交日志</p>
<p><img src="https://img2020.cnblogs.com/blog/2054869/202009/2054869-20200926013547624-1285755221.png" alt="" loading="lazy"></p>
<h2 id="配置码云静态网站">配置码云静态网站</h2>
<p>🎓 打开仓库 -- 服务 -- Gitee Pages --启动<br>
<img src="https://img2020.cnblogs.com/blog/2054869/202009/2054869-20200926013927298-266572438.png" alt="" loading="lazy"></p>
<p>🎓 启动成功，点击生成的链接就可以看到你的网页了<br>
<img src="https://img2020.cnblogs.com/blog/2054869/202009/2054869-20200926014214647-1796709587.png" alt="" loading="lazy"></p>
<h2 id="使用命令配置流程">使用命令配置流程</h2>
<ul>
<li>git init</li>
<li>git add .</li>
<li>git commit -m "卡通特效素材"</li>
<li>git remote add origin git@gitee.com:yeBingtop/cartoons.git</li>
<li>git pull --rebase origin master</li>
<li>git push -u origin master</li>
<li>git branch -a // 查看所有分支</li>
<li>git branch 分支名 // 创建分支</li>
<li>git checkout 分支名 // 切换分支</li>
</ul>
<h2 id="git-工作区暂存区和版本库">Git 工作区、暂存区和版本库</h2>
<p>🎓 <font size="3">我们先来理解下 Git 工作区、暂存区和版本库概念</font></p>
<ul>
<li>工作区：就是你在电脑里能看到的目录。</li>
<li>暂存区：英文叫 stage 或 index。一般存放在 .git 目录下的 index 文件（.git/index）中，所以我们把暂存区有时也叫作索引（index）。</li>
<li>版本库：工作区有一个隐藏目录 .git，这个不算工作区，而是 Git 的版本库。</li>
<li>下面这个图展示了工作区、版本库中的暂存区和版本库之间的关系：<br>
<img src="https://img2020.cnblogs.com/blog/2054869/202009/2054869-20200925232716226-721980099.jpg" alt="" loading="lazy"></li>
</ul>
<h2 id="常用命令">常用命令</h2>
<table>
<thead>
<tr>
<th>命令</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>git clone git@gitee.com:bingziweb/cartoons.git</td>
<td>克隆项目</td>
</tr>
<tr>
<td>git status</td>
<td>查看仓库的改变情况，会有相关的提示操作出现</td>
</tr>
<tr>
<td>git config --list</td>
<td>查看当前用户信息以及其他的一些信息</td>
</tr>
<tr>
<td>git add</td>
<td>直接添加所有改动的文件</td>
</tr>
<tr>
<td>git commit -m "node"</td>
<td>确认生成的本地版本、node是版本特点说明</td>
</tr>
<tr>
<td>git plus</td>
<td>将改动上传到github、若没有指定分支、则需要用git push origin master</td>
</tr>
<tr>
<td>git log</td>
<td>查看版本更新情况</td>
</tr>
<tr>
<td>git reset -hard x</td>
<td>回退到某个本地版本、x为git log中出现的hash值的第七位</td>
</tr>
<tr>
<td>git clean -xf</td>
<td>清除所有的未提交文件</td>
</tr>
<tr>
<td>touck</td>
<td>创建文件</td>
</tr>
<tr>
<td>mkdir</td>
<td>创建文件夹</td>
</tr>
<tr>
<td>clear</td>
<td>清空当前控制台</td>
</tr>
<tr>
<td>rm、rmdir-rm</td>
<td>删除文件，rmdir删除文件夹</td>
</tr>
<tr>
<td>dir/ls</td>
<td>列出当前目录下的文件夹</td>
</tr>
</tbody>
</table>
<br>
<blockquote>
<p>🎏<em>推介下载可视化工具</em> 小乌龟</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/bingziweb/p/13727477.html
頁:
[1]