Creating this website from scratch

Greetings!

If this is your first time checking out my website, welcome! I started this website as a personal project, with the aim to create a website using the Astro framework and TailwindCSS utility from scratch. While there are thousands of themes available ready to use, starting from scratch helped me learn a lot about web development, and gave me more control over my website.

For some background, I am more experienced in developing video games. If you hadn’t already, check out my games portfolio. I had participated in multiple game jams and completed university projects where I used the Unity game engine. I’ve also just finished a game jam recently using the Godot engine for the first time - Boulder Shift. Web development is taught in my university degree, but only basic HTML, CSS and JavaScript. Thus, developing this project was quite easy to start, but challenging at some stages of the project. Still, it was a rewarding learning experience nonetheless.

Why Astro?

To answer this question, a bit of context is needed.

Before starting this project, I already had setup my personal portfolio website using the Jekyll framework, based on the Freelancer theme. It’s a static site generator written in Ruby, and using this theme got my website up and running very quick. However, I was just changing the web elements to fit my details, and I did not learn how the theme worked.

While researching how to create a website from scratch, I found the Astro framework. Described as a fast, JavaScript-based framework with great performance, minimal JavaScript overhead and a lot of integrations with other UI frameworks and deployment services made this an enticing option. So I decided to start a new Astro project and create a new portfolio website from scratch, without using an Astro theme. Besides, it seems to outperform Jekyll, while providing a positive developer’s experience with its integrations.

How to set up an Astro project

Starting an Astro project was not difficult. Assuming you already installed Node.js on your machine (at least v18.17.1, v20.3.0 or higher), open a terminal and run:

npm create astro@latest

As this command starts a wizard program, this can be run in any directory, as the wizard handles directory creation automatically. You can also choose to create a blank project, or from a pre-built template. After the wizard’s completed, you can start the Astro dev server to see a live preview of your project:

npm run dev

Installing TailwindCSS was also easy, thanks to Astro’s official integration with the Tailwind utility. I chose to try out TailwindCSS to save time writing CSS for my website. Running this command installs Tailwind automatically:

npx astro add tailwind

I highly recommend reading Astro’s documentation to learn more about the framework.

Deploying the site with Cloudflare pages

My previous Jekyll site was hosted with GitHub pages. It’s extremely easy to set up and deploy your site, as all you need is to setup a public GitHub repo hosting your site’s code, and GitHub pages will build your site and publish it online. The main advantage is that it auto-deploys your site everytime you make a push to the repo, and comes with a domain name - though you can set a custom domain name. However, the repo needs to be public for GitHub pages to work.

A nice alternative I founds and use for this website is Cloudflare Pages. It has similar features to GitHub pages, where you can connect it to a git repo, and it will clone the repo, build the site and publish it online. It will also auto-deploy changes the same way. But this time, your repo does not need to be public, and the site is hosted on Cloudflare’s infrastructure, which means:

• Cloudflare’s network speed
• SSL out of the box
• Support for the latest web standards

All of this is handled by Cloudflare. Their free pricing is completely sufficient for a personal website. To deploy your Astro project to Cloudflare pages (according to Astro’s documentation - and assuming you already have a Cloudflare account):

1. Setup a new project on Cloudflare pages (from Cloudflare Dashboard).
2. Push your code to your git repository (GitHub or GitLab). This does not need to be public.
3. On Cloudflare Dashboard, go to Account Home > Workers & Pages > Overview.
4. Select Create application, then the Pages tab, and then select the Connect to Git option.
5. Select the git project you want to deploy and click Begin setup.
6. Use the following build settings:
   • Framework preset: Astro
   • Build command: npm run build
   • Build output directory: dist
7. Click Save and Deploy.

I also found out that it builds for each branch in a repo, which means I can work on new additions to the site in a different branch, push changes to it, and preview the site on my phone, while the main branch (for all visitors) is unaffected until its time for me to merge the changes from the dev branch to the main branch. This feature actually made optimising for mobile screens easier.

My experience so far

Utilising many of Astro’s features such as type-safe Content Collections, Markdown/MDX conversion, TailwindCSS integration and deploying onto Cloudflare pages has been an excellent experience. Sure, I spent a frustrating amount of time fixing small details, but the end result was rewarding, and made maintaining this website easy to do. I can now focus more on adding more blog content, and less time spent on the code under the hood. If I were to start another website project, I would highly consider using the Astro framework as an option.

Now, if you like my website and want to recreate it for your personal needs, I have open sourced a template of this website on GitHub, under the MIT License. To set it up for the first time, after cloning the repo, run at the root of the project’s directory in a terminal:

npm install

This installs dependencies for the Astro project, and then you can simply run npm run dev to preview your changes.