Developing Tailpages: A Jekyll Template based on Tailwind CSS

Setup Jekyll

NOTE: for Mac M1 users: follow https://www.earthinversion.com/blogging/how-to-install-jekyll-on-appple-m1-macbook/ to install jekyll ARM compatible version:

Setup TailwindCSS

Add TailwindCSS:

Page Templates

_layouts folder has all page templates, which may include page components, such as Navigation menu, footer, social media icons from files in _includes folder:

  • default.html is the base template that all other templates use
  • home.html is the template for the Homepage
  • page.html is the template for different pages
  • post.html is the template for blog posts
  • tag.html is the template for the tag page

Customize Homepage and Add Pages/Blogs

You can refer to part I of this tutorial for how to customize the homepage and add new pages/blogs.

Github Pages Settings

you have to change baseurl and url in _config.yml to make the site work for Github Pages:

Host with Github Pages

You just need to commit all changes and push to the repo. Then, enable Github Pages and you should be able to visit your site at https://<username>.github.io/<your-repo>, such as https://harrywang.github.io/tailpages (note that I used a custom domain in the following screenshot):

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