Visit the Junior Dev Struggle Bus website for more information on the organzation, and opportunities to contribute to the community!
The Junior Dev Struggle Blog is live!! The Junior Dev Struggle Blog is a place to put helpful content for the Junior Dev Struggle Bus community to reference and grow better from.
The Tech Stack
The Junior Dev Struggle Blog is built in Gatsby, a free and open source static site generation framework based on React. When Gatsby “Builds”, it generates HTML files based on Markdown (.md) files. This keeps it simple for authors to write, collaborate and share posts, as the process is as simple as creating or updating a Markdown file.
The data on the site is stored via a file system instead of a database, and uses GraphQL.
Resources on the Tech Stack
The blog itself started as a clone of Kyle Mathews’ gatsby-starter-blog.
The Ten Thousand Foot View of How It Works
The Blog Itself
The Basics of the Gatsby Build
The starter template from which we cloned did some of the heavy lifting for us. I’m going to go over the starter stuff that we have in the repo currently - if you spin up a new Gatsby application (e.g.
gatsby new mynewapplication in your terminal), you’ll be missing some of this code. Below you’ll see the files and directories.
https://github.com/junior-dev-struggle-bus/junior-dev-struggle-blog/blob/master/gatsby-browser.js This file is used to import fonts and css.
https://github.com/junior-dev-struggle-bus/junior-dev-struggle-blog/blob/master/gatsby-config.js This is the main settings file of the application. In the screenshot below you can see the site’s metadata, which can be accessed via GraphQL from anywhere on the site. You can also see file directories for our blog posts and assets (think static images), which are then used in assembly.
https://github.com/junior-dev-struggle-bus/junior-dev-struggle-blog/blob/master/gatsby-node.js This is the assembly code that takes the files from the file path established using the ‘gatsby-source-filesystem’ plugin in the gatsby-config.js and uses them to build the site. More specifics on this in posts to come.
How to Write a Post
In the gatsby-config.js file, we’ve set the ‘/content/blog/’ directory to be our blog post repo, using the
Every new folder within the
/blog/ directory will be interpretted as a new blog post. Within each folder, there must be an
index.md file. the ‘index.md’ file is your all the blog post content lives.
The Markdown File
The markdown file has two sections - the header and the body. The metadata for the post lives in the header, and the actual post itself lives in the body. The head of this post’s .md life is below. For more information on how markdown syntax is built into HTML, see the Markdown Cheatsheet.
This post’s markdown file lives here