Setting up Astro

It seems appropriate that the first thing to document is actually setting up this website.

Local Development

Since there is a lot of new information and best practices to learn on setting up this website, the first thing I wanted to do was have a local development server to host the site. I use proxmox for a few services and it seemed like the best place to create this development environment.

Setup the Debian LXC

I decieded to start with a Debian LXC container for the dev environment. I used the Proxmox helper scripts, specifically the Debian LXC script to create the container. The container was created with the advanced install option and the following options:

  • 2 cpu cores
  • 512 MB RAM (eventually needed to update to 1024 MB)
  • 512 MB swap (bumped to 2048 MB after initial setup)
  • VLAN - Local DMZ vlan
  • DHCP IP address for IPv4 and IPv6 (IPv6 not running on network).
  • root password created
  • root ssh disabled
  • default settings for nesting, verbose, no hardware pass through

User Setup

After the container was created, use the Proxmox console access to login as the root user and create a new local user: adduser developer. This will be the user that is used for development and ssh login.

Create SSH keys on local machine

ssh-keygen -t ed25519

Edit ssh config on laptop for new webdevelopment login

Host webdev
   HostName ipaddress/hostname
   User developer
   IdentityFile %USERPROFILE%\.ssh\id_ed25519

Add SSH keys to server

Create the ssh folder and

developer@dev$ mkdir ~/.ssh && chmod 700 /.ssh && touch ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys

Get the public key info from local laptop cat %USERPROFILE%\.ssh\id_ed25519.pub Copy that key into the authorized_keys file on the server.

After getting the key setup, sshing into the box from the laptop will automatically login with the provided credentials ssh webdev

Development Environment

Nodejs in debian repo is only version 20, and we need version 22 or greater for astro, so an alternative install is needed. There is another way of updating the APT repo to support the nodejs upstream, but this was the first option from Gemini when asked about installing nodejs version 22

  • Make sure curl is installed
sudo apt update && sudo apt install -y curl

NOTE: It was at this point that I realized I forgot to add the new user to the sudo group so logging in to the container via Proxmox as root and adding the developer account to the sudo group needed to be done. usermod -aG sudo developer

  • Install NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash

NOTE: downloading a script and directly passing it to bash to run is a security nightmare and should not be done.

  • Reload shell profile to apply the changes:
source ~/.bashrc
  • Install Node.js 22 including npm
nvm install 22
  • Verify the installations:
node -v
npm -v

Now running node v22.22.3

Astro Project

Now that the enviornment is ready, the astro project folder can be created. The plan is to host the website on Cloudflare, so using the cloudflare project as the start with the blog template.

npm create cloudflare@latest -- my-blog --framework=astro --platform=pages

Once the folder and project are created, test the local setup running on the host IP so that it can be accessed from the laptop over the hosts internal IP port.

cd my-blog
npm run dev -- --host

Github storage

When looking into how to host the website and using Astro, Cloudflare was listed as a good option with good cost and utilized a git repo as the source to compile and host the project for you. Since that is the plan for this website, the next step is getting the git repo working.

Using ssh keys will make pushing new commits easier so that is the plan. I recently used ssh agent forwarding to use the ssh key that is on the laptop for access to the git repo when connected to the development container. That was not the way I set this system up, but is a route that I may transition to in the future if I have to redeploy the container or create another VM that will need git access.

Create ssh key

ssh-keygen -t ed25519 -C "me@someemaildomain.com"

  • Add a password if you like to secure the ssh key.
  • Set the filename if you want or use the default
Your identification has been saved in /home/developer/.ssh/id_ed25519
Your public key has been saved in /home/developer/.ssh/id_ed25519.pub

Add the key to Github.com

  • Login to your github.com account
  • Go to account settings
  • Click SSH and GPG keys
  • New SSH key
  • Get your public key contents cat ~/.ssh/id_ed25519.pub
  • Give the key a name ```
  • Key type Authentication Key
  • Paste the key contents ssh-ed25519 <KEY> me@someemaildomain.com
  • Add SSH key to save to your account

Setup local ssh agent

Make sure agent is running eval "$(ssh-agent -s)"

  • Addkey to agent ssh-add ~/.ssh/id_ed25519
  • Test connection to GitHub ssh -T git@github.com
  • Add fingerprint for GitHub
  • See success Hi <NAME>! You've successfully authenticated, but GitHub does not provide shell access.

Git repo

With the ssh key ready to go, lets create the repo and make the first commit.

Make sure your in the blog directory and initialize the git repo

cd ~/my-blog
git init
git checkout -b main

If you haven’t used git on the machine, you will need to set the config for your commits or it won’t make any.

git config user.email "me@someemaildomain.com"
git config user.name "Me"

You can add --global after config if this is on a machine where multiple git repos will be used by the same account so you only have to do it once.

On github.com, create a New repository. I created mine as private with a basic name like my_blog so it will be easy to know what it is. Do not initialize any items into the repo such as .gitignore or a licence, all of the items will be in the blog folder on the machine already.

Now that the repo exists add the remote url, make the first commit, and push.

git remote add origin git@github.com:<USER>/my_blog.git
git add .
git commit -m "Initial astro project creation"
git push -u origin main

There it is, a basic webserver running on a local LXC development container with the source ‘code’ stored in GitHub both as a backup and as the source for our Cloudflare page.

Website Changes

Now that the initial commit is done, I didn’t want to just have the website first show up on the internet as the example template, so I spent the next bit of time removing all of the placeholder blogs and pages and cleaning up things such as the social links. Since we already have the starter project in git, we can delete any of the files without worrying about losing them.

Cloudflare Pages

This step is next.