How to create Blog and Portfolio with Hugo : From A-to-Z
Tags: webdev, beginners, hugo
Published: 2019-02-13 15:51:51

---
title: How to create Blog and Portfolio with Hugo : From A-to-Z
published: true
description: How to use themes from hugo and built your own personal site which can be hosted with Github Pages and custom domain.
tags: webdev,beginners, hugo
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ehjjm2lut6iactye17zh.jpg
---


It has been long time since i wanted to start a blog and host it with my own Custom domain.Truth to be told , I am a lazy blogger - I only write occasionally. 


Originally I wanted to setup my blog on Wordpress but configuring and hosting a blog on VPS server (no mater how cheap) , requires regular maintenance on monthly basis.

Add that with Keeping server up-to-date to avoid any risks, backups etc... just seems extra work that i really don't want to do.

Other option was host a blog on Blogger and redirect to custom domain. which again didn't seem right because external dependency on Google.(They can remove your blog without any warning if they feel like it. Doesn't matter if they actually do or don't, but they can)

Now being from Technical background and my curiosity to learn , I turned to Static site generators. I have heard some great thing about [Hugo](https://gohugo.io/) so thought why not give it a try. 

Hogo is a great choice as it has Github pages support and i can host entire thing for free with Github.

## Setting up Hugo server locally.
 
---
#### Installing Hugo

There is entire section dedicated to installation for different environment [detailed instructions](https://gohugo.io/getting-started/installing/) .

#### Selecting Theme

after browsing some themes (and there are too many themes) i decided to go with [silhouette-hugo](https://github.com/mattbutton/silhouette-hugo).

#### Creating a new project template and forking a theme.

```
hugo new site <SITENAME>
cd <SITENAME>/themes
git clone https://github.com/mattbutton/silhouette-hugo.git
```

#### Adding the theme to project's config file.
```
cd..
echo 'theme = "silhouette-hugo"' >> config.toml
```
#### Starting the Hugo server locally
```
Hugo server
```
Once the Hugo is started ,site can be previewed on `http://localhost:1313`


#### Changing the site data 
Go to config.toml file of your project's main directory and from there you can change your sites configuration data like baseurl , title of site , social links etc... 

## Using some CSS to slightly change look and feel of theme.

Navigate to <SITENAME>/themes/silhouette-hugo/assets/css

Here resides the styles.css file. you can change the style of the theme by editing this file.


#### `From this`

![screenshot-home.jpg](https://raw.githubusercontent.com/mattbutton/silhouette-hugo/master/github-content/screenshot-home.jpg)


#### `To this`

![all.png](https://thepracticaldev.s3.amazonaws.com/i/6q17msggnil8p8iixemv.png)

> I made a stupid mistake by editing the original theme and adding my own css with this. 

### Learn from my mistake and make a note of this , never ever ever edit the original files when you are using third part library/theme. Instead create your own new file and reference it. 


[ One of the thing i love most about hugo is the instant changes in html page without any refresh. You could see the data changes in website as soon as you change/add css property.]


</br>

As Sites created with HUGO will be static site and Github provides a free hosting for static website, we are going to use [Github Pages](https://help.github.com/articles/what-is-github-pages/).

## Create a Github Repository and Clone it on your Local Machine
First thing we need to do is to Create 2 Project repositories on GitHub. Name your first repository with exact name as your website directory `YourProjectNanme` (Project that you created in your local machine) and for the second one,name it as **\<YourUserName\>.github.io**. This repository will contain static content created with Hugo.


Now, pull those repos to your local machine

```
cd <YourProjectNanme>
git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY.git
cd YourUserName.github.io
git clone https://github.com/YOUR-USERNAME/YourUserName.github.io.git
```
		
Initialize your `<YourProjectNanme>` folder with below Command

```
git init
```

And repo remotely with `remote` and `add` 

```
git remote add origin https://github.com/YOUR-USERNAME/YourProjectName.git
git pull origin master
```

</br>
## Edit Config File

Before we commit our changes we need to edit `config.toml` (Located in Root Directory of your Project 'YourProjectName') and change Base URL.

```
baseurl = "https://YourUserName.github.io" // Change YourUserName with your GIthub Username 
--- OR ---
baseurl = "https://MySpecialDomainName.com" // Custom Domain Name 
```

</br>
## Generate static content
Now lets generate static content with Hugo
```
hugo -d ../YourUserName.github.io
```
And now Push our Hugo Code to github repository

```
cd YourProjectName
git add .
git commit -m "your message"
git push origin master
```

And Push Static content to github 

```
cd YourUserName.github.io
git add .
git commit -m "your message"
git push origin master
```

</br>
# Configuring Custom Domain

In order to use custom domain with our gitthub pages, we will have to configure `A` records for our domain (you can do this wil help of DNS Provider)

Add below IP address as a  `A` records on your domain.
```
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
```

There are two way to add custom domain to our project.
1. Create a CNAME file in our root directory of the project
2. Use `Settings` option from github project repo and add a custom domain.

##### We are going with option 2
Open your github project repo **YourUserName.github.io** and navigate to settings page.Scroll down untill you see **GitHub Pages** section and there will be a option to add custom domain there.

Add your custom domain and click on save button.There is a also another check box `Enforce HTTPS`. check it (It will provide a layer of encryption and your site will be viewed over `HTTPS`).

If you are using a `www` sub-domain, there are chances that you might not be able to check the `Enforce HTTPS` check-box.
I was also receiving a [Privacy error with custom domain](https://dev.to/priteshusadadiya/privacy-error-with-custom-domain-in-and-github-pages-2ll2) and i solved it by changing a DNS record.

I had added the CNAME record (you can add this using DNS Provider)

```
www CNAME priteshusadadiya.com
```
Problem with above is that I was redirecting my `www` sub-domain to my apex(main) domain.

I Solved this issue by changing my CNAME record to 
```
www CNAME YourUserName.github.io // add your github.io url here
```

</br>
#### It takes around 48 hours for Github to generate HTTPS certificate on custom domain so, you might want to wait for it.


### The End


##### A Note:
I am documenting this entire process just in case i might need it in future. Maybe this can be useful to you too.

Happy Coding.


<sup>Originally published on my [own](https://www.priteshusadadiya.com/) blog.

[Creating a blog with Hugo static site Generator
](https://www.priteshusadadiya.com/post/creatingablog/)
[Hosting Hugo site on Github Pages with Custom Domain
](https://www.priteshusadadiya.com/post/hosting-on-github-custom-domain/)
</sup>