custom_domain_personal_website.md

5 min read Original article ↗

How to set up a personal website with a custom domain quickly in an hour

Tip

Don't care about million little options and just need a good site quickly? This guide is for you!

  • A personal website showcasing your work is a great way to comprehensively introduce yourself to the world. A portfolio with a custom domain name looks good on your resume.
  • This guide is for researchers and students who quickly want to get a personal website and blog with a custom domain.
  • While there are a million ways to go about doing this, here is one way that many AI researchers and students follow.
  • If this is your first time doing this, expect the whole process to take about an hour or so.

Steps:

  1. Buy a domain from Namecheap.
  2. Setup a GitHub Pages using al-folio Jekyll theme.
  3. Configure your domain's DNS settings.
  4. Customize your page and add content to it.

Buy a domain from Namecheap

Namecheap is a domain registrar with a good reputation among hobbyists. Gandi is another good alternative. Stay away from GoDaddy, as they are known for many unethical practices and bad customer experience.

How to choose a domain name?

  • Pick something from .com or .org TLDs (top level domains).
  • While there are other TLDs that are very cheap to buy, their renewal costs can be very high. .com and .org renewal costs are fairly nominal.
  • Let the domain name be something small, very large domain names are hard to communicate and prone to errors when typing.
  • <first_name><abbreviated_last_name>[dot]com is a pretty good one.
  • Let it be inoffensive and relavent to you, like your name. While dragonkingpizzaslayer.com may sound cool, but it does not belong on a professional resume.
  • Avoid numbers, emojis and special characters.

Setup a GitHub Pages using al-folio Jekyll theme

  • GitHub Pages is a free static website hosting service provided by GitHub.
  • al-folio Jekyll theme is a popular Jekyll theme which has become popular among AI researches and students.
  • Jekyll is a static site generator that takes your plain text files and turns them into websites.

Instructions for this part are taken from the al-folio project. You can see the full guide here.

  1. Create a new repository using this template. For this, click on Use this template -> Create a new repository above the file list. If you plan to upload your site to <your-github-username>.github.io, note that the name of your repository ⚠️ MUST BE ⚠️ <your-github-username>.github.io or <your-github-orgname>.github.io, as stated in the GitHub pages docs.
  2. In this new repository, go to Settings -> Actions -> General -> Workflow permissions and give Read and write permissions to GitHub Actions.
  3. Open file _config.yml, set url to https://<your-github-username>.github.io and leave baseurl empty (do NOT delete it).
  4. Wait until the GitHub actions finish (check your repository Actions tab). Now, in addition to the master branch, your repository has a newly built gh-pages branch.
  5. Finally, in the repository page go to Settings -> Pages -> Build and deployment, make sure that Source is set to Deploy from a branch and set the branch to gh-pages (NOT to master).
  6. Wait until the GitHub actions finish (check your repository Actions tab), then simply navigate to https://<your-github-username>.github.io in your browser. At this point you should see a copy of the theme's demo website.

After everything is set up, you can clone the repository on your machine and start customizing it. Run $ git clone git@github.com:<your-username>/<your-repo-name>.git on your terminal. al-folio will automatically re-deploy your webpage each time you push new changes to your repository.

Configure your domain's DNS settings

See the full general guide here from GitHub.

Below are steps for namecheap specifically.

  1. Login to namecheap.
  2. Set up multi-factor-authentication if you have not already (do not skip this).
  3. Click on Domain List on the left navigation pane.
  4. Find your domain in the list (you probably just have one) and click on Manage on the right.
  5. Optional: Scroll all the way down and turn off parking page.
  6. On the top nav bar click on Advanced DNS
  7. Delete all the previous records there.
  8. Create four A records and point one each to: 
    185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
  9. To create these, set the type as A, host as @, value as the above ip address, and TTL as 5 mins.
  10. Create one CNAME record with host as www, and value as <your_domain>.com. (notice the dot at the end). This redirects www.yourdomain.com to yourdomain.com.
  11. The DNS records may take 10-15 mins to propagate throughout the world.
  12. Verify the domain on Github by following this page.

Customize your page and add content to it

  • Everytime you push any changes to GitHub, al-folio automatically redeploys the page using GitHub Actions in the background.
  • The full guide to customizing al-folio can be found here.
  1. Remove the unwanted pages from _pages/.
  2. To make the CV button open your CV pdf file directly, add your file to /assets/pdf. And if the filename is cv.pdf, then replace the contents of /_pages/cv.md with the following. 
    ---
permalink: /assets/pdf/cv.pdf
title: CV
nav: true
nav_order: 4
---
  3. Use the al-folio guide to explore other customization options.
  4. Add your profile picture, blog posts, publications, news etc!

That's it! You now have your own website!