当前位置:网站首页>静态文件快速建站
静态文件快速建站
2022-08-04 00:57:00 【A-L-Kun】
部署静态文件
一、 初始化
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/
同时,我们也可以将我们购买的域名绑定到这个上面:


不过,由于我暂时没有域名,就不继续写了,大家可以看官方文档来绑定自己的域名。
边栏推荐
猜你喜欢
随机推荐
Apple told Qualcomm: I bought a new campus for $445 million and may plan to speed up self-development of baseband chips
typescript50-交叉类型和接口之间的类型说明
Observability:你所需要知道的关于 Syslog 的一些知识
【面经】被虐了之后,我翻烂了equals源码,总结如下
typescript51 - basic use of generics
.NET Static Code Weaving - Rougamo Release 1.1.0
数据库扩容也可以如此丝滑,MySQL千亿级数据生产环境扩容实战
【日志框架】
如何通过单步调试的方式找到引起 Fiori Launchpad 路由错误的原因试读版
优秀的测试/开发程序员,是怎样修炼的?步步为营地去执行......
typescript57-数组泛型接口
咱们500万条数据测试一下,如何合理使用索引加速?
The 600MHz band is here, will it be the new golden band?
"Miscellaneous" barcode by Excel as a string
七夕活动浪漫上线,别让网络拖慢和小姐姐的开黑时间
【正则表达式】笔记
LeetCode第三题(Longest Substring Without Repeating Characters)三部曲之三:两次优化
谁说程序员不懂浪漫,表白代码来啦~
越来越火的图数据库到底能做什么?
Tanabata festival coming, VR panoramic look god assists for you









