bradtraversy/devspace-blog

Development blog built with Next.js & Markdown

DevSpace Blog

Static Next.js blog that uses Markdown for posts. Includes pagination, categories and search

This project is part of my Next.js Udemy course

VIEW DEMO

Usage

Install Dependencies

npm install

Run Dev Server (http://localhost:3000)

npm run dev

Creating posts

• Create a markdown file in the "posts" folder and name it whatever you want as the slug
• Add the frontmatter/fields at the top and then the post body. See an example in the "posts" folder of this repo
• Add your cover image and author image in the public/images folder
• For category color coding, edit the "Components/CategoryLabel.js" file

Caching

Husky is used to run a cache script on git commit. Caching is used for the search api route/serverless function

devspace-blog's Issues

Update 'marked' import in [slug].js

I ran into a webpack issue using marked to display markdown content in the pages/blog/[slug] route. To fix the issue I needed to update the import per below:

import { marked } from 'marked'

Update dynamic styling in CategoryLabel component

The background color is not updating for the blog categories as it seems tailwind will no longer allow dynamic styling. To get around this I updated the color key with the '600' tailwind background hex colors and created dynamically updated inline style per the below:

import Link from "next/link";

export default function CategoryLabel({ children }) {
  const colorKey = {
    JavaScript: "#D97706",
    CSS: "#2563EB",
    Python: "#059669",
    PHP: "#7C3AED",
    Ruby: "#DC2626",
  };

  return (
    <div
      className={`px-2 py-1 text-gray-100 font-bold rounded`}
      style={{ backgroundColor: `${colorKey[children]}` }}
    >
      <Link href={`/blog/category/${children.toLowerCase()}`}>{children}</Link>
    </div>
  );
}