No-Code Docker Website Bootstrapping

This article explains how we can bootstrap a website using Jekyll themes. No coding knowledge is required as the theme includes all the code; we will only have to fill in the blanks. We will be using Docker as a development environment and automate the build with scripts. There is no need to install any software or dependencies, nor will we have to enter any commands!

Finally, let’s also walk through the process of how we can deploy this website on GitHub for free, followed by connecting it to a custom URL or a domain name of our own.

Introduction

Building and deploying a website can be done through GitHub pages without any coding for free. To understand what GitHub pages are, I highly recommend watching this short introduction video made by GitHub.

Selecting Theme

While GitHub has everything covered in the documentation, it can be overwhelming for someone who does not have a background in coding. This article aims to help those who want to build a website for themselves from the ground up.

GitHub uses Jekyll so that we can blog using Markdown syntax and without having to deal with any databases. While there are plenty of themes available all over the internet, this website is my favorite! We get to choose from 100s of readily available templates, from professional-looking to business to personal.

Creating website

For the purpose of this article, I will walk through building and deploying the Front Cover theme.

First, click on the homepage, which will take you to the Github repository. Click on the "fork" button on the top right. This will copy the theme (repository) to our account so that we can use it for our website.

Go to the Settings tab and give the repository the name username.github.io. It is important that the username part is identical to your account name.

Voila! That’s it! We now have a working website! Navigate to username.github.io in your browser and you will be welcomed with your new online home.

Customizing

Almost all the templates have nice little instructions on the README page (homepage) of the template repository. As we can see, the front-cover theme README.md says “everything can be modified in config.yml”.

We can either edit the config.yml file directly on GitHub and commit it or we can clone the repository on our computer, make the changes, push it back to Github. Github will build the changes and deploy them for us! We can check the status by hovering over the tick mark next to the commit message.

Building the website locally

Let’s go through the steps of how we can make the changes locally to any of the sections and see how it looks before pushing it to GitHub (also helps in debugging if you want to modify the theme) without having to worry about installing anything manually (except Docker) and also providing a script that can run the build and serve commands for us.

Create a file named "run.sh" in the repository's root directory and copy the following to it.

#!/usr/bin/env bash
set -e # halt script on error

						
# Delete old build
rm -rf ./_site
						
RED='\033[0;31m'
NC='\033[0m' # No Color
					
if [ ! -f ./_config.yml ];
then					
   echo -e "${RED}Make sure you are in repo's root directory!${NC}"
exit 
fi
					
echo "Trying to build with docker..."
						
# If docker is installed
if ! command -v docker &> /dev/null
then					
   echo -e "${RED}docker could not be found!${NC}\n\n"
else						
  if ! docker stats --no-stream &> /dev/null
    then					
       echo -e "${RED}docker deamon is not running, please start docker service${NC}\n\n"	
   else
      docker run --rm -it -p 4000:4000 -v "$PWD:/srv/jekyll" jekyll/jekyll jekyll serve --watch  --incremental --host "0.0.0.0"
        Exit
  fi 
fi	

Change the permissions so that we can run it, by running this command in your terminal,

chmod u+x run.sh

Now we can run the script from the root directory of the repository and see it in action on localhost as in the screenshots below, run the following in your terminal:

./run.sh 

As the message says, we can navigate to http://0.0.0.0:4000 in our browser and see the website. 

This way, we can make sure that the changes, like links to different sites, etc., are working, as well as see how the website looks before pushing it to GitHub.

Connecting to custom domain/URL

As you might have already noticed, after deploying to GitHub, we can access our website only with the URL username.github.io. However, we can connect our website to a custom domain or URL if we have one. 

This involves two steps:

1. Add cname to the repository.

• Create a file called CNAME inside the repository's root directory and add the URL to it. If your domain name is example.com add example.com to file CNAME.
• This way GitHub knows about URL redirects and serves the subpages (blogs, posts, etc.,) accordingly.

2. Add a URL redirect in your domain hosting service.

• You can follow this guide to set up URL redirects from your domain hosting service account. I will leave it as DIY since the link provided already covers everything in detail.
• This way your domain service knows where to send the visitor!
  

If you would like to join FullStack Labs, please visit our Careers page. If you would like to reach us for any other reason, please contact us. We look forward to hearing from you!