Astro Poetry Blog

A barebones static website built using Astro and Storyblok

View Demo

Table of Contents

1. About The Project
   • Features
   • Built With
   • Special Thanks
2. Getting Started
   • Prerequisites
   • Installation
   • Apply Storyblok Migrations
   • Run the App!

About The Project

This project is a proof of concept for a blogging website powered by Astro and Storyblok. The project aims to generate a static website using content provided by Storyblok. It makes use of a barebones and simple design that can be expanded upon to build a fully featured and beautiful blogging website.

Features

• Image Optimization
  • Images are optimized using Astro's built in Image component.
• SEO
  • Dynamically generated JSON-LD schemas based on content
  • Sitemap and Robots.txt file
• Responsive UI
  • A seamless frontend experience that is consistent across various devices
• Accessibility
  • Proper html tags and aria labels to allow for screen reader navigation
  • Carefully picked colors to comply with contrast standards in the Web Content Accessibility Guidelines
  • Full support for keyboard navigation (coming soon...)

Built With

• 
• 

Special Thanks

• Realtime Colors | by juxtopposed
  • Project
  • Website

(back to top)

Getting Started

Prerequisites

• NodeJS
• npm (or another alternative)
• A Storyblok Account

Installation

1. Create a new Storyblok account and setup a new project: here
2. Clone the repo

   git clone https://github.com/liamcsdev97/astro-poetry-blog.git

3. Install NPM packages

   npm install

4. Duplicate the .env.example file and rename it to .env

   cat ./.env.example > ./.env

5. Create an API key in storyblok
6. Update your env file with your access token

   Preview will show your draft content, Live will only show published content
   MODE=preview
   DOMAIN=https://localhost:4321
   PUBLIC_ACCESS_TOKEN={Your Storyblok Token}

Apply Storyblok Migrations

1. Install storyblok cli

   npm i -g storyblok

2. Navigate to the migrations folder

   cd ./migrations/storyblok

3. Login using the cli

   storyblok login

4. Push the components to your project

   storyblok push-components ./components.json --space {YOUR SPACE ID}

(back to top)

Run the App!

npm run dev

(back to top)