This tutorial shows how you can use Tailpages template to quickly setup your website and blogs without coding. I also have a technical tutorial to show how to setup the development environment for Tailpages from scratch, which you can access at medium or blog.
You only need a Github account to go over this tutorial, which has the following key steps using Github web interface (if you know Git, you can do all these by cloning the repo, making changes locally, and pushing the updates to Github):
The details of each step are as follows:
Login with your Github account, go to https://github.com/harrywang/tailpages and fork the tailpages repo:
Rename the forked repo to any name you want. Here I rename it to
johndoe (if you want a shorter URL for your website, you can rename the repo to
Enable the Github Pages: click the Settings option, choose Pages, select main branch and save. Now, you can access the new website at
https://<username>.github.io if you renamed your repo as
NOTE that the website right now should not look good as follows - we need to change some configurations next to fix it.
_config.yml file as shown below:
Edit the file: <img class=”mx-auto”” src=”https://user-images.githubusercontent.com/1081826/150207856-a493fbd6-4f26-4265-9a33-451dfff681c8.png”>
IMPORTANT: you have to change
_config.yml to match your repo name and username to make the website work (if you renamed your repo as
<username>.github.io, just set
baseurl: ""). You should also change other basic information.
Then save the page, wait for a few minutes (Github redeploys your website every time new changes are committed, which may take a few minutes to complete) and your website should look like:
Next, you can upload a profile image to replace the default avatar. Find the
assets\img folder and add your own profile image (a square image is preferred. The one I uploaded was downloaded from https://unsplash.com/photos/1lGeOg6IULc and renamed to
Now, go back to
_config.yml file and change the value for
johndoe.jpeg - wait a minute or two, you should see your profile image updated.
Similarly, you can change the social media links and other basic information such as adding google analytics, changing the default theme color and footer information by editing
_config.yml. You can set the value to
false to turn off any features you don’t want.
Each page is a Markdown file, which is essentially a text file with
.md file extension (you can learn some Markdown syntax here)
On top of each Markdown file, there is a section between two
---, which is called “front matter”:
layoutis the predefined layout a page/blog can use - just use
permalinkis the url of the page, which does not need to match the name of the markdown file for the page
titleis the title of the page, which does not need to match the name of the markdown file for the page
The menu is defined in
_config.yml file - text is the menu name, permalink must match the page permalink specified in page front matter:
nav-menu: - text: About permalink: about - text: Bitcoin permalink: bitcoin - text: Blog permalink: blog
Next, let’s create a new page and change the menu. Add the new file called
skills.md with front matter and some basic markdown text:
after creating the new page, go edit
_config.yml file to link the page to the menu:
nav-menu: - text: About permalink: about - text: Skills permalink: skills - text: Blog permalink: blog
You should be able to see the new menu and page in a few minutes:
Blog posts are very like pages as discussed above, except for a few things:
_postsfolder with specific file name format:
YEAR-MM-DD-title.md, where YEAR is a four-digit number, MM and DD are both two-digit numbers, such as
--- layout: post title: Tailpages No-Code Tutorial tags: tutorial no-code ---
postlayout and will be automatically listed in
let’s create a new post named
_post folder and add the following content:
--- layout: post title: My Demo Blog Post tags: demo design woodworking --- In this post, I talk about my design philosophy and a recent coffee table I made. <img class="mx-auto w-1/2" src="/assets/img/coffeetable.png">
Here I also uploaded a new image named
coffeetable.png to the
assets\img folder and inserted the image into the post using the following HTML code snippet:
<img class="mx-auto w-1/2" src="/assets/img/coffeetable.png">. Here
w-1/2 defines the image width to be half of the container and you have to use `` in the path to show the image properly.
Save the changes and wait for the website to update, then you should see your new post listed at
You can remove unused pages and other assets (such as images) if you want. For example, you can remove the default Bitcoin page:
If you don’t have blogs, you can simply delete the posts in the
_post folder and delete the blog menu in
_config.yml file. I suggest you keep the
blog.md file in case you want to blog later :).
If your blog is long, you can use the
post-toc layout. A table of contents will be automatically generated based on all
## headings - this is defined by
_layouts/post-toc.html file, which you can change to fit your need.
You can also add
permalink so that the post have a neat URL, such as https://harrywang.me/tailpages/toc
--- layout: post-toc title: Table of Contents Support tags: tutorial open-source permalink: toc ---
If you have your own domain name, you can follow the documentation here to link it to the site you just created.
The document is quite confusing. You need to do the following:
Step 1: add the domain name, e.g., sigbit.org, to Github Pages page by following the instructions below:
Step 2: go to your domain provider (GoDaddy for me), add:
18.104.22.168 22.214.171.124 126.96.36.199 188.8.131.52
Step 3: enable the
Enforce HTTPS option when it becomes available on the Github Pages setting page in Step 1 above.
That’s it! Now you can add more content to your website and I hope you enjoy Tailpages template.
I referred to the following tutorials and code repos to develop this tutorial: