Getting Started with Tableau: Building Static Sites with Elixir
Static site generators have revolutionized how we build and deploy websites, offering the perfect balance of performance, security, and developer experience. Today, we're exploring Tableau, a powerful static site generator built specifically for the Elixir ecosystem.
Why Tableau?
Tableau brings the elegance and power of Elixir to static site generation. Unlike traditional generators written in Ruby or JavaScript, Tableau leverages:
- Functional Programming Paradigms - Immutable data structures and pure functions
- Phoenix LiveView Components - Reusable, testable UI components
- HEEx Templates - HTML-aware templates with compile-time checking
- Pattern Matching - Elegant data transformation and routing
Setting Up Your First Tableau Site
Getting started with Tableau is straightforward. First, add it to your mix.exs
dependencies:
defp deps do
[
{:tableau, "~> 0.25"},
{:phoenix_live_view, "~> 1.0"}
]
end
Then create your first layout:
defmodule MyBlog.RootLayout do
use Tableau.Layout
use Phoenix.Component
def template(assigns) do
~H"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><%= @page[:title] %></title>
</head>
<body>
<main>
<%= render @inner_content %>
</main>
</body>
</html>
"""
|> Phoenix.HTML.Safe.to_iodata()
end
end
Creating Pages and Posts
Tableau makes it easy to create both static pages and blog posts. Pages are defined as Elixir modules:
defmodule MyBlog.Pages.Index do
use Tableau.Page,
layout: MyBlog.RootLayout,
permalink: "/"
def template(assigns) do
~H"""
<h1>Welcome to My Blog</h1>
<p>Built with Elixir and Tableau!</p>
"""
end
end
Posts can be written in Markdown with frontmatter, just like other static site generators:
---
title: "My First Post"
date: "2024-01-15"
layout: MyBlog.PostLayout
---
# Hello, World!
This is my first blog post using Tableau.
Advanced Features
Component Reusability
One of Tableau's strongest features is its integration with Phoenix LiveView components. You can create reusable components and use them across your site:
defmodule MyBlog.Components.PostCard do
use Phoenix.Component
attr :post, :map, required: true
def post_card(assigns) do
~H"""
<article class="post-card">
<h2><%= @post.title %></h2>
<time><%= @post.date %></time>
<p><%= @post.excerpt %></p>
</article>
"""
end
end
Data Processing
Leverage Elixir's powerful data processing capabilities to transform and filter your content:
defmodule MyBlog.Posts do
def recent_posts(posts, limit \\ 5) do
posts
|> Enum.sort_by(& &1.date, {:desc, Date})
|> Enum.take(limit)
end
def posts_by_tag(posts, tag) do
Enum.filter(posts, &(tag in &1.tags))
end
end
Performance and SEO
Tableau generates fully static HTML, which means:
- Lightning-fast load times - No server-side processing required
- Excellent SEO - Search engines can easily crawl static HTML
- CDN-friendly - Deploy anywhere static files are supported
- Security - No server-side vulnerabilities
Deployment
Building your site is as simple as running:
mix tableau.build
The generated site will be in the _site
directory, ready to deploy to any static hosting service like Netlify, Vercel, or GitHub Pages.
Conclusion
Tableau brings the power and elegance of Elixir to static site generation. With its integration with Phoenix LiveView, powerful templating system, and functional programming paradigms, it's an excellent choice for developers who want to build fast, maintainable static sites.
Whether you're building a personal blog, documentation site, or marketing pages, Tableau provides the tools and flexibility you need while maintaining the reliability and performance that static sites are known for.
Ready to get started? Check out the official Tableau documentation and start building your next static site with Elixir!