I built this blog using Astro, React, Material Symbols, Vanilla JavaScript, Tailwind CSS, Markdown, and MDX.
What tools i use in this blog?
Astro
Astro is a modern web framework that makes it easy to build static websites and Jamstack applications. It’s great for building blogs because it’s fast, lightweight, and easy to use.
React.js
React is a popular JavaScript library for building user interfaces. It’s great for building interactive components for your blog, like blog post previews, comment sections, and search bars.
Material Symbols
Material Symbols is a library of vector icons that can be used in your blog. It’s great for adding visual flair to your blog without having to worry about designing your own icons.
Vanilla JavaScript
Vanilla JavaScript is the basic form of JavaScript that doesn’t rely on any third-party libraries. It’s great for adding custom functionality to your blog that isn’t available in Astro or React.
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that makes it easy to style your blog. It’s great for building responsive and beautiful blogs without having to write a lot of CSS.
Markdown
Markdown is a lightweight markup language that’s great for writing blog posts. It’s easy to learn and use, and it can be easily converted to HTML.
MDX
MDX is an extension of Markdown that allows you to embed React components in your blog posts. This makes it easy to create interactive and dynamic blog posts.
Setting up development environment
Here are the steps I took to build this blog: I used VS Code as my code editor and Node.js as my development environment.
- Install Astro. I used the following command to install Astro:
npm install -g astro - Create a new Astro project. I used the following command to create a new Astro project:
astro new my-blog - Add React. I used the following command to add React to my Astro project:
npm install @astrojs/renderer-react - Add Material Symbols. I used the following command to add Material Symbols to my Astro project:
npm install @material/icons - Add Tailwind CSS. I used the following command to add Tailwind CSS to my Astro project:
npm install tailwindcss - Add Markdown and MDX. I used the following command to add Markdown and MDX to my Astro project:
npm install @astrojs/plugin-mdx
Start developing! Once I had all of my dependencies installed, I was ready to start developing my blog. I started by creating a few pages, like a home page, a blog post page, and a contact page. I also added some blog posts using Markdown and MDX. After that, once I was happy with my blog, i deploy the blog. I deployed it to Vercel app. Vercel is a great hosting service for static websites.
I hope this blog post was helpful for anyone who is thinking about building a blog with Astro, React, Material Symbols, Vanilla JavaScript, Tailwind CSS, Markdown, and MDX. If you have any questions, please feel free to leave a comment below.
Tips for you! If you’re not sure where to start, I recommend checking out the Astro documentation and the MDX documentation. They’re great resources for learning how to use Astro and MDX to build blogs.