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$.

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

Generating 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?

Astro is 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:

• Optimized performance using component island architecture.
• Supports popular frameworks like React, Vue, Svelte, etc.
• Appealing templates are freely available for blogs, portfolios, etc.
• Custom components are supported and easy to create.

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

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

Ta-da! 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.

Putting your website on the internet#

ChatGPT defines deployment as the process of making your website available to the public. This usually involves uploading your website’s files to a server and configuring a domain name to point to those files.

Astro has integrations with various cloud platforms, including Vercel which is free and easy to use. Vercel provides a complete guide on how to deploy an Astro website to Vercel, but here is the gist of it:

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

That’s it! Your website is now deployed and hosted on the internet on a Vercel subdomain (like my-website-1234.vercel.app).

Moving to a free 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, which you can claim here (no credit card needed). Once you claim it, you can 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.

Bringing everything together#

Once again, simple steps that are outlined in 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. In the Vercel dashboard, take note of the pair of nameservers (A Record and CNAME).

4. In your Namecheap dashboard, go to your “Domain List”.
5. Click “Manage” next to your domain name.
6. Click on the blue “Domain” tab and then on “Advanced DNS”.
7. Click “Add New Record” and add the nameservers from Vercel one at a time.

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.

Now what?#

You have a basic Astro website that is accessible 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.

Thanks for reading#

If this guide helped you get your website up and running, feel free to share it with me!