Creating a Personal Website

Personal websites are a great and increasingly important way to build your online presence. Along with professional social media pages, such as on LinkedIn and Twitter, a website can provide a boost to your career and/or job search.

This blog post is based on my recent experience creating a personal website, following guidelines from Lewis’ talk at the OPIG Retreat last year (thank you Lewis!). The method I used and will cover here, based on an HTML5 UP! template and GitHub pages, is free and fast.

Why have a personal website?

  • Improves your online presence and brand
  • Boost for your career, including by allowing potential future employers to find you
  • Share things you have accomplished or are interested in

What should you include on a personal website?

The answer to this question will be guided by the target audience you are aiming for with your website. Some suggestions are listed below, but don’t feel obligated to include all and you can keep the ones you do include short – for most purposes, less is more.

  • Education/background
  • Research projects
  • Publications
  • Other content you have written, like blog posts
  • Extracurriculars and hobbies
  • Links to professional social media pages (LinkedIn, Twitter), Google Scholar, GitHub, etc.
  • Contact information, such as an email address

Designing your website

I designed my website starting from an HTML5 UP! template. These templates form an incredible resource that allows you to create a website very quickly and with limited knowledge of HTML/CSS.

To create a website using a template:

  1. Find a template you like – ideally one where you have to make no or few structural changes to achieve what you are looking for – and download
  2. Create a GitHub repo called username.github.io
  3. Copy the downloaded template files to the repo and push
  4. Update the template and then add/commit/push changes
    • Content (index.html): name, photos/images, text, pages, links
    • Styling (assets/css/main.css): colours, designs
    • Consider the appearance on different devices (mobile & computer) and accessibility
    • NB: you can view your website locally by opening index.html in a browser
  5. Access your website at https://username.github.io
    • NB: your GitHub repo (username.github.io) needs to be public in order for the website to appear

When building your website consider that viewers will be accessing it from different devices – see how your site looks on a mobile device when you are working on it. Additionally, it is important to make your website accessible. This includes adding alt text, ensuring good contrast between background and text, and structuring your content appropriately. You can check whether your website meets accessibility guidelines using https://wave.webaim.org.

Two things that I found fun & useful for my website, going beyond the template, were:

Increasing web traffic to your website

Creating your website is just the first step – it is essential to take steps to help other people find your website:

Google Search Console home

1. Claim ownership of your website on Google Search Console

  • Log into Google Search Console and click “Start now” under “Improve your performance on Google Search”
  • Select the “URL Prefix” property type (shown below) for a GitHub Pages website, enter your website domain and click continue
  • Download the linked file (which contains one line beginning with “google-site-verification”) and upload it to your GitHub repo (root/main directory) – add, commit and push
  • You can check that the file has been uploaded correctly by navigating to: https://username.github.io/google############.html (replacing username with your username, and google###… with the name of the verification file you downloaded from the Google Search Console). Make sure the file ends in .html.
  • Verify

2. Request that your site is indexed

  • In Google Search Console, after verifying your website, click on “URL inspection” and navigate to the search bar at the top of the page which says “Inspect any URL…”
  • Type in your website and request indexing
  • Check that your site has been verified by searching for site:https://username.github.io. This may take some time (hours-days) though, so be patient.

3. Create a sitemap

  • For a website with only one or a small number of pages, you can generate a sitemap manually. You can use the XML the format shown here: https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap#sitemapformat
  • Add extra blocks of <url>…</url> for each page on your website.
  • Upload this sitemap XML file to your GitHub repo in the root/main directory and add, commit, push.
  • Add the link to this sitemap (eg https://username.github.io/sitemap.xml) in the Google Search Console Sitemaps section.

4. Update the metadata of your website

  • You can find this at the top of your index.html file in the <head>…</head> section
  • Change the title of the website to your name, if you haven’t already, and add keyword tags such as (taken from my website):
    • <meta name=”keywords” content=”machine learning, protein design, antibody, immunoinformatics, biotech, entrepreneurship, blog posts, academia, research, Oxford”/>

5. Link your website everywhere you can: for example Twitter, LinkedIn and, if you’re in OPIG, the OPIG website members page

Thanks again to Lewis, whose 2022 OPIG Retreat Talk introduced me to most of what I wrote about here!

Author