To build my blog I decided to use Hugo and Github. This was after looking at different options and talking to my friend Dale @ vCROCS.info. This was his recommendation and how he built his blog site. Check out his post about Hugo

Hugo

To begin with I downloaded the Hugo product and installed it on my Windows 10 laptop. I wanted to learn Hugo and build a web site before tackling Github. I tested several different themes before settling on the Tranquilpeak theme. This theme worked best for my needs, but there are a lot of different themes on the Hugo site.

I downloaded the zip file and extracted the files into a Hugo folder. I set the path pointing to Hugo\bin folder. For this I created a simple bat file to run a set command for the path. This will allow Hugo to run no matter what folder I am in when editing files in the website folders.

SET PATH = %PATH% + ";C:\Hugo\bin"

To install Hugo was simple. Download the zip file and place the files in the Hugo\bin folder. Follow the Install Instructions on the Hugo site.

Here are a few simple Hugo command to get you started. This is all well documented. From the Hugo\sites folder it is easy to create a new site by running the commands below.

hugo new site <site_name>
cd <site_name>
hugo --config .\config.toml
hugo new Page1.md

These commands will create all the folders, the config.toml, and a web post Page1.md. This will be used to begin the build of your site. After you have some pages built for your site you are ready to test your website.

Command Description
Hugo server This will start the web server which can be accessed in a local browser at localhost:1313.
Hugo server -D This will display pages that are set to draft.
Hugo This will build your site in the public folder. This can be used to place on your web hosting site.
Hugo new dir1/Page2.md This will create a markdown page in the folder dir1.
Hugo new dir1/dir2/Page3.md This will create a markdown page in the folder dir1/dir2

That is it for the Hugo install. Next I read about markdown to get used to the syntax to do some simple formatting without using html. I have some simple examples in my Sample Markdown post. Here is another link for a primer to Markdown.

Now that the website is created we need a hosting site. I chose Github for many reasons. I spend time here getting resources others have provided. This will also provide a space for me to upload, store, and present things I have done. Github allows hosting a website and there are no adds. All of this for free.

First I set up my site on Github.io. I chose to use the Github desktop. It is really easy to use. Just download the Github Desktop and install.

I actually use the Github desktop to keep my repos in sync. This will work on multiple systems. Download and install Github desktop. After your Github account is setup, you have to create the repository .github.io. You now have a repository that you can use for syncing.

I created a second repository to store my website development in. I keep my Hugo development files separate from my repositories, in case I make a mistake syncing from multiple locations. I will always have my original code in a safe place. I used junction links to get these files copied up to my OneDrive. It sounds complicated, but it is really simple. Let me explain what works for me.

First I create C:\Hugo. This is where all my website development files are located. I do all my build and testing in this area. To store this on my OneDrive I create a junction link with this command

Syntax
mklink /J C:\LinkToTarget C:\Target

mklink /J C:\<OneDrive_Folder>\Hugo C:\Hugo

This will create a junction link in my OneDrive folder to my Hugo folder.

mklink /J C:\<OneDrive_Folder>\Github C:\<Github_Repository_Folder>

This will create a junction link in my OneDrive folder to my Github repository.

These items are optional. This is what I chose to do.

Now the final step is to get the data into the repositories. After I run Hugo and create the website in public, I copy these files to my website repository folder .github.io. Be sure to pull the files from the site before commiting and pushing the new website files. I never make changes to anything in this repository directly. After the first pull I don’t bother with this step. I know I only want the Hugo public files in this area. By keeping the Hugo folder separate from my repositories I know I am safe if I make a mistake. I can simply copy the public folder conents to this repository and push again.

For the development files repository I created a .gitignore file. This way I can copy the entire development website to this area. The .gitignore will ignore the files/folders specified, preventing them from being copied to the repository. I did not want the themes and public folders synced, so I ignored them. This is a personal preference.

DEV file .gitignore contains

themes
public

Now I was ready to develop and publish my website. I usually only copy my dev files when I am finished for the day. The website I will copy more often. This is to make sure it displays the same in Gihub as it does with Hugo server.

😄 ⛺ 🖕 🦚 👍 😃

Additional links for Hugo and Github setup

Hugo tutorials Play List

The one thing I did not like about the Tranquilpeak theme were the buttons for the post. The are listed as NEXT and PREVIOUS. I wnated it to show OLDER and NEWER. To change this I needed to modify a file in the theme folder. In this theme folder there is a folder i18n. I modified the file en-us.yaml. Look for the code:

- id: "pagination.previous"
  translation: "OLDER"

- id: "pagination.next"
  translation: "NEWER"

The original file contained NEXT and PREVIOUS. I modified this to disply OLDER and NEWER. If the theme is ever updated, this file will need to be changed after the update to retain the values you have choosen for moving between posts.

The last item I wanted to address was comments. I setup the Disqus comments since it was native to this theme. Make sure you set the disqusShortname in the *config.tomal file before configuring Disqus. I did not do this and now my short name is not so short. Follow the instructions on the Disqus site to configure comments. This is an optional step.

Two links I found useful for Disqus are:

I looked at Utterances and installed the app on my Github repository. I couldn’t get this to work, so I continued with Disqus. I only bring this up as an option if you do not want to use Disqus.