January 19, 2022

Tailpages No-Code Tutorial

tutorial
no-code

Tailpages (Tailwind + Github Pages) is a Jekyll website template based on TailwindCSS, which can be hosted by Github for free. You can visit the demo site.

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:

Fork Repo and Enable Github Pages

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 <username>.github.io):

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/<your-repo> (or https://<username>.github.io if you renamed your repo as <username>.github.io)

0_EcsPmERW8Dj9S5HO

NOTE that the website right now should not look good as follows - we need to change some configurations next to fix it.

Customize Homepage

Click the _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 baseurl and url in _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 johndoe.jpeg):

Now, go back to _config.yml file and change the value for author-image to 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.

Customize Pages and Menu

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”:

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:

---
layout: page
title: My Skills
permalink: skills
---

I have the following skills:

- HTML
- CSS
- Javascript

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:

Add Blogs

Blog posts are very like pages as discussed above, except for a few things:

---
layout: post
title: Tailpages No-Code Tutorial
tags: tutorial no-code
---

let’s create a new post named 2022-01-19-demos.md in _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 https://hjwang.github.io/johndoe/blog page:

Remove Unused Pages and Assets (Disable Blog)

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 h_max=2 in _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
---

Custom Domain

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: go to your domain provider (GoDaddy for me), add:

Step 2: add the domain name, e.g., sigbit.org, to Github Pages page by following the instructions below:

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.

If you need to create another sub-domain name for another repo such as 2022.sigbit.org, follow the steps below:

References

I referred to the following tutorials and code repos to develop this tutorial: