大家都知道,网页资源一般都是发布在某个服务器上才能供大家随时随地访问,然而申请服务器,不管是阿里、腾讯等等,他们售卖的服务器基本都是要收取年费的。那么如何才能免费的发布自己的静态资源到网上呢?注意,我强调的是静态资源。下面我就教大家如何利用开源的github完成这件事儿。
- 第一步:首先你需要在github的官方网站注册一个账号,作为程序员,我相信大家都已经有了这个账号。这上面有大量的来自全国各地的程序员发布的开源的代码,可供自己学习。
![0646b3c0f12512a21a9457ccf522d89a.png](https://img-blog.csdnimg.cn/img_convert/0646b3c0f12512a21a9457ccf522d89a.png)
图1
- 第二步:准备一个你要发布的静态资源项目,我这里准备了一份简历作为演示的项目。想要此项目模板的请私信我“模板”即可获取。
![e6155ea7035cae23e3c7ea42dd722b42.png](https://img-blog.csdnimg.cn/img_convert/e6155ea7035cae23e3c7ea42dd722b42.png)
图2
- 第三步:然后回到github,登录进去创建一个与你项目名字一样的仓库,默认选择pubilc即可,然后点击创建如下图所示。
![8aa9cb5ffca31f06ad583e1e7b708856.png](https://img-blog.csdnimg.cn/img_convert/8aa9cb5ffca31f06ad583e1e7b708856.png)
图3
![8eb154961b3ebbeec68beac7493d8acb.png](https://img-blog.csdnimg.cn/img_convert/8eb154961b3ebbeec68beac7493d8acb.png)
图4
- 第四步:创建完之后github会出现一个如何将本地的项目上传到github的git命令,细心的你会发现github提供了两种上传方式,这里我用的是第一种,第一种需要用到步骤3,第二种不需要第三步。我们回到本地项目,打开git命令窗口(此处我使用的是前几天我发表的一篇文章。win子系统ubuntu的终端),依次执行如下命令。执行命令的过程中你会发现在最后一步push的时候需要用到github的用户名密码。直接输入就完事了。
![19cb2f60ecf09783ba1d1c1552319900.png](https://img-blog.csdnimg.cn/img_convert/19cb2f60ecf09783ba1d1c1552319900.png)
图5
![b68fb797e325de62fa8721c711e25b75.png](https://img-blog.csdnimg.cn/img_convert/b68fb797e325de62fa8721c711e25b75.png)
图6
![2bf6cf789ea0491154195eb914219909.png](https://img-blog.csdnimg.cn/img_convert/2bf6cf789ea0491154195eb914219909.png)
图7
第五步:回到github网站找到刚刚上传的resume-test项目,点击进去,找到setting按钮点进去。进去之后在最下边找到GitHub Pages一栏。Source中将None换成master branch后页面会自动刷新,然后就会出现一个链接,见图11。直接用手机或者电脑点开链接即可随时随地访问。注意此链接任何人都可以访问,因为我们用的是github的public项目权限。
![892ccf79c4a50abf17010fd280f0d133.png](https://img-blog.csdnimg.cn/img_convert/892ccf79c4a50abf17010fd280f0d133.png)
图8
![833a1c904796555ce1765f38f7714956.png](https://img-blog.csdnimg.cn/img_convert/833a1c904796555ce1765f38f7714956.png)
图9
![ced4b9746a256e3084900ef6de9e2bcd.png](https://img-blog.csdnimg.cn/img_convert/ced4b9746a256e3084900ef6de9e2bcd.png)
图10
![2da759702ab2eaa5599ff9b1b1079ad5.png](https://img-blog.csdnimg.cn/img_convert/2da759702ab2eaa5599ff9b1b1079ad5.png)
图11
网页效果:
![7e2e472e63055b1ecde9559aebe57813.png](https://img-blog.csdnimg.cn/img_convert/7e2e472e63055b1ecde9559aebe57813.png)
网页效果图
最后希望这个小小的github功能能帮助你做你想做的事情,比如表白的网页啊、结婚的邀请网页啊等等,都可以做。有了这个资源,就尽情的发挥你的创造力吧。是不是很香,快快转发收藏点赞吧!