It’s this time of the year... The weather gets colder, the daylight fades away and rainy days take over. I’m laying in my bed taking a glimpse out the window and think about what to do today.
🚲 Take a ride through the Heide? Probably too muddy.
✍ Start blogging? This will end like the last time and never get finished.
😴 Sleep for another hour? Yeah, great idea.
Guess what? I settled on the blogging endeavor🙏.
First Steps First
Having quite a bit of experience with VueJs and its ecosystem it was time to play around with Gridsome as I haven't used it before.
The setup process was a pleasure and reading the documentation left no unanswered questions. The feature set of Gridsome provided through its big list of plugins fulfilled all the ideas I had in mind for the blog.
So at first glance, there was nothing to hold me back from using Gridsome as a foundation for my blogging journey.
Before going too deep into development it was time to lay some groundwork on choosing a CMS and decide how the deployment process should look like. Asking those questions beforehand leaves my mind open during development and ensures that I know exactly what is left to do before the blog is ready for its first release.
Headless CMS vs. Static Files
When looking at the headless CMS market there are a lot of options to choose from.
I already used Sanity.io, Contentful, and DatoCMS before. They provide a great editing experience and are simple to integrate thanks to their GraphQL APIs.
On the other hand and in complete contrast to a feature stacked headless CMS there is content management via static markdown files.
During the summer I'm outdoors a lot, cycling and traveling on 2 wheels. I always take notes during my travels but until now never published them. Taking a look at my small notebooks from the past years the content is pretty simple and consists of headings, paragraphs, a quote here and there, references to visited places, weather, photos, and videos.
Considering development related articles this collection of content types would grow by adding code blocks, code sandboxes and inline rendered Vue components.
As I have no plans to publish these content types to different platforms or content streams all of that does not require a CMS. Markdown should be just fine.
Markdown would also support my note-taking when I'm outdoors since I can set up my front matter and heading levels directly on paper.
When browsing the Gridsome plugin listing I quickly found @gridsome/vue-remark, a plugin that lets you organize your complete content repository via Markdown files. It also supports inlined VueJS components and therefore fulfills all of the above requirements.
Hosting on Netlify or Zeit vs. Linode
Netlify and Zeit are the most popular static file hosting services right now. They get your static site up and running in no time and are free of charge for their basic tier.
I personally only have experience with Netlify and can recommend it, but reading other dev opinions I will try out Zeit soon.
Since I’m not on a tight budget with my projects I can take the opportunity to use one of my spare Linodes to host the website. On a second glance, this choice also helps to make the website GDPR compliant because I am in control of the stored and logged user data.
The Gridsome build process creates a static build of the whole website. The resulting files will not be pushed to the git repository but will only be created at the time of release and deployed to the Linode instance.
Continuous Deployment via GitHub Actions
Because I'm a fan of automation I will setup GitHub actions for the staging and production environments covering the build and deployment process of the staging branch and all published tags.
The GitHub action will check out the staging branch or a release tag, install all npm dependencies, run all tests and create a static build of the website. If all tests pass and the build process is successful then the next job will deploy the static files to my Linode.
Since a static website has no shared dependencies between different deployments it’s as easy as keeping a releases folder that contains the 5 latest releases and a current folder that is a symbolic link to the latest release. The document root of the virtual host will point to the current folder and always serve the most recent content. This way I can easily roll back to an older release in case of an emergency.
Sources for a Broader Readership
We all know what the term “going viral” means. For something to go viral, it’s inevitable to be posted on social media platforms like Twitter, Instagram or Facebook. In addition to these, the dev space brings some more platforms to the table, like Medium, dev.to, Hacker News, Hacker Noon, Reddit and probably a dozen more.
My goal is not to create content that goes viral, but I want to at least gain a steady readership that makes my time spent on articles worthwhile.
Keeping this in mind, I will have to create a shell script to determine the latest blog post at release time and store its URL, title, publishing date and description in a separate JSON file. This will allow me to automate a publishing process to a subset of the mentioned platforms and in turn, promote my content on other possible traffic sources.
Where it all Began
My blogging journey did not begin just now, but back in 2012 when I registered the domain frankfoerster.com.
The initial enthusiasm resulted in a lot of time spent on a custom blogging platform and more than 20 prepared articles that have never seen the light of public IP.
I was working at a startup back then that consumed most of my time, so personal projects like my blog went to the end of the line.
Over the past years, I stumbled upon my original blog every now and then, took some time to start a new minimalistic layout and gathered ideas.
On November 19th, 2019 I finally wrote the intro to this blog post and created the git repository to get started all over again.
Now, 26 days later on December 15th, 2019 I am ready to push the button create the first release.
Let’s see how this journey turns out and what adventures lay ahead.
Final Notes
Yay, you made it down here 😀.
In a follow-up article, I will dive into the development details of frankfoerster.com, explain my choice of Gridsome plugins and provide an insight into plugin customization.
To keep posted on new content, you can sign up for updates using the form below or subscribe to the RSS Feed.
