Github + Hugo = Beautiful Blogs

I built this blog using Github pages, Hugo and the beautifulhugo theme. The most amazing part is that it’s free, minimalist, uses Markdown and you can get it running in no time! Also Hugo comes with Live-Reload enabled so you can simultaneously see the changes you make in your website.

Here’s a short tutorial on how I made this blog. Let’s get started!

Note: If you are not interested to do the setup yourself, simply fork my repo and make the changes to include your details.

1. Installing Hugo

We will be using Hugo as the site-generator to build our website. Update You can simply download the binary from Hugo Release Page and install according to your system. Here I’ll show the example for Debian based systems.

$ curl -O https://github.com/gohugoio/hugo/releases/download/v0.54.0/hugo_0.54.0_Linux-64bit.deb
$ sudo dpkg -i hugo_0.54.0_Linux-64bit.deb
Now our local setup is complete to run Hugo. Now we can head over to Github.

2. Github

For this step you should have a github account and git installed in your system. Then head over here to make a new repository for your blog. You can name it anything. Now you have to clone that repository using:

$ git clone https://github.com/yourusername/repo-you-just-made.git && cd repo-you-just-made
Now we can initialize hugo here. To do that:
        $ hugo new site .
Now we don’t need Public folder in our git source code as it is generated by hugo for site building. To do that :
        $ echo "Public/" > .gitignore
Push your changes to Github using :
        $ git add --all
        $ git commit -m "initial commit" -a
        $ git push -u origin master

3. Theme

Now we’ll use a theme, as this is how our blog will look like. You can use the theme I’m using beautifulhugo or you can choose from Hugo Themes, whichever you like as mostly procedure will remain the same. To add the theme :

  $ git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo

Now we need a config file, to do that we can copy the config file of the example site in themes.

        $ cp themes/beautifulhugo/exampleSite/config.toml config.toml

Now our basic site is almost ready. To see your progress you can do :

        $ hugo serve -w
And go to localhost:1313 on your browser.

You can see a lot of irrelevant stuff here. We need to update our config.toml file so that it matches your profile. You can take a reference from my config.toml

You also need your own logo to be displayed here not the one provided by the theme. To do that make a directory img in static folder and copy the file there:

        $ mkdir -p static/img
        $ cp /path-to-image static/img/avatar-icon.png

Now we are good to go and write our very first Blog.

4. First Blog

We can use the Hugo to initialize our very first blog’s file and edit it using:

        $ hugo new post/first-blog.md
        $ vi content/!$

Now you can write your blog here. When you complete your blog change draft = true to draft=false that you can on very first few lines.
Remember till you have draft=true the page wouldn’t be displayed in your website.

Now check your site using :

        $ hugo serve -w

Now if you can deploy our site on github.

5. Github Again

Head back to github and create another repository with yourusername.github.io like I did vaibhavk.github.io and clone it. Now while you are in your Blog’s repository. Check your website locally once again and then do :

        $ hugo serve -w
        $ hugo -d /path-to-yourusername.github.io/

Now all the content have been added ready to commit.

        $ cd /path-to-yourusername.github.io
        $ git add --all
        $ git commit -m "rebuilding site `date`" -a
        $ git push origin master

Go to https://yourusername.github.io from your browser.

6. Conclusion

References

Hope this blog post helps you! :)

comments powered by Disqus