goahead如何使用cgi服务_如何使用免费服务搭建一个博客

最新推荐文章于 2023-06-13 10:44:13 发布

原创最新推荐文章于 2023-06-13 10:44:13 发布 · 306 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#goahead如何使用cgi服务

如果你只想搭建一个博客，那么你不需要一个服务器就能完成搭建工作，而且会更容易些

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

00 架构

根据你的域名有没有备案以及对网络时延的要求，可以选择以下两种方案

SSG + github + netlify/vercel，适合域名没有进行备案且主要服务于国外的同学
SSG + github + github actions + alioss + alicdn(可选)，适合域名在国内进行备案的同学

其中 netlify 与 vercel 都是国外优秀的网站托管平台，全球各地均有 CDN 节点，并支持与 github 协作进行自动部署，特别是 vercel 好用到爆。以下是他们的官网，对于个人项目来说完全免费

Vercel: Develop. Preview. Ship. For the best frontend teams^[1]
Netlify: All-in-one platform for automating modern web projects^[2]

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

动态博客带有数据库等存储，状态重，复杂性高，不便于部署与迁移。无状态的静态博客是一个不错的选择。

SSG，全称 Static Site Generator，静态网站生成器。如果你不想折腾数据库，那你可以选择一个静态网站生成器: 「你只需要喂给它一大堆 markdown，它就会生成一大堆 html 文件。」

至于生成器，这是我曾经使用过的，感觉都很不错，你可以任选一款，如何构建参考官方文档。

hugo^[3]: github star 39k。使用 go 开发，是我用过的构建最快的生成器，它的简介也只有一句话: The world’s fastest framework for building websites.，不过我自我感觉它的主题样式略少。如果你想定制，那你需要对 go 语言的 template 有些了解。
hexo^[4]: github star 28.4k。使用 node 开发，主题样式多，我还是较为喜欢这一点。
vuepress^[5]: github star 14.5k。使用 vue 开发，一般用作文档较多。从我的博客风格就可以看出来，它使用 vuepress 构建。
gatsby^[6]: github star 41 k。使用 React 开发，可定制性强。React 的官网就是使用 gatsby 开发

我自己的博客山月行^[7] 目前使用 vuepress 进行构建。

02 如何使他人评论博客文章

有些小伙伴希望自己的博客引入评论系统，这样子可以更方便地与其他人交流。但是，引入评论势必引入数据存储，引入数据存储势必引入后端 API的编写，甚至需要买一个服务器来支持 API 及数据存储，此时问题就变得复杂化了。

而博客评论可视为特定的通用业务领域模型，就会有该领域模型中通用的解决方案，而我认为一种比较好的方案是：

「使用 Github Issues 作为数据存储，使用 Github API 作为后端 API，使用 npm package 作为 SDK」

以下是借用 github issues 的反响不错的两个 npm package，推荐使用

gitment^[8]
gittalk^[9]

❝
我的博客刚开始使用了 gitment 作为评论系统，后来没人评论就关了...所以，有时候需不需要开博客评论，也要看看自己博客的流量
❞

03 如何部署

当使用 SSG 在本地搭建好一个博客后，需要部署在互联网提供服务，可以使用诸多免费的托管平台。

github pages^[10]: 部署后可以使用二级域名 xxx.github.io
netlify^[11]: 部署后可以使用二级域名 xxx.netlify.com
vercel^[12]: 部署后可以使用耳机域名 xxx.vercel.app

此处及剩余篇章使用 netlify 进行演示，它可以结合 github 做 CI/CD: 当你把代码 push 到 github 的指定分支时，它就会在 netlify 自动部署。另外它也有 Cache、Redirect、Rewrite 等诸多配置

我的个人博客^[13]曾经使用了 netlify，关于构建的配置文件如下，需保存在根目录的 netlify.toml 文件中。由于我的博客使用了 vuepress 作为 SSG，因此配置文件如下

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

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

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

关于部署的详细流程，可参考以下两篇文章:

使用 netlify 部署你的前端应用^[14]
使用 alioss 部署你的前端应用^[15]

04 如果你想使用自己的域名

你可以在域名提供商 godaddy^[16] 或者阿里云^[17] 直接注册一个。

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

「当使用了自己的域名后，你需要去 netlify 为你的域名配置 https，netlify 会根据你提供的域名通过 Lets Encrypt 为你自动生成证书」

05 使用 CDN

由于网站托管服务的服务器大都在国外，网络速度上可能惨不忍睹，配置 CDN 就能派上了用场。如果域名已备案，建议使用阿里云的CDN服务，按量收费。

「当然这时候 https 需要重新配置 (阿里云的 https 流量也会收费)」

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

06 配置永久缓存

对于 vue/react 此类现代前端技术而言，结合 webpack 工程化越来越出色。如 vuepress 中 SPA 与 SEO 的结合， 「但最重要的是生成带有 hash 的静态资源文件」

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

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

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

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

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

使用 netlify 部署你的前端应用^[18]
使用 alioss 部署你的前端应用^[19]
如何使用 docker 高效部署前端应用^[20]

Reference

[1]

Vercel: Develop. Preview. Ship. For the best frontend teams: https://vercel.com/

[2]

Netlify: All-in-one platform for automating modern web projects: https://www.netlify.com/

[3]

hugo: https://github.com/gohugoio/hugo

[4]

hexo: https://github.com/hexojs/hexo

[5]

vuepress: https://github.com/vuejs/vuepress

[6]

gatsby: https://github.com/gatsbyjs/gatsby

[7]

山月行: https://shanyue.tech

[8]

gitment: https://github.com/imsun/gitment

[9]

gittalk: https://github.com/gitalk/gitalk

[10]

github pages: https://pages.github.com/

[11]

netlify: https://docs.netlify.com/

[12]

vercel: https://vercel.com

[13]

个人博客: https://shanyue.tech

[14]

使用 netlify 部署你的前端应用: https://shanyue.tech/no-vps/deploy-fe-with-netlify.html

[15]

使用 alioss 部署你的前端应用: https://shanyue.tech/no-vps/deploy-fe-with-alioss.html

[16]

godaddy: https://sg.godaddy.com/zh

[17]

阿里云: https://wanwang.aliyun.com/domain/searchresult/#/?keyword=shanyue&suffix=tech

[18]

使用 netlify 部署你的前端应用: https://shanyue.tech/no-vps/deploy-fe-with-netlify.html

[19]

使用 alioss 部署你的前端应用: https://shanyue.tech/no-vps/deploy-fe-with-alioss.html

[20]

如何使用 docker 高效部署前端应用: https://shanyue.tech/frontend-engineering/docker.html

关注我

我是山月，正致力于「每天用五分钟能够看完的简短答案回答一个大厂高频面试题」。扫码添加我的微信，备注进群，加入高级前端进阶群.

欢迎关注公众号【互联网大厂招聘】，定时推送大厂内推信息及面试题简答，每天学习五分钟，半年进入大厂中