If you just want to set up a blog, you probably don’t need a server, and it’s much easier

If you need to deploy on a personal server, you may go through the following steps:

  1. To configure a reverse proxy, you need to know the configuration of nginx or Traefik
  2. Configure HTTPS and use lets encrypt to generate a certificate
  3. Update certificates regularly with CRon
  4. Manual deployment: Log in to the server for each deployment
  5. Automatic deployment: Configure CI/CD with Github/GitLab
  6. Docker and docker-compose are possible if deployed automatically.
  7. If the server is bought in Ali cloud, it is possible to still need to put on record

Of course, if you have a complete Kubernetes environment, the late workload will be relatively easy, and you will need it

This is also the general process for deploying front-end and back-end applications on K8S

  1. Automatic certificate generation using K8S and ingress (one-time work)
  2. Create chart using helm
  3. Build docker image (possible docker repo)
  4. Configure CI/CD with Github/GitLab

With a static web hosting service, the complexity and effort is much less, after all, it only needs to maintain a few static files when deployed. It is also more suitable for those who just contact the blog or do not have a server

  • If you want to build a blog
  • Series of articles: Personal server operation and maintenance guide

01 Choose a static website builder

Dynamic blog applications are too heavy and complex for deployment and migration. A stateless static blog is a good choice.

If you don’t want to mess with your database, you can choose a static website generator: you just feed it a bunch of Markdowns and it will generate some static files.

As for generators, these are the ones I’ve used before and they all feel pretty good, you can pick one of them and refer to the official documentation for how to build it.

  • hugo: Github Star 39k Developed with Go, it is the fastest builder I have ever used, and its brief description is in one sentence:The world’s fastest framework for building websites.But I feel it has a little less thematic style. If you want to customize it, you need to have it rightgoThe language of thetemplateSort of.
  • Hexo: Github Star 28.4k I like the fact that node has a lot of thematic styles.
  • vuepress: Github Star 14.5K Developed using VUE, generally used as document-heavy. As you can see from my blog style, it usesvuepressBuild.

02 Deployment

It can be deployed on Github Pages or Netlify

Netlify is recommended for CI/CD with Github: when you push code to a github branch, it automatically deploys on Netlify, and it has caching, redirection, Prerender, and so on

  • github pages: The second-level domain name can be used after the deploymentxxx.github.io
  • netlify: The second-level domain name can be used after the deploymentxxx.netlify.com

My personal blog uses Netlify and the configuration file for the build is as follows

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

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

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

03 If you want to use your own domain name

You can register one directly with the domain name provider GoDaddy or Aliyun.

In the domain name provider, configure CNAME: yourdomain.com -> xxx.netlify.com

When using your own domain name, you need to gonetlifyConfigure for your domain namehttps

4 use the CDN

Since most of the web hosting services are hosted by foreign servers, the network speed can be terrible, so configuring a CDN can come in handy.

If the domain name is not registered, it is recommended to use CloudFlare’s CDN service, which is completely free

If the domain name has been put on record, it is recommended to use the CDN service of Aliyun and charge by volume.

Of course at this pointhttpsNeed to reconfigure (Aliyun HTTPS traffic will also be charged)

Note: The correct nameserver must be configured when using CDN

05 Configuring the permanent cache

For modern front-end technologies such as VUE/React, the combination of webpack engineering is getting better and better. Consider the combination of SPA and SEO in Vuepress, but most importantly generate static resource files with hashes

Configuring a permanent cache for static resource files with hash on the source site (i.e. Netlify) can also save a lot of traffic charges for CDN and HTTPS on Ali Cloud

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

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

The following is a screenshot of CDN hits cached

  1. cache-control: ma-age=31536000Setting permanent Cache
  2. viaPassed proxy node
  3. x-cache: HITHit cache on CDN