Skip to content
next-ignite Logo

Creating a Blog

Adding a blog with ignite is super easy. All you have to do is start adding .mdx files to a folder names pages/blog and set up the blog index page.

Blog Index Page

Create a file in your pages/ folder named blog.js. This simplest way to get a blog index running is by using the sample component ignite provides

import { BlogIndex } from "next-ignite";

const Blog = () => <BlogIndex />;

export default Blog;
import { BlogIndex } from "next-ignite";

const Blog = () => <BlogIndex />;

export default Blog;

If you want more control of what this page looks like you can use the lower level functions ignite provides.

In this file add the following to render a simple list of your blog posts:

import Link from "next/link";
// getBlogPosts will return the blogs in reverse creation order
import { getBlogPosts, makeNavBarLayout } from "next-ignite";
import { useMDXComponents } from "@mdx-js/react";

// Make a layout with the navbar at the
const NavBarLayout = makeNavBarLayout();
// Get all the blog posts
const posts = getBlogPosts();

const Blog = () => {
  // Make sure to use the components defined for you docs!
  const components = useMDXComponents();

  return (
    <NavBarLayout>
      <components.h1>Blog</components.h1>

      <components.ul>
        {posts.map((page) => (
          <li key={page.__resourcePath}>
            <Link passHref href={page.__resourcePath}>
              <components.a>{page.title}</components.a>
            </Link>
          </li>
        ))}
      </components.ul>
    </NavBarLayout>
  );
};

export default Blog;
import Link from "next/link";
// getBlogPosts will return the blogs in reverse creation order
import { getBlogPosts, makeNavBarLayout } from "next-ignite";
import { useMDXComponents } from "@mdx-js/react";

// Make a layout with the navbar at the
const NavBarLayout = makeNavBarLayout();
// Get all the blog posts
const posts = getBlogPosts();

const Blog = () => {
  // Make sure to use the components defined for you docs!
  const components = useMDXComponents();

  return (
    <NavBarLayout>
      <components.h1>Blog</components.h1>

      <components.ul>
        {posts.map((page) => (
          <li key={page.__resourcePath}>
            <Link passHref href={page.__resourcePath}>
              <components.a>{page.title}</components.a>
            </Link>
          </li>
        ))}
      </components.ul>
    </NavBarLayout>
  );
};

export default Blog;

Once this is setup you're ready to start writing blog posts! 🎉

Blog Post Format

A blog post is just another .mdx file, but it has a few more front-matter features.

You should always include a title.

---
title: "My First Blog Post"
---

---
title: "My First Blog Post"
---

author

You can include an author in the blog post, otherwise this information will get pull from the commit. Include an email to display an avatar using gravatar.

---
title: "My First Blog Post"
author: "Andrew Lisowski"
email: "lisowski54@gmail.com"
---

---
title: "My First Blog Post"
author: "Andrew Lisowski"
email: "lisowski54@gmail.com"
---

date

Specify the date the post was created. If not supplied this information is pulled from the commit date.

---
date: "Thu, 12 Mar 2020 23:00:02 -0700"
---

---
date: "Thu, 12 Mar 2020 23:00:02 -0700"
---

color

A color to use as the backdrop for a post

---
color: "red"
---

---
color: "red"
---

image

Instead of a color you can display an image as the backdrop.

---
image: "http://image.com/example.png"
---

---
image: "http://image.com/example.png"
---

Comments

To add comments to your blog first sign for any plan with disqus and then add the following to your _document.js.

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />

        <body>
          <Main />
          <NextScript />
          <script
            dangerouslySetInnerHTML={{
              __html: `
                var disqus_config = function () {
                  this.page.url = document.location.origin;
                  this.page.identifier = document.location.pathname;
                };

                (function() {
                  if (!document.getElementById('disqus_thread')) {
                    return;
                  }

                  var d = document, s = d.createElement("script");
                  s.src = YOUR_DISQUS_URL;
                  s.setAttribute("data-timestamp", + new Date());
                  (d.head || d.body).appendChild(s);
                })();
              `,
            }}
          />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />

        <body>
          <Main />
          <NextScript />
          <script
            dangerouslySetInnerHTML={{
              __html: `
                var disqus_config = function () {
                  this.page.url = document.location.origin;
                  this.page.identifier = document.location.pathname;
                };

                (function() {
                  if (!document.getElementById('disqus_thread')) {
                    return;
                  }

                  var d = document, s = d.createElement("script");
                  s.src = YOUR_DISQUS_URL;
                  s.setAttribute("data-timestamp", + new Date());
                  (d.head || d.body).appendChild(s);
                })();
              `,
            }}
          />
        </body>
      </Html>
    );
  }
}

export default MyDocument;