Learn to generate a markdown-powered static blog styled by TailwindCSS quickly and easily with Zola, a super fast static site generator built in Rust.
If you need to create a no-fuss fast-loading blog quickly, check out Zola. Zola is relatively lesser well-known than some of the other generators you may have heard of. But the trimmed down feature set getting you up and running super fast is the real selling point. Add to that the blazing runtime speed of Rust, and you get high-speed generation times for even large sites. For many projects, you won't need anything more. After installation, the "First Steps with Zola" instructions are clear and easy to follow to get a basic markdown-powered blog up and running.
Once you have your site up and running, you'll want to style your pages. You can follow Zola's instructions for using Sass if you're into hand-coding all of your CSS. The benefit is that you won't have to install any other dependencies since Zola includes the Sass processor in its' self-contained binary. Otherwise, check out TailwindCSS. TailwindCSS is a rapid-development utility-first CSS framework for quickly assembling any design you would be able to build with vanilla CSS. Since TailwindCSS is not included in the Zola binary, you'll have to jump through a few simple hoops to get it running as part of your site development workflow. Once you're set-up, however, you won't have to think about it anymore.
If you followed the "First Steps with Zola" instructions, you should have a project file structure similar to the following:
/
├─ themes/
├─ templates/
├─ static/
├─ sass/
├─ content/
├─ config.toml
In your project root directory, use yarn to install TailwindCSS and the Tailwind typography plugin, which will apply styles to your markdown output when the pages are generated.
yarn add tailwindcss@latest @tailwindcss/typography
Then run npx tailwindcss init to generate tailwind config and postcss config files in your project root. You won't have to touch the postcss.config.js file. Open tailwind.config.js and replace the contents with the following:
// ./tailwind.config.js
module.exports = {
purge: ["./templates/**/*.html", "./theme/**/*.html"],
theme: {},
variants: {},
plugins: [
require('@tailwindcss/typography'),
],
};
You won't need the sass folder, but you will need a styles folder, so go ahead and add a styles folder and remove the sass folder. Create a styles.css file in your styles folder and add the following to it:
/* ./styles/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Run yarn init to create a package.json file in your project root directory, then open package.json and add the following:
"scripts": {
"build": "NODE_ENV=production npx tailwindcss -i styles/styles.css -o static/styles/styles.css",
"watch": "npx tailwindcss -i styles/styles.css -o static/styles/styles.css; zola serve"
},
Your file structure should now resemble the following:
/
├─ themes/
├─ templates/
├─ static/
├─ styles/
│ ├─ styles.css
├─ content/
├─ config.toml
├─ package.json
├─ postcss.config.js
├─ tailwind.config.js
Open your base.html file, in templates/base.html (assuming, again you followed the "First Steps with Zola" instructions) and add the following to the HEAD section of your page:
<!-- ./templates/base.html -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="{{ get_url(path="styles/styles.css") | safe }}" />
...
</head>
This ensures your templates will use the stylesheet generated by TailwindCSS.
Finally, you'll want to open templates/blog-page.html. Then wrap the section that outputs the markdown with the following code. This code applies the prose tailwind class to automagically style your markdown content. You'll be able to customize this at any time later:
<div class="prose prose-indigo prose-lg">
{{ page.content | safe }}
</div>
At this point, you should be able to run yarn watch in your project root. The site will use the TailwindCSS CLI to generate your stylesheet, and then zola serve will generate your static site and display your local dev URL to view it. Follow the instructions on the TailwindCSS site to experiment with adding styles to your html templates. Read up on the Zola site to learn how to customize your static site.
Have a read of the various deployment instructions for Zola. Just remember that your production build service or script should call the Tailwind Cli first to generate your production CSS file with:
NODE_ENV=production npx tailwindcss -i styles/styles.css -o static/styles/styles.css
followed by this next command which will build a production version of your site to a new public folder.
zola build
Want to see a live demo of a site built with Zola and TailwindCSS? You're looking at it! ;-)
Super quick to set up with Zola, super quick to design with TailwindCSS, super quick to deploy on the static hosting platform of your choice. Jamstack frameworks abound currently, but Ramstack tools like Zola with tiny learning curves make developing static sites fast and simple. If you have any questions on this post, feel free to hit me up on Twitter. Enjoy!