持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情

前言

很多刚接触前端的同学，当实现自己的网页的时候都希望能够在网络上访问到自己的作品，苦于没有服务器。不要紧，基于github可以实现我们的作品上传，下面看看如何操作吧。

工具准备

首先你需要去官网下载git工具：git官网

在官网的右下角，直接点击download就行，下载之后直接点下一步下一步安装就好了，这里不做解释。

而且前提你要有注册一个github账号

步骤

github新建分支

重点来了：先在github创建一个分支。

在github主页有个New的按钮可以创建新的分支，点击这个New按钮，创建新的分支。

Repository name：“分支名称”。
Description：“分支描述”。

下面的选项为是否开源：记得把initialize this repository with a README √ 上，这里是初始化的意思，生成md文档。然后创建之后复制你的分支地址：

如图片下的git@github.com:hongXingID/mySecond.git，mySeconed为刚才我创建的分支名称。值得注意的是，图片下可以选的https和ssh。

http的地址每次上传都需要输入账号密码登陆github；而ssh的话只要在github上设置配置文件以后上传就不用输入账号密码了。（配置ssh文件后面讲）

分支地址

git克隆操作

先在本地克隆在github上的分支文件吧。

（注意，你在哪个目录下右键的Git bash here就是在哪个目录下创建的，即输入的命令会在你右键Git Bash Here那一刻的目录下执行，Git GUI Here是可视化的图形界面，但是一般都没怎么去用它）

eg. 在桌面右键Git Bash Here后出现命令行窗口：

输入git clone + 分支地址

Administrator@DK8KJY62C29QVG7 MINGW64 ~/Desktop
$ git clone git@github.com:hongXingID/mySecond.git
Cloning into 'mySecond'...
The authenticity of host 'github.com (13.250.177.223)' can't be established.
RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'github.com,13.250.177.223' (RSA) to the list of known hosts.
warning: You appear to have cloned an empty repository.

然后你就会发现桌面上会有这个文件夹。里面存储的就是分支的内容。

git clone之后的文件夹

创建待上传的作品

把该文件夹拉到vs code运行，随便创建一个网页，例如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>
</head>
<body>
    大家好，这是我上传的网页
</body>
</html>

保存文件。

git上传操作

然后回到桌面，点进去克隆下来的文件夹。右键进去Git Bash Here。

首先必须知道，git add + 文件名可以暂时地把文件放在暂存区。（如果文件很多，可以用"."代替所有文件，即git add .）

git status 可以查询文件是否已经保存在暂存区。红色代表还没，绿了则表示成功在暂存区了。

**git commit - m "文字描述"**可以把版本上传并作描述。

通过git log可以查询历史上次的版次以切换分支。

git界面 commit后面的数值表示哈希值，相当于身份证的感觉。

然后上传到github仓管上的命令行是git push

配置本地秘钥

如果没有在github上配置ssh文件的话，直接git push 会弹出github的登录界面，所以接下来讲解下ssh的配置了。在当前目录的git界面执行ssh-keygen生成ssh秘钥

Administrator@DK8KJY62C29QVG7 MINGW64 ~/Desktop/mySecond (master)
$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Administrator/.ssh/id_rsa):
/c/Users/Administrator/.ssh/id_rsa already exists.
Overwrite (y/n)? y
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Administrator/.ssh/id_rsa
Your public key has been saved in /c/Users/Administrator/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:zyMclMyVo9B8QjBpK43XKNLgiyQaA4d/eK/JmpZuz6w Administrator@DK8KJY62C29QVG7
The key's randomart image is:
+---[RSA 3072]----+
| .    o*. ..     |
|o o   +++o+      |
|.+ + ++ .     |
|+.= B xx        |
|+xxx S        |
|o .   .. +       |
|   xxxo +      |
|  +++    . .     |
| +E++            |
+----[SHA256]-----+

这样表示成功了，秘钥的文件就在/c/Users/Administrator/.ssh/id_rsa，可以通过git界面的提示找到id_rsa.pub文件,一般都在C盘的用户目录下。找到后用记事本打开，复制里面的秘钥。

配置github秘钥

接下来在你github的主页即头像那里找到settings

settings

在右边的选项卡点SSH and GPG keys选项，然后点New SSH key那个按钮配置文件，把刚才复制的秘钥粘贴下去就行了。

图片讲解

重新git上传

配置完之后回到刚才的git界面。执行git push，就可以在不用登录验证的状态下把本地文件上传到github上了。

然后在github上切换到你上传的分支的目录

点开setting，一直往下拉，找到GitHub Pages，把source的选项由none改成master branch，如图： setting网址由图片可以看到生成了一个网址，如果要访问你刚才创建的index.htnl，只要在生成的网址后面拼接index.html就行了。

总结：只要你再github上已创建分支，找到该分支的地址 git clone下来就可以，文件都写在该克隆下来的文件夹上，执行完毕后执行下面的步骤就可以把文件上传到github上。

git add . => git commit -m "描述" => git push


C:\Users\Administrator\Desktop\hello-world>git add .

C:\Users\Administrator\Desktop\hello-world>git commit -m "18：08添加了"
[master 8b27077] 18：08添加了
 1 file changed, 1 insertion(+), 1 deletion(-)

C:\Users\Administrator\Desktop\hello-world>git push
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 4 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 379 bytes | 379.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/hongXingID/hello-world.git
   a70b438..8b27077  master -> master

直接浏览器输入地址即可访问。

小结

基于github实现简单的静态网页预览，重点需要掌握几个常用的git操作命令，以及理解github版本管理，如果是新人前端同学的话，这部分可以找有个大概印象，在后续接触的话多查阅资料即可。

基于github实现静态网页的预览

前言