若是你想搭建一个博客

若是你只想搭建一个博客,那么你极可能不须要一个服务器,并且会更容易些前端

若是你须要在我的服务器上部署,有可能会经历如下步骤:vue

  1. 配置反向代理,你须要了解 nginx 或者 traefik 的配置
  2. 配置 https,使用 lets encrypt 生成证书
  3. 使用 cron 按期更新证书
  4. 手动部署:须要每次部署都须要登陆服务器
  5. 自动部署:结合 github/gitlab 配置 CI/CD
  6. 若是自动部署,有可能使用到 docker 与 docker-compose (有可能自建 docker repo)
  7. 若是服务器在阿里云买的有可能还须要备案

固然,若是你有一个完整的 kubernetes 环境,后期工做量相对就会简单不少,你也须要node

这也是在 k8s 上部署先后端应用的通常流程react

  1. 使用 k8s 结合 ingress 自动生成证书 (一次性工做)
  2. 使用 helm 建立 chart
  3. 构建 docker 镜像 (有可能自建 docker repo)
  4. 结合 github/gitlab 配置 CI/CD

相对而言使用一个静态网站网站托管服务,复杂度与工做量就会少了不少,毕竟它部署时只须要维护若干静态文件。也更适合刚接触博客搭建或者没有服务器的同窗webpack

01 选择一款静态网站生成器

动态博客应用状态太重,复杂性太高,不便于部署与迁移。无状态的静态博客是一个不错的选择。nginx

若是你不想折腾数据库,那你能够选择一个静态网站生成器: 你只须要喂给它一大堆 markdown,它就会生成一些静态文件。git

至于生成器,这是我曾经使用过的,感受都很不错,你能够任选一款,如何构建参考官方文档。github

  • hugo: github star 39k。使用 go 开发,是我用过的构建最快的生成器,它的简介也只有一句话: The world’s fastest framework for building websites.,不过我自我感受它的主题样式略少。若是你想定制,那你须要对 go 语言的 template 有些了解。
  • hexo: github star 28.4k。使用 node 开发,主题样式多,我仍是较为喜欢这一点。
  • vuepress: github star 14.5k。使用 vue 开发,通常用做文档较多。从个人博客风格就能够看出来,它使用 vuepress 构建。

02 如何部署

能够部署在 github pages 或者 netlifyweb

推荐使用 netlify,它能够结合 github 作 CI/CD: 当你把代码 push 到 github 的指定分支时,它就会在 netlify 自动部署,另外它也有缓存,重定向,Prerender等诸多配置docker

  • github pages: 部署后可使用二级域名 xxx.github.io
  • netlify: 部署后可使用二级域名 xxx.netlify.com

个人我的博客使用了 netlify,关于构建的配置文件以下

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

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

  [headers.values]
    cache-control = "max-age=31536000"
复制代码

03 若是你想使用本身的域名

你能够在域名提供商 godaddy 或者阿里云 直接注册一个。

而且在域名提供商处配置 CNAME: yourdomain.com -> xxx.netlify.com

当使用了本身的域名后,你须要去 netlify 为你的域名配置 https

04 使用 CDN

因为网站托管服务的服务器大都在国外,网络速度上可能惨不忍睹,配置CDN就能派上用场了。

若是域名没有备案,建议使用 cloudflare 的CDN服务,彻底免费

若是域名已经备案,建议使用阿里云的CDN服务,按量收费。

固然这时候 https 须要从新配置 (阿里云的 https 流量也会收费)

Note: 使用 CDN 时要配置好正确的 nameserver

05 配置永久缓存

对于 vue/react 此类现代前端技术而言,结合 webpack 工程化愈来愈出色。如 vuepressSPASEO 的结合, 但最重要的是生成带有 hash 的静态资源文件

为带有 hash 的静态资源文件在源站(即netlify)配置永久缓存,也能在阿里云上为 CDN 与 https 省很多流量费

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

  [headers.values]
    cache-control = "max-age=31536000"
复制代码

如下是缓存在CDN命中的截图

  1. cache-control: ma-age=31536000 设置永久缓存
  2. via 经过的代理节点
  3. x-cache: HIT 在CDN上命中缓存

proxy cache
相关文章
相关标签/搜索