Written by Ajay Gandecha for COMP 426: Modern Web Programming.
Hello students! In a01, you created your very own personal webpage using HTML and CSS, deployed to Vercel. Many of you did an outstanding job - especially with styling - and we hope you enjoyed the process of designing! Having a personal website builds your online presence and showcases your experiences and interests to others. It is also a great resource for employers to learn more about you.
Currently, your website is deployed using Vercel at a URL like https://a01-username.vercel.app. However, this URL is not very descriptive or personalized. If you would like to turn a01 into a real personal website, you will want to deploy your website to a custom domain! This would allow you to deploy your own website at a URL like https://www.yourname.com. For example, my person website is deployed at https://ajaygandecha.com, but it is still deployed using Vercel using the same steps you all did in a01!
This will require you to purchase a domain name and connect it to your deployment. Since this process costs money (typically around $10 a year), it is entirely optional! But, you may find it is a worthwhile investment. If you wish your website to be open-source, you may also want your website to be hosted in a GitHub repository that is separate from the a01 class repo or a fork from the project. The steps below will guide you through the process of setting up your own personal website with a custom domain!
You will want to create a new GitHub repository to store your personal website. You can name this repository anything you like. It is customary to name it something like mywebsite.com (matching the domain name you end up choosing) or something like personal-website. You may choose to make this repository either public or private, depending on your preference. Public repositories allow others (including employers) to see the code behind your website, but private repositories work just as well.
This repository will be empty. You will then want to push the code from your completed a01 project into this new repository. To do this successfully:
a01 project into this new repository.Now, you will be ready to deploy your website from this repository with Vercel.
You have a few options for purchasing a domain name. There are two main sources:
Regardless, when deciding where to purchase your domain, make sure to compare prices! Typically, domain names cost around $10 a year, but sometimes Vercel or Namecheap may be slightly cheaper. You can choose any domain name you like! If your name is unique enough, you may find your name to be available. If not, you can try to come up with a creative website name that either is similar to your name or one that represents you well!
You will now want to deploy your repository to Vercel! Follow the same steps you did in a01 to deploy your website, but instead using your new GitHub repository.
Once you have purchased your domain name, you will want to connect it to your Vercel deployment. The process for this will depend on where you purchased your domain name.
If you purchased your domain name from Vercel, the process is pretty straightforward. I recommend following Vercel's guide here.
If you purchased your domain name from Namecheap, the process is just slightly more involved. There is a great guide here which explains how to route DNS so that your Namecheap domain points to a Vercel Deployment.
Once your website is deployed, any time you push changes to your GitHub repository, Vercel will automatically deploy the changes to your website! You can now customize your website, removing or adding parts as you see fit. You can also add new pages, blog posts, or projects you have worked on to your website (you don't have to follow the exact structure specified in the rubric if you do not want to). Have fun with it!
If you have your website deployed using a custom domain, share it with your friends and family! I would also love to see your websites deployed on a custom domain, so feel free to share them with me as well! I plan on creating a gallery of personal websites on the class website, so if you follow these steps, please fill out the form below so I link to your custom domain instead of the vercel-generated one:
If you have any questions, please reach out!