Welcome to the first post on my new site! 👋
I guess I will use this post to tell a bit about how this site was made.
You can find the source code in its Github repo. 🎉

💿 Technologies

The site is build using Next.js and Tailwindcss. Posts are written as Markdown files, which are parsed by next-mdx-remote and gray-matter.

Gray matter is used to get metadata from the top of the file:

---
 title: The first post on my new site
 excerpt: A short post about how I made this site.
 date: 2021-03-23T12:00:00.000Z
 tags: ["React", "Typescript", "Next.js"]
---

Welcome to the first post on my new site! 👋
I guess I will use this post to tell a bit about how this site was made.

### Technologies

The main content of the file is parsed using next-md-remote, and then styled using @tailwindcss/typography. To make the posts work with dark mode I used nightwind.

🌐 Deployment

The page is deployed to Github Pages using a Github Action that builds a static version of the site and commits the /out dir to a separate branch in the repository.

📖 Resources

To get started I watched How To Build A Blog With Next.js And Tailwind by Harry Wolff on Youtube.

From the beginning, I changed the project to Typescript by following the steps from the next.js documentation.

Tailwindcss has documentation on how to install Tailwind in a Next.js project on their site.

For Icons, I use React Icons.

Dark mode is accomplished with Tailwinds default dark: prefix, and nightwind. The darkmode toggle was heavely inspired (copied) from TailwindComponents.com.

To figure out the Github Pages stuff I found this article helpful.

To make Github Pages work you need to name the repository {username}.github.io, or set up a custom domain. - More info can be found on this Github issue.

✔️ The End

Thanks for reading my first post!
I hope you found it interesting and/or helpful 😊