Documenting My AstroLearning, pt. 1

Intro and a Bit of History

There isn’t a better way to kickstart a personal development log as a public learning post! Since I started my career as a developer only six months ago, and I’m basically a ‘baby developer’ right now, I decided that would be pretty fun to document my steps on learning new things as I stumble along the way until I can walk and run, just like a toddler would do. From day one at my Web Development Bootcamp back in May/‘22, I was eager to have a personal website, to flex my tender and recently-formed coding muscles, ha.

The main obstacle was that when I finished the course, I only had a mild comprehension of vanilla JS, HTML and CSS. I even tried to create my own personal github.io page, but the way I’ve built it required so much work to add anything to it that the page simply fell down the procrastination well, never to be seen again.

Fast-forward three months, and I’m a little bit more seasoned: I’m learning React and I’m well on my way to building my first Fullstack Website (which there will be plenty to talk about in the future), so I decided retry building a personal page once more, although this time having learned my lesson and looking for a solution that would let me spend more time working content and less time working on the website itself.

When I was looking for solutions and asking recommendations, Astro got recommended to me, and it instantly caught my attention because it looked easy and pretty enough for a starting point. And sure enough, it was both of those things, but there were some kinks I had to iron out, and that’s why I have decided to make this post in the first place.

So, this Astro thing is neat and all, but how do I get one?

The easiest way to get an Astro page template is to go to Astro’s website and start from there. You could start building your page with the ‘Get Started’ section which, to my surprise, even had a pretty interactive tutorial. I tried that, but the theming wasn’t quite to my liking, so, before falling into another Design/Theming rabbit-hole, I decided to give the Themes a shot. I ended up picking up the AstroWind theme, which uses Tailwind. Creating an AstroWind clone is as easy as clicking on the big ‘Use This Template’ button on its github page. Then, you clone it to a repository of your own and get to work.

Astro in VSCode

Once I cloned your repository locally, I could start fiddling with it. AstroWind’s default template comes with three sections ‘Pages’, ‘Resources’, and ‘Blog’. Whereas the former two are simply ‘static’ pages, the latter is where this framework really starts to shine. To add a new post to my AstroWind blog, I just placed a ‘.md’ file to the blog folder, like this:

 project-root
 └── data 
     └── blog
         └── my-awesome-blog-post.md
         

And it just works! This is borderline magical for me, at the moment. No tags, no formatting, nothing. Just write and upload. And I did just that, and to my surprise, what I had when I clicked on blog link was… An error. l hopped on AstroWind’s Issues Github page and then I was able to solve it. So, with the error corrected, I could deploy it.

Deploying it to Vercel

This is pretty straightforward. You can easily deploy it using the Guide on its page, or go directly to Vercel and import the Github repository you’re using and let Vercel handle the rest. That’s what I did. The neat thing is that Vercel recognizes it as an Astro project automatically, so the process went through painlessly.

Linking a Custom Domain from Google Domains

At this point I was feeling pretty pumped about having my personal website up and running, so I decided to spend a little bit and assign a custom .dev domain to it. I chose to use Google Domains for it. I thought it would be a lot pricier to have a custom domain, but it ended up costing BRL50 for a whole year. After buying the domain I then realized I had no idea how to link it to my vercel deployment. I panicked a little bit, but decided to Google it, and found this awesome tutorial by khushal87 with a step-by-step guide to doing so.

Ending, for now

When I started this post I thought I wouldn’t have to much to talk about, but I ended up being way more talkative than I expected. It has been a while since I last wrote anything structured, so I’m pretty happy with my post length. There is a lot more I want to talk about, so expect to upload a second part pretty soon. Have a good one!