Proper websites, done properly

Part 1: Getting started

4 minute read time / 500 words

Let's kick off by getting the latest version of Astro installed and running.

Getting started

This guide assumes you've already got the expected basics in place:

  • A code editor. There's enough choice of powerful code editors out there. VS Code (free) is probably the obvious one, but I would highly recommend Sublime Text (paid) too.
  • A terminal emulator. If you're a Mac user, I would recommend iTerm. For Windows users, sorry but terminals are a bit poop. If you're on Windows 11 or newer, the built-in terminal is a bit better, and if you install PowerShell it'll be a bit better. Alternatively, you can use something like cmder.
  • Node/NPM installation. You'll need a recent version of Node/NPM installed to do almost anything frontend-y these days. And this is no exception.
  • A decent web browser. Any ever green browser is a decent choice. Firefox, Chrome, Edge (based on Chrome), Opera (based on Chrome), Vivaldi (based on Chrome), Arc (based on Chrome), Chromium (Chrome without the Google), or even Safari (macOS only) (much better in recent times).

Installation

First things first: open up a terminal and install the latest version of Astro into a folder of your choosing: 

npm create astro@latest

The first thing the installer will prompt for after installing the required packages is the directory for Astro to live in. If you initiated the installation in the folder you want Astro, just type . and press Enter.

Next you'll be asked "How would you like to start your new project?", just choose "Empty". When asked "Do you plan to write TypeScript", choose "No". Next you'll need to answer "Yes" to "Install dependencies?", make a decision whether or not to create a new GIT repository in the folder, and then just wait while npm does its thing.

If everything is successful, you should see a message like this: 

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

Now everything is ready for us to start building things. We've purposely chosen not to use TypeScript and not to install any example files so we can start from as empty a baseline as possible. There are lots of plugins (known as 'Integrations') and themes for Astro, but we'll come to some of that later on.

Let's get our development site running. In your terminal window we can run the development script: 

npm run dev
astro  v4.5.2 ready in 79 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

12:27:44 watching for file changes...

If you head on over to the URL it provides, you should see a page that simply says 'Astro' on it. Now we can start building out our site!