Part 3 - Using Netlify

#showdev #beginners #tutorial #webdev

If you have followed along with the last two posts, you should've successfully created your site, deployed it and accessed it through your browser. All of the heavy lifting like creating the repo and generating the static content was done by StackBit. And finally the site was deployed by Netlify. Now let's see what Netlify does.

What is Netlify?

Netlify is an all in one modern tool for automating web projects. It allows you to build and deploy your code. It prebuilds all static content and stores it in their edge servers. This allows for near instantaneous loading of content. Since our website is mainly composed of static pages, Netlify is the perfect match for deploying it.

Netlify allows Continuous Integration (CI/CD) on our web projects. What this means is that as soon as you make a change in your website repository on GitHub or publish a new post on DEV, it will automatically be built, rendered and deployed to the Netlify servers. All of this is done by maintaining Netlify hooks to GitHub and DEV. As soon as a git push is done on the master branch of your website repository, Netlify receives a trigger to rebuild the website. Similarly when you post on DEV, Netlify rebuilds the website with your new post. These re-built files are then deployed to the edge servers. This automation allows a seamless method to keep your website up to date and mint.

Netlify : Basics/Features

Change the URL of your website : If you have a paid domain name you can use it, else you can have something like <website-name>.netlify.app. You can change it by
- Going to Netlify Dashboard
- Clicking on your site name
- Select Settings on top tab
- Click on Domain Management on the left tab (Now you'll see your site's name)
- Click on Options next to the name and click Edit Name. Now give your preferred name and it is updated instantaneously.
Status Badge : Under General tab in left hand you can find how to add a deploy status badge. All you need to do is paste the code where you need to display the status (preferably on the README.md file in your GitHub repo.)
Snippet injection : When your static files are deployed, Netlify allows you to inject code into it. Try going to your website when you are logged in to StackBit, you'll see the StackBit control center on the top right corner. That code is injected by Netlify. For example you can also inject a Google Analytics tracker to see the analytics of your site. You can find it under Post-Processing below Build and Deploy.
Form Submissions : Your website will have a contact form for people wishing to contact you. You can find the list of active forms in the Forms tab in the top tab row.
Auto-Preview PR : When you create a Pull Request in GitHub on your site repository, Netlify auto-generates a new link to preview the changes in your PR branch right inside GitHub. You can find more details here
Hide Logs : You can hide the logs of your deployment by going to Continuous Deployment under Build and Deploy and editing the settings.

I hope these points helped you understand more about how your site is being deployed. In the next post I'll focus on what Jekyll is and how to modify your website using it. Thank You for reading through.