netlify-templates/nextjs-blog-theme

A customizable Next.js and Tailwind blog starter. Designed by the Bejamas agency.

A customizable blog starter using:

• Next.js v14 (Pages Router)
• Tailwind v3.0
• Built-in MDX v1 support
• Includes modern design with dark & light themes

Take a gander at the demo.

Click here to watch the template walkthrough!

Table of Contents:

• Getting Started
  • Setting Up Locally
  • Using the Wizard
• Configuring the Blog
• Adding New Posts
• Testing
  • Included Default Testing
  • Removing Renovate

Getting Started

---

You can get started with this project in two ways: locally or using the setup wizard.

Setting Up Locally

If you're doing it locally, start with clicking the use this template button on GitHub. This will create a new repository with this template's files on your GitHub account. Once that is done, clone your new repository and navigate to it in your terminal.

From there, you can install the project's dependencies by running:

yarn install

Finally, you can run your project locally with:

yarn run dev

Open your browser and visit http://localhost:3000, your project should be running!

Using the Setup Wizard

Through the setup wizard, you can create your blog in a few clicks and deploy to Netlify.

Configuring the blog

The config is based on environment variables to make it easy to integrate with any Jamstack platform, like Netlify.

Here are the variables you can edit:

Variable	Description	Options
BLOG_NAME	the name of your blog, displayed below the avatar
BLOG_TITLE	the main header (h1) on the home page
BLOG_FOOTER_TEXT	the text in the footer
BLOG_THEME	the theme to pass to Tailwind	default
BLOG_FONT_HEADINGS	the font-family for all HTML headings, from h1 to h6	sans-serif (default), serif, monospace
BLOG_FONT_PARAGRAPHS	the font-family for all other HTML elements	sans-serif (default), serif, monospace

All of the env variables can be configured through the Wizard or through setting the project's environment variables. You can do this in your Netlify dashaboard (Site settings/Build & deploy/Environment/Environment variables).

bejamas_env-vars_short.mp4

[alt: video walkthrough of editing env vars]

If setting an environment variable isn't your cup of tea, the defaults can be changed in utils/global-data.js. You can also remove the variables and hard code blog information where these variables are used in the code base.

• BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS are used in tailwind-preset.js
• BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT are used in pages/index.js & pages/posts/[slug].js through the globalData object.

Adding new posts

All posts are stored in /posts directory. To make a new post, create a new file with the .mdx extension.

Since the posts are written in MDX format you can pass props and components. That means you can use React components inside your posts to make them more interactive. Learn more about how to do so in the MDX docs on content.

nextjs-bejamas-blog_new-post.mp4

[alt: video walkthrough of adding a new blog post]

Testing

Included Default Testing

We’ve included some tooling that helps us maintain these templates. This template currently uses:

• Renovate - to regularly update our dependencies

If your team is not interested in this tooling, you can remove them with ease!

Removing Renovate

In order to keep our project up-to-date with dependencies we use a tool called Renovate. If you’re not interested in this tooling, delete the renovate.json file and commit that onto your main branch.

nextjs-blog-theme's Issues

500 error on demo site and site from the template

Go to the demo site to reproduce:
https://bejamas-nextjs-blog.netlify.app/

Or create a new site from the template to reproduce in a new site.

cc @MarcL

Practice

Making 1st website

Changing posts path

The current post path is https://website-name.com/posts/. Is there a way I could change it to https://website-name.com/?

For example, from https://website-name.com/posts/test-post to https://website-name.com/test-post.

As my previous blog uses this post structure, I would like to retain the post structure for consistent SEO result.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency eslint to v9

Detected dependencies

npm

package.json

• @mapbox/rehype-prism ^0.9.0
• @tailwindcss/typography ^0.5.12
• classnames ^2.3.1
• gray-matter ^4.0.3
• next ^14.1.4
• next-mdx-remote ^5.0.0
• next-remote-watch 2.0.0
• prismjs ^1.29.0
• react ^18.2.0
• react-dom ^18.2.0
• remark-gfm ^4.0.0
• autoprefixer ^10.4.19
• eslint ^8.57.0
• eslint-config-next ^14.1.4
• eslint-config-prettier ^9.1.0
• postcss ^8.4.38
• tailwindcss ^3.4.4

---

• Check this box to trigger a request for Renovate to run again on this repository

Adds maintenance tooling

Summary

To make sure that our project stays up to date we'd like to add some tools:

• Cypress integration (for testing e2e, ref doc here)
• Renovate (for dependency management)
  add 'renovate.json` to project root

  {
    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
    "extends": [
      "local>netlify-templates/renovate-config"
    ]
  }
  

• Disable dependabot secutrity and version update alerts
• Make sure to update the README on how to remove everything
  • add section on cypress removal
  • add section on removing renovate json file
  • add comment at top of renovate json saying it can be removed if not using renovate

Add example of frontmatter keys needed for new post

Given a conversation within the Jamstack Discord, I think it is important for us to document what is needed for a new post so users can easily get running. An easy lift would be putting this into the README. Enough there to solve awareness.

---

As an aside, I wonder if there is any way for us to essentially throw a more helpful error around if the front matter wasn't properly setup so that folks get insights on "oh hey, you're missing a front matter key, be sure to add this". Rather than:

5:08:12 PM: Error occurred prerendering page "/posts/test-post". Read more: https://nextjs.org/docs/messages/prerender-error
5:08:12 PM: Error: Error serializing `.prevPost.title` returned from `getStaticProps` in "/posts/[slug]".
5:08:12 PM: Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

Hiding an article on the home page

Can hide the article?Let him not show on the home page.

👀

👀

Any specific Requirements for creating a new mdx file?

Hi guys! Sorry to disturb you during the holiday season and Today I just found out about this template and wanted to spin up a new blog using this template.
everything is fine and the blog is running fine but every time I try to create a new post on post/new-example.mdx it shows up on the local and production build but it's not responsive for some reason.

Note: All other original posts is still responsive only the new ones are being responsive.Even when I copy a previous post!
Is there any specific way of working this or there is some error regarding my mdx?

add prettier

add .prettierrc config file and command

Quickest way to add pagination?

Hey, wondering if the package comes with a quick/fast way to add pagination before I start coding. Thanks!

Installing on ARM chip errors

Tried cloning and running npm install and ran into an error regarding the ARM chip with the puppeteer package and the chromium binary.

npm ERR! code 1
npm ERR! path /Users/brittneypostma/Coding/abcs-of-netlify/node_modules/puppeteer
npm ERR! command failed
npm ERR! command sh -c node install.js
npm ERR! The chromium binary is not available for arm64.
npm ERR! If you are on Ubuntu, you can install with: 
npm ERR! 
npm ERR!  sudo apt install chromium
npm ERR! 
npm ERR! 
npm ERR!  sudo apt install chromium-browser
npm ERR! 
npm ERR! /Users/brittneypostma/Coding/abcs-of-netlify/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:115
npm ERR!                     throw new Error();
npm ERR!                     ^
npm ERR! 
npm ERR! Error
npm ERR!     at /Users/brittneypostma/Coding/abcs-of-netlify/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:115:27
npm ERR!     at FSReqCallback.oncomplete (node:fs:198:21)

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/brittneypostma/.npm/_logs/2022-08-25T00_48_26_875Z-debug-0.log

Just going to remove puppeteer for now.

inline code (with backticks) not working

The inline code formatting with backticks does not appear to work as intended. By deploying a fresh site from the template you can see the issue right away even on the example-post.mdx page:

Happens across browsers, whether chromium-based or firefox. Seems like maybe something is overriding default Markdown formatting behavior.

AnT1nG

Add license for project

From GitHub's licensing page:

...without a license, the default copyright laws apply, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work. If you're creating an open source project, we strongly encourage you to include an open source license.

This practically makes the template unusable.

Netlify CMS

I saw your example as a starter template on the Netlify
I wanted to clarify whether this template supports Netlify CMS, or whether it in plans?

elaborate new post section

• links to MDX and react component docs
• clarify instructions on making new post
• new post video

tt

Blog feed skips heading order

In the blog feed, the heading order skips from <h1> to <h3>. Need to change the <h3>'s to <h2>'s.

MyforestVT

[How to] User next/image with netlify?

HI, I am working on how can I get next/image working on netlify.
I have used NoN repo but it is depressed now and not working for me.
If you use a post with an example of image optimisation would be great.
I have tried https://github.com/jlengstorf/next-image-on-netlify example but no luck.

Source code for the wizard

I thought what you had done in the wizard with the theme selector was pretty cool, is the source code for that wizard somewhere to take a look at?

check fix for default theme

fix made to avoid undefined for the BLOG_THEME

nextjs-blog-theme/components/wizard/RecapBar.js

Line 125 in 51f6070

const blogTheme = data.theme || "default";

review fix to see how to best change.

Request for completeness

Request to add the following basic features:

archiving, paging, navigation, tagging , favicon, and searching

This will make it a usable blog template. Very much anticipated!

Unused "BLOG_FONT_PARAGRAPHS" variable

I have noticed that the variable BLOG_FONT_PARAGRAPHS is unused.
I think it should be replaced by BLOG_FONT_BODY as used in tailwind-preset.js

Sitemap

How to add sitemap.xml for search engines?

add oss donation link

• add text about what this even is
• add link https://oss-form.netlify.app/

User's system setting for dark theme not respected

Expected behavior: The blog initially use the user's system theme setting until the user changes it.

Actual behavior: The blog uses the light theme until the user manually changes it to the dark theme.

update env var section

• add section on where env vars live and where to change in Netlify
• add section on where env vars are located in index.js
• switch env var display to table
• add env var video

Possible to force dark mode?

Hello,

Is it possible to force dark mode as the only theme that can possibly be displayed? Not a defect by any means, I just don't want my site presented in light mode - ever.

Thanks