How I built my blog from scratch with Hugo, Github, and Netlify

Hello everyone! I’m going to document the steps involved in setting up this blog so anyone can also pick it up as a guide when they want to do the same. And don’t let the word scratch get you, I’m only leveraging existing technologies 😉.

There are so many options for blogging: WordPress, Blogger, Medium, Jekyll, Hugo, etc. But I decided to build mine using Hugo.

Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again. Read more about Hugo here

There is an enormous support for Hugo which makes it easy to setup. And I hope you find it easy as well. Follow these five easy steps and share your ideas to the world!

Thank you opensource

Step 1: Yes! Lets do this

Follow the Quick Start guide here
Here, I used the kiera theme
Then I copied the contents of /themes/kiera/exampleSite/Content to the root folder of my Hugo site. Right! Replace if it prompts for duplicates.
Now my setup look like the one in the demo of the theme.
Made Edits to config.toml
Then I thought why not use a favicon?
- Go to https://realfavicongenerator.net/
- Upload an image and make edits as you see fit
- Click Generate your Favicons and HTML code
- Download the Favicon package
- Copy the code on the page
- There are 3 ways to go about this; Method 3 works everywhere but Method 1 and 2 work only on the localhost:
  - Method 1
    - Open /themes/kiera/layouts/partials/header.html
    - Paste the code before </head>
  - Method 2
    - Open /themes/kiera/layouts/partials/header_includes.html
    - Paste the code at the end of the file and format appropriately
  - Method 3
    - Copy /themes/kiera/layouts/partials/ to /layouts/
    - Open /layouts/header.html
    - Paste the code before </head>
    - Then you may delete other files in /layouts/partials if you don’t have any change to make to them.
- Extract the contents of Favicon package to /themes/kiera/static/
- Stop and Restart your webserver to see the favicon in play
```
hugo server -D
```

Step 2: Now, it’s time to go online!

Create a new repository in your Github account, I suppose you have one
Run the following command to create .gitkeep files in any folder that is empty, as Git will ignore folders with no content:
```
touch archetypes/.gitkeep content/.gitkeep layouts/.gitkeep static/.gitkeep data/.gitkeep
```
Add the files in your new local repository.
```
git add .
```
Commit the files that you’ve staged in your local repository.
```
git commit -m 'Hello world!'
```
Add the URL for the remote repository where your local repository will be pushed.
```
git remote add origin YOUR_GITHUB_REPOSITORY_URL
```
Verify your URL
```
git remote -v
```
Now, it’s time to push the changes in your local repository to GitHub.
```
git push origin master
```
Yes! You might have problem with this: Follow the following steps:
- Pull the remote repository
```
git pull origin master --allow-unrelated-histories
```
- Add, commit, and push changes to Github
```
git add .
git commit -m 'Fix merge conflicts'
git push origin master
```

Step 3: Continuous deployment with Netlify

Follow the guide here
PS: You won’t need this

Step 4: Custom Domain?

I registered mine on Namecheap, you can do the same or register yours on any domain reseller.
Login to your Netlify account and Switch to Domain settings for your site
Add custom domain
Then you’ll be provided with the DNS configuration
Configure your domain via your provider with the DNS configuration
Within 48 hours, navigating to your domain should show up your blog!

Step 5: Finally, add more posts 😄.

Share! Share!! Share!!!

Thank you for reading.

Sources:

https://gohugo.io/getting-started/quick-start/

https://gohugo.io/hosting-and-deployment/hosting-on-netlify/

https://www.netlify.com/blog/2016/09/21/a-step-by-step-guide-victor-hugo-on-netlify/

Share on