专栏首页服务器运维笔记什么,没有服务器也能部署自己的博客?!

什么,没有服务器也能部署自己的博客?!

我前几天写了一篇文章,如果你想搭建一个博客,其中提到了使用 netlify 做博客托管服务。

netlify[1] 可以为你的静态资源做托管,就是说它可以托管你的前端应用,就像 github page 那样。不过,它不又只像 github page 那么功能单一,它可以做更多的事情

  1. CI/CD: 当你 push 代码到仓库的特定分支会自动部署
  2. http headers: 你可以定制资源的 http header,从而可以做缓存优化
  3. http redirect/rewrite: 如果一个 nginx,这样可以配置 /api,解决跨域问题
  4. 二级域名: 你如果没有自己的域名,可以使用它的任意二级域名-只要没有被占用,这比 github page 多仓库只能用 /path 要好很多
  5. CDN: 把你的静态资源推到 CDN,虽然是国外的
  6. https: 为你准备证书,当然使用的是 lets encrypt
  7. Prerender: 结合 SPA,做预渲染

它做的是整个前端部署工作流的事情,而且很多事情都是自动完成的。

年初(2019/03) 我写过一篇文章: 如何使用 docker 高效部署前端应用[2]。其中讲了如何使用一个 nginx 镜像优化构建前端静态资源的过程,而这只是前端部署工作流的一小部分,这种方案更加适合小型公司。

而在大型公司,基础设施更加健全,对于前端部署很有可能有一个部署平台,如同 netlify 一样:你根本不需要构建镜像,你只需要写一个极其简单的配置文件。

本篇文章讲解如何结合 netlify 去部署你 github 上的前端应用。将以我的个人仓库 cheat-sheets[3] 部署到 https://cheatsheeets.netlify.com/git 作为示例进行演示。

当然 gitlab 也可以结合 netlify 使用

新建站点

新建站点

使用 github 授权登录 netlify[4]。在主页点击 New site from git 按钮,新建站点

新建站点

选择一个仓库

from github

配置 netlify

选择一个仓库

构建选项

  • build command: 如何生成静态文件,一般会是 npm run build
  • publish directory: 静态文件目录,一般会是 public/dist

另外也可以作为配置文件,参考下一节

选择一个仓库

部署成功

部署成功

配置二级域名

配置二级域名

此时通过 https://cheatsheeets.netlify.com/git 访问页面,成功部署

配置文件

配置文件可以配置你的 http 的 headerrewriteredirect 等,可以参考 官方文档[5]

以下我是的博客 shfshanyue/blog[6] 的配置文件

[build]
  base = ""
  publish = ".vuepress/dist"
  command = "npm run build"

[[headers]]
  for = "/*"

  [headers.values]
    cache-control = "max-age=7200"

[[headers]]
  for = "/assets/*"

  [headers.values]
    cache-control = "max-age=31536000"
  • build.publish: 静态文件目录
  • build.command: 如何生成文件的命令

另外,我把 /assets/* 做了永久缓存,因为里边都是带了 hash 值的静态文件

配置 api 解决跨域问题

另外,如果你的前端应用需要配置代理服务器,比如 /api/graphql,可以设置 redirects。算是替代了一部分 nginx 的功能

[[redirects]]
  from = "/graphql/"
  to = "https://graphql.shanyue.tech"
  status = 200
  force = true
  headers = {X-From = "Netlify"}

小结

如果你有个人博客,个人作品或者应用,那么你可以试一下 netlify。由于服务器在国外,他可能有些慢,不过你可以试试国内厂商的 CDN

参考资料

[1]

netlify: https://www.netlify.com/

[2]

如何使用 docker 高效部署前端应用: https://shanyue.tech/op/deploy-fe-with-docker

[3]

cheat-sheets: https://github.com/shfshanyue/cheat-sheets

[4]

netlify: https://www.netlify.com/

[5]

官方文档: https://docs.netlify.com/configure-builds/file-based-configuration/#headers

[6]

shfshanyue/blog: https://github.com/shfshanyue/blog

[7]

如何使用 docker 高效部署前端应用: https://shanyue.tech/op/deploy-fe-with-docker

本文分享自微信公众号 - 全栈成长之路(shanyue-road),作者:山月行

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 为你的前端本地环境配置 HTTPS 吧!

    在使用某些 html API 时,https 是前置必须项,这要求我们在本地开发环境也能够配置 https。否则你要每次部署到测试环境才能预览效果,这对开发的敏...

    山月
  • Gitlab CI/CD 部署应用到 K8S 演示

    山月
  • 当我有一台服务器时我做了什么

    由于 dev 的机器与去年列举出来的事情相似,这里只介绍下在这台 1C2G 的服务器上做了什么

    山月
  • 谷歌分享内部课程,教你如何应用机器学习进行实践

    早在二月份,谷歌与全世界共享了内部机器学习速成课程(MLCC),以帮助更多开发人员学习使用ML。这份课程支持中文,而且免费。

    AiTechYun
  • 绕过简单搜索APP进行无广告搜索

    百度为了推广app真是费尽心思,首先一开始修改百度系密码需要下载百度app,现在又推出了个简单搜索app,下载app以后再搜索任何东西都不会出现广告。

    Jumbo
  • 中美互联网差异在哪?看这两份榜单

    最近Google和百度几乎同一时间推出的两份搜索热榜,这两份榜单可以反映出人们,在过去的一年在关心什么,Google立足美国面向全球,百度则更加反映中国互联网市...

    罗超频道
  • 2018最新版币圈大佬扑克牌,来看看被降级的有哪些?

    近期,网上再度流出了币圈大佬扑克牌,号称2018最新版,现在多比带大家一起看看这些大佬和之前那套币圈大佬扑克牌相比发生了了什么变化:

    dobitrade
  • gplots heatmap.2和ggplot2 geom_tile实现数据聚类和热图plot

    主要步骤 ggplot2 数据处理成矩阵形式,给行名列名 hclust聚类,改变矩阵行列顺序为聚类后的顺序 melt数据,处理成ggplot2能够直接处理的数据...

    用户1680321
  • 网易有道CEO周枫:Go语言继承了C语言的灵活简单

    来源:周枫 转载编辑:常佩琦 【新智元导读】网易有道CEO周枫推荐Go语言。他认为Go很好地继承了C语言灵活、简单有效的思想;Go有很高的生产效率;Go精选了一...

    新智元
  • 从 Python 转到 Go 语言的五大理由

    “ Python 是非常强大的,特别是 Python3 有了异步功能,但是 GO 将完全取代它在大企业中的存在…”如果你真正理解了引号中的话,你可能会去尝试 G...

    华章科技

扫码关注云+社区

领取腾讯云代金券