This site is powered by Gatsby, an open source static site generator built on top of React and GraphQL, two of the most popular modern web technologies. It is hosted on Netlify. For form submissions, I use Netlify's form handling. For styling, I use CSS Modules and SCSS. The source code is available on my GitHub.
I followed the official Gatsby tutorial to learn Gatsby. Having previous knowledge of React and GraphQL makes it a lot easier.
There are multiple plugins I use for various functionalities in this site. Most of these are official plugins supported by Gatsby project:
gatsby-source-filesystem: Sources data into your Gatsby application from your local filesystem.
gatsby-transformer-remark: Parses Markdown files using RemarkJS.
Update: I have moved entirely to MDX. This plugin is no longer used.
gatsby-plugin-react-helmet: Provides drop-in support for server rendering data added with React Helmet. With this plugin, attributes you add in their component, e.g. title, meta attributes, etc. will get added to the static HTML pages Gatsby builds.
gatsby-plugin-feed: Creates an RSS feed (or multiple feeds) for Gatsby sites.
gatsby-plugin-mdx: MDX lets you write JSX embedded inside markdown. You can write, for example, # heading for the little things and JSX for more advanced components.
gatsby-plugin-sass: Handles SCSS/Sass files. Requires node-sass.
gatsby-remark-prismjs: Adds syntax highlighting to code blocks in markdown files using Prism. Requires prismjs.
If you have further questions about how I implemented a particular feature on this site, hit me up!