一个面向前端web开发人员的静态网站发布平台Surge的使用教程
用surge托管静态文件
这里说明一下,这里介绍的是windows端的方法哈,其他系统的就不做介绍了
关注分享,关注导航,关注馨客栈
更多分享可以关注馨客栈
第一步是软件安装
首先我们要先安装node这个软件
全局安装surge
在windows终端输入的命令: npm install --global surge
完成后大概就是下面这样子的了
C:\Users\xininn\AppData\Roaming\npm\surge -> C:\Users\xininn\AppData\Roaming\npm\node_modules\surge\lib\cli.js
+ surge@0.20.4
updated 1 package in 28.177s
开始写你的静态页面
这里写静态页面的方法我就不多说了,这里我就以我馨客栈官网来演示一下怎么操作
首先我们先去github仓库找到我们的馨客栈源码,地址是 馨客栈官网github源码
可以下载压缩包也可以用git命令克隆我的代码到本地git clone https://github.com/Mackxin/xininn2019.git
如果你有自己写好的静态页面就更好了
正式开始用surge托管我们的代码
我们进入到刚刚我们克隆的馨客栈源码,文件夹的名字叫 xininn2019 ,我们进入到这个文件夹里面去,可以看到有很多的文件,不用管,看接下来的操作。
我们直接按住键盘的shift键不要放手,然后在文件夹xininn2019的空白处右键,windows会弹出一个窗口,我们点击在此处打开powershell窗口,稍等一下,我们可以看到一个蓝底白字的命令窗口,我们接下来的操作都会在这里操作哈
输入命令 surge
然后回车
然后会叫你输入邮箱,这里你输入你自己的邮箱,然后再次回车
接下来就是输入你的密码(自己设置),设置完后再次回车
这时你会看到你的醒目在本地的地址,自己看看对不对,不对的话自己稍微修改一下回车,会的话就直接回车
这时我们会看到一个类似这样的域名*****.surge.sh
,这里的*我们是可以自定义的哈,我就换成了xininn.surge.sh
这里搞定后我们回车等待系统完成部署就好了
这里大体的把内容展示一下给你们看
第一次开始大概是这个样子的
Welcome to Surge! (surge.sh)
Login (or create surge account) by entering email & password.
email: 自己输入你的邮箱
password: 自己输入你的密码
Running as 你的邮箱地址 (Student)
project: j:\mackxin\xininn(这里会自动显示你的项目地址)
domain:*****.surge.sh 注意这里的****是可以自定义的哈
upload: [====================] 100% eta: 0.0s (127 files, 5275869 bytes)
CDN: [====================] 100%
IP: 45.55.110.124
Success! - Published to xininn.surge.sh
现在我们打开浏览器,在地址栏输入 xininn.surge.sh
回车就可以看到效果了
更新方法总结
更新方法一
好了,我们更新了我们的代码,要重新更新一下代码,怎么操作,
在终端输入命令 surge
然后回车
然后你大概会看到下面的命令
Running as 你的邮箱地址(Student)
project: 这里会自动显示你的项目地址,确定无误后回车
domain:随机的一个域名,自己更改为自己设定的域名哈,确定后回车,下面的等待完成就好
upload: [====================] 100% eta: 0.0s (129 files, 9518831 bytes)
CDN: [====================] 100%
IP: 45.55.110.124
Success! - Published to xininn.surge.sh
更新方法二
输入命令surge -d xininn.surge.sh -p ./
直接回车就可以了,(注意这里的xininn可以设定你自己想的)
更新方法三
首先我们在项目的根目录中新建一个文件,名字叫CNAME
用代码编辑器打开CNAME这个文件,在里面输入我们的域名xininn.surge.sh
,然后保存退出
我们在终端输入命令surge ./
然后回车确定等待部署成功就好了
如何退出当前的邮箱
只要一个命令就可以退出当前的账号
surge logout
自定义404页面
我们只需要在根目录下建立一个404.html
这个文件,然后我们自己编写我们的404的代码就可以了,完了后更新代码推送一下就可以看到了
强制使用https访问
我们只需要输入一行代码就可以了
surge --domain https://xininn.surge.sh
自定义域名
在你的域名哪里解析一下(下面列举的是我在阿里万网解析的,你也可以用CNAME类型来解析,我试过也是可以的,下面演示的是A类型来解析哈)
记录类型 | 主机记录 | 记录值 |
---|---|---|
A | WWW | 45.55.110.124 |
A | @ | 45.55.110.124 |
然后在你的项目根目录下执行命令surge
,你会看到下面的内容
Running as mackxinlww@gmail.com (Student)
project: J:\mackxin\xininn2019\
domain: http://xininn.xyz (这里要写你的自定义的域名)
upload: [====================] 100% eta: 0.0s (132 files, 9526667 bytes)
CDN: [====================] 100%
IP: 45.55.110.124
Success! - Published to xininn.xyz
删除项目
surge teardown xininn.surge.sh
自定义域名项目删除
surge teardown xininn.xyz
成功的话大概是这样的哈
Success - xininn.surge.sh has been removed.
自定义域名删除成功的话大概是这样的
Success - xininn.xyz has been removed.
忽略文件或者目录
在我们的项目根目录创建一个文件名为 .surgeignore
的文件
默认会忽略的文件,就是不用我们自己定义的
.git
.*
*.*~
node_modules
bower_components
把默认的忽略文件移除
我们只需要在自己自定义的 .surgeignore
里把要取消忽略的文件前加个英文的感叹号,如下:
!node_modules (这个的意思就是把node_modules这个文件夹从默认的忽略文件中取消掉了)
自己自定义的忽略文件
psd/ (这个是忽略psd这个文件夹,不部署到服务区上)