Working with Astro

So after finishing The Astro tutorial a few weeks ago (Note: that was August 2023, Astro changed since), I forgot a lot. While I wait for a Layout for another project, I wanted to host a page about me - so here we go. (NOTE 05-31-2024: that layout never came, the project is paused and subsided with a Nextcloud instance for now)

Setup Astro

Install NodeJS

Install Node on the Dev System: https://nodejs.org/en/download

Install NPM

Install npm and astro

npm install -g npm
npm install astro
node -v
npm -v

currently required is v18.14.1 or higher

Start dev server

I use Visual Studio Code to write this page, but the built in terminal is not the best option to run the dev server. As I am currently only working on my gaming PC which runs Windows, I am using Ubuntu via WSL to work.

cd ./<working dir>
CHOKIDAR_USEPOLLING=true npm start

This way, I can ensure that the dev server is actually updating, when I save a page in my editor. I could also put it into my env but in the end it’s just one command. I use the Astrofy Theme, which using the default npm port instead of Astros 4321: http://localhost:3000/

Theme setup

Out of the Box the theme is very nice, but it’s branded by Manuel Ernesto.

Replacing Favicon

While a .svg is pretty nice, it’s not fitting my page. About a decade ago I designed a Logo for my gaming Content, which is fairly outdated by all means. So I took the easy way out and went for a favicon generator - using a palleted generated on coolors. Breaking it down to 3 colors, I prefer the combination of #272838, #CCCCCC and #996D62.

The page provides us with all the different scaled pictures and a few lines of code to provide the best fit for each browser.

(Update 05-31-2024: I updated the favicon once again to fit my current social media Icon (designed and provided by MakiSushi_ii))

Replacing Page stub representations

When I started using Vercel (see this post) and sharing the first previews with friends to get some feedback on specific points, I noticed the preview image and description are still the ones from the Theme. To change this, I copied the preview Image provided by Vercel and replaced /public/social_img.png. To update the description and title, we need to modify the contents /src/config.ts