Building a Blog with Strapi and Node.js

I’m Tre, a developer here at Fishtown Web Design, and I’m thrilled to share how we recently integrated Strapi into our own website’s blog. It’s been a game-changer for managing our content, and I can’t wait to walk you through the process step-by-step. We also use Strapi for client projects when they need a flexible, custom CMS, but this time, it’s all about sprucing up our own site. Grab a coffee, and let’s dive into this hands-on journey together!

Why Strapi? Our Experience at Fishtown

At Fishtown Web Design, we’re passionate about crafting unique, scalable websites for ourselves and our clients. For our own blog, we wanted a CMS that let us easily update posts while keeping full control over the frontend. Strapi, a headless, open-source CMS built on Node.js, fit the bill perfectly. We’ve also been using it for client sites when they need a modern solution—its API-first design pairs seamlessly with Node.js, making it a go-to tool in our toolkit. So, let’s set it up for our own site and build something awesome!

Step 1: Setting Up Strapi for Our Blog

First, let’s get Strapi rolling. I’m working on my machine in my FishtownWebDesign folder, with Node.js v22.12.0 and npm v11.0.0 installed, check yours with:

node -v

npm -v 

1. Build the Project: Open your terminal (I’m using PowerShell), navigate to your project folder, and run:

npx create-strapi-app@latest strapi-blog --quickstart

• This creates a strapi-blog folder with SQLite for simplicity. Once it’s done, it’ll launch at http://localhost:1337. If it doesn’t auto-start, cd into strapi-blog and run npm run develop.

2. Set Up Your Admin Account: Head to http://localhost:1337/admin in your browser. Create an admin user—I went with [email protected] and a secure password. Log in, and you’re in the driver’s seat!

• Build the Blog Structure

• We designed two content types for our site: Post and Category.

• Go to Content-Type Builder -> Category. Click "Create new collection type," name it Category, add a name field (Text, Short text), and save.

• Post: Create another, name it Post, and add these fields: title (Text, Short text), content (Rich Text—for that fancy formatting), slug (UID, linked to title for clean URLs), publishedDate (Date, default to today), category (Relation: Post belongs to one Category—add a Relation field, select Category, and choose "belongs to one").

• Hit Save after each, and wait for Strapi to restart.

3. Add Some Content for Our Site: In Content Manager, go to Category, create "Web Design" and "Team Updates," and publish them.

• For Post, add a sample for our site: Title: "Launching Our Strapi-Powered Blog", Content: "Here at Fishtown Web Design, we’re excited to share our journey with Strapi on our own site!", Slug: Auto-generates (e.g., "launching-our-strapi-powered-blog"), Published Date: March 10, 2025, Category: "Web Design"

• Publish it.

5. Open the API: Go to Settings > Roles > Public, and enable find and findOne for both Post and Category. Save it. Now, test it at http://localhost:1337/api/posts?populate=category in your browser!

Step 2: Building the Node.js Frontend for Our Site

• Let’s connect this to a Node.js app to display our blog on fishtownwebdesign.com.

1. Set Up the Project: In a new terminal tab, navigate to your project folder and run:

mkdir blog-frontend

cd blog-frontend

npm init -y

npm install express axios ejs

• This gets us Express for the server, Axios for API calls, and EJS for templating.

2. Create the File Structure:

• Make a views folder: mkdir views .

• Add these files: index.js (our app), views/index.ejs (homepage), views/post.ejs (single post page)

3. Code the Express App (index.js):

• Here’s the code to bring our blog to life—open index.js and paste this:

const express = require('express');

const axios = require('axios');

const app = express();

const port = 3000;

app.set('view engine', 'ejs');

async function getPosts() {

    const response = await axios.get('http://localhost:1337/api/posts?populate=category');

    return response.data.data;

}

async function getPostBySlug(slug) {

    const response = await axios.get(`http://localhost:1337/api/posts?filters[slug][$eq]=${slug}&populate=category`);

    return response.data.data[0];

}

app.get('/', async (req, res) => {

    const posts = await getPosts();

    res.render('index', { posts });

});

app.get('/post/:slug', async (req, res) => {

    const post = await getPostBySlug(req.params.slug);

    if (!post) return res.status(404).send('Post not found');

    res.render('post', { post });

});

app.listen(port, () => {

    console.log(`Fishtown Blog running at http://localhost:${port}`);

});

4. Craft the Templates

• views/index.ejs:

<!DOCTYPE html>

<html>

<head><title>Fishtown Blog</title></head>

<body>

    <h1>Welcome to the Fishtown Web Design Blog</h1>

    <ul>

        <% posts.forEach(post => { %>

            <li>

                <a href="/post/<%= post.attributes.slug %>">

                    <%= post.attributes.title %>

                </a> (<%= post.attributes.category.data.attributes.name %>)

            </li>

        <% }) %>

    </ul>

</body>

</html>

views/post.ejs:

<!DOCTYPE html>

<html>

<head><title><%= post.attributes.title %></title></head>

<body>

    <h1><%= post.attributes.title %></h1>

    <p><strong>Category:</strong> <%= post.attributes.category.data.attributes.name %></p>

    <p><strong>Date:</strong> <%= post.attributes.publishedDate %></p>

    <div><%= post.attributes.content %></div>

    <a href="/">Back Home</a>

</body>

</html>

5. Run It!

• In the blog-frontend folder, run node index.js. Open http://localhost:3000 to see our blog, and click the post title to view it. Keep Strapi running in the other tab!

Step 3: Troubleshooting and Tips

• Port Issues? If 1337 is busy, edit strapi-blog/config/server.js to change the port (e.g., port: 1338).

• No Data? Check Strapi permissions or ensure your API call includes populate=category.

• Enhance It: Add some CSS in a <style> tag, or try pagination with ?pagination[page]=1&pagination[pageSize]=5. We’re planning to style ours to match fishtownwebdesign.com soon!

What’s Next for Our Site?

This is just the start for our blog! We’ve already seen how Strapi shines for our own site, and we will use it moving forward for clients when they need a custom CMS that scales. Next, we might add a comments section or deploy this live on our server. Feel free to experiment—add more posts in Strapi, tweak the category relation to "belongs to many" if you want multiple categories per post, or give it a design overhaul.

Happy coding,

Tre