Skip to content
IT // Adventures

Migration to the Astro Framework #1: Basics

Migrating my website from Hugo to Astro

2 min read
Contents

Overview

In this article series I describe the migration of my personal blog from Hugo to Astro:

  1. Part: Basics, GitHub Repository
  2. Part: Azure Static Web App and Azure DNS
  3. Part: Astro
  4. Part: Tailwind CSS

Motivation

My “IT adventures” website has been running for a few years as a “static web site” in an Azure storage account with Azure Front Door and Edgio CDN. Back then I chose Hugo as the generator because it brought most of the features I needed ‘out of the box’.

Since Edgio is being retired due to Verizon’s bankruptcy, I’m taking the opportunity to modernize my website and learn a few new technologies:

Dev environment Setup

As my editor I use Visual Studio Code and have installed the following extensions:

  • Astro
  • GitHub Actions
  • HashiCorp Terraform
  • MDX
  • Prettier - Code formatter
  • Tailwind CSS IntelliSense

We also need a Git client and Node.js.

Git and Node setup

  • First we create a new repository on GitHub, either via the GitHub GUI or directly via a GET request (https://github.com/new?name=astro-site&visibility=private&description=A+personal+astro+site&owner=@me). More details in the official GitHub documentation under Creating a new repository.
  • Then we clone the repo into our local dev environment with git clone https://github.com/YOUR-USERNAME/astro-site.
  • Then we change into the directory of the repository we just cloned and initialize Node.js with npm init --yes.
  • Finally, we install Astro by running npm install astro.

It is also advisable to create a .gitignore file for Node/Astro with the following content:

dist/
.astro/
node_modules/
npm-debug.log*

In addition, it makes development with Astro easier to create the corresponding scripts in the package.json file:

"scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
}

Next article

Continue with Migration to the Astro Framework Part 2 for the setup of the Azure resources.