Zola Tailwind Template

A modern static site template built with Zola static site generator and Tailwind CSS.

Features

• Fast and lightweight static site generation with Zola
• Modern responsive design with Tailwind CSS
• Reusable components via Zola shortcodes
• Dark mode support
• Blog section with Markdown content
• Team member profiles

Prerequisites

Before you begin, ensure you have the following installed:

• Zola (v0.15.0 or later)
• Node.js (v14.0.0 or later)
• npm (usually comes with Node.js)

Installing Zola

Follow the instructions on the Zola installation page for your operating system.

Installing Node.js and npm

Download and install from the Node.js website.

Running Locally

To run the site locally for development:

1. Clone this repository or download and extract the ZIP file
2. Navigate to the project directory in your terminal
3. Run the start script:

# On Linux/macOS
./start.sh

# On Windows
# Either use Git Bash to run ./start.sh
# Or run these commands manually:
npm install
npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --watch & zola serve

The start script will:

• Install Tailwind CSS and dependencies if not already installed
• Start the Tailwind CSS watcher to compile CSS changes
• Start the Zola development server

Once running, you can access the site at http://127.0.0.1:1111

Building for Production

To build the site for production:

# On Linux/macOS
./build.sh

# On Windows
# Either use Git Bash to run ./build.sh
# Or run these commands manually:
npm install
npx tailwindcss -i ./static/css/main.css -o ./static/css/output.css --minify
zola build

The build script will:

• Install Tailwind CSS and dependencies if not already installed
• Build and minify the Tailwind CSS
• Build the Zola site for production

The built site will be in the public directory, which you can deploy to any static hosting service.

Using Shortcodes

Shortcodes are reusable components that can be included in your Markdown content. This template includes several pre-built shortcodes:

Hero Section

{{ hero(title="Welcome", subtitle="A modern website built with Zola and Tailwind CSS", button_text="Learn More", button_link="/about") }}

Alternative Hero Styles

{{ hero2(title="Welcome", subtitle="A modern website", button_text="Learn More", button_link="/about") }}

{{ hero3(title="Welcome", subtitle="A modern website", button_text="Learn More", button_link="/about") }}

Feature Card

{{ feature_card(title="Fast and Lightweight", description="Zola generates static HTML files that load quickly", icon="⚡") }}

Call-to-Action (CTA)

{{ cta(title="Ready to Get Started?", description="Create your own beautiful website with Zola and Tailwind CSS today.", button_text="View Blog", button_link="/blog") }}

For more detailed documentation on available shortcodes and their parameters, see the shortcodes.md file.

Creating Custom Shortcodes

To create a new shortcode:

1. Create a new HTML file in the templates/shortcodes/ directory, e.g., templates/shortcodes/my_shortcode.html
2. Write your shortcode template using Zola's template syntax (based on Tera templates)

Here's an example of a simple shortcode template:

{% set title = title | default(value="Default Title") %}
{% set description = description | default(value="") %}

<div class="bg-white p-6 rounded-lg shadow-md">
  <h3 class="text-xl font-bold">{{ title }}</h3>
  {% if description %}
    <p class="mt-2 text-gray-600">{{ description }}</p>
  {% endif %}
  {% if caller %}
    <div class="mt-4">{{ caller() }}</div>
  {% endif %}
</div>

Parameters

Define parameters at the top of your shortcode file using the {% set parameter = parameter | default(value="default_value") %} syntax.

Nested Content

To allow nested content inside your shortcode, include the {% if caller %}{{ caller() }}{% endif %} block.

Using Your New Shortcode

In your Markdown content:

{{ my_shortcode(title="Custom Component", description="This is my custom shortcode") }}

With nested content:

{% call my_shortcode(title="With Nested Content") %}
  This content will appear inside the shortcode.
  
  You can include **Markdown** here.
{% endcall %}

Customization

Site Configuration

Edit the config.toml file to change site-wide settings:

base_url = "https://your-domain.com"
title = "Your Site Title"
description = "Your site description"

Styling

• Main CSS file: static/css/main.css
• Tailwind configuration: tailwind.config.js
• SASS files (if used): sass/ directory

Deployment

After building the site, deploy the contents of the public directory to any static hosting service like:

• Netlify
• Vercel
• GitHub Pages
• Cloudflare Pages

Most of these services can be configured to automatically run your build script when you push to your repository.