You might see this post as my first public musing in a while. Despite not having a consistent blogging pattern, I'm fairly active day-to-day. Sadly, I find that most developers' content isn't very discoverable these days!
Welcome to my experiment!
note: This post was created as over the course of developing this blog, so it's mostly just to test out markdown while sharing a little. I'll put up a more detailed rundown of how I have everything wired up later on.
Over the last few years, I've been wishing for a way to publish my lessons and observations without having to compile them into full blog posts every time. Rather than relying on a single source, I want to enable a multitude of different sources to be leveraged for blog content. Regardless of where that content comes from though, I want it to show up in a unified flow. Then, not only can I tap into temporal sources like markdown files and authored posts in the Blogger interface, but also ephemeral ones like twitter, github and anything else that strikes my fancy. This can help me avoid duplicating effort and extract benefit out of putting more detail into all the regular writing I already do.
How is it being done?
It may be no surprise these days as it's quite popular, but I've been using and recommending Gatsby for certain types of content-rich static web projects. Something I find funny because I'm not at all a fan of GraphQL! Gatsby however makes the most compelling case for it that I've seen. Gatsby lets me transform and normalize multiple data sources into my own common data structures. After that, it's just a simple case of using React and all its strengths to structure templates and partials to spit out pages.
Gatsby manages to be a really intriguing and rich ecosystem with lots of community contributed plugins. For example now I can have code blocks with syntax highlighting:
public class Testing
{
public void Main()
{
}
}
// With support for all my favourite languages!
export type Something<Whatever = any> = {
one: 1,
two: 2,
something: "something",
whatever: Whatever,
};
export const { Consumer: ControlConsumer, Provider: ControlProvider } = React.createContext<boolean>(false);
As someone who spends a lot of time helping people with their CI and CD, I'd like this blog to always double as an example of some desirable practices not just for javascript projects, but for any kind of project. Beyond Gatsby and React, I'm using some usual suspects to make working on this site a snap: TypeScript, eslint (prettier makes code ugly and dense), Material UI, moment, lodash and so on... For builds, I use github actions and GitVersion to automate version incrementing, followed by yarn to do the nodejs specifics of Gatsby. For deployment, I use the same github action with some branch filtered tasks which upload everything to a free-tier Azure blob storage container, all of which is fronted by cloudflare.
I think there are some interesting details in the build and deployment, so I'm excited to go into more detail in a future post.