Home

How To Create A Blazing Fast Blog Without Coding

 · 7 min · Nasir

Tired of a slow-loading website but no time to learn programming? I may have found a solution for you.

blog hugo tutorial

Designing a great blog is more than just about creating a pretty website. You would have to think of ways to improve its SEO (Search Engine Optimization), the business model of how you monetize and most of all, writing well-researched content that is helpful to the general public.

The Struggle

Some spend too much time focusing on their blog appearance rather than creating new content. (I was also guilty of this. 😅)

Designing a website can be sluggish when you have too many lines of code to type, trying out different styles that fit, or having to learn a new, unfamiliar programming language.

Even if you are good at programming; to build, compile and deploying every time you create new content proves to be a hurdle from creating quality content consistently.

Content Management System

To solve many of the problems caused by this lethargic process, people opt for a Content Management System or CMS. There is a myriad of CMSs out there, such as:

WordPress, the favourite choice for most, is powerful, easy-to-use, SEO friendly and packed with an assortment of plugins. But because of this abundance of functions, they are compacted into a single domain, it becomes bloated and degrades in performance.

That is why developers opt for Static Site Generators such as:

As the name suggests, it generates static HTML sites by predefining its components to maintain consistency. Websites created by SSGs are fast, secure and beautiful, as you can tamper with the code directly.

However, as I mentioned earlier, you would still have to build (type code on a computer), compile and deploy each time you make a post. How would you create a post without all that hassle? Maybe even on your mobile device?

That is where headless CMSs make their entrance. A headless CMS is, in essence, a platform to create content, generate it into static sites and deploy it to your domain. You can have them hosted at different domains or the same one.

For this post, I will share how to create a Hugo blog with Forestry.io, Github and deploy it to a live site with Netlify.

Like this:

Preview

Forestry.io

Forestry.io provides the ability to edit all Markdown, JSON, YAML and TOML files in any SSG. I will use the free plan for this tutorial, which can support a maximum of 3 websites. If you wish to have more websites, integrate with a team, better security or other features, you can choose from the paid plans. They are available here.

Go to Forestry.io

  1. Go to their website and click on ‘Select a Starter Template’.

Forestry website

Choosing a starter Template

  1. Here you can choose a starter template from your favourite SSG.

Choose a starter template at Forestry.io

  1. I will choose Parsa by Themefisher because I think it looks great and filled with core functions of a blog.

Choosing Parsa by Themefisher
Click on the arrow and click on Hugo

Clone repository to Github

  1. I will use Github for this tutorial. If you have not created an account, go to github.com to create one.

Click on Github to link to your Github account.
Click Github to link to your Github account.

Choose your Github account and name your project.
Choose your Github account and name your project. I will name it as hugo-parsa-forestry

  1. Congratulations! You have created your first CMS with Forestry.io. You will then be redirected to the dashboard.

For now, lets click all “Mark as done”.
For now, lets click all "Mark as done".

Deploy to Netlify

  1. Let’s go to Netlify to deploy our repository.

Netlify: Build, deploy, & scale modern web projects
Click on Login or Sign Up for an account if you do not have one.
Click on Add New Site > Import an existing project

Connect to Github
Connect to Github

Then scroll down to click Deploy site
Then scroll down to click Deploy site.

Your site is deploying
The site is now deploying.

Change domain name

  1. Change domain name.

Click on Site settings.
Lets change the domain name from the random name by Netlify. Click on Site settings.

Then click on Change site name
Then click on Change site name. Choose a new name based on availability.

It will be a subdomain of Netlify in the beginning. For custom domain, go to Domain management to buy a new domain or transfer an existing one.

The site is now live
The site is now live at this free Netlify subdomain.
Check out the live preview here
Preview

Update CMS

  1. Update domain name at CMS

Once the set-up of the domain name is complete, you need to update it in the CMS for all the functions to work. For example, the search function does not work as intended as the BASE URL is not set.

Click on configuration
Click on Configuration at the menu and set the BASE URL to the one we set at Netlify just now.

You can change the title and other information here as well, but for now, let us click on Settings.

Place the URL here.
Place your URL here.

Since Forestry.io is compiling all the changes and re-deploying our website, the process may take some time to reflect in the actual website after you click Save.

All of your website functions should be working as intended.

Customizing Content

Now you can configure your website to your heart’s desire. Here’s a checklist if you wish to use this theme:

Media

  1. Remove the old logo.png image and upload your own logo.png. This will appear as the logo at the navbar.
  2. Add a favicon.png which will appear as your favicon in your browser tabs and Google search results.
  3. You can add more pictures here for your website.

Configuration

Click on Params.

  1. There are two types of layout: 1 or 2. Choose whichever layout you like best. Remember that it may take some time to see the change of layout after you click Save.
  2. If you wish for to receive emails from the contact form, update the contact form action to a valid URL from formsubmit.io or formspree.io
  3. You can also set up Google analytics ID to track your website visitors here.
  4. For the social section, you can provide your social Url and choose from the Web App Icons available here themify.me/themify-icons
  5. To show your Instagram feed, you would need to get the access Token from the Facebook developer page. You can search on Youtube for a tutorial regarding this or you can disable this feature.
  6. Adjust all the other fields as required.

Post, About, Contact

These are the main content of your website. Remove all sample content and start blogging anytime you have an idea. You can set anything as a draft before officially publishing your content for the world to see.

This CMS also looks good on the phone. So you can even create posts when you are on the move!

To switch pane, click the top right button.
To switch pane, click the top right button.

Conclusion

That is how you create a headless CMS with Forestry, Github, Hugo and deploy it Netlify without coding. If you wish to customize your website further (like adding certain shades of colour), you can open your repository in a code editor and push it to Github.

In a nutshell, Forestry.io has made updating your blog so much easier while keeping it fast and secure with Hugo. Are you using Forestry too, or a different CMS? How is your experience? Do share in the comment section here.

Thanks for reading.

We use cookies to improve your experience on our site and to show you relevant advertising.

Read cookie policy

Accept & Close