在这个信息极度发达的网络时代，很多人都希望拥有一个属于自己的网站，对自己的学习和生活进行个性化展示，因此产生了庞大的建站需求。而传统方式进行建站对于小白用户来说，意味着不小的学习成本和经济开支。首先你得先有一个云服务器或云虚拟主机，阿里云上一个最低配的云服务器一年租金都在1000元以上。其次还得拥有一个属于你自己的域名，一年也得几十块钱。除此之外还得付出足够的学习成本去学习服务器维护和域名管理相关知识。如果你只是做一些简单的静态项目做展示，付出这么大的时间和经济成本显然是不合适的。接下来就给大家介绍一下如何使用现有的平台去免费发布自己的静态项目。
其实今天给大家介绍的平台对于从事程序开发的同学来说一点都不陌生，那就是世界上最大的“同性交友社区”：github。
github提供了github-page让用户可以免费部署自己的静态站点。下面就给大家介绍下如何利用这个平台去部署自己的静态站点：
github-page提供了两种需求的静态站点部署，针对用户和组织的站点：“User or organization site”和针对项目的站点：“Project site”
用户和组织的站点部署方式：
如果是用户或组织需要建立一个属于自己的站点，需按照以下方式进行部署：
第一步：建立新仓库：
image.png
image.png
第二步：clone仓库到本地：
我们这里用terminal的方式clone：
首先复制远程仓库地址：
image.png
然后在终端中将仓库clone到本地：
image.png
第三步：将做好的项目代码放到clone下来的xiaoxiekeke.github.io文件夹中：
image.png
第四步：将更新的代码提交到代码库：
image.png
命令行：
(1)git add -A
(2)git commit -am "init project"
(3)git push -u origin master
接下来通过https://xiaoxiekeke.github.io 就可以访问我们刚刚新建的web站点了，是不是非常简单呢！
image.png
项目站点部署方式：
众所周知，github是一个非常开放自由的平台，很多出色的开发者将自己优秀的项目push在github平台上供全球其他开发者学习和使用。对于一些较为复杂的项目，为了降低其他开发者的使用门槛，项目的所有者会选择将自己的项目介绍和使用方式写在readme文档里以供大家阅读。除了readme文档，开发者们还可以建立一个站点来更加全面周详的介绍自己的项目，方便别人学习和使用。下面将给大家介绍如何建立和部署这样的站点。
给项目建站点github提供了两种方法：使用默认主题法“Choose a theme”和从头开始法“Start from scratch”
默认主题法部署项目站点：
这种方法的本质是新建一个项目，在readme中写好详细内容，选择github-page默认的主题生成静态页面。这种方式局限性比较大，只能基于写好的md文件生成单页面。大家感兴趣可以自己研究其用法。
从头开始部署项目站点：
如果是一个比较复杂的介绍文档的话，由readme生成的单页面的文档肯定是不能满足要求的。这个时候需要我们能够自定义部署项目站点。下面介绍具体方法（以我的一个开源项目https://github.com/xiaoxiekeke/SNvue.git 为例）：
image.png
第一步：我们先将项目clone到本地:git clone https://github.com/xiaoxiekeke/SNvue.git
image.png
第二步：新建并切换到gh-pages分支：git checkout -b gh-pages；
此时项目中有两个分支：
image.png
第三步：安装依赖并打包成静态文件，这个过程在SNvue项目readme.md文件里有讲到。
image.png
如图所示，项目文件夹中多了一个“static”文件夹，储存了该项目的静态资源，这一步是为了生成将要被部署的静态网站，我们在线上访问的就是生成的index.html和static目录里面的文件。由于SNvue这个项目是由vue+webpack编写和构建的，所以需要这一步。如果大家有现成的静态网站的话，直接将里面的代码全部替掉就行了,不需要执行此操作。
第四步：将项目gh-pages分支提交到远程：
git add -A
git commit -m "init the gh-pages branch"
git push -u origin gh-pages
此时远程便多了一个分支：
image.png
第五步：远程仓库设置
点击“setting”选项卡
image.png
滚动到githubpage模块，并在source列表中选择gh-pages branch，点击“save”按钮：
image.png
经过以上步骤，基于项目的站点便已经部署完毕。通过https://xiaoxiekeke.github.io/SNvue/ 便可以访问。
好了，关于如何使用github部署静态站点已经介绍完毕，谢谢大家的阅读，希望能给大家带来帮助，如果喜欢的话，欢迎打赏并关注我哦！
著作权归作者所有。
商业转载请联系作者获得授权，非商业转载请注明出处。
作者：xiaoxiekeke
网友评论