How to Upload or Deploy Static Website on Netlify

Admin・ 22 September 2021

9 min read ・ 5818 views

Deploy Website to Netlify - In this article I will share a tutorial on how to quickly upload or deploy a static website on netlify. Netlify is a platform that provides free hosting services for static websites or single pages with an easy build and deploy process. Netlify is integrated with git providers such as GitHub, GitLab and bitbucket, making it easy to deploy. And in this article, I will share how to deploy a website from GitHub to Netlify.

Netlify products: netlify.com/products

Getting Started

Okay, before going to the steps to deploy a static website to netlify, let's first prepare the website files and push them to github. Here as an example, I will create a new folder and add a new html file with the name index.html and use the starter template from bootstrap.

Then create a new repository on github to hold the html file that was just created.

After the html file is ready and the repository on github has been created, now we push an html file with the name index.html to the repository that has been created on github using the basic git command as shown above, namely;

• git init
• git remote ad origin https://github.com/user/repo.git
• git add .
• git commit -m 'text'
• git push origin master

*Make sure you have opened the terminal and entered the project directory

Okay, after everything is ready, now we will go into step by step how to deploy a static website to netlify.👇

Step 1: Create Account

In this first step we will start by creating a netlify account. Please open the netlify official website, then click the sign up button. On this sign up page we are free to choose, whether we register using a github account, gitlab, bitbucket or using email.

Please follow the flow and complete the registration steps until the set up and continue button appears.

Step 2: Add a New Project

After successfully registering a netlify account, you will then be directed to the overview page as shown above. In this second step, please click the New site from Git button.

Then, we can connect netlify with the Git provider where the source code of your website is hosted, such as GitHub, GitLab and Bitbucket. Because in this tutorial article I use GitHub and at the beginning of this article I already pushed the index.html file using the starter template from bootstrap to GitHub, so in this step I will choose the GitHub option.

Step 3: Authorize Netlify

After selecting the git provider, then netlify will ask for authorize as shown above. At this step, please just click Authorize Netlify.

Step 4: Select Your Repository

Next, select the repository on github that you want to deploy to the new site on netlify. For example, I will deploy my static website which was created using the bootstrap starter template in the earlier step, by selecting the codelapan/Deploy-to-Netlify repository.

Step 5: Configure

Then in this configuration or site setting step, please adjust it to the source code of your website. Because in this article I only give an example of deploying a static website which is very simple with only one index.html file in the github repository, so at this step you can just ignore it and just click the Deploy Site button.

Done

After clicking Deploy Site, wait until the deploy process is complete. If the deployment process is complete, our static website can now go online. To check whether your website is online or not, you can try accessing the subdomain provided by netilfy. An example like the picture above, my static website has been successfully deployed on netlify with a subdomain https://quirky-minsky-b24c06.netlify.app/.

When I tried to access the subdomain in the browser, it turned out that my static website was able to go online.

Custom Subdomain & Domain

Don't like subdomain? calm down, we can edit the subdomain according to our wishes, whether to keep using the subdomain from netlify or using the domain.

On the site overview page, please click the Domain Settings button. Next we will be directed to a page like the one above. On this page, click the Options dropdown and click the Edit site name item dropdown. By editing the site name, your subdomain will also change.

Or do you want to use your own domain? you can bring the domain name you already have, or buy a new one. When you buy a domain on netlify, netlify will automatically configure DNS settings and provide a wildcard certificate for your domain.

or a custom domain, please click the Add custom domain button then add your domain name. If the added domain was not purchased on netlify, there may be a message "domain.com is already registered. If you registered this domain name through a different registrar, select Add domain to begin delegating it to Netlify.". If a message like that appears, you can just click the Add button.

Then you can point to netlify by adding a record in DNS management where you bought the domain.

Update Script

What if there is a script change? If there is a script change, we can immediately push it to github and automatically netlify can also read every change on github.

Add Form

Netlify comes with built-in form handling which is enabled by default. The Netlify Build bot does this by parsing the HTML file directly at deploy time, so we don't need to make any API calls or include additional JavaScript on our site.

Add HTML form code on any page of your site, add data-netlify="true" or netlify attribute in the <form> tag, and you can start accepting submissions in the Admin panel of your netlify site. Your form's name attribute defines what the form Netlify app interface is called. If you have more than one form on the netlify site, each form must have a different name. Here's an example;

<form name="contact" method="POST" data-netlify="true">
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    <div class="mb-3">
        <label for="message" class="form-label">Message</label>
        <textarea name="message" id="message" cols="30" rows="10" class="form-control"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

I will add a contact form on my static website on netlify with form code like the example above. When netlify bot parses static HTML for an added form, it automatically removes the data-netlify="true" or netlify attribute from the <form> tag and injects hidden input with name="form-name" and value="contact" like below this.

<input type="hidden" name="form-name" value="contact">

After adding the new script, don't forget to push it to github.

Now, if I try to refresh my website page on netlify then there is already a contact form that has been added.

The results of what has been inputted in the netlify form, will be saved and displayed on the form page as shown above. For example, here I have created a data collecting form, namely contact. To see what data has been entered in the contact form, it can be viewed by clicking on one of the active forms.

That's a tutorial article on deploying a website on netlify this time. Up here, we have learned how to quickly upload or deploy a website on netlify by integrating with the git provider and how to setup a website such as a custom domain and add a form on a static website to collect data.

Hopefully this article can be useful and see you in the next article.👋