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.
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.
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.
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.
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.
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.
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:
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.
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.
2. Add a URL redirect in your domain hosting service.
We’d love to learn more about your project.
Engagements start at $75,000.