部署静态文件
一、 初始化
1、 创建文件
首先我们要创建好我们的文件,这个可以随便写一点内容。然后我们写好的静态文件使用git添加到GitHub远程仓库中,以便我们部署,这里我是使用bootstrap框架来搭建的一个简单的后管理页面,同时也设置好了登录界面,和一个帮助文档
2、 上传文件
我们在GitHub上面创建一个仓库WebTest来存储我们的代码,关于仓库的创建也在文章中
创建完仓库后,我们就开始上传我们的文件了,上传完成后,如下图所示:
然后,我们开始部署我们的网站
二、 GitHub
1、 基本部署
首先,我们来说一下使用GitHub来部署网站
然后我们就可以通过https://liuzhongkun1.github.io/WebTest/来访问我们部署出来的项目了
项目地址为:https://github.com/liuzhongkun1/WebTest
原理:
我们访问:https://liuzhongkun1.github.io/WebTest/这个地址就相当于访问https://liuzhongkun1.github.io/WebTest/index.html
GitHub默认访问的地址是index.html
那么,如果我想访问help.html应该怎么办呢?
和上面的访问类似,只不过是要我们输入html文件路径而已:
https://liuzhongkun1.github.io/WebTest/help.html
特殊功能:
创建一个名为 xxx.github.io 的项目(xxx 是你的用户名),然后再以上面的方式去部署可以得到没有后缀的 xxx.github.io 。
比如我的 Github 用户名为
liuzhongkun1
,那就创建一个名为liuzhongkun1.github.io
的仓库,然后在这上面部署。
2、 框架部署
然后,问题来了,我们如何部署Vue,react等框架时,又应该如何部署呢?
也很简单,这些框架本质上还是一个web文件,我们要先在本地进行编译,打包创建,然后再将build
目录下的文件通过git上传到我们准备好的仓库中
其余步骤和上面类似
三、 netlify
然后我们再来学习如何使用netlify来部署我们的静态网站
首先我们要使用GitHub账号登录这个网站,点击import from Git
点击步骤:
import from Git -> GitHub -> Authorize ->
授权后选择我们需要部署网站的仓库
然后我们就对我们的文件就行配置
跳过警告,因为我们使用的是静态文件,不需要进行编译后再运行部署以后,我们可以看到
我们来看一下部署过程中的日志信息
那么,我们可不可以修改我们的站点名字呢?答案是可以的
我们的站点名字从https://bucolic-figolla-b8ffb4.netlify.app/改为https://lzk.netlify.app/
同时,我们也可以将我们购买的域名绑定到这个上面:
不过,由于我暂时没有域名,就不继续写了,大家可以看官方文档来绑定自己的域名。