Introduction
This is a guide to help show you how you can set up websites online using Netlify as a web host for your sites. It provides an overview of the Netlify service, setting up an example website and putting it online.
By the end, you will have a Netlify account that can be used for free to have your websites live on the internet.
Please note you will require a GitHub account to follow this guide, Netlify relies on GitHub for your websites so it makes sense to have one set up before following this guide.
About Netlify
Netlify is a cloud hosting service which allows you to host, build and deploy websites.
Netlify is small in scale when compared to something like Amazon AWS as it's mainly used for hosting frontend Javascript frameworks such as React, Vue.js and Angular.
If you're a Javascript developer looking to build a portfolio then this service is one of the best hosts you can use.
Netlify has multiple account packages which are starter, pro and enterprise.
The free account comes with 100 GB bandwidth and 300 build minutes per month so if those limits are reached then you would need to start to pay for the service.
To get a breakdown of all the features for each package you can select the more features link as shown in the screenshot or scroll further down in the pricing page to see the feature list section.
Hosting a website
We will go through creating a new Netlify account, and setting up and hosting a website with ease.
It's so incredibly simple to do when compared to something like Amazon AWS although that service does offer a lot more compared with Netlify which is geared towards hosting frontend apps with serverless functions.
Add project to your GitHub account
If you haven't set up a GitHub account then please do so by going to the GitHub website and creating one.
This guide will involve you setting up a website, this website is a small Vue.js project which is located at https://github.com/devpushprojects/devsites-vue.
Go to the link for that project and if not already logged in to your GitHub account please log in. Once logged in click the fork button to add a copy of the project to your own GitHub account.
Creating an account
To begin you will need to create an account, go to the main website at netlify.com and click the Sign Up button.
Sign-up can be done through a Github, Gitlab, Bitbucket account or regular email account. For this guide, the regular email sign-up option will be used and linking up a GitHub account will be done after sign-up.
Fill in your email address and a password for the Netlify account.
After you have received the email from Netlify open up the email and click the Verify button to be redirected to the Netlify website where your account will be verified.
After the website has loaded you will be shown a page which asks questions on how you will use the account.
Here are the questions and the answers given, the Netlify accounts used were for portfolio websites.
- How are you planning to use Netlify?
Personal
2) What kind of site do you want to build first?
Web app
3) What best describes your role?
Other
4) What is the name of your team?
Mesh (Give your name if there isn't a team)
Click the Continue to Deploy button to be taken to the next step.
Adding the web app
From this page, you can select which code hosting service you use to add projects.
For the majority of people, it would be GitHub. Click the Deploy with GitHub to continue.
On the next page, you should see a link similar to "Configure the Netlify app on GitHub".
In my case, since I've already got the GitHub account linked with Netlify then it will show all my existing repositories added and I can click the link to add another one at the bottom of the list.
A new window will pop up showing a page from your GitHub account.
Scroll down to Repository access, select the Only select repositories option then search for and select the devsites-vue repository which is the example app created to host a test site with Netlify.
Finally, click the Save button to continue.
You will be represented with the following page showing the selected repository from the GitHub window. This app requires an environment variable so click the Edit build settings link.
The pane will expand showing options to customise the project. Scroll down and you should see an Add environment variables button, click it.
Add the following details for the environment variable...
Key: VITE_API_URL
Value: https://api.devpushprojects.com
Click the Deploy devsites-vue to Netlify button to start deployment.
You will need to wait a few moments for Netlify to go through the whole deployment process of the Vue app.
If the post-processing step takes longer than a few minutes then try refreshing the page. This is what ended up happening to me when setting up this site.
After the refresh, I scrolled down to the Deploy log section and verified that all steps were completed successfully without any issues.
On the left-hand menu click on the Site overview link to go to it.
This page will show a screenshot of the added site and generated domain that goes to the link.
Click the link to go to the site, for me the URL is https://cosmic-croissant-f2c84e.netlify.app.
If the site loads up and looks the same as the screenshot below then congratulations as you've just set up a website on Netlify.
How to use a custom domain
Netlify allows you to use your domain instead of relying on the generated URLs that Netlify provide every time you add a project.
To begin select a project and go to the overview page to get the URL name of the project and then copy it without the leading "https://" part.
The domain example which I had for my setup is cosmic-croissant-f2c84e.netlify.app as shown below.
No, go to your domain name registrar site used to host your domain names.
For me, that would be Cloudflare so I will be using that as an example. I will try and keep the explanations generic since there are so many different domain name registrar sites available such as GoDaddy, Inonos and Domain.com.
Login to your domain name registrar and then go to your list of domains, select a domain you want to use and go to the settings page for that domain.
For Cloudflare click the Manage link of the domain you want to use.
Go to the page that allows you to set the DNS settings for the domain and add a new record. Set the following fields for the new record.
Type: CNAME
Name: Netlify (Subdomain for your website)
Value: cosmic-croissant-f2c84e.netlify.app (Domain of Netlify website)
After filling in the details submit the form and add the new record.
Go back to your Netlify account and select the Domain Management option on the left-hand menu.
On the Domain management page click the Add a Domain button.
Add in the new domain or subdomain you just created and click the Verify button.
If you added a subdomain it will show an Add subdomain option, click it to continue.
You will now see the domain has been added to the account. The next step will be to assign an SSL certificate which Netlify can set up automatically and for free.
Scroll down to the HTTPS section.
Since the record was created in your domain name registrar then the DNS configuration should work.
Click the Verify DNS configuration button to run the DNS check for the domain.
After the DNS check it should show that it was successful. Click the Provision certificate for Netlify to create and assign an SSL certificate.
A pop-up will show that Netlify will use Let's Encrypt, click the Provision certificate button in the pop-up to continue.
When I tried Provisioning a certificate I received the error "missing certificate".
The likely reason why I received this error is because the DNS changes haven't been made to the domain name yet which can take a few hours to occur.
After waiting for some time I refreshed the page and the certificate was set up successfully.
Try going directly to the link to see if the website is working.
For me, the website would be https://netlify.devpushprojects.com.
Conclusion
After going through this guide you will have created a Netlify account and put online the example devsites website.
This puts you in a position where you can put frontend websites online using Netlify for whatever purpose be it to create a portfolio, start a business such as an online shop or begin writing online by putting up a blog.