in the beginning...

The Preamble

I’d been planning to build a personal site for a while now and had a few requirements that were important to me; I needed the framework to be: an easy and intuitive framework, quick to setup and maintain, cutting edge, somewhat popular or at least well-documented and supported.

I inherited a Drupal project that had some parts built on VueJS v2, and I quickly appreciated its intuitiveness. And while it had good support (modules, documentation, adaption), and the learning curve would have been somewhat softer, I didn’t think it would have been a good choice for my use case. I started experimenting with VueJS v3 (which had significant improvements over v2) with NuxtJS (for its ease of use, intuitiveness, and great documentation.) But then, I came across astro.build.

The Stack

astro.build

There wasn’t a singular reason that push astro.build to the top of the list; certainly not because it was the newest kid on the proverbial JS framework block. In my use case where time isn’t in abundance, these are some of the reasons that won me over

• quick and easy setup, auto-configuration of integrations/modules
• intuitiveness of content creation and layout, with MD and MDX support
• support of popular frameworks including VueJS (with which I intend to continue using)
• Island architecture that grants control over when to load assets

Firebase

The number of services (auth, database, storage, hosting, ML, analytics, etc.) under one roof made Firebase the obvious pick. scaling and integrating an app with other Firebase services is more seamless and easier to manage. And based on services, traffic and other factors, initials are minimal to zero. One of the missing services is a media management service.

Cloudinary

I came across cloudinary while researching media content delivery networks and after looking at its features (such as image transformations), I knew I needed to try it. It may be a bit of an overkill for this use case, but I still think it is a worthwhile platform to learn and explore. There’s a free tier with expected limitations.

The Process

I found Astro’s documentation to be as good as any other frameworks. I jumped right into ’Start your first project.’ They also have step-by-step instructions with explanation of each step. In the videos below, I go through my steps from initial setup to Firebase deployment. What’s not shown, and something I try to do after initial setup, is write an .nvmrc file to lock my NodeJS version and save myself from suture headaches.

node -v > .nvmrc

In the above video, I execute

yarn create astro
Where would you like to create your new project > . 
Which template would you like to use? > Portfolio
Would you like to install dependencies? (recommended) > yes

I open astro.config.mjs to show that after adding the MDX and Tailwind integrations, they are automatically added.

yarn astro add mdx tailwind

I answer in the affirmative (default options) to all the prompts. Off screen, I clear the prompt with ctrl + l and run:

yarn dev

I then switch to a browser and go to ‘http://localhost:3000’ (alternatively, I could have cmd + click from the terminal to open in default browser) to confirm I have a working site.

I stop the dev command with ctrl + c and run:

yarn build

which generates my site into the dist folder. I clear my terminal and run:

firebase init

and use down arrow key to navigate to ‘Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys’ and select it with spacebar.

Please select and option: Use an existing project
Select a default Firebase project for this directory:
What do you want to use as your public directory (dist)

I answer ‘no’ to the rest of the prompts so that Firebase uses my generated files. Once the script finishes, I switch back to the browser and go to the hosting URL generated by the Firebase script to confirm my site is now live.

• #astro
• #firebase
• #portfolio