Creating a personal blog is something that I have been thinking about for some time. This is where my journey begins: on the requirements of having a personal website in modern times.
It can’t be easier to have a personal webpage these days. However, there can be some fallacies regarding content ownership, privacy, security and availability. My solution to this is simple, do a list of non-withdrawable requirements:
- Preserve Ownership of Content - Thousands of people work hard every day to create content on “free” platforms which quietly take copyrights or get royalty free usage of the content. This is a matter I see very often discarded across the web. It is important to raise awareness to this problem and to always read the terms and conditions when dealing with “free” platforms.
- Open Source - I don’t want any paid or subscription anchors.
- Simple Architecture - A set of static webpages is more than enough. It is overkilling to pay for a backend server.
- Fast Portability - Disaster happens everywhere, every time, and in seconds. I want to focus on putting my thoughts on (digital) paper, not spending hours migrating my page.
- Minimalist - This also reflects my way of thinking: the main focus should be on the reading material. I don’t need, or want, any fancy design or functionality. Any perceived need will occur naturally.
- Separate Content - My content should be as separate as possible from the technology. New requirements may arise and make my current website unviable. However, content must be easily ported.
My searching to fulfill these requirements led me to a interesting technology match. Gatsby is an opensource static site generator built on top of React and GraphQL. What sold me was the fast learning curve, great documentation and a dead simple blog website template which I used as backbone. The easy to use plugin functionalities made possible to create all my pages and blog posts in a separated content way by simply adding folders with markdown files.
Since I never worked with GraphQL I thought of a practical implementation of a “pinned posts” section to get the hang of it. The best way to accomplish this according to my view of “separated content” was to add a boolean attribute pinned to markdown file metadata and let graphQL do its magic.
---
title: The title of a post
(...)
pinned: true
(..)
description: The description of a post
---The query follows next:
allPinnedPosts: allMarkdownRemark(
limit: 5
filter: { frontmatter: { layout: { eq: "post" }, draft: { ne: true }, pinned: { eq: true}} }
sort: { order: DESC, fields: [frontmatter___date] }
) {
edges {
node {
fields {
slug
categorySlug
}
frontmatter {
title
date
category
description
}
}
}
}As you can see, I implemented the retrieval logic to get “the latest 5 posts which are not a draft and are pinned”. With the query retrieving the results, I created a simple component to list those posts and got it rendered at the sidebar.
Exactly want I wanted: low implementation time to focus on writing content. You can see the result inside the sidebar on the main page.
This was my first post. Now I just need to keep writing and hopefully make my contributions a habit. I hope you enjoyed reading the same way I enjoyed writing.