A lot of people, I included, are using Gatsby to build their own blogs. One of the things I wanted to add to my blog was a table of contents (ToC) 📝. A ToC will show you all the headings of an article and when you click on a heading it’ll take you directly to that heading. It’s a nice little feature to have on your blog, which makes it easier for users to navigate and find the information they are looking for.
So before we get started you can find the source code here. …
In this article, we will briefly go over what DNS (domain name system) is and explain how it is used in conjunction with Docker 🐳.
You can think of DNS like a phonebook, except instead of people’s name and phone numbers, it stores domains names and IP addresses (this can be either IPv4 or IPv6). Where a domain name is used to identify resources i.e.
google.com is a domain name. This is how DNS works:
You can manually send a DNS request (and get a response) using the
dig command. …
In this article, we will go over how you use
proxychains to proxy our traffic through a socks proxy.
Recently like everyone else, I’ve been working from home a lot more often. This means to access resources at work I need to use a VPN. However, to access some resources, such as production servers from my local machine, I need to use a SOCKS5 proxy. Without using a SOCKS proxy, I would need to do something shown in the diagram below.
First, I would need to SSH onto an intermediate server (
Server A), which I have connectivity to from my local machine. Then on that intermediate server, I would need to SSH onto the production server. So this intermediate server needs to have connectivity to the
Server B as well. As you can see
Server B is behind a firewall, in this example, the firewall will only allow traffic from
Server A to ingress to
Server B. …
In this article, we will go over how you can manage your markdown blog posts from another git repository (repo). Separate to the git repository for your Gatsby site. This is the same process that I use to manage this repo.
So what this entails is the source code for my Gatsby site is in a repo called
portfolio-site on Gitlab. Then I have another repo for all of the blog posts (in markdown) called
In this article, we will look at how we can add an “edit post” button, to your Gatsby blog. When this button is clicked it will take the user to your markdown file, on github/gitlab that was used to generate the blog post they are currently viewing.
Before we add the edit button to a Gatsby blog, let’s set up a simple Gatsby site using the
Gatsby blog starter. You can skip this step and add the button to an existing site.
npm -g install gatsby-cli
gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog
If you don’t use the start above, you will need to make sure you have the
gatsby-source-filesystem plugin installed. To import our markdown files. Your
In this article, we will go over how we can use the
gitlab-auto-mr CLI script I wrote to help automate your Gitlab workflow. This is a very simple script you can use with Gitlab which will auto-create merge requests (MRs) every time you create a new branch on a project in Gitlab.
Feel free to skip this section if you are already familar with feature branch, skip to the
Gitlab Auto MRsection
Before I introduce what the script does and how we use it, let’s go over why you might need to use it. Say you’re working on a project with multiple other people and you want to make sure you keep your master/production branch clean. One way to do that is everyone uses “feature” branches. So for every feature being added to the project you create a new short-lived branch off of the master branch. Then typically one developer will work on a feature and make a merge request when ready to get the branch merged into the main master branch, to integrate their work with everyone else’s. …
Let’s take a look at how we can add offline local search 🔍 to a Gatsby blog. There are two main types of search we can use an offline search like
elasticlunr and external API search engines like
ElasticSearch. These are typically more scalable but also more expensive.
You can find more info here.
In this article, I will show you how to add offline search to your Gatsby blog using
elasticlunr. This means your website needs to be indexed locally and will increase the bundle size as this index needs to be loaded by the client but with the scale and size of personal blogs (100s, not 1000s of blog post) this shouldn't make a massive difference. …
TailwindCSS allows us to use pre-defined classes instead of defining our CSS styles. In this article, we will go over how we can use Custom properties (sometimes referred to as CSS variables or cascading variables) with TailwindCSS.
First, follow the installation guide found here. This will show you how you can add TailwindCSS to your current project. For part 2 I will assume you called your CSS file
global.css. This is the file that contains
@tailwind base; etc.
First, we need to edit our TailwindCSS file so it looks something like this:
This article (sort of) continues on from my previous article How to use Storybooks, Gatsby, Babel, Tailwind, Typescript together. In this article, we will document our React components using Storybook with MDX.
Just to make sure everyone’s on the same page let’s follow the same steps to setup Storybook as we had in the last article. We will use the latest versions of Storybook (v6) so we can access the latest features. …
Cover image from, World Vector Logo
Recently I started to re-design my website, I decided to use this as an opportunity to learn some new technologies such as Gatsby, Tailwind. I also decided to try using Storybook. For this said project I used MDX to create my Storybook stories. In this article, I will show you how you can create Storybooks stories, for a Gatsby project with TailwindCSS, Typescript using MDX.
This article assumes you already familiar with Typescript, TailwindCSS and Gatsby. …