Andy Nguyen

Making This Site

An inaugural first post to the blog , which goes through the motivation and technical decisions of making this site.

Motivation

For the past five years or so, my personal site has always been a single static HTML file with just my contact information. For 2022, I've decided to revamp the site to include a blog so I could:

  • show progression in both writing and software development
  • share knowledge via tutorials or opinionated posts

Hopefully, this site will highlight my progression in both crafts and provide me with something to reflect on in the future. Also, I've learnt a lot from individual blogs over my professional career and wanted to contribute something back. All in all, I believe that having a personal website is a good way to advance your professional development.

Current Pages

Currently, there are three pages and one template.

  • Home - /
  • About - /about/
  • Blog - /blog/
  • Blog Posts - /blog/{post-slug}/

Tech Stack

For this site, I chose three key technologies:

Bamboo CSS

Not being the best at CSS, I wanted a plug-and-play system and decided to go with a classless CSS library. Typically, a classless CSS library is for prototyping and is very lightweight. Luckily, I found this handy repo and ended up on Bamboo CSS because it looked best to me and had customizable CSS variables. To customize the library/theme, I added my choice of fonts and switched out some colors. Overall, I enjoy using Bamboo CSS due to its lightweight and customizable nature. Alternatively, I think Tailwind CSS and Open Props are interesting CSS systems to consider.

Gatsby

Already knowing React and wanting a static site (for SEO, security, and performance reasons), I naturally went with the Gatsby ecosystem. Gatsby is a React-based framework with an incredible static site generator and plugin library. Coming from a JavaScript and WordPress background, the Gatsby (CLI and community) development experience has been fantastic. All in all, I highly recommend Gatsby for any blog or static site project, especially if you already know React. Otherwise, I believe Astro and Next.js are viable alternatives to Gatsby.

Course / Resources

I highly recommend these resources for anyone building a Gatsby project.

  • Wes Bos' Master Gatsby - highly recommended, Wes Bos is an awesome instructor
  • https://github.com/wesbos/master-gatsby
  • https://github.com/gatsbyjs/tutorial-example
  • https://github.com/gatsbyjs/gatsby-starter-blog
  • https://github.com/taniarascia/taniarascia.com
  • https://github.com/jlengstorf/gatsby-theme-jason-blog

GitHub Pages

Currently, this site is hosted on GitHub Pages, and I didn't see a need to switch hosting providers. Using GitHub Pages is convenient because it's the same platform as the git repository. However, there is a potential downside: the git repo (for the free tier) needs to be public, which isn't problematic for a personal website like this one. Alternatively, I would consider Netlify and Cloudflare Pages.

Check out my tutorial about deploying to GitHub Pages with gh-pages and GitHub Actions.

Credits

Amazing creative assets I used:

Logo (https://andynguyen.dev/logo.jpeg)

Fonts

Conclusion

It's been a lot of fun putting this site together, especially going back to the basics (HTML and CSS). Anyone who wants to create their own personal website and have their own little part of the internet should do so.