My Favorite Netlify Features

The charm of JAMstack makes front-end development like fish in water! Silvestar, the author of this article, will share his love for Netlify and list the most heart-warming features of Netlify, which is completely independent of Netlify even if some of the content looks like sponsored content (Netlify is a sponsor of CSS-Tricks).

In 2019, as a JAMstack developer, I felt like I was in a dream world. A variety of modern frameworks, tools and services make our work relaxed and enjoyable, and even have super powers! And Netlify stands out with its powerful products and features. If you read CSS-Tricks frequently, you must be familiar with Netlify. There are already a lot of related articles here, and there are even two CSS-Tricks micro websites that use Netlify.

This post is a tribute to Netlify and its outstanding features. I'll share my favorite Netlify features, hoping to help you better understand and use Netlify.

Customize Netlify subdomain

When creating a new project in Netlify, you can:

• Select a project from the Git code repository;
• Upload local folders.

Projects are usually ready within minutes and you can start configuring immediately. First, select the site name.

The site name determines the default URL of the website. Only alphanumeric characters and hyphen are allowed.

Netlify will randomly generate default names for new projects. If you don't like it, you can choose a custom name that is easier to remember.

For example, my site name is silvestarcodes and my access address is silvestarcodes.netlify.com.

Netlify DNS Management

For official sites, you need to add a custom domain name. In the Custom Domain Name section of the Domain Name Management Panel, click the "Add Custom Domain Name" button, enter your domain name, and then click the "Verify" button.

You have two options:

1. Point your DNS record to the Netlify load balancer IP address;
2. Let Netlify manage your DNS records.

For the first option, please refer to the full description in the official documentation.

The second option is that you need to add or update the name server at the domain name registrar. If you have not purchased a domain name, you can register directly on the dashboard.

Netlify provides a DNS record configuration service called Netlify DNS.

After configuring a custom domain name, you can manage DNS records through the Netlify dashboard.

If you want to set up a development subdomain for the development branch to preview the development changes of the website, it can be done automatically. In the Domain Name Management section of the website settings section, select the development branch, and Netlify will automatically add a new subdomain named dev . Now you can view the preview by visiting the development subdomain.

You can also configure subdomains for different websites. To do this, create a new Netlify site, enter a new subdomain as a custom domain, and Netlify will automatically add records for you.

Additionally, Netlify allows you to automatically create Let's Encrypt certificates, and it's completely free!

Code snippet injection (similar to tag manager)

Code snippet injection is another excellent feature. I'm mainly used to insert analysis code, but you can also use it to add meta tags, favicon tags, or Webments.io tags for responsive behavior.

When inserting a code snippet, you can choose to attach the code snippet to The end of the block or<code> end of block.

Each deployment has a permanent unique URL

Netlify creates a unique preview link for each successful build to facilitate comparison of revisions to the website. For example, this is my website link from January this year, which is my website from January last year. You can see changes in style and content.

Phil Hawksworth in his speech called this feature an immutable atomic deployment.

They are permanently present immutable deployments. — Phil Hawksworth

I found this feature very useful when completing tasks and sending preview links to customers. If someone is responsible for handling Git-related tasks (such as publishing to production), these preview links can be convenient for understanding what happens after the merge. You can even set up a preview build for each pull request.

Simple and efficient A/B testing

Netlify makes running A/B tests very simple. Netlify's split testing allows you to display different versions of your website from different Git branches without any hacks.

First add and publish a branch with the required changes. In the Split Test panel, select the branch you want to test, set the split percentage, and start testing. You can even set a variable in your analysis code to track the currently displayed branch. If you haven't done this yet, you may need to activate the branch deployment.

Netlify's split testing allows you to allocate traffic to different deployments directly from our CDN network without degrading download performance and without installing any third-party JavaScript libraries. — Netlify Documentation

I've used A/B tests on my website for several different features:

• Test different versions of the contact form;
• Show different versions of banners;
• Track user behavior (such as heat maps).

If you want to track split test information, you can set process environment variables for this purpose. You can learn more in the official documentation. Best of all, most A/B testing services use client JavaScript to do this, which is unreliable and unfavorable to performance. It's much better to do this at the load balancer level like this.

Multiple notification options (email, Slack, etc.)

If you want to be notified when certain events occur in a Netlify project, there are several notification options available. I prefer to receive emails for every successful or failed build.

If you use Gmail, you can notice the View Live Changes link every time you build successfully when hovering messages in your Gmail inbox. This means you can open a preview link without opening an email. If you have any issues with your build, there are other links like "View the full deployment log" or "Check usage details" when your plan is close to its limit. This is awesome!

If you want to set up hooks for third-party services, you only need a URL (the JWS key token is optional). The Slack hook is built into Netlify, and if you know your Slack is passing in a Webhook URL, it can be set up in seconds.

Summarize

All of the above features are part of the Netlify free plan. I can’t imagine the effort to provide such a seamless experience. But Netlify didn't stop there. They are constantly introducing more new features, such as the Netlify Dev CLI for on-premises development and deployment cancelled. Netlify has become an unquestionably transformative platform in modern static website development, and it is an important part of the growth and popularity of static websites.

The above is the detailed content of My Favorite Netlify Features. For more information, please follow other related articles on the PHP Chinese website!