Blog

In this very short quick tip you'll learn how to set up code blocks in MDX and Gatsby that support line numbers and code highlighting. The cherry on top is that @loadable/component is used to lazy-load the code renderer prism-react-renderer. A preview can be found on codesandbox....

You can leverage Gatsby's GraphQL data layer to filter blog posts that are in the future. This "TODAY" variable allows you to e.g. build your site once a day and automatically have it published. A use case would be a podcast website where the author recorded the episode and already has written the d...

This quick tip will explain how you can have multiple authors for your blog posts. It's not limited to Markdown but the example Gatsby site will use that. You can apply the general technique also to your site that is powered by a CMS or other data source. See the example project on Codesandbox....

When you need to handle a lot of Netlify or CircleCI (or both) projects at the same time and want a clear, minimalist overview of those, your own status dashboard could come in handy. You can visit mine on status.lekoarts.de and see all my (public) repositories hosted on Netlify + some CircleCI test...

There are a lot of guides on the internet on how to add default values to your Gatsby schema, e.g. a draft entry in the frontmatter to hide posts that are still work-in-progress. However, all these solutions are kinda hacky, as they for example require you to use environment variables or even define...

Integrating syntax highlighting in Gatsby is fairly easy as solutions like gatsby-remark-prismjs or prism-react-renderer exist. When creating the code block in Markdown you specify the desired language (e.g. js or css) after the opening three backticks. It's a nice touch to display the specified lan...

Some time ago — or should I rather say two years — I created a remark plugin for Gatsby called gatsby-remark-design-system. It was my first deep-dive into remark and customizing the AST. It helped me a lot to understand Gatsby and remark plugins. It's purpose is to display components such as color s...

The Gatsby team recommends developing themes with Yarn & Yarn workspaces which can be intimidating to users who are not yet familiar with workspaces. If you're one of these people or never heard of Gatsby themes before I'd highly recommend visiting the official documentation on Gatsby or watching Ja...

Building Themes for Gatsby is fun and a great way to share projects with the Open Source community. In the past I mainly created starters which I added to the starter library on Gatsbyjs.org and called it a day. While working on my first starter to theme conversion I realized that I don't have a gre...

TypeScript is becoming more and more popular and after a certain training period I was also able to get enthusiastic about it. From this my newest Gatsby starter named "Jodie" was born. Besides TypeScript there is also an integration with Instagram and a well configurable design system....

For some time now I've been trying to publish quick tips about Gatsby on Twitter, because the community loves such short, useful tips. Accordingly, I had already created a Twitter moment back then - but why only content from me? On January 6th of this year I also called the community to share their ...

react-spring is my personal favorite for animations in React. It also offers a "Parallax" component - and that's exactly what I wanted to use for one of my Gatsby starters. The result was the starter "Cara", which uses this component together with SVGs and CSS animations. Many people have already us...

Over the past few years, podcasts have (re)become popular, allowing you to choose from an endless list of podcasts. There is something for every taste. Of course, I also like to listen to podcasts on the road, both in German and English, and want to share a small selection with you here. Feel free t...

Many who use Gatsby are not React professionals, or were not React professionals when they began using Gatsby. Some have used other frameworks before. Some knew JavaScript. Others still may have been entirely new to programming!...

Prismic is a hosted, proprietary Headless CMS (SaaS) with a web app for creating and publishing content. It's suitable for marketers, editors and developers as it has both a "Writing Room" and a fully-fledged API & content backend. Besides the usual advantages of a SaaS CMS (hosting, security, updat...

Netlify supports both incoming and outgoing webhooks for the communication with external services. Also Discord allows the usage of webhooks thus sending notifications to Discord is a no-brainer. You can send messages when the deploy was successful, someone send a message, a pull request was opened ...

Today I released my second "Starter" for the React based static site generator Gatsby! After my previous starter had a bright theme, this time I ventured into dark tones and put the focus on the photos. The Theme Emilia has everything a nice portfolio for photographers needs: A short info including ...

The user interface of Photoshop can be as overwhelming at the beginning as the number of available tutorials. The quality of the tutorials differs a lot – that's why these 10 tips are meant especially for beginners, but also for old hands with bad habits. If you internalize these basic principles, y...

Gatsby allows you to install so-called "starters" via CLI. These are, as the name suggests, preconfigured Gatsby projects that allow a quick start for your own project. Some starters offer a good basis for a design framework (e.g. Google Material Design), others do without styling and focus on funct...

After creating elitepvpers wallpaper for the smartphone, I reissued the old pictures in 4K and created four more in Cinema4D. The new pictures should be minimalistic and use the colors of elitepvpers. Now you can download 13 wallpapers for free!...

From my Proprius project I created some nice pictures, which I now want to make available as wallpapers again and again. At the beginning there are 7 pictures that belong to my favorites and can't be more different. All wallpapers are available in 4K resolution. While creating the wallpapers I could...

Gatsby is a static site generator for React.js that allows the user to create fast and dynamic websites. Gatsby focuses on mobile device optimization and automatically creates a PWA (Progressive Web App). The website is populated from various sources: Markdown, CMSs, APIs, databases and many more....