EDIT: This was published before the latest version of my blog. The tools and method I now use has changed.

I’m consiously leaving this post up because it’s helpful to me. Maybe it’ll be helpful to you too, if you choose to setup a similar blog. Find the how to post here.

How to…

To update this post, edit src/pages/posts/2019-01-05-welcome/document.mdx and save to reload.

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

To your bio and photo, edit the Bio component in src/components/Bio.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.

The lowdown

This template is designed with a JAMstack architecture. This means that the blog is statically rendered for the fastest possible load time, but once loaded, it turns into a single page app — ensuring navigation is silky smooth.

It follows a convention-over-configuation philosophy. It should work out of the box with minimal effort for most people’s needs, but can also be configured where required.

Finally, an effort has been made to prefer explicit code over concise code, and simplicity over complexity. Magic is avoided wherever possible, even if this means more code is required for the desired result.

The tools

• React renders the UI
• MDX converts markdown into React components
• Navi handles routing and creates static HTML files for each route
• create-react-app builds the app’s assets and provides the dev server