Initial blog post about setting up my blog using Astro and Netlify
Welcome everyone! This is my first blog post ever. I’ve chosen to go with Astro to build this blog/personal page. I’m also learning how to blog in public, which is a new thing for me. I’m excited to see where this goes!
After my great colleague Nikolay Krondev just recently published a post on his blog I got inspired to do something similar. I’ve been wanting to start blogging for a while, but I’ve never gotten around to it. I’ve also been wanting to learn more about Astro, so this is a great opportunity to do both at the same time.
The reason(s) to why I chose Astro is that I’ve been following the project for a while now, and I’ve been really impressed with what they’ve been doing. The way that they support writing in Markdown and using components from other frameworks is really cool. I’ve also wanted to test Vite for a while, and since it “isn’t” supported by Angular, this was a way for me to look into it. Also looking at the Astro showcase I was really impressed with what people have been able to do with it.
For a long time, I’ve just fiddled around with other frameworks than Angular (which I use on a daily basis at work), but I’ve never really gotten around to using them for anything serious. But using Astro enables me to use all of them in the same project, how cool is that?
Here is a little summary of what I’ve done so far and what I’m planning to do next. Hope to see you around!
Installing Astro: First, I created a new Astro project and set up my online accounts.
Making Pages: I then learned how to make pages by creating new .astro files and placing them in the src/pages/ folder.
Making Blog Posts: This is my first blog post! I now have Astro pages and Markdown posts!
Adding a blog index page: I created a blog index page that lists all my blog posts.
Adding a blog post layout: I created a blog post layout that I can use for all my blog posts.
Made a Solid JS component: The subheader on my blog posts is a Solid JS component. I made it using the Solid JS framework.
Dark/Light mode: I added a dark/light mode toggle to my blog. It’s really simple, but it works quite nicely since the page is so small and manageable.
Added about page: I added an about page to my blog (It’s not finished yet, but it’s there.)
Created a GitHub repository: I created a GitHub repository for my blog.
Netlify: I’m using Netlify, which builds and deploys the newest version of the main branch every time it detects new commits to it.
A lot of polishing: There’s a lot of polishing to do to make the blog look better. And since I created this page rather quick, there’s also some code refactoring to do.
UI framework: Look into using a UI framework like Tailwind, Bootstrap or something else.
Connect to Obsidian: I want to connect my blog to my Obsidian vault. I want to be able to write blog posts in Obsidian and have them automatically show up on my blog. I also want to be able to write blog posts on my blog and have them automatically show up in Obsidian.
Use other framework components: I want to use other framework components in my blog. I want to test out Svelte, Vue, React and Angular in Astro.
Finish About page: Clean up and finish the About page.
++ - There is a lot more to do, but I’ll leave it at that for now.