Create a temporary maintenance page for your Netlify site

Uncontrollable events occur where you may need a temporary maintenance page on your website or you may need a coming soon page before you launch your website. CMS's like WordPress can make this easy with plugins but how do you do that with your static site hosted on Netlify?

Here are some simple steps on how to turn on a maintenance page and then switch it off when you are ready for launch.

  1. Create a new git branch. For this example I will call it maintenance

  2. Create an index.html file in your site root with your maintenance page information.

    <h1>This page is under maintenance</h1>

  3. Create a redirect by editing your _redirects file. Comment out any other redirects that you don't want active. The following says
    Redirect any URL on this site to index.html and do a 302 status code (Temporary redirect)

    /* /index.html 302

  4. Update your Deploy Context settings by going to your site in Netlify > Settings > Build & Deploy. Edit your Production branch to be your temporary maintenance branch. For me, this changed from master to maintenance

  5. Push to this branch and deploy the site if you don't have auto deploys on.

  6. Your maintenance branch should now have replaced your site and all of your pages should have

    This site is under maintenance

Turning your site back on #

  1. Change your Deploy Context back to master (or your main production branch).

  2. Push a change to your master branch to trigger an auto-deploy (if enabled) or go into Deploys > Trigger Deploy > Deploy Site to set the site back to its normal state.

🌱 digital garden