Two years ago, when I went back into coding, I wanted to document my learning, have a few posts here and there. Something that I could look back at a few years later, and say "Wow, I've come a long way since then". Indeed, that's the case, and as a result of my learning, I'm now a full-stack Javascript developer. Which means that the Jekyll, that I've chosen at the time for its simplicity of use and deployment, is not really the go-to choice anymore as a blogging platform.
Well, there is, and it's called Gatsby. I can't even begin to explain the excitement I've felt when I've stumbled upon Gatsby's website. A static-site generator, where you can write components in React, that mixes static and dynamic content, with no routing hassle thanks to the opinionated routing structure, and where you can use GraphQL queries for pretty much everything as a result of a strong plugins system ? Wow. As a React lover, that was it : I had to migrate my Jekyll site to Gatsby.
As a background note, I've worked quite intensively with React these last months, may it be with create-react-app, or server-side rendered (SSR) React with Next.js. SSR has been really amazing performance-wise, and it brings a few nice benefits over client-side, such as better SEO, which is what you want for a blog, really. Gatsby then sounded like the perfect option for me, to build a blogging platform on.
Thankfully, Gatsby has support for Markdown files, that it can parse with the gatsby-transformer-remark plugin. So there was no action required there,even though I've switched to one folder per article, with the relevant expected naming, as it's a bit cleaner of a structure IMO.
Again, the theme I had at the time was a pre-made theme, which I had no reason to keep anymore, as I wanted to make my Gatsby app from scratch, styles included. As such, there was no fiddling needed with how to keep the theme, and making your own Gatsby theme also comes with the fact that you can really understand how it works.
In reality, there is no "making a theme" here, as you're building the blog platform (almost) entirely from scratch with React component. As such, you're not tied to a very opinionated app structure like with Jekyll. Here, you are free to model you app and styles however you want, may it be with styled-components, SASS (there is a plugin for it), or even good old CSS if that's your thing.
Gatsby exposes a very robust API to get data, may it be from markdown files, from a REST API.. All thanks to GraphQL queries. It's then really easy to get post(s) data in your components. For example, getting all the posts from Markdown file was done like this, in a named export :
query allNodesQuery {
allMarkdownRemark(sort:{fields:[frontmatter___date], order:DESC}) {
edges {
node {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
title
path
}
}
}
}
}It is then used in the default export, like this :
const IndexPage = ({data}) => {
const { allMarkdownRemark: posts } = data;
return (
<div>
{posts.edges.map(({node: post}) => (
<div>RENDER A POST HERE</div>
)
}
</div>This is the strength of Gatsby, and what made it really easy to start using.
There are plugin for the data layer (expose data from various sources availble to query through GraphQL), and even plugins can have their own plugins !
Take for example gatsby-transformer-remark responsible for the parsing of Markdown files:
It also has a plugin for the parsing of images in md files, as well as a plugin for parsing code blocks.
If you need a plugin for something, there is a good chance the community has done it already.