Netlify continuous deployment

Set up Netlify continuous deployment in 8 simple steps.

victor josiah's photo
victor josiah
·

5 min read

Netlify continuous deployment

Table of contents

Hello there, friends, and welcome to my blog. Today, we'll go over each stage of deploying a static site or single-page app.

Introduction

When I first started developing websites, I always wanted to host them myself so that I could share the links with friends and co-designers for feedback and corrections. I tried a few different methods, but I couldn't locate a free hosting service that would provide exactly what I needed. Until I stumbled onto Netlify.
Let's get started learning about Netlify and seeing how simple it is to host our static webpages.

Explanation

Netlify is a web hosting and automation platform that accelerates development productivity. By unifying the modern decoupled web elements from local development processes with advanced logic, Netlify is offering an amazingly faster way to ensure much more performant, scalable, and secure websites and applications.

Note
We'll go over how to set up your existing GitHub repo on Netlify for continuous deployment in this article (that means all you have to do is push your code and Netlify will do the rest of your publishing tasks for you). You can always drag and drop your static files if you haven't yet found the incredible power of version control with GitHub.

let get started

Getting started on Netlify

In this section, we will show you how easy it is to launch your site on Netlify. If you are not already a Netlify user, go ahead and sign up for free here first.

Step 1: Sign up with Netlify

The first step to using Netlify's hosting service is to create an account with the company.

netlify-sign-up.png

Step 2: Add your new site

Netlify makes it easy to start a new website. You'll be routed to app.netlify.com once you've logged in. If you're just getting started, the "Add A New Project" button (seen above) is your only option.

netlify-sign-up.png

Step 3: Import an existing project from a Git repository

Clicking "Add A New Project" provides you with three options.

  • Import an existing project from a Git repository
  • Starting from a template
  • Deploy manually
    We will be importing an existing project from a Git repository.

netlify-start-frame.png

For this article, we'll use GitHub, but any of the other version control systems listed are fine and follow the same steps.

If this is your first time, you'll need to give Netlify permission to read and write to your git repositories. This will allow Netlify to see all of your repositories on GitHub. Authorize Netlify.png

Step 5: Select your repositories

Now that you've connected Netlify and GitHub, you can see a list of your Git repositories. Select your static site or single-page app.

select a repo netlify-frame.png

Step 6: Configure your Settings

Here you can configure your options (if necessary). For example, if we were using the Victor Hugo boilerplate when building our static site, we would need to set our build directory to dist/ and our build command to npm run build. If your site is not using any preprocessors or compiling software, then just set the directory to / and leave the build command blank.

When you are satisfied with your configurations, click the Build your site button to continue. site setup-frame.png

Step 7: Build your Site

Now it's time to sit back and relax. You did your part, let Netlify take care of the rest — it'll only take a minute.

building-site-netlify.png

Step 8: All done

Netlify went ahead and gave your site a temporary name. Let's quickly update that to make it look a little prettier.

finish -netlify-frame.png

Step 9: Rename site

Renaming your site will only take 2 clicks. Let's do that.

  1. click on domain settings.
  2. select "edit site name" from the option dropdown
  3. enter your preferred site name
  4. click on save.

By default, your site is always accessible via a Netlify subdomain based on the site name. .netlify.app
You can learn more about custom domains here done-2-netlify.png

BOOM! You now have your site hosted on Netlify with blazing fast speeds, powerful CDNs, simple management, and ironclad security. Wasn't that easy?

Reverse deployment

The deployment can be reversed to a working production if there is a break on the current production. You can keep the site up and running while you solve the code error.

  • navigate to deploy
    You will see all previse deployment on this production with their GitHub commit massages,

deploy-netlify-frame.png

  • click on the deployment you want to reverse to,

deploy-netlify-frame2.png

  • publish deploy
    You may now click on publish deploy to revert the deployment to the selected deployment, which will save you a lot of time and effort trying to fix the problem before the website users discover it.

Conclusion

We can host our static website on Netlify using these simple procedures. This is a GitHub-linked continuous deployment, which implies that the site will be immediately updated if the repository branch to which it is tied is modified. Make sure that any branch modifications don't break the site.

Congratulations

we finally made it, your website is now hosted on Netlify.
congratulations gif

Give feedback

If you liked this article and learnt anything new, please follow me for more web-simplified subjects and give me feedback using the reaction emojis and comments. Let me know what you think about the explanation. Please provide suggestions, corrections, and criticism.

Let us connect

I would like to connect with any and every reader. Let us connect
victorjosiah19@Twitter
josiah-victor@LinkedIn

2Articles1WeekNetlifyWeb DevelopmentWeb Hosting