静态文件快速建站

目录

• 部署静态文件
  • 一、 初始化
    • 1、 创建文件
    • 2、 上传文件
  • 二、 GitHub
    • 1、 基本部署
    • 2、 框架部署
  • 三、 netlify

部署静态文件

一、 初始化

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/

同时，我们也可以将我们购买的域名绑定到这个上面：

不过，由于我暂时没有域名，就不继续写了，大家可以看官方文档来绑定自己的域名。