Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

npm init react-blog

Create a blog with create-react-app, MDX, and Navi.
Themed after Gatsby's blog starter and Dan Abramov's

Comes with:

📡 RSS feed generation
🏷️ Tagged posts
🚀 HTML files for each URL
📜 Smooth scrolling to hash links
🔥 Animated page loading transition
🔗 Easy code splitting with import()
Paginated index page

Getting started

The simplest way to get started is to use npm init:

npm init react-blog
cd react-blog
npm start

Alternatively, you can clone this repository yourself. If you take this approach, make sure to also run yarn install:

git clone
cd navi/examples/blog
yarn install
yarn start

To statically build your site and then start a local server for testing:

yarn build
yarn serve

How to...

To update the site's title, edit the metadata in src/siteMetadata.js.

To change the site's colors, edit the :root block in src/index.module.css.

To create a new post, add a new directory to src/pages/posts that is prefixed with the new post's publication date, then create a post.js file inside it:

export default {
  title: `Learn How To Build This Blog From Scratch`,
  tags: ['react', 'navi'],
  spoiler: "An online course with loads of live demos and exercises.",
  getContent: () => import('./document.mdx'),

To set the maximum number of posts on an index page,, set the indexPageSize property of the object exported by src/siteMetadata.js.

To modify the generated HTML, update the src/renderPageToString.js file.

To add non-blog pages, just use Navi.createPage(), Navi.createSwitch() and Navi.createRedirect(). For an example, check the about page at src/pages/about/index.js. If you create a page, remember to add it to the root switch at src/pages/index.js.

To brush up on React's fundamentals, check out the React (without the buzzwords) and Asynchronous JavaScript courses.