I wrote a post the other day about using Netlify as a blog hosting service if you want to build a blog.

Netlify can host your static resources, which means it can host your front-end applications, just like Github Page. However, it’s not just a single function like Github Page, it can do a lot more

  1. CI/CD: Code is automatically deployed when you push it to a particular branch of the repository
  2. http headers: You can customize resourceshttp headerSo that we can doCache optimizationEtc.
  3. http redirect/rewrite: If anginx, which can be configured/apiTo solve cross-domain problems
  4. The secondary domain name: If you don’t have your own domain name, you can use any secondary domain name – as long as it’s not occupied, this is better thangithub pageMultiple warehouses are only available/pathIs much better
  5. CDN: Push your static resources to the CDN, even if they are foreign
  6. https: Prepare your certificate, of course, usinglets encrypt
  7. Prerender:SPA, do pre-render

It does the whole front-end deployment workflow thing, and a lot of it is automated. If you want to know how a big factory deploys the front end, you can take a looknetlify

Earlier this year (2019/03) I wrote about how to deploy front-end applications efficiently with Docker. It shows how to optimize the process of building a front-end static resource using an Nginx image, which is only a small part of the front-end deployment workflow, and is more suitable for small companies.

In larger companies, where the infrastructure is more robust, there is likely to be a deployment platform for front-end deployment, as with Netlify: you don’t need to build an image at all, you just need to write a very simple configuration file.

This article explains how to deploy your github front-end application with Netlify. To my warehouse cheat sheets – deployed to cheatsheeets.netlify.com/git as an example for demonstration.

Of course, GitLab can also be used with Netlify

  • Use Netlify to deploy your front-end application
  • Series of articles: Personal server operation and maintenance guide

If this article helps you, please click a star on shfshanyue/op-note for me

The new site

The new site

Log in to Netlify using github authorization. Click the New Site from Git button on the home page to create a New site

Choose a warehouse

Build options

  • build commandHow do you generate static filesnpm run build
  • publish directory: static file directory, usuallypublic/dist 等

It can also be used as a configuration file, as shown in the next section

The deployment was successful

Configuring a Secondary Domain Name

At this point by cheatsheeets.netlify.com/git access page, successful deployment

The configuration file

Configuration files can configure your HTTP headers, rewrite, redirect, etc. See the official documentation

Below I am the shfshanyue/blog configuration file

[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"
Copy the code
  • build.publish: static file directory
  • build.commandHow to generate file commands

I also permanently cache /assets/* because they are static files with hash values

Configure apis to solve cross-domain problems

Also, if your front-end applications need to be configured with proxy servers, such as/API and/graphQL, you can redirect them. It replaces some of the functionality of Nginx

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

summary

If you have a personal blog, work or app, try Netlify. Because the server is abroad, it may be a little slow, but you can try the CDN of the domestic manufacturer

Related articles

  • How to deploy front-end applications efficiently with Docker
  • If you just want to build a blog