It’s done. vbesse.com is online.

Launching your own technical blog is often a task you keep putting off. You get lost choosing technologies, hesitating between the simplicity of WordPress and the flexibility of custom code. After considering several solutions, I finally opted for a modern, high-performance, and free stack.

Here is the story of how this site was built.

1. Choosing the Weapons: Astro vs. The Rest of the World

Initially, I had a domain name and a vague idea. I looked into Hugo, a very popular static site generator. It’s powerful, but the learning curve for the Go templating language felt a bit steep to get started quickly.

I analyzed the current alternatives:

  • Jekyll: The historical standard, but starting to age (Ruby).
  • Eleventy (11ty): Highly flexible, but requires a lot of initial configuration.
  • Astro: The rising challenger.

Why did Astro win?

Astro has a philosophy that won me over: “Zero JavaScript by default”. Unlike frameworks like Next.js that send a lot of code to the browser, Astro generates pure HTML. The result: the site is blazing fast. Moreover, the component-based architecture (.astro) is intuitive and allows native Markdown integration for writing articles.

2. Hosting: The Power of Vercel

To host the site, I didn’t want to manage an FTP server or pay a monthly subscription for a personal project. I hesitated with GitHub Pages, but I chose Vercel.

The benefits are immediate:

  • Git Deployment: I push my code to GitHub, and Vercel updates the site automatically in 30 seconds.
  • Performance: The site is distributed over a global CDN (Edge Network).
  • Cost: It is completely free for personal use.

3. Construction: From Code to Design

Development was done on my MacBook Pro, directly in Visual Studio Code.

The Architecture

I opted for a minimalist structure:

  • src/layouts/Layout.astro: The site’s skeleton (Header, SEO, Footer).
  • src/pages/: Static pages (Home, About).
  • src/pages/blog/: My Markdown articles.

The Design (Custom-made)

Rather than using a pre-made theme, I customized the CSS to have something clean and readable.

  • Font: Using the system stack (San Francisco on Mac) and the Inter font for a crisp rendering.
  • Colors: A Dark/Light palette with an “Electric Blue” (#0070f3) accent color to make the links pop.
  • Navigation: A Flexbox menu that neatly separates the logo from the navigation links.
/* An example of the global CSS simplicity */
:root {
  --accent-color: #0070f3;
  --text-color: #1a1a1a;
  --bg-color: #ffffff;
}

4. SEO: Not Being Invisible

A beautiful site is useless if no one can find it. I configured the Layout.astro file to dynamically handle:

  1. Meta tags: Unique title and description for each page.
  2. Open Graph: So that shares on LinkedIn or Twitter display a nice “Card” with an image.
  3. Sitemap: Automatically generated for Google.

5. What’s Next?

This blog is now my playground. The publishing workflow is ideal: I write in Markdown, I git push, and it’s online.

If you are reading this, it means the whole pipeline works perfectly. See you soon for future technical articles!