How to Upload or Deploy Static Website on Netlify
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
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.👇
Deploy 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.
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.
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 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.👋
- Phone Number Authentication (OTP) dengan Firebase di Laravel 8
- Membuat Email Verification di Laravel 8 dengan Gmail
- Mengganti Tailwindcss dengan Bootstrap di Jetstream Laravel
- Membuat Fitur Login dengan Akun Google di Jetstream Laravel 8
- Kirim Pesan Dengan Zenziva SMS Gateway Di Laravel
- Membuat Fitur Verifikasi Email di Laravel
- Tutorial Cara Mudah Membuat Captcha di Laravel 8
- Contoh Cara Membuat Custom Artisan Command di Laravel 8
- Tutorial Cara Kirim Notifikasi Whatsapp dengan Laravel 8 dan Twilio
|Ctrl + D||Ctrl + D||⌘ + D|
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 56575 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 29365 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 27064 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 24669 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 21728 views