Hosting a website on Netlify
This blog post is inspired by a lot of questions I received from my readers and they generally ask -
- How did you design your website?
- Which hosting service I am using?
- How much does it cost to run a website with its domain name?
- Is it possible to run a website free? (Disclaimer - Yes you can run the website for free with your own domain name)
- Which hosting service provider I should choose?
- Do you have steps that can be followed for building and maintaining a website?
So I thought of composing all of those questions and preparing a detailed blog post to answer them in the best possible way.
Table of Content
- What kind of website do you need?
- What are the pre-requisites for hosting a website on Netlify?
- Pick a theme and download it to your Github account
- Import theme from GitHub account to Netlify Account
- Conclusion
1. What kind of website do you need?
You might have a lot of queries flying around in your head about developing, designing, and making your website live with the custom domain name.
But to be honest you should ask a question yourself first - What kind of website do you need?
- Option-1: Are you planning to run an e-commerce store where you can sell some stuff?
- Option-2: Are you interested only in sharing the content in the form of blog posts which can have images, text, and videos?
If you are looking for Option-1 and you want to sell some stuff onto your website then I would recommend go for some e-commerce vendors(Shopify, Square, Ecwid, BigCommerce, WooCommerce, Wix) who has better option. Do not try to re-invent the wheel by your own.
Talking about Option-2: where you are only interested in preparing content in the form of Text, Images, and Video then I think you have two options to look for -
- WordPress
- Static Website(Hugo, Next.js, 11ty, Gatsby, NUXTJS, Jekyll)
WordPress- WordPress is great CMS(Content Management system) for those who do not know the basics of HTML, CSS, Javascript. WordPress is a feature reach CMS platform which you can use for developing and building your site because most of the hosting service providers have excellent native support for WordPress. You just have to sign up with the hosting service provider they will help you with the WordPress setup. I have done this in past with Siteground and it was super smooth.
Static Website- Addressing the elephant in the room. i.e. Static Website. I consider all the websites like static websites if they only have the intention to publish the content in the form of Text, Images, and Video. Even a Wordpress website can also be considered as a static website unless they do not want to put some shopping cart functionality on it.
There are various open source Static Website frameworks(Hugo, Next.js, 11ty, Gatsby, NUXTJS,Jekyll) available in the market which can be used for developing your website. Also you can host static website for free on various hosting service provider such as - Netlify, GitHub Pages, AWS S3
In this blog, we are going to address how to deploy a Static Website built with Hugo framework on Netlify for free.
2. What are the pre-requisites for hosting a website on Netlify?
Here is the list of items that I felt would be really necessary to work with Netlify -
- Static website built with Hugo. (Note- You can download some of the free open source themes from here )
- GitHub account
- Netlify account (You only need a free account from Netlify)
- Forestry CMS account
It might sound a bit complicated at first glance because there are a lot of moving components in the setup. But do not worry we are going to address each component in detail along with all the required steps.
But before we proceed further make sure you have signed up for three services(GitHub, Netlify, Forestry).
3. Pick a theme and download it to your Github account
I am assuming you are just getting started with Hugo, and Netlify setup and you previously did not have any website hosted with Netlify.
-
Pick a Website and theme- Goto Jamstackthemes and pick a theme/website which you like and suits your requirement.
Here is a the home page of Hugo Themes -
Jamstack Theme portal for hugo theme -
Fork/Download Theme- After deciding theme you can need to click on the GitHub button and it will take you to the GitHub page. Just for example purpose, I will choose chringel theme.
Select a theme -
Click on fork option once you have been redirected to Github.com
Fork the theme from jamstackthemes.dev -
Change the default name of the repository if you want to any custom name so that it is easy for you to remember. In my case, I went ahead with the default name. After that click on Create Fork
Change the name during the forking -
After forking the complete theme of the website will be copied to your GitHub repository. Here is the screenshot from my GitHub account after forking the theme.
Theme available into your GitHub account after forking
4. Import theme from GitHub account to Netlify Account
In the previous step, we have completed our first pre-requisite of downloading the website theme from Jamstackthemes. As the next step we need to import or in other words, I need to connect my downloaded theme from my GitHub account to Netlify account.
4.1 Import from Git
-
Login to Netlify Account- Goto your Netlify.com and log in to your Netlify account. After doing the successful login to your Netlify account you will be redirected to the Netlify default dashboard. Here is my dashboard -
Netlify default dasboard after login -
Import from Git- After login on to the dashboard you will find 3 options to import the theme from GitHub Account to Netlify. We will go through each option in bit more detail but let's start with the first option Import from Git
Netlify default dasboard after login -
Authenticate and Link your GitHub Account- After clicking on the Import from Git button you will be redirected to the next page where you need to link your GitHub account to your Netlify Account. Click on the Github button -
Link your GitHub account to netlify account After authenticating your GitHub account and allowing the Netlify account to access your GitHub account you will be redirected to the following page where you can see all of the forked(downloaded) repositories.
List all of your GitHub Repository after -
Set the permission on the GitHub repository- If you can not see your repository in the list then there is one more help link available at the bottom of the page Configure the Netlify app on GitHub just click on that link.
List all of your GitHub Repository after After clicking on that link it might ask you to enter the GitHub Account password again to authenticate Netlify to access the forked(downloaded) repository
Reauthenticate on GitHub to allow netlify to access the forked repository Once you are entered the GitHub password successfully you will be re-directed to the Netlify Permission page where you need to select the repository which you have forked(downloaded). Goto Repository Access -> Only select repositories -> Click on Save
Select the them repository which you have downloaded to your github account. After adding the chringel-hugo-theme repo it should be visible inside your Import an existing project from a git Repository page
Theme repo chringel-hugo-theme is visible in the list -
Deploy Site- Click on the chringel-hugo-theme theme repository and it will redirect you to the next page .i. e. Site settings and deploy
Netlify advanced build settings for deployment In the Advanced Build, Settings set a new variable HUGO_VERSION = 0.83.1 because we need to tell Netlify which version it should use for deploying the Hugo theme.
Netlify advanced build settings set HUGO_VERSION At last click on the Deploy Site button and it should start deploying your site on Netlify. You can monitor the status of the deployment onto the dashboard of your Netlify account.
Netlify site deploy status After a successful deployment, you can access the website with the URL provided by Netlify onto the dashboard.
Netlify url to access the website after the successful deployment -
Access the website- Once the website is deployed successfully you can access it via the URL provided by the Netlify.
Verify the website after successful deployment on Netlify You can also check the deployment logs for more details about what is happening behind the scene.
Netlify deploy logs
4.2 Start from a template
If the first option seems a little complicated to you then I would suggest going with 2nd option Start from a template.
-
Browse templates- From the Netlify main dashboard, you will find an option for browse templates. Click on it -
Browse popular netlify template There will be some default Popular templates for you to choose but if you do not like any of the popular templates then you could scroll down the page and you will find the option to Browse more templates -
Browse more tempaltes -
Choose a Template- For the reference I have chosen the Kaldi Hugo template. Remember to check the Logo of Hugo on a template because Netlify can offer you various themes but with a different framework. But this blog is only focused on Hugo that is why I have chosen Kaldi template.
Kaldi hugo template for netlify deployment For choosing the template you have to bring the mouse over the template and it will show you an option to Use Template
Use kaldi template after moving mouse over the template theme -
Clone the template to your GitHub account- After you have chosen the template the Netlify portal will redirect you to the next page where you can see the selected template by you.
Now you need to clone(download) the template to your GitHub account by clicking on the GitHub button.
Use kaldi template after moving mouse over the template theme -
Authorize Netlify- On the next page you need to authorize the Netlify to access your GitHub account so that theme can be cloned to your GitHub account.
Click on the Authrize netlify button to let Netlify access your GitHub account. If you are doing this for the first time then you might need to input your GitHub account username and password.
Authorize netlify to access github account -
Deploy Site- After authorization is successful you can click on the Deploy site button to deploy your theme onto Netlify.
Deploy theme on netlify You can monitor the status of the deployment on the main Netlify Dashboard, it might take some time to deploy your website so be patient with the deployment process. -
Deploy status on netlify After the deployment is successful you can view the message Published -
Deploy status successful -
Verify the website- Once you have successfully deployed your theme you can verify the website by accessing it via URL.
Simply refresh the page of Netlify and you should be able to see the URL for accessing your website -
Verify the website with URL Finally, you can access the website deployed on Netlify onto your browser -
Access the website on browser
4.3 Drag and drop your site output folder here
The 3rd option to host your static Hugo site on Netlify is to upload your output folder. Well this I personally think this is a bit more difficult step if you do not know how to use GitHub, Hugo, and Code Editor (Notepad++, Sublime, Intellij, or Visual Studio).
But anyway if you have an understanding of the above tools then it will be a really easy setup on Netlify. Here are steps which you need to follow -
-
Install Hugo- As you know from the Netlify dashboard you need to upload the output folder but to generate the output folder you must install the GoHugo onto your working laptop/desktop so that you can run the website locally.
Follow the instructions for installation of GoHugo based on the operating system. Once the GoHugo is installed you can verify the installation by running the following command from your terminal.
Check hugo version after installation -
Install Git- After installing the Hugo you also need to install the Git onto your system. Because all the Hugo's website themes are developed and maintained at GitHub. So to access that website theme onto your local laptop/desktop you need to install Git.
Follow the official documentation for installing the Git. Once you have installed the Git onto your machine then you can verify the installation by running the following command -
Git Version after installing git -
Fork(Download) theme to GitHub- After installing Hugo and Git you need to fork(download) Hugo theme code onto your GitHub account. Follow the Step 3: Pick a theme and download it to your Github account .
-
Follow the Prerequisites instructions of the theme- For every GoHugo theme, there is an installation instruction associated with it. So irrespective of what theme you are going to choose always look for the installation instruction documentation.
In my case, I have chosen the theme chringel-hugo-theme and as per the installation instructions I need to install the following
npm
libs onto my local laptop1npm install -g postcss-cli 2npm install -g autoprefixer
npm install postcss cli npm install autofixer -
Run Hugo new site command- Now we have installed all the required software packages which are needed for setting up the Hugo site. Following the official theme instructions we need to create an empty Hugo site.
1hugo new site chringel-theme
hugo new site Change the directory- We have to find the themes folder and switch to that folder present inside the site chringel-theme directory.
1cd chringel-theme/themes
-
Git Clone hugo theme- After completing the previous you have already created a Hugo site but you still need to supply a theme to it. So you need to clone the chringel theme from your git hub account
Go to your GitHub account pick the clone URL -
Git clone theme url Choose a directory and run the following git clone command -
1git clone https://github.com/rahulwagh/chringel-hugo-theme.git
Git clone theme to local directory -
Update the config.toml of theme- In the previous step, we did the cloning of the website. Now the website code is available on our local system. So the next thing we need to do is to update the
config.toml
file.Here is the line which you need to add -
1[build] 2writeStats = true
add line writestats inside config.toml There is one more config which you need to add inside
config.toml
1 theme = "chringel-hugo-theme"
Add theme directory to config. toml -
Start the Hugo Server locally- After making the configuration changes let's start the Hugo server locally to verify the changes we did.
To start the Hugo server you need to the following command and you must run the command from the same directory -
1hugo serve
After running the command it should start serving your website locally -
Start the hugo website As you can see from the running console the Hugo website is running locally on port 57264(http://localhost:57264). You can access the website from your browser by putting the URL
http://localhost:57264
- Generate Output folder- Now you are successfully configured and able to run your website locally. Let's generate the output folder so that you can upload it to Netlify.
To generate the output folder you need to run the command -
1hugo
After running the hugo
command it should generate a public
folder. Which you can view inside your project
explorer and it is going to be your output directory -
- Upload output folder to Hugo- After generating the output directory go back to Netlify dashboard and choose the option to deploy the site manually by uploading the site output folder.
After the upload has finished it will deploy your website and return you back with an error if there is any problem associated with it.
Here is the access URL after successful deployment -
Verify the website by accessing with URL -
5. Configure domain
Now you have deployed your first static website on Netlify but if you noticed the website is accessible using some weird URL prepared by Netlify for your website.
To fix this problem Netlify offers an excellent solution to configure your custom domain so that you can access the a website with a well-defined domain name rather than a weird Netlify provided URL.
-
Goto Domain Settings- On your Netlify dashboard after the successful deployment of your website you will find an option of Domain Settings to configure your custom domain.
Custom domain settings for netlify After that, it will ask for you to add a custom domain, click on it.
add custom domain on netlify for your static website Add your domain for verification -
add your domain for verificaiton As off now I do not have any spare domain to configure but the steps are pretty simple afterward. Netlify will provide you with all the possible settings which need to update onto your domain registrar from where you purchased your domain.
Once all the settings have been updated your website should be live and accessible from anywhere. Read more about the domain settings on the netlify official documentation
5. Conclusion
This is a very comprehensive guide for you who have never worked with Hugo or Netlify hosting. If you have followed With all the steps mentioned in the guide then you will have an excellent understanding of how the static website and Netlify hosting works.
Let's recap what we have learned so far -
- What is a static website and which framework to choose to get yourself started with a static website.
- What are the benefits of a static website. (If you are interested in learning more about key differences between WordPress and Static Website then I would recommend going through this post - Why I dumped WordPress and switched to Hugo static site generator)
- How you can use the advantage of free website hosting on Netlify, considering your website is pretty new and have very limited traffic.
- Also we have seen how to configure a custom domain for the static website hosted on Netlify.
- Netlify also added more new options to upload and deploy your website, so if you find any one of the options difficult then you can go for another alternative to host your website.
I am planning to write a post on - How to use Markdown to compose your post for your static website as well as what are CMS(Content management platform) available in the market for static websites.
So as soon as I am done with the post I will update this article here.
Read More -