I built this site in 4 hours in an airport lounge

Published: Feb 21 2024

My First Post

The title is no joke. I literally build this blog while sitting in the Admirals Club in Atlanta. I’ll get to the story later, but first lets see if we can explain how this blog got built. Why don’t we start with why I’m doing this and ultimately what I’d like to see as the outcome.

First An Idea

I have been wanting to redisign my personal blog (this site) and talk about some new things I’ve been up to. However, my old site was build with Django, which was the way I built all my sites for nearly 7 years. I love Django, but my webhost doesn’t love to host it.

With that error I decided it was time to either move hosting providers or simply learn a new skill and create a website build via a Javascript framework. I design/develop/create/deplay many React apps, which made that decision pretty easy. I figured I’d keep the hosting plan I am on since I host so many other client sites on it. The framework I decided upon is Astro.

The Challenge

Over the next few months I’ve got a somewhat heavy travel schedule. I thought I’d use my blog as a way to document my travels and write about the new things I’m learning or creating. I’ve also got several long layovers and thought I’d see what I could build during the down time. The challenge is really a four hour window of me sitting in a corner of the Admirals Club in Atlanta Hartsfield (ATL). This post will be what I can get done in that time. Remember, I’m starting fresh, not using anything from existing designs or templates.

In this post I’m not going to go into details of how I build every little piece ( ex.. The blog index). I will get into that in subsequent posts, but for now let’s just have some visuals of what we can create.

The Tools

To build any website these days, you either use a full blown CMS like OpenText TeamSite or an opensource product like Wordpress. I’m not using any of those. Here is a list of components I’m using:

• Visual Source Code: I’m using this write the code and my markdown files
• Tailwindcss - Styling
• Shadcn-ui - component library based on Tailwindcss
• Typography plugin - helps style individual posts with a “prose” class

That’s it! Keep in mind the objective was to prove I could be something quick and somewhat stylish with minimal tools in a short period of time.

Hour 1

In the first hour I was able to create the site below (or perhaps what you are reading right now )

Hour 1 Accomplishments

After the first hour, here is what I was able to get up and running.

1. Installed and configured my development environment on my laptop. (No mouse, bummer, I’m not a fan of the trackpad)
2. Configured Tailwindcss and Shadcn-ui in the development environment
3. Created initial landing page for the site. Additional pages also created.
4. Styled a layout for all pages to use
5. Created an SEO title variable for each page
6. Created a collection in Astro to pull posts.
7. Created static paths for all posts to get build with a slug upon building the site
8. Deployed the site to my hosting provider. (Gotta LOVE Filezilla)

In hour 2 I’d like to accomplish the following:

1. Style the blog a little more (using the typography plugin for tailwindcss )
2. Add more SEO to the posts and templates (ex.. description, twitter and other necessary tags). Google doesn’t use keyword meta tag anymore
3. Create and style a footer component

Hour 2

Here is what we accomplished in the second hour of this build.

1. Updated the favicon. It’s a lightning bolt. I found it online at a free svg site and added it as the favicon. Seriously that simple. 5 mins of time (maybe)
2. Updated the footer. As you can see it’s simply, but gets the job done. I don’t think I need a full blown footer yet. I plan to add a newletter and I’ll the sign-up form there.
3. As you can see by the image below. I’ve updated the “style” of the post page. I used tailwindcss plugin typography. Super simple and easy.
4. I updated the metadata and added a variable for description. At the moment I’m playing for google and not the other search engines. I’m sure that will change, but for now the markdown file was updated to include a description. Good titles and a description are where I will start.

In the next hour I hope to accomplish the following:

1. Add a hero component to the main index page.
2. Add a sitemap. I believe there is a package for this, but not sure.
3. Create some additional content for the about, blog index and contact page. I don’t expect to have automated alerts on the contact page, but who knows.

At the end of hour 3 I’m hoping to be fairly complete.

Hour 3

Believe it or not, I think we got to a place where I feel comfortable calling it a blog. Not finished by any means, but I have something that is searchable on the web, clean enough for someone to pull up on their phone, or a desktop and has some clean navigation. Here’s what we accomplished last hour and finally deployed.

1. I created a “Hero” component for the main index page. It’s fully responsive and is very basic.
2. Site map was added. It’s basic and I haven’t included any options in it yet, but I will as soon as I have time to read all the documentation.
3. Updated content of the static pages. I’d say that it’s ok, not complete, but enough to get the point across and grow as needed.
4. Create a function that will pull all posts and order them by date. It’s hard to see if this is working now because there is only the initial post, but it’s working for the most part.

Conclusion

Here we have it, a full functioning blog that I build in the American Airlines Admirals club. I have a fully functioning static website that is styled and easily updatable. I’m faily happy with it. There are of course many things I need to improve, but we will do that in some additional posts. Although I’m surprised it took me 4 hours (3.25 to be exact), it was well worth my time. I’ve needed to update my site for a while now, as it’s been broken since November of 2023. The skills I’ve learned were also very valuable. I can now update several other websites with the same framework.

I’m optimistic about using Astro in the future. Creating content via Visual Source Code will definitly need to be improved upon, but for right now I can accept it.

If you’ve enjoyed this, please let me know.