在github上在线演示项目

╰+哭是因爲堅強的太久メ 2022-04-10 13:43 407阅读 0赞

阅读此文前假设你已经掌握了git及github等相关知识。如果不会请先自行百度。

看完本文你将掌握 在github上创建一个属于自己的“服务器”

### 一、创建一个新的项目 ###

首先点击右上角+号创建一个新的项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70][]

再根据自己的需求填写相应的项目名称及简介

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70 1][]

完成以上两步我们已经成功创建了一个名为project的项目，接下来我们就需要将远程仓库clone到我们本地来。

git clone git@github.com:CalmHarbin/project.git

![20190111105332326.png][]

这事我们就会多一个project的文件夹，

将终端切换到project文件夹下。执行    cd project/

![20190111105604738.png][]

此时发现我们是在master主分支上。（当前是只有master分支的）

接下来我们创建一个新的gh-pages分支

执行   git checkout --orphan gh-pages

![20190111105928890.png][]

此时本地gh-pages分支已经创建好了，并且已经切换到了gh-pages分支上了。

接下来我们创建一个test.html并写上内容测试一下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70 2][]

test.html内容

<!DOCTYPE html>
    <html>
    <head>
    	<title>我成功的演示啦</title>
    </head>
    <body>
    	<h1>hello World</h1>
    </body>
    </html>

然后我们将代码push到远程仓库.

在终端中依次执行（此时是在gh-pages分支上）

git add .
    git commit -m "demo"
    git push -u origin gh-pages

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70 3][]

接下来就可以成功访问啦!

访问地址:[https://用户名.github.io/项目名称/][https_.github.io]文件路径

例如我的访问地址为      [https://calmharbin.github.io/project/test.html][https_.github.io]

![20190111111408306.png][]

可以看到我已经成功的访问到我的demo啦!!!

之后我们就可以在这个分支上面上传一些我们需要展示的代码.就可以愉快的玩耍啦.

再也不怕没有服务器啦~

如果觉得有用别忘了给博主来个关注啦。

上一篇： [vue路由切换动画，前进左滑，后退右滑][vue]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70]: /images/20220328/cda685c33457424383b02aa9c959c8e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70 1]: /images/20220328/6fa4483fda444c89a23449461c1a1324.png
[20190111105332326.png]: /images/20220328/56785b531cfb4fadb06702fe90511014.png
[20190111105604738.png]: /images/20220328/1983d02d2dd54a2b900af573db1267bd.png
[20190111105928890.png]: /images/20220328/b541ce76477e490aaf9911b45238e257.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70 2]: /images/20220328/f60984ccf98d43548fbb9c0328fa827e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMDgxODQx_size_16_color_FFFFFF_t_70 3]: /images/20220328/858dc6ea48ea4a909931dc368ca1a770.png
[https_.github.io]: https://calmharbin.github.io/project/test.html
[20190111111408306.png]: /images/20220328/5fb82e00e3284b62ba4b6c5dfa392174.png
[vue]: https://blog.csdn.net/qq_33081841/article/details/86244689