I wanted a blog and portfolio to keep a record of what I was learning and what I was creating. Somewhere to keep track of my skills and how I was progressing didn’t seem like a terrible idea. Now I just had to build it.
The Tech Stack
I knew I wanted a blog which wasn’t going to be a hassle to maintain, I enjoy working with wordpress but it was going to be overkill for what I wanted to do here, so I decided that I’d use a static site generator, I picked Astro.
I’d used Astro a little before, so there wasn’t a huge learning curve, and as it outputs static HTML I don’t need a database on my hosting, so it keeps the hassle of backups and worrying about security to a minimum.
Alongside Astro I knew I’d need some more dynamic elements, Astro allows the use of other javascript frameworks within it’s own components, I decided to use Vue.js to enhance the blog.
The full stack:
Astro 
Vue 
Tailwind 
Markdown X 
Frontmatter CMS Content Management
I’m using a CMS plugin for VS Code called Front Matter CMS. This is a perfect solution for a solo content author, I don’t need multiple people to access the content so it’s all written in Markdown or MDX locally.
All my posts are written in some variety of Markdown. If I’m writing a simple text blog then I’ll use a Markdown file, but if I need to include some custom functionality then I can use a MDX file, which allows the importing and use of components, like the tech stack grid above!
This is especially important if I’m demonstrating a concept which requires some form of interactive widget in the page. Standard Markdown is ideal for simple applications, but It’s not capable of including anything dynamic.
Styling
I’m using the Tailwind CSS framework to provide the styling for the blog. It has some shortcomings, but I find that it makes development much faster. I like how the resets, fonts, and browser quirks are mostly dealt with out of the box for you. Of course, if I need to augment it with standard CSS then I can.
Interactive components
If i need to create something interactive, I’ll use my reactive framework of choice which is Vue.js. I’m using this at home and at work, which sometimes makes developing feel a but busman’s holiday like, but I don’t really mind. It makes things quite familiar and I get to boost my skills whenever I’m working.
Vue complements Astro quite well. I can import Vue components into Astro and retain the functionality I need, including the refs, computed properties and all the goodness I’m used to in a full Vue app.
Bringing it all together
I’ve found working with this tech pretty easy, and I think it’s given some great results. There’s always room for me to find new and exciting stuff to play with but I’m very happy with how the blog has turned out.