Using Gatsby for static site generation. Eventually I'll get closer to a more official JAMStack application. I've been following the Serverless and JAMStack ecosystem for awhile now. I'm digging the work the Gatsby team is producing (from afar) and the people they are hiring. Same goes for Netlify (where this site is hosted). I figured it's time to get my hands dirty.
Currently all page content is static markup in JSX for gatsby pages so it's a bit over-engineered at the moment. I plan to employ MDX in the future, headless CMS, etc. There are no images, no navigation, no analytics, etc. I am using basic CSS in JS which is powered in Gatbsy via Webpack using the CSS-loader. There is no CSS reset at this point.
I messed around earlier with a style cache issue I ran into when developing locally and documented the issue github. I'm using the gatsby-starter-default which is initiated via `gatsby new [sitename]` and it includes the Layout component when initialized. However, with my hacking around locally I found what is possibly a bug. I'm trying to start fresh so I wanted to remove some of the boilerplate I found with gatsby-starter-default. This is probably a "it's me, not you" issue but I thought I'd log and share the issue on github in case anyone else ran into it.
At the moment I feel like inlining my link rel="stylesheet" tag as a child node for rendering Google Fonts is a hack. Let's see if we can fix that. I discovered "how do I add google fonts to a gatsby site" which introduced me to leveraging React Helmet which comes with `gatsby-default-starter`. I'm not sure where Typography.js fits in here but I do know they reference it in the Gatsby docs. So, is it the "official" way to implement a font-stack in Gatsby? Not sure. My initial concern is resolved with the React-Helmet solution but I think there's room for improvement with my solution, so I'll add this to the roadmap and revisit later. I'm also not sure I want to rely on Google Web Fonts via CDN. I want to look at optimizing the rendering, and considering the cost/benefit of web font vs system font.
Disabled gatsby-plugin-manifest from the gatsby-config.js file because I don't have a favicon ready and I don't want browsers to cache the gatysby logo for my site's favicon. I believe there's a cache bust setting within this plugin and that may help resolve my concern but it's not worth the effort at this time to find out.
Typography? Basic start here. Header web font is Work Sans. Body text is set with a collection of possible fonts based on your operating system. It's worth noting that Google Web Fonts now supports `display:swap` which is rad.
Excited to get started messing around. Having fun thanks to Gatsby and Netlify.
Have feedback? Contact my on Twitter