Create Your Free Developer Blog Using Hugo
The Role of Hugo
After doing some research I decided to use Hugo. Hugo is an open-source static site generator. Static site generators build a web page once, at the moment you’re creating new content or editing it.
Static web page give you 100% control over your content and web design. Because Hugo is all about static site, it lacks fewer security issues. There’s nothing to be exploited on the server-side. No PHP running. Nothing.
This makes static site quite stable against security breaches.
As mentioned, Hugo is open source and can be installed quite easily. If you’re using Mac (like me), you can use Homebrew to install Hugo:
Homebrew & Git
If you don’t have Homebrew installed, then you can install it with:
Make sure everything is up to date & install Git
Install Hugo with Homebrew
Once the installation is complete, you can issue the command:
To ensure the installation was successful you need to see something like:
Generate the Site
That should complete in the blink of an eye. You will now have a new directory for your site. Change into that directory with the command:
hugo new site generator from the command line will create a directory structure with the following elements:
For us is the most important file
config.toml where we need to specify all of our settings.
Because we want to spend all our free time with our families and we already working more than eight hours per day is the use of a theme the best choice to start. Personally, I spent few hours finding the best blog theme for me. I ended with CodeIT theme.
Firstly I tried to use LoveIT theme, but this theme is not maintained anymore and I found that CodeIT is. There is a lot of themes almost the same with some changes, but I like this one the most. So how did I use it to serve my needs?
Because I wanted to have my code hosted in Github, and so did you, we need to initialize a git repository first.
Make CodeIT repository a submodule of our directory:
The git submodule add command will add folder CodeIT to
/themes and create file
Now we have the theme loaded and We just need to edit
.config.toml to use our theme.
Here is the basic
.config.toml file to test our theme:
Launching the Website Locally
.Scratchin Hugo to implement some features, it is highly recommended that you add
--disableFastRenderparameter to hugo server command for the live preview of the page you are editing.
Launch by using the following command:
If is everything fine, you will see:
Go to localhost:1313 to see your running site.
Add first post
You can create new content with a command like:
Command will create file
Edit the content of the new file as you need. Save and close the file and Hugo will automatically detect the change of the newly added blog post:
Once you have the site exactly how you want it, kill the daemon server with the [Ctrl]+ keyboard combination and build the site with the command (run from the root directory):
The site will very quickly build and create a new public folder inside the document root. Upload that folder to your hosting server and you’re good to go.
And that’s the creating a static website with Hugo. If you managed to make it all the way through this post then congratulations! In the next blog post, I will cover how to get free hosting of your blog on Netlify.
Netlify provides continuous deployment services, global CDN, ultra-fast DNS, atomic deploys, instant cache invalidation, one-click SSL, a browser-based interface, a CLI, and many other features for managing your Hugo website.