Please enable JavaScript to view this website.

How I Built my Website with 11ty & Sanity

I just gave my portfolio a makeover! It's built with 11ty, Sanity, esbuild and Tailwind CSS, which I'm currently using for all my other projects as well.

19.01.2022

I've used React/Gatsby for many of my projects and still find it to be a great framework.

However, at some point I lacked control over things and I thought there was a lot of magic going on in the background. And I wondered if I needed this magic at all, because so much additional JavaScript was generated.

I was also bothered by the fact that the build times were quite long. So I decided to give 11ty a try and have loved it ever since.

Eleventy (11ty)

Eleventy is another static site generator. It's super flexible and it has zero boilerplate client-side JavaScript. So it gives me the ability to set up my projects exactly the way I want and have control over everything.

npm init -y
npm install --save-dev @11ty/eleventy

Configuration

You can use Eleventy without any configuration, but if you want to customize things or add a plugin, you can add a .eleventy.js config file to your root directory.

I renamed the output folder to public and I like to keep all of my code within the src folder (input).

module.exports = function(eleventyConfig) {
return {
dir: {
input: 'src',
output: 'public'
},
}
};

If you run eleventy --serve now, your site is running on http://localhost:8080. And don't forget to create a src folder.

Sanity

I've been using Sanity as a CMS for quite some time and love it.

It's easy for my clients and collaborators to use since it only contains the content-fields that I provide. Plus, the interface is intuitive and tidy. Another great advantage is the free plan, which is totally sufficient for many small to medium websites.

You can easily set up Sanity in an existing project. For me it just lives in the root directory studio/

npm install -g @sanity/cli
sanity init

Retrieve content from Sanity in 11ty

Inside src create a _data directory, which is an expected directory in the Eleventy file system. For example, if you want to retrieve blog posts from Sanity, create a new file posts.js

const groq = require('groq');
const sanityClient = require('@sanity/client')

const client = sanityClient({
projectId: 'your_project_id',
dataset: 'your_dataset_name',
})

module.exports = async function () {
const posts = await client.fetch(groq`
*[_type == "post"]
`
);

return posts;
}

Sanity has its own query language called GROQ, which you need to use to query data. Here's a really nice introduction to GROQ.

Now, create an index page src/index.njk.

With Eleventy you can use multiple templating languages, I like to use Nunjucks (.njk). With Nunjucks you can loop over the posts using the name you gave the file (posts.js). You should now see your content on localhost:8080!

<h1>My Blog Posts</h1>

{% for post in posts %}
<h2>{{ post.title }}</h2>
{% endfor %}

Sanity provides a great starter template with 11ty, if you want to start right away.

Esbuild

For bundling JavaScript I use esbuild and it's crazy fast. This is how I configured it in my package.json

{
"scripts": {
"watch:js": "esbuild ./src/scripts/main.js --outfile=public/main.js --bundle --watch",
"build:js": "esbuild ./src/scripts/main.js --outfile=public/main.js --bundle --minify --target=es2019"
}
}

GSAP

I use GSAP for animations. GreenSocks ScrollTrigger Plugin is great as well. Motion One is another fairly new animation library that I'd like to use in one of my future projects.

Tailwind CSS

Like everyone, I was very skeptical about Tailwind at first. But I really enjoy it now. Also, among other things, because I feel like I'm faster writing code. It doesn't clutter up my code as well, because I only use classes for Tailwind and data attributes to select the elements with JavaScript.

Highway.js

I use Highway.js for Page Transitions.

Netlify

Netlify is perfect to deploy the site (use the public folder for it). With 11ty I was able to eventually reduce build times to 20-30 seconds.