I didn’t know what to put as a cover for this. Sorry if the song gets stuck in your head.

Why should I follow this guide?#

🎨 Personal websites can be a great way to showcase your work, share your thoughts, and build your personal brand. You could also use them to host a photography or art portfolio, a blog, a resume, and more.

Many personal websites are hosted on subdomains like username.github.io or username.vercel.app, but having a custom domain can make your website look more professional and memorable.

😵‍💫 However, it can be a bit overwhelming to start from scratch and know where to begin. This tutorial aims to simplify the process and guide you through the steps to get your website up and running with minimal effort and a price tag of 0$ (if you’re a student).

This guide assumes that you have a rudimentary understanding of HTML, CSS, JavaScript, and Git. The terminal commands provided are for a Unix-based system, such as macOS or Windows Subsystem for Linux (WSL).

Step 1: Generate the files for your website#

We will be using an out-of-the-box template from Astro, a static site generator that is easy to use and has a low learning curve.

❓ What is Astro?

It’s a modern web-development framework that allows you to build websites using Markdown (.md or .mdx) files. The files are then automatically converted into HTML (.html) as part of the build process.

The full list of features can be found in the Astro docs, but some highlights include:

1️⃣ Better performance, thanks to something called component island architecture.
2️⃣ Supports popular web frameworks like React, Vue, Svelte, etc.
3️⃣ Beautiful templates that are community-sourced and freely available for blogs, portfolios, etc.

The quickstart guide for Astro is extremely straightforward and easy to follow, but here is the gist of it:

1. Install Node.js if you don’t have it already.
2. Run npm create astro@latest in your terminal and follow the prompts.

👏 Done! Now, you can run npm run dev to see live changes to your website as you edit the files in the project.

There’s a ton of free Astro templates that you can use if you don’t like the way this default website looks, or you can just make your own layout.

This is what happens when you run npm create astro@latest and then npm run dev

Step 2: Deploy your website#

Deployment is the process of making your website available to the public. - ChatGPT 🤖

⚙️ The next step is to upload your website’s files to the internet (or more precisely, to a server).

Astro integrates easily with various cloud platforms, including Vercel which is free and easy to use. They even provide a complete guide on how to deploy an Astro website to Vercel - here is the TL;DR:

1. Run npx astro add vercel in the project directory.
2. Push your code to a Git repository (e.g. GitHub).
3. Go to Vercel dashboard to sign-in and create a new project imported from your Git repository.

✅ Your website is now deployed and hosted on the internet on a Vercel subdomain (e.g. my-website-1234.vercel.app).

Step 3: Move to a custom domain#

If you are a student, sign up for the GitHub Student Developer Pack. It offers a ton of free and discounted perks for students, including free domain names and hosting services!

💰 We will use Namecheap’s 1-year free .me domain offer (no credit card needed).

Once you claim it, search for available .me domain names, add them to your cart, and complete the free order.

🪙 Note: If you are not a student or can’t sign up for the pack, you can still purchase a domain on Namecheap for as little as 0.48$CAD per year.

This is what the Namecheap order page looks like - the prices are per year

Step 4: Connect your website to your custom domain#

🐻 A few more easy steps (bear with me), from the Vercel documentation:

1. Go to your Vercel project settings and click on the “Domains” tab.
2. Click “Add Domain” and enter the domain name you just purchased from Namecheap.
3. Go back to Vercel and take note of the pair of nameservers (A Record and CNAME).

You should see “Invalid configuration” for both nameservers at this point - that’s normal

4. Go to the Namecheap dashboard and click on “Domain List”.
5. Next to your domain name, click Manage > Advanced DNS > Add New Record.
6. Add the nameservers from Vercel one at a time and save.

Add two new records - one for of A type with ”@” host, and one of CNAME type with “www” host

Hurray !#

🎉 That’s it! It might take a few minutes for the changes to take effect, but soon you will be able to visit your website at your custom domain.

From here, you can try:

• Customizing it by changing the theme or creating your own layouts.
• Adding content like blog posts, projects, or a resume.
• Adding integrations like a contact form, Google Analytics, or a newsletter signup. See the Astro docs for an exhaustive list.

🧀 Gouda luck :-)