分类
经验

Github部署静态企业官网

GitHub是一个面向开源及私有软件项目的托管平台,静态网页是指全部由HTML代码格式页面组成的网站,所有的内容包含在网页文件中。这篇文章主要是分享借助Github的Pages部署一个静态的企业官网(网页)。相比传统搭建网站的方式和方法,这几乎是完全免费。使用Github部署静态网页的操作包括四个步骤:注册Github账户、创建Github仓库、将测试网页及附件推送到仓库中、域名解析。

GitHub是一个面向开源及私有软件项目的托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub。GitHub于2008年4月10日正式上线,除了Git代码仓库托管及基本的Web管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。目前,其注册用户已经超过350万,托管版本数量也是非常之多,其中不乏知名开源项目Ruby on Rails、jQuery、Python等。2018年6月4日,微软通过75亿美元的股票交易收购代码托管平台GitHub。写这段话的目的是想告诉你:把你的网站放在Github,你不用担心出现像某宝上的主机商那种停机跑路的可能性。

静态网页是指全部由HTML代码格式页面组成的网站,所有的内容包含在网页文件中。网页上也可以出现各种视觉动态效果,如Gif动画、Flash动画、滚动字幕等,而网站主要是静态化的页面和代码组成,一般文件名均以htm、html、shtml等为后缀。静态网页的“静”表现在它没有数据库的支持,不需要调取数据库,即使网页中存在“动”的效果,也是基于JavaScript等实现的。

依照传统的做法,搭建一个网站需要购买域名、租用服务器(可以是云主机、VPS、虚拟主机)、配置网站程序等等。今天我们只需要一个独立域名,如果你不介意三级域名的话,甚至连域名的钱都可以省了。


关于展示用的测试网页,我是从网上随机找了一个。这个网页就一个页面,基于Bootstrap自适应,看起来比较适合于某一个项目展示用。

测试用的网页预览图
测试用的网页预览图

实现这个网页用到了下面这些文件,总共874KB,除此无他。

网页素材预览图
网页素材预览图,用来模拟企业官网,展示测试效果

第一步:注册Github账户

首先,你需要到Github的官网注册一个属于自己的账户,个人免费版本就行。

Github注册界面
Github注册界面

第二步:创建Github仓库

然后,你需要在你的账户下创建一个Github仓库,用来存放你的代码(你的网页文件就是放在这个仓库里)。

创建Github个人仓库
创建Github个人仓库

输入,仓库名称(Repository name)→选择公开(Public)→创建README文件(Add a README file)→点击“Create repository”创建仓库。

填写Github仓库属性信息
填写Github仓库属性信息

继续,点击设置(Setting)选项。

设置Github Pages
设置Github Pages

往下滚动网页,直到Github Pages。

设置Github Source页面
设置Github Source页面

在Source模块下点击None,换成main,即将仓库中的分支选择为main(这里也可以是master,没有区别),并点击Save保存。

选择main作为分支Source

此时,其实你已经在Github中完成了一个属于自己的网页的创建,我这里生成的链接是https://tongliyang.github.io/static-web-page/.

Github Pages部署完成
Github Pages部署完成

这个网页看起来很简单,就是通过上面的操作完成的。

使用Github Pages的个人页面
使用Github Pages的个人页面

第三步:将测试网页及附件推送到仓库中

这里需要借助一个叫GitHub Desktop的工具,点击链接下载安装到你的电脑中。

GitHub Desktop
GitHub Desktop

打开新安装的GitHub Desktop工具后,先将线上仓库同步到本地。

将前面新建的仓库,同步到本地
将前面新建的仓库,同步到本地

选择,线上仓库(GitHub.com)→你的仓库(Your repository)→本地路径(Local Path)→克隆(Clone)。

在GitHub Desktop中填写将线上仓库克隆到本地的信息

点击“Clone”后,稍等一会,即可将线上仓库同步到你的电脑中。

正在克隆中
正在克隆中

待克隆线上仓库完成,将测试用的网页素材,拷贝到你本地电脑的Github目录下。

将测试用网页素材,复制到本地Github仓库中,注意是前面搬下来的本地仓库
将测试用网页素材,复制到本地Github仓库中,注意是前面搬下来的本地仓库

在GitHub Desktop工具中,全选已拷贝完成的素材,并在Summary(required)栏中填写更新摘要信息,然后点击“Commit to main”。

准备将测试素材推送到线上仓库
准备将测试素材推送到线上仓库

正在向线上仓库推送。

正在推送中
正在推送中

在线上仓库中,看到推送成功的效果。测试用的网页素材,已经全在刚刚新建的Github线上仓库static-web-page里面了。

成功将测试素材推送到线上仓库
成功将测试素材推送到线上仓库

这时,在浏览器输入https://tongliyang.github.io/static-web-page已经可以看到测试用的网页展示了。这个链接的结构是:https://Github用户名.github.io/仓库名/

Github静态测试完成

到这为止,咱们已经将一个企业“官网”成功部署到Github上了,一分钱没花,而且也不担心后期续费。唯一有个槽点就是这个网址怎么看都不像是一个企业的“官网”。

关于这个问题,咱们继续往下看。我们可以将自己的域名与Github的三级域名“捆绑”起来,让访问咱们企业官网域名的请求,自动解析到Github的三级域名上。

第四步:域名解析

还是在Github Pages设置页面,里面有个Custom domain,即用户的域名。在栏目中输入你的域名,并点击Save保存。

在Github Pages中绑定你的域名
在Github Pages中绑定你的域名

同时,还需要在你的域名服务商的控制面板中,给你的域名添加CNAME解析,解析到Github的三级域名上。Github的三级域名的结构是:用户名.github.io

做CNAME解析的时候,你需要像我下图这样,添加两条解析记录,分别是@.yourdomain.comwww.yourdomain.com,表示访问你的域名不管是否带www都解析到同一个地方。当然,这一点你可以自己视情况而定。

在域名控制面板,添加CNAME解析,记录值填写你的Github三级域名
在域名控制面板,添加CNAME解析,记录值填写你的Github三级域名

现在,你可以出去抽一根烟,等待解析生效,等待GitHub验证生效。

大约10分钟后,再次回到Github Pages设置页面,参照下图勾选“Enforce HTTPS”,即强制HTTPS,这将会给你的域名一个免费的SSL证书。是不是意外的惊喜?还送你SSL证书,你的网址还可以带安全锁标识呢!

在Github Pages设置页面,勾选“强制HTTPS”,匹配SSL证书
在Github Pages设置页面,勾选“强制HTTPS”,匹配SSL证书

最后,在浏览器输入你的域名(例如本文测试网址https://www.jtxqj.cn/),回车!见证最后的奇迹吧!

Github部署静态企业官网 完成
Github部署静态企业官网 完成

原创不易,转载请注明出处。原标题:Github部署静态企业官网,原文章链接:https://ieclub.net/experience/2020/11/12/1483.html

“Github部署静态企业官网”上的3条回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注