Houston, We Have a Blog

4 minutes of your time

It’s not easy to put yourself out there on the internet, but here I am. I can’t count how many times I’ve thought about starting a blog, only to stop because, what on earth should I write about?

This time, though, I have a plan. My first post will be all about building this blog, the why, the how, and the what.

Why

Mostly, it’s for me, because building things is fun and I need stuff to put on my website. Plus, when I’m learning new tech (new JavaScript frameworks seem to pop up every week!), I think the best way to really understand it is to write it down and think it through.

And when you put that on a blog, exposed to every developer in the world, you’re probably going to think more than twice about what you actually write (at least, I know I do), and that improves the quality of your learning.

So, I have a blog now (spoiler alert), and I have ideas for extending it, but first, let’s talk about how I built it.

How

I’m lazy (aren’t we all?), so when I decided to build a blog, I wanted something easy to set up but flexible enough to work with any framework I might want to use. Then I remembered a really great blog tutorial by the amazing Astro team.

The key selling points for me were:

But what about the looks?

Choosing CSS framework is hard, there are a lot of options like Bootstrap , tailwindcss , Styled Components and the list goes on and on…

Then I stumbled across Pico

“A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.”

Pico Team

Writing semantic HTML makes a website look great across all viewports. Don’t get me wrong, I’d happily style everything from scratch; there’s just one tiny problem: time.

I read through the documentation (like any normal person would) and picked up a lot about using semantic HTML elements like <hgroup>, <small> and even <article>. Pico encourages you to use semantic HTML, which helps make the website look good by default.

So, I was sold, well, kind of. I mean, I like trying new things, and their usage scenarios convinced me Pico was a good choice when building a blog.

The goal? To have Pico guide me into building a solid semantic foundation so that, down the line, I can add or swap out components with my own styling (just to make it a bit more personal—no offense, Pico). But in the beginning the blog would not look like trash.

Putting it all together

I just followed the blog tutorial to get everything setup quickly (obviously changed texts and didn’t keep the tutorial posts).

After completing the tutorial, I was ready to sprinkle some CSS,

I installed Pico with npm

npm install @picocss/pico

I want to use sass with Pico, so obviously I need to install sass as well

npm install sass

After that I created a global.scss file

└── src
    └── styles
        └── global.scss

Added the following to the file to be able to use Pico with the jade theme

@use "@picocss/pico/scss/pico" with (
  $theme-color: "jade"
);

Lastly I needed to import global.scss from the BaseLayout layout that is used on every page

└── src
    ├── components
    ├── layouts
    │   └── BaseLayout.astro

---
import "../styles/global.scss";
---
// rest of the layout markup

And thats how to setup Pico with Astro (hopefully you see a nice looking blog post)

What (now?)

I have a blog and at least one post (which is at least more than no blog and no posts).

I’m hoping to add more features, which, if all goes well, will spark some interesting topics to share. My only enemy? Time.

Some ideas I have in mind:

Ultimately, this blog is my space to learn and, hopefully, to share with anyone interested. So please, feel free to reach out on any of my social media channels (they’re down in the footer) and say hi!

All the best, Kim

Back to posts