If you already have a personal website on a paid platform, this is an ideal time to make a switch. Unless you have a huge content archive, the transfer process should not be—much of a hassle.If you haven't yet signed up for a GitHub account, go and get one—now! Let's get started and go through all the steps of creating a personal website with minimum efforts.
Prepare the Essentials Before Site Creation
Now that your GitHub account is in place, it's time to go ahead with the initial setup to kickstart the process. We'll start with installing GitHub Desktop on your computer.Though the command line environment can be used, we'll use the GUI to ease the process. In case, you're already familiar with Git and the command line environment, go for it skipping the GUI path.
Now head over to your GitHub account and create a new repository with the following settings.
Make sure the repository name starts with your GitHub username and ends with .github.io with no blank or whitespaces in between.Keep the repository—public. If you have a free GitHub account, GitHub Pages will not work if you make the repository—private. If it's going to be a simple personal site, public data should not be a big issue.
It's a good practice to create a default README file. You can later edit it manually to provide more descriptive information about the repository contents.
Add a license (optional) file and a
.gitignore file for the Jekyll platform. It's a static site generator we'll use to power our personal website on GitHub Pages.
What's this .gitignore file and why is it needed? In simple words, this file contains a list of files and directories that are ignored by the Git version control system.For example,
_site/ is the directory where the static site's content is written each time the website is modified. Therefore, there is no need to version-control it. This directory should be included in the .gitignore file. You can see other files and directories (see image above) as well which can be ignored.Finally, click the 'Create repository' button to prepare the base for our personal website.
Add a Jekyll Theme and Configure the Essentials
Now that our website's repository is ready with the basic settings, let's move ahead and quickly add a Jekyll theme to it to kick start the site's design and customization process.There are two ways to add a Jekyll theme to the repository. Either design it from scratch or add a readymade template and extend it further as per needs. To ease the entire process, we'll use the latter approach picking one of the pre-existing templates.
To get started, go to the Settings tab, scroll down on the page to reach the GitHub Pages section. Click the Choose a theme button to select a template which more or less match with your preferences.
You can finish the theme selection process by selecting and clicking on one of the theme previews followed by a click on the Select theme button.
For demo purpose, we've selected the Minimal theme from the list. You're of course free to choose your preferred template. Finish this step by clicking the Commit changes button.
If you open your website at this stage, you'll notice that the contents of the README.md file is displayed on the homepage. There's another important file _config.yml created automatically during the theme integration process.The file _config.yml contains the global site configuration options that are applied on the site. For example, you can define a custom permalink structure—through this file.
Thereafter, below the theme name, add the following options and edit them—wherever required.
permalink: /:categories/:year/:month/:title/
title: My Awesome Site's Title
description: Description of my website
The configuration options added to the file are as follows.- permalink: This option configures the URL structure of the posts published on the website.
- title: Specify the website's title through this option.
- description: Provide a short description of the website through this option.
Add Content Layout and Design Options
Next, we'll add a file that'll help us in adding custom CSS to modify or enhance the design of the site. If you're happy with the existing template, you can skip this step.Within the repository, create a file
/assets/css/style.scss and add the following code snippet in it.---
---
@import "{{ site.theme }}";If you want to customize the default HTML layout too, create a file
/_layouts/default.html and add this HTML markup to it. Use the Raw button to easily copy the code.Thereafter, add a file
/_layouts/post.html to the repository. Add the following code to this file.---
layout: default
---
<small>{{ page.date | date: "%-d %B %Y" }}</small>
<h1>{{ page.title }}</h1>
<p class="view">by {{ page.author | default: site.author }}</p>
{{content}}
{% if page.tags %}
<small>tags: <em>{{ page.tags | join: "</em> - <em>" }}</em></small>
{% endif %}Now that the posts' template is ready, create a
_posts/ directory where the posts' files will reside. Because, Git doesn't allow empty directories, create a _posts/temporary.md file which can be deleted after the directory is in place and you've created at least one blog post file in it.Create a
index.html file and add the following snippet to it.---
layout: default
---Add Custom Domain with HTTPS Support
By default, your website resides on agithub.io subdomain. Fortunately, you can easily use a custom domain with HTTPS for your brand-new website.The process is as follows. Go to the Settings → GitHub Pages → Custom domain option. Add your custom domain in the text field and click the Save button.
Thereafter you need to add four A records to your domain name's DNS zone file. If you do not know how to do it, consult your domain registrar's help documentation or contact the support department. Following are the four A records which need to be added.Record Type Hostname Value TTL
----------- -------- --------------- ---------
A @ 185.199.108.153 Automatic
A @ 185.199.109.153 Automatic
A @ 185.199.110.153 Automatic
A @ 185.199.111.153 Automaticdig +noall +answer your-domain-name.com
Go to the Settings → GitHub Pages → Enforce HTTPS option and click the check box as indicated in the image above. This completes the custom domain configuration and HTTPS enforcement process.Because you have complete control over HTML and CSS files, you can add just about anything to the pages. For more customization, you can read the Jekyll documentation.