Create your own blog using Eleventy and Storyblok

A starter repository for a blog web site using Eleventy and Storyblok

Getting started

1. Make a directory and navigate to it:

mkdir my-blog-name
cd my-blog-name

2. Clone this repository

git clone https://github.com/guaca/11ty-storyblok/

3. Install dependencies

npm install

4. Create a Storyblok space and generate your data

Follow the steps described in this article to create the Storyblok space and the basic required data (one author, one category, one article and homepage data).

5. Add your env variables

• In Storyblok, go to Settings > Access Tokens and copy or generate the token. Depending on your needs, it can be a Preview or a Public one.
• You will also need the Home id of the Home page you have created in Storyblok (see here for more details on how to get it).
• Create a .env file in your local repository and add the following content:

STORYBLOK_API_KEY="[your-storyblok-token]"
DOMAIN="[your-website-domain]"
HOME_ID="[your-home-id]"

6. Run Eleventy You can generate a production-ready build to the _site folder:

npx @11ty/eleventy

Or build and host on a local development server:

npx @11ty/eleventy --serve

Demo and screeenshots

• Demo on Netlify: https://11ty-storyblok.netlify.app

• Screenshots:

  • Homepage
  
  • Articles List
  
  • Article Page
  
  • Authors List
  
  • Author Page
  
  • Categories List
  
  • Category Page