Whether you're looking to build a personal website or want to build a simple portfolio, 
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.
At this point, the current theme's name is already added to this file. Let's add a few useful options to this file to further customize the environment of our site. Click on this file's link in your repository followed by a click on the pencil icon present on the right side of the file editor.
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 websiteDo not forget to commit the changes after adding the options. If you're adventurous, you can try out other configuration options too. The updated file may look something like this.
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 }}";The import statement within this file will pull the default CSS rules for the theme. Right below this line, you can write your own custom CSS rules.
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 %}This file includes the default template for post pages. Feel free to edit and customize it as per your needs. The layout code uses Liquid template language which is quite easy-to-learn.
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
---The snippet will add the default header and footer to the homepage. Right below this snippet, you can specify the content section of the homepage in the form of custom HTML code.
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 AutomaticPropagation of DNS records takes anywhere between 24 to 48 hours. To confirm whether your applied A records are in place and have propagated, use the following command at the command prompt.
$ dig +noall +answer your-domain-name.comWindows 10 users can use the Bash on Windows command prompt for the same. Once this step is completed, it's time to make sure that your custom-domain powered site is served correctly on HTTPS URLs. To ensure that, complete the following simple configuration.
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.