当前位置:网站首页>静态文件快速建站
静态文件快速建站
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/
同时,我们也可以将我们购买的域名绑定到这个上面:
不过,由于我暂时没有域名,就不继续写了,大家可以看官方文档来绑定自己的域名。
边栏推荐
- Shell编程之循环语句(for、while)
- typescript53 - generic constraints
- boot issue
- 数据库扩容也可以如此丝滑,MySQL千亿级数据生产环境扩容实战
- Electronics manufacturing enterprise deployment WMS what are the benefits of warehouse management system
- C# WPF设备监控软件(经典)-下篇
- Mvc, Mvp and Mvvm
- typescript56-泛型接口
- Jmeter cross-platform operation CSV files
- 2023年第六届亚太应用数学与统计学国际会议(AMS 2023)
猜你喜欢
BioVendor人Clara细胞蛋白(CC16)Elisa试剂盒检测步骤
【详细教程】一文参透MongoDB聚合查询
How to find the cause of Fiori Launchpad routing errors by single-step debugging
【性能优化】MySQL常用慢查询分析工具
600MHz频段来了,它会是新的黄金频段吗?
View the version number of CUDA, pytorch, etc.
七夕活动浪漫上线,别让网络拖慢和小姐姐的开黑时间
MPLS Comprehensive Experiment
c语言分层理解(c语言指针(上))
因为一次bug的教训,我决定手撕Nacos源码(先撕客户端源码)
随机推荐
易动纷享--测试实习生视频面试
typescript54-泛型约束
Shell编程之循环语句(for、while)
《Greenplum构建实时数据仓库实践》简介
C 学生管理系统_添加学生
Google Earth Engine - Calculates the effective width of rivers using publicly available river data
建木DevOps流程的快速运用
MPLS Comprehensive Experiment
typescript51 - basic use of generics
Using matlab to solve the linear optimization problem based on matlab dynamic model of learning notes _11 】 【
600MHz频段来了,它会是新的黄金频段吗?
typescript52-简化泛型函数调用
It will invest about 200 billion US dollars in the United States in 20 years, and Samsung Electronics looks so handsome
哎,又跟HR在小群吵了一架!
TypeScript学习
View the version number of CUDA, pytorch, etc.
【虚拟化生态平台】虚拟化平台搭建
C语言 函数递归
2023年航空航天、机械与机电工程国际会议(CAMME 2023)
VR全景拍摄线上展馆,3D全景带你沉浸体验