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

    Jamstack Theme portal for hugo theme

  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.

    Select a theme

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

    Fork the theme from jamstackthemes.dev

  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

    Change the name during the forking

  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.

    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

  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 -

    Netlify default dasboard after login

  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

    Netlify default dasboard after login

  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 -

    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

  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.

    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

  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

    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

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

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

  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.

    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

  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.

    Use kaldi template after moving mouse over the template theme

  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.

    Authorize netlify to access github account

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

  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 -

    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 -

  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.

    Check hugo version after installation

  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 -

    Git Version after installing git

  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
    

    npm install postcss cli

    npm install autofixer

  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 
    

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

    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

  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
    

    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

  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 -

    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

Running hugo website locally

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

Hugo generate output folder

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 -

Output directory for hugo

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

Upload the output directory manually

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 -

Successfull deployment on netlify by uploading the upload folder manually

Verify the website by accessing with URL -

Verify the website after deploying it manually on netlify


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.

    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 -

  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?