Bytes and grains

Create a Hugo-based blog hosted on GitHub

Published in

Courage to Write

7 min readJul 6, 2024

I just try to recreate my previous blog on GitHub and document the steps here. If you want the details how to create the blog from the beginning just jump to the last part of this story, where I put some blog article about it.

The name

Well honestly, I struggle to obtain the name.

There are some blogs created previously, which also sourced from GitHub, but confused and undetermined names, e.g. algo, blank, blog, bugs, bugx, bugx — on Vercel, butir, einfachee-ideen, eqnphys, equation, expansion-model, git-journal, idee, item, kuno, lecture-notes, moparc, note, notes, nou, o, odone, poem, ptext, s, slidex, snippet, soal, teks, test, to, unegx, x, xeqn, and also others not related to GitHub as listed here.

Then, I ask GPT-4o for advice and it suggests Bytes and Grains (GPT-4o & Viridi, 2024).

Prerequisites

It is assumed that

you have a GitHub account or able to create one (Viridi, 2023a) and know the basic of creating a repository (Viridi, 2023b),
you have installed Git on Windows or know how to do it (Viridi, 2023c),
you have installed Hugo or know how to download and install it (Viridi, 2023d).

New repository

A new repository name bytes-and-grains will be created. First visit your GitHub user profile, where in my case is https://github.com/dudung.

Click on + symbol near top right corner, under the address bar.

Choose New repository.

Type on Repository name bytes-and-grains as the name and GitHub have shown that the name is available. Continue with filling the Description.

Let the Public option chosen, then check Add a README file.

Choose a license, select any license suits you purpose.

Click Create repository button, the green one on the right bottom.

Wait for the repository creating process.

It will show the created repository.

The repository is now available on https://github.com/dudung/bytes-and-grains.

Repository clone

Open a folder or in my case a drive M:\.

Use mouse right click to open Git Bash.

Clone the repository.

Now there is new folder bytes-and-grains created on M:\.

There are only two files inside the folder.

Create .gitignore file with following content

# shortcuts
cmd.lnk

# folders
public

and then create the shortcut to cmd or Windows Command Prompt.

Now, there are two additional files in the folder. Perform git add, commit, and push in the Git Bash.

Now the additional file, .gitignore has been added to remote repository as shown below.

It shows that LICENSE and README.md are created earlier than .gitignore, which is just created.

Settings copy and modification

Visit https://github.com/dudung/s to copy some settings.

Download all files and folder, but the LICENSE, README.md and .gitignore files, and ignore also .github folder.

Open content folder.

Open posts folder and delete all files but one, which is renamed to bytes-and-grains.md as the first post.

Edit it and change its content as follow.

It will be the first post for this repository.

Open hugo.toml and modify it as shown above.

Modify also layouts\index.html as above.

Files update

Perform git add, commit, and push.

Now remote repository has already updated as the local one.

Hugo server

In the cmd run Hugo.

Then open browser to access https://localhost:1313/bytes-and-grains.

Now it is served from local server by Hugo. Click the only post available.

Click Tags.

Back and click author name.

It shows author page, biodata, and articles written by the author.

GitHub workflow

Visit the repository https://github.com/dudung/bytes-and-grains.

Click Action tab under the address bar.

Type hugo on the search field.

Choose Hugo and click Configure.

Click Commit changes…, the green button on the top right.

Unless you want to change Commit message or add Extended description, simply confirm and click Commit changes.

Notice the process in deploying GitHub pages.

Unfortunately, it fails as show with red times symbol. Click it to study the problem.

It seems that the repository does not have Page enabled. Back to main page of the repository and click Settings tab.

Choose Pages on the left menu.

On Branch, click it and select main.

Click Save.

Go to main page again.

It is now successful.

But it is not the pages created by Hugo. Try to push something.

Visit again the main page of the repository.

It seems successful. Then visit https://dudung.github.io/bytes-and-grains/.

It shows the result as the local server rendered previously.

Closing

After read this story you are able to

create a GitHub repository,
clone it to a local folder,
modify the local folder and its content according to other repository,
change setting on hugo.toml and layouts/index.html as necessary,
update local repository and push the change to remote repository,
run Hugo server locally,
create GitHub workflow for Package a Hugo site,
enable GitHub Pages,
observe GitHub Actions steps while do the deployment,
view deployment result.