Hosting a website on Netlify

This blog post is inspired by a lot of questions I received from my readers and they generally ask -

1. How did you design your website?
2. Which hosting service I am using?
3. How much does it cost to run a website with its domain name?
4. Is it possible to run a website free? (Disclaimer - Yes you can run the website for free with your own domain name)
5. Which hosting service provider I should choose?
6. 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

1. What kind of website do you need?
2. What are the pre-requisites for hosting a website on Netlify?
3. Pick a theme and download it to your Github account
4. Import theme from GitHub account to Netlify Account
   • 4.1 Import from Git
   • 4.2 Start from a template
   • 4.3 Drag and drop your site output folder here
5. 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?

1. Option-1: Are you planning to run an e-commerce store where you can sell some stuff?
2. 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 -

1. WordPress
2. 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 -

1. Static website built with Hugo. (Note- You can download some of the free open source themes from here )
2. GitHub account
3. Netlify account (You only need a free account from Netlify)
4. 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.

1. 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 -

   

2. 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.

   

3. Click on fork option once you have been redirected to Github.com

   

4. 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

   

5. 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.

   

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

1. 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 -

   

2. 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

   

3. 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 -

   

   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.

   

4. 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.

   

   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

   

   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

   

   After adding the chringel-hugo-theme repo it should be visible inside your Import an existing project from a git Repository page

   

5. 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

   

   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.

   

   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.

   

   After a successful deployment, you can access the website with the URL provided by Netlify onto the dashboard.

   

6. Access the website- Once the website is deployed successfully you can access it via the URL provided by the Netlify.

   

   You can also check the deployment logs for more details about what is happening behind the scene.

   

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.

1. Browse templates- From the Netlify main dashboard, you will find an option for browse templates. Click on it -

   

   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 -

   

2. 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.

   

   For choosing the template you have to bring the mouse over the template and it will show you an option to Use Template

   

3. 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.

   

4. 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.

   

5. Deploy Site- After authorization is successful you can click on the Deploy site button to deploy your theme onto 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. -

   

   After the deployment is successful you can view the message Published -

   

6. 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 -

   

   Finally, you can access the website deployed on Netlify onto your 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 -

1. 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.

   

2. 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 -

   

3. 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 .

4. 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 laptop

   1npm install -g postcss-cli
   2npm install -g autoprefixer
   

   

   

5. 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 
   

   

   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
   

6. 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 -

   

   Choose a directory and run the following git clone command -

   1git clone https://github.com/rahulwagh/chringel-hugo-theme.git
   

   

7. 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
   

   

   There is one more config which you need to add inside config.toml

   1 theme = "chringel-hugo-theme"
   

   

8. 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 -

   

   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

10. 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 -

11. 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.

1. 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.

   

   After that, it will ask for you to add a custom domain, click on it.

   

   Add your domain for verification -

   

   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 -

1. What is a static website and which framework to choose to get yourself started with a static website.
2. 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)
3. How you can use the advantage of free website hosting on Netlify, considering your website is pretty new and have very limited traffic.
4. Also we have seen how to configure a custom domain for the static website hosted on Netlify.
5. 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 -

1. Why I dumped Wordpress and switched to Hugo static site generator
2. My experience of hosting static website hosting on Siteground
3. Hosting a website on Netlify
4. How to set up Netlify CMS for static website?
5. Fixing the Hugo Theme on Netlify Hosting?
6. /netlify-deploy-site-with-ftp-manually?