DEV Community

Matt Waler
Matt Waler

Posted on

Building My New Website with the TEA Stack

Alt Text

First and foremost, a shameless plug, check out this blog post on my brand new personal site if you would like here! I've got some awesome syntax highlighting and an RSS feed if you prefer reading that way!

Why Redesign?

As a web developer, your personal site is a reflection of yourself and your skill set. I was proud of my previous iteration, but I knew it could be better. I found it was lacking in a few key areas:

  • Was only one page
  • Very text heavy
  • Lacked personality
  • Portfolio aspects were missing

In hindsight, I am certain that prospective clients visited my site, saw very little imagery or proof of my skills, and bounced.

Requirements and Goals

I had a few key goals in mind when I began the new iteration:

  • Look amazing (obviously)
  • Showcase my personality
  • Showcase projects and websites
  • Markdown-powered blog & content
  • RSS Feed
  • Minimal JS/CSS bundles
  • Syntax highlighting in pages & posts
  • App-like page routing, without a frontend framework
  • Contain styles, structure, and functionality in templates as much as possible

How I Built This

I pulled together a collection of awesome tools to make this site awesome. I call this set of tools the TEA Stack (patent pending ๐Ÿ˜‰). The TEA stack includes TailwindCSS, Eleventy, and AlpineJS. If you have not already, I suggest you give each of these tools a try. When combined, they are insanely powerful and delightful to work with.

I built a starter template repository on GitHub, so if you're looking to jump right into the stack, give it a spin and let me know how it goes!

TailwindCSS

Tailwind is a phenomenal framework and I have far too many good things to say about it. This site is styled almost entirely by utility classes, with the minor exception of syntax highlighting and global defaults.

With the help of Tailwind, I was able to build this entire site with only five postcss files. This keeps my project scaffolding much leaner, while also allowing me to both build and style the site within my templates.

For example, here is a brief snippet of the hero element on this very page:

<section class="gradient-purple text-white py-8 lg:py-16">
  <div class="container max-w-screen-md mx-auto text-center">
    <p class="uppercase font-bold text-indigo-300 text-sm">{{ date | prettyDate }}</p>
    <h1 class="mt-2 text-2xl sm:text-3xl xl:text-4xl font-bold leading-none">
      {{ title }}
    </h1>
    <p class="mt-4 text-sm sm:text-base text-indigo-100">{{ excerpt }}</p>
  </div>
</section>
<span class="w-full h-12 block gradient-purple text-gray-100">
  {% include 'icons/waves.svg' %}
</span>
Enter fullscreen mode Exit fullscreen mode

Tailwind Plugins

TailwindCSS has some fantastic plugins, from both the community and Tailwind Labs, that make life so much easier.

At the time of writing this, I am using these two great packages:

Eleventy

All pages on this site are truly statically generated at build time with Eleventy. What I mean by truly is that there is no pre-rendering, rehydrating, or any other funny business going on here.

Don't get me wrong, I think projects like Next, Gatsby, Nuxt, and Sapper are great. However, I believe the SSG aspects of these projects have major problems. Build times are atrocious, and the client-side JS bundles are massive even for tiny websites.

Here's a look at the result from running npm run build on my site:

Copied 1 item and Processed 11 files in 0.38 seconds
Enter fullscreen mode Exit fullscreen mode

No JavaScript, no frameworks, just raw HTML.

But now you don't get those dope page transitions that feel like an app!

Wrong! Turbolinks can provide this functionality for us. Adding this to your bundle will grant you buttery smooth page transitions for quite the bargain:

# package-size is a fantastic tool to quickly check filesize
npx package-size turbolinks

package             size        minified    gzipped
turbolinks@5.2.0    39.79 KB    37.78 KB    8.74 KB
Enter fullscreen mode Exit fullscreen mode

Eleventy allows for a markdown-powered website, exposes a fantastic API for passing data to templates, and makes it crazy simple to add custom filters, plugins, and so much more.

Eleventy Plugins

  • Syntax Highlighting to syntax highlight inline code with Prism at build time, not on the client
  • RSS Feed to generate the RSS feed automatically on build

AlpineJS

This project contains one JavaScript file. That file looks like this:

// This passes all postcss files through rollup and out into a single css file
import './main.pcss'

// Import and auto-initialize both Alpine and Turbolinks
import 'alpinejs'
import 'turbolinks'
Enter fullscreen mode Exit fullscreen mode

That's right. All of the functionality on my site, like the mobile navigation and the year in the footer, are written in the template files.

Take a look at the code in my footer to update the year client-side:

<span
  x-data=""
  x-text="`Waler Media LLC | ยฉ ${new Date().getFullYear()}`"
></span>
Enter fullscreen mode Exit fullscreen mode

Or maybe the button code to toggle the mobile nav:

<button @click="mobileNav = !mobileNav" class="w-6 h-6 md:hidden">
  <span x-show="!mobileNav">
    {% include 'icons/menu.svg' %}
  </span>
  <span x-show="mobileNav">
    {% include 'icons/close.svg' %}
  </span>
</button>
Enter fullscreen mode Exit fullscreen mode

With some vue-esque directives and custom attributes, I've got all the logic I need, and that logic is contained in the template file itself. So sexy.

The Best Bundler: Rollup

It's worth noting that I am using Rollup to compile and split the CSS/JS files. I will always advocate using Rollup over Webpack, as the syntax is lightyears easier to grok and configure.

Here is my entire Rollup configuration file:

import commonjs from '@rollup/plugin-commonjs'
import postcss from 'rollup-plugin-postcss'
import resolve from '@rollup/plugin-node-resolve'
import { terser } from 'rollup-plugin-terser'

const prod = process.env.NODE_ENV == 'production'

export default {
  input: 'src/_bundle/main.js',
  output: {
    sourcemap: false,
    format: 'iife',
    name: 'main',
    file: 'dist/assets/main.bundle.js',
  },
  plugins: [
    postcss({
      extract: 'dist/assets/main.bundle.css',
      minimize: prod,
    }),
    resolve({
      browser: true,
    }),
    commonjs(),
    prod && terser(),
  ],
  watch: {
    clearScreen: false,
  },
}
Enter fullscreen mode Exit fullscreen mode

Inspiration

The design, tools, and stack was derived from a bunch of great tools and sites I follow very closely. I would feel like I am plaigerizing if I didn't devote a section on this post to point to things that helped bring this site to life:

Peep The Source

My website's source code will always be public on GitHub, so feel free to poke around yourself to see how things work! Some of the content in this post may not be 100% up-to-date, so check that out if you're feeling curious!

Thanks for reading, and as always, stay sexy.

Discussion (10)

Collapse
surjithctly profile image
Surjith S M • Edited
  1. You forgot the awesomeness of Nunjucks. So its not Tea stack, It should be TEAN Stack ๐Ÿ˜Š

  2. Didn't knew I could include svg as well, It will be written as inline SVG right?

  3. Man, Turbolinks is ๐Ÿ”ฅ, Why I didn't knew this before. The main reason I liked Gatsby or other SSG.

Thanks for sharing.

Update: So I have added one more stack to it and launched NEAT Starter ๐Ÿ˜Š github.com/surjithctly/neat-starter

Collapse
mattwaler profile image
Matt Waler Author
  1. Eleventy doesn't force you to use Nunjucks, you can use Liquid, Handlebars, JavaScript, and apparently plugins are coming in the near future to use other templating languages!
  2. You can! As long as you put the files in your _include folder you can include them and they will render as inline SVG, so you can slap tailwind classes on/around them ๐Ÿ˜€
  3. Turbolinks is super awesome and I can't recommend it enough. It even has some extra goodies like data-attributes to denote elements that should persist across page transitions, etc.

Thanks for reading!

Collapse
hood profile image
Andrea Cappuccio

TailwindCSS is unbeatable rn. Site looks gorgeous tho, kudos!

Collapse
mattwaler profile image
Matt Waler Author

Wow, thank you!

Collapse
finnanton profile image
Finn

until now i never heard about the tea stack.
thank you for the post.

Collapse
mattwaler profile image
Matt Waler Author

I made up the name myself! Feel free to use it to your hearts content!

Collapse
simonholdorf profile image
Simon Holdorf

Cool post, thanks Matt!

Collapse
mattwaler profile image
Matt Waler Author

Thank you Simon!

Collapse
tanghoong profile image
tanghoong

Look great! and thanks for the guidelines~

Collapse
arpanjha12 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Arpanjha • Edited

I Too Never Heared About Tea Stack IT Was Really Helpfull Post Buddy. Thanks For Sharing Us Your Knowledge.
I Had Thing Tell You To I had Written as Nice Article Too You Would Not Like To Read It -->

13 Habits of Effective Programmers