什么是Netlify
Netlify 是美国的一家云计算公司,它的官网 Netlify 为用户提供静态网页托管功能。
简单来说,只要你准备好网页代码,不需要购买服务器甚至域名,就可以把你的页面发布到互联网上。所以从定位上来说,它非常适合个人网站搭建,因为它零经济成本、零学习成本、甚至零风险。
市面上也有其他的静态网页托管网站,比如腾讯云的WH,阿里云的OSS,还有各种Pages服务,比如Github Pages、Gitee Pages、Coding Pages等等,多多少少我都尝试过,但总归是没有Netlify好用,下面是一个功能对比表格:
功能 | Netlify | 腾讯云WH | 阿里云OSS | GithubPages | GiteePages |
---|---|---|---|---|---|
免费 | ✔️ | ❌ | ❌ | ✔️ | 部分免费 |
傻瓜式 | ✔️ | 需要自行安装环境 | 需要调API | ✔️ | ✔️ |
博客系统 | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
HTTPS | ✔️ | ✔️ | ✔️ | ✔️ | 需付费 |
CDN | ✔️ | ✔️ | - | 需要自己配置 | ✔️ |
绑定域名 | ✔️ | ✔️ | - | ✔️ | 需付费 |
国内速度 | ✔️ | ✔️ | ✔️ | ❌ | ✔️ |
国外速度 | ✔️ | - | - | ✔️ | - |
用Netlify能做些什么
最常见的就是搭建博客系统了,博客blog这个词虽然非常老了,但现在仍然是技术圈、摄影圈非常重要的一种分享方式,像国内的CSDN博客、cnblog等等国产的老牌博客网站现在仍然有巨大的流量,但爱折腾的人们谁不想要一个属于自己的博客呢?
除了博客,任何静态网站的内容都可以挂在Netlify上而且Netlify不仅支持Hexo
这样的博客系统,还支持gitbook
、doxygen
等等各式各样的构建工具,比如我搭建的 Kiwano 官网上的用户手册和API文档,就是这两种方式生成的,最爽的是完全不需要考虑环境,只要把命令行敲上去,所有的环境都给你一键配置好。
如果你喜欢折腾,还可以配合 LeanCloud 这样的前端数据库实现各种各样的需求,比如给自己的博客加一个评论系统,或者做个游戏排行榜等等。
另外,Netlify还支持AWS lambda函数(看文档居然支持Go代码)、静态表单等等,不过这些我还没有尝试。
学习使用Netlify
这不是一篇手把手教学如何使用Netlify的博客,因为这样做没有意义。
把部署网站的过程一步一步截图解释说明,会有非常大的时间局限性,很可能过个半年,Netlify的页面大改,这篇博客就没有参考意义了,而且一般网站都会有入门教程介绍,再不济网上一搜教程也有一大堆,所以我不会做这种手把手的教程之类。
但是有一些坑是我自己踩过来的,简单分享一下我使用时遇到的一些问题,也许可以帮到你。
部署网站的流程
分为两种情况,如果你平时不使用git或者github,你的网站也是一个简简单单的本地项目,那么直接把代码文件夹拖到Netlify上就可以访问了。
如果你的网站放在了 Github 上,那么你需要按下面的步骤来进行
- 用 Github 账号登录
- 开放仓库权限给 Netlify
- 选择你想要部署的仓库
- 输入你的网站部署命令,比如Hexo博客的部署命令是
hexo g
- 输入你的网站部署目录,比如Hexo博客的部署目录是
/public
- 部署完成
域名解析&开启HTTPS
绑定域名的步骤本身很简单,只需要在Domain Settings
里点击添加域名,然后再到购买域名的服务商那里配置CNAME解析就可以了。
但是如果要为你的网站配置HTTPS,那就涉及到 Domain DNS 的配置问题了。
域名DNS是用来告诉你域名对应的服务器地址的,比如你访问 nomango.cn,DNS会告诉你这个域名的服务器实际ip地址是 220.x.x.x。
Netlify支持自动配置HTTPS,要求是必须使用Netlify提供的DNS服务,因为这样才能让它为你的域名自动配置HTTPS证书。
一般在国内购买的域名默认使用的都是国内的DNS,所以需要到域名管理页面去修改DNS服务器
修改后Domain Settings
的页面下方会出现开启HTTPS的提示。
是否需要备案
不需要。
域名本身是不需要备案的,只有服务器在国内的网站才需要备案。
有关备案的详细解答可以参考这篇 《腾讯云:是否需要备案》
静态资源优化
在Site Settings
里有一项是Asset optimization
,里面可以设置CSS、JS、图片压缩,可以节省服务商和用户流量,默认不开启的,推荐开启。
netlify 可以为你的静态资源做托管,就是说它可以托管你的前端应用,就像 github page
那样。不过,它不又只像 github page
那么功能单一,它可以做更多的事情
CI/CD
: 当你 push 代码到仓库的特定分支会自动部署http headers
: 你可以定制资源的http header
,从而可以做缓存优化等http redirect/rewrite
: 如果一个nginx
,这样可以配置/api
,解决跨域问题二级域名
: 你如果没有自己的域名,可以使用它的任意二级域名-只要没有被占用,这比github page
多仓库只能用/path
要好很多CDN
: 把你的静态资源推到 CDN,虽然是国外的https
: 为你准备证书,当然使用的是lets encrypt
Prerender
: 结合SPA
,做预渲染
它做的是整个前端部署工作流的事情,而且很多事情都是自动完成的。如果你想知道大厂是如何部署前端的,那你可以看看 netlify