A blog theme for Ghost as headless CMS.

Features

• Responsive.
• Dark theme based on media query.
• Support for posts and pages from Ghost CMS.
• Pre-fetches pages content using NextJS's next/link (even inside posts!).
• Subscription using Buttondown newsletters.

Up next

• Support for next/images inside posts.
• Tags.
• Author pages.
• Better test coverage.

Getting Started

This theme is built using NextJS and TailwindCSS. The whole website is statically rendered to provide optimal performance. This, along with edge network provides like Vercel or Netlify, can be leveraged to provide the best experience possible for a blog or website.

Additionally, there is provision to provide newsletter subscription using Buttondown.

Configuring build environment

To deploy this theme, start by setting up the environment:

• Configure the environment variables defined in the config.ts file. To get your content key, follow the Ghost guide.
• If you're using a Ghost installation which does not support the content API v4, you might also need to change the ghost.apiVersion to the appropriate value.

Configuring images

You might also need to configure next.config.js for image domains and such if you have images from domains other than Unsplash and your own ghost installation server.

const imageDomains = [
  process.env.GHOST_URL,
  'images.unsplash.com',
  // your domains here
];

If you're using Vercel or Netlify, you don't need to follow the steps below. They support NextJS out of the box.

Build the theme

To create a production build, simply punch in these commands:

npm install --only production
npm run build

Start the server

Finally, start the server. This would start listening on port 3000.

npm start

You might need to configure any reverse proxy or load balancer to forward to this port.

Contributing

Get started by running the server in development mode. This provides hot reloading of the app with every change. This would start listening on port 3000.

npm run dev

Running tests

The tests are present in the tests/ directory. They are divided into unit tests and integration tests. The tests follow the similar directory structure as the lib/components/ or lib/stores/ directories.

You can run the whole test suite or only unit or integration tests:

npm run test
npm run test-unit
npm run test-integration

License

MIT