Just before the start of the weekend I planned to work on Known CMS and Circle CI but things turned out slightly differently or I should say a lot. I ended up setting up a Hugo website and used Netlify to continuously deploy it on https://hugo.ravi.pro which is thew new subdomain that I setup.
What is Hugo?
It is framework for building website using text files. Similar to Jekyll but the interesting thing is that it is written in Go and that is what intrigued me to explore it further. I made a posted the video on my youtube channel where I shared about Go language and my intention to learn it. In the past few weeks I was quite busy with other work and I couldn't think of a project where I can use Go and Hugo was the perfect project to learn Go.
Funny thing is that setting up a site in Hugo takes literally 10 mins.
Install Hugo
brew install hugo
Yes that's it on mac, of course you need to have homebrew installed already, but for more information check their documentation for installing Hugo.
On windows if you are using Chocolatey you can type in the following command.
choco install hugo -confirm
Check Hugo install
hugo help
It will give you help description and if this command work then it mean hugo is installed.
Create a new site with Hugo
hugo new site site_name
This command will create a folder called site_name and it will contain the code for your site.
Install a theme
You actually need to install a theme for Hugo to work and render your webpages.
-
cd site_name;
-
git init;
-
git submodule add <a href="https://github.com/digitalcraftsman/hugo-icarus-theme">https://github.com/digitalcraftsman/hugo-icarus-theme</a> hugo-icarus-theme
It will initiate a git repository in your site_name folder. Download the theme in your site_name/themes/ folder
Copy your theme's example site
-
cd site_name
-
cp -r themes/hugo-icarus-theme/exampleSite/* .
This command will copy the exampleSite folder to the root of your website project that contains the list of files required for a site to work properly as per the theme.
Modify the config.toml file
The config.toml file that comes with the icarus theme already contains lot of stuff. Most of the things are self explanatory however just modify the following things for sure.
-
baseurl = "<a href="https://hugo.ravi.pro/"
-
#">https://hugo.ravi.pro/"
-
#</a> themesDir = "../.."
Basically change the baseurl to the actual url where you want to host the site and comment the themesDir. Usually the themesdir needs to be pointed to the name of the folder of the theme which you want to use but in case of icarus I read their documentation on github and they mentioned to comment this line.
Write your first post
hugo new post/hello-world.md
This command will create a file under your site_name/content/post folder named hello-world.md
Just modify this file with your content.
Run your site
hugo server -D
This will build your site and will enable you to take a look at your site at http://localhost:1313/
Generate HTML
hugo
Yes just by typing in hugo will create a folder named public and it will contain the HTML files for your site that will be based on the content you just created above in the hello-world.md site.
That is it. You have a new fancy site. Depending upon the theme you are using the site will of course have different design but the point here is to use text files to create content.
Very nice.
Hosting and Continuous Delivery
One of my domain https://www.ravi.pro is already linked to my Github account and thought of hosting it there itself, but after researching online I came to know about Netlify which is really amazing.
It offers more features that Github pages and has the option to deploy your site as well.
They have a generous free option where you can create an account and link your Github. Just specify which repository you want netlify to monitor. Whenever you commit your hugo site changes to your github account, netlify will read it and deploy your site. It will also give your site a sub-domain. However you have the option to use your custom domain as well which is amazing. I don't know why they are doing it for free. It is so good.
I setup https://hugo.ravi.pro for this site. The site is live right now go take a look.
One thing that you need to take care is the right hugo version in the Build environment variables.
Go to netlify Settings | Build & deploy | Continuous Deployment
Under the "Build environment variables" create a new variable called HUGO_VERSION
key: HUGO_VERSION
Value: 0.25
While configuring your Github repository where you have your Hugo website, make sure the following settings are done.
-
Build command: hugo
-
Publish directory: public
-
Production branch: master
I hope this blog was useful.
Netlify also offers SSL/TLS certificate. Just enable it in the settings and boom you have nice fancy https in your domain name.
They have many features even in their free plan. Go ahead and take a look at their services.
