A while ago, I have been thinking about creating a blog. I wanted to have a place where I could share my thoughts, ideas, knowledge, and projects. I also wanted to have a place where I could write about things that I find interesting and that I think others might find interesting too. So, I decided to create a blog.

Choosing a Tool

When I decided to create a blog, I started by looking for a tool that I could use to create and manage my blog.

I wanted a tool that was easy to use, fast, flexible, customizable, and for sure, open-source.

After some research, I found Hugo. A static site generator written in Go.

Why Hugo?

Hugo is a great tool in my situation. It is easy to install and use, fast, and flexible. It has a lot of themes and plugins and it is easy to customize. I can even clone multiple themes and switch between them easily.

Hugo lies in the category of static site generators. It generates static HTML files from markdown files. This means that the blog is fast and creating content would be easy.

I also wanted to have an RSS feed for my blog. Hugo has built-in support for RSS feeds. So that was a big plus.

Setting Up Hugo

To set up Hugo, I followed the instructions on the Hugo website.

I installed Hugo on my machine and created a new site as follows:

hugo new site my-blog

Using this simple command, Hugo created a new site in the my-blog directory.

I then added a theme to the site by cloning a theme repository into the themes directory. I use a fork of the hello-friend-ng theme.

Hosting the Blog

After creating the blog, I wanted to host it. I decided to go with GitHub Pages.

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files directly from a repository on GitHub. It is free and easy to use.

At this stage, I didn’t want to give the whole gh pages repo to the blog. I wanted to have the blog in a separate repository instead and be in control of the gh pages repository.

I already had a gh pages repository that I was using for different purposes. So, I created a new repository for the blog and added the gh pages repository as a submodule.

git clone https://github.com/Abdelrahman0W/blog

cd blog

git submodule add https://github.com/Abdelrahman0W/abdelrahman0w.github.io public

After that, I created a simple Makefile to automate the boring stuff.

.PHONY: site sync pull-module pull-submodule deploy build new serve
.DEFAULT_GOAL := help

define PRINT_HELP_PYSCRIPT
import re
import sys


for line in sys.stdin:
	match = re.match(r'^([a-zA-Z_-]+):.*?## (.*)$$', line)
	if match:
		target, help = match.groups()
		print("%-20s %s" % (target, help))
endef
export PRINT_HELP_PYSCRIPT

BASE_DIR := $(shell pwd)

help:
	@python -c "$$PRINT_HELP_PYSCRIPT" < $(MAKEFILE_LIST)

deploy: build sync ## deploy the site

sync: sync-submodule sync-module ## sync local changes with remote origin(s)

sync-submodule: ## sync local changes with github pages submodule
	@cd $(BASE_DIR)/public && \
		git pull && \
		if [ -n "$$(git status --porcelain)" ]; then \
			git add . && \
			git commit -m "$(shell date)" && \
			git push origin main; \
		fi

sync-module: ## sync local changes with remote origin
	@cd $(BASE_DIR) && \
		if [ -n "$$(git status --porcelain)" ]; then \
			git add . && \
			git commit -m "$(shell date)" && \
			git push origin main; \
		fi

build: ## use hugo to build the site
	@cd $(BASE_DIR)
	@hugo

new: ## create a new blog post
	@cd $(BASE_DIR)
	@hugo new content/blog/$(TITLE).md

serve: ## serve the site locally
	@cd $(BASE_DIR)
	@hugo server -D

Now, I can use the Makefile to build the site, create a new blog post, serve the site locally, and deploy the site.

The workflow basically is:

  • Create a new blog post using make new TITLE="my-new-post"
  • Start editing the post in the newly created markdown file
  • Serve the site locally using make serve
  • Deploy the site using make deploy

And that’s it. I have a blog that I can use to share my thoughts, ideas, knowledge, and projects.