Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
public
src
.gitignore
README.md
navi.config.js
package.json
yarn.lock

README.md

npm init react-blog

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

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 git@github.com:frontarm/navi.git
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.