Introducing Tailpages (Tailwind + Github Pages)

Tailpages Demo Website
  • Fork the https://github.com/harrywang/tailpages repo
  • Enable Github Pages
  • Customize Homepage
  • Add a new web page and customize the navigation menu
  • (Optional) Add a new blog
  • (Optional) Add a custom domain

Fork Repo and Enable Github Pages

Login with your Github account, go to https://github.com/harrywang/tailpages and fork the tailpages repo:

Customize Homepage

Click the _config.yml file as shown below:

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)

  • layout is the predefined layout a page/blog can use - just use page for pages
  • permalink is the url of the page, which does not need to match the name of the markdown file for the page
  • title is the title of the page, which does not need to match the name of the markdown file for the page

Add Blogs

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

  • Posts have to be created in the _posts folder 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 2022-01-05-my-first-blog.md
  • Posts can have tags in the front matter — tags are separated by spaces:

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:

Add Custom Domain

If you have your own domain name, you can follow the documentation here to link it to the site you just created.

References

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

--

--

harrywang.me

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store