How to Create a Good Personal Website

Whether you’re a computer science student searching for the first internship or someone looking to break into the tech industry, having a personal website is a great way to get your name out to companies and recruiters. However, a personal website is much more than a résumé; it represents your very own corner of the Internet that visitors can interact with. Good personal websites look polished and effectively convey key information about yourself and your accomplishments.

Where do I begin?

If you’re have experience in web development or you’ve already built your own personal website, you can skip this section and go to the “Guidelines” section.

There are many resources online to help you get started at every step of making a website, from selecting a template to publishing your creation. Here are some important things to consider when creating your very own personal website and making it publicly available on the Internet.

Should I use a template?

HTML5 on a screen

If you try to build a website entirely from scratch, it would take hours and hours of effort to make it look nice. You would have to implement responsive design for mobile screens, deal with the many quirks of CSS, and think about designing every single aspect of the site.

You don’t have to do all of this work. Unless you are truly interested in every single intricacy of the typical frontend stack, you should consider starting from a template. HTML5Up provides a bunch of high-quality templates for free. With some basic HTML and CSS knowledge, you can customize the template to showcase your professional accomplishments.

Should I use a static site generator?

Jekyll and Hugo logos.

If you think that manually editing HTML is too unpleasant and you’re willing to put in some time to learn some new things, or if you’re also planning on maintaining a blog, you should consider using a static site generator. Static site generators take Markdown and configuration files and applies them against a theme—which consists of layouts and templates—to generate a structure of HTML files. David Walsh wrote a comprehensive article introducing the concept of a static site generator; it is a must-read before exploring this option any further.

The two most popular static site generator engines are Jekyll and Hugo. GitHub has built-in support for Jekyll and many bloggers use it, but it requires that you install Ruby. On the other hand, the Hugo engine itself is a simple standalone executable file, which is one of the reasons why I prefer using Hugo over Jekyll.

I personally would rather use a static site generator than edit HTML5 templates by hand; however, it is ultimately up to you to decide.

Where do I host my personal website?

GitHub Pages is the easiest way to get your content online. They provide tutorials so that even a complete beginner can get their website up and running in little time. You can even configure your website to appear on a custom domain instead of on your default GitHub pages domain: ${GITHUB_USERNAME}.github.io. For that, you will need to register a domain name. Many hackathons offer free domains through Namecheap, Domain.com, or GoDaddy, but I personally use Name.com.

If you can’t get access to a free domain name, buying one isn’t prohibitively expensive anyway. Typically, they cost $10-20 upfront with a similar annual renewal fee. Sometimes you might be able to snag discounts on domain registrations, so search around before buying your domain name.

Guidelines

So what exactly makes a personal website good? After combing through advice on the “HH Websites and Resumes” Facebook group, I came up with these set of guidelines. They aren’t meant to be hard rules like they’re set in stone, and there probably exist exceptions to these guidelines, but they simply should be considered when creating or updating your personal website.

LinkedIn and GitHub Icons
Two essential websites to establish your online presence in the tech industry.

Links to your professional presence online are must-haves on any tech-oriented personal website. For the tech industry, these would be links to your résumé, your LinkedIn profile, and your GitHub account. As long your personal website prominently features these, recruiters can easily check out your accomplishments in more detail.

Don’t be afraid to show a bit of personality

On a résumé, you are restricted to a largely text-only representation of your accomplishments. But these restrictions don’t apply for websites. On your personal website, you have an opportunity to express yourself and curate your interests and hobbies.

Do you take cool photos with your DSLR camera? Do you make dope beats in your spare time? Or do you write inspiring blog posts about happenings in life? Show them off on your website and provide relevant links, too! I’ve seen people include links to profiles on these websites.

Social media icons

Make your website mobile-friendly

According to Google Analytics, 21% of visitors to my site in July were on mobile devices. That’s a significant number of people, and it could include some recruiters, too. So it is important that your website looks good on smartphones and tablets as well as on desktop computers.

Fortunately, you can easily test your website on various screen sizes using Chrome’s devtools. If your website looks ugly on small screens, you should look into decluttering the screen or tweaking the layout in the HTML and/or CSS. For example, I included this CSS rule on my landing page to adjust font sizes on screens that are 420 pixels wide or less.

@media screen and (max-device-width: 420px) {
    h1 {
        font-size: 56px; /* Normally 70px */
    }

    i.fa {
        /* Targets font-awesome icons */
        font-size: 22px; /* Normally 26px */
        padding-left: 6px; /* Normally 12px */
        padding-right: 6px; /* Normally 12px */
    }
}

Avoid website obesity and sluggishness

Illustration by Jr Casas (jrcasas.com)
Illustration by Jr Casas (jrcasas.com)

In the past couple of years, there has been a growing trend in websites’ page sizes. Maciej Cegłowski explained this “website obesity” crisis in a 2015 blog post; his main point is that more and more text-based websites, like personal websites, load too slowly on mobile connections because they consume too much bandwidth. He notes that these websites often outweigh the longest books in Russian literature, known for their “ponderousness.”

I contend that text-based websites should not exceed in size the major works of Russian literature. This is a generous yardstick. I could have picked French literature, full of slim little books, but I intentionally went with Russian novels and their reputation for ponderousness.

— Maciej Cegłowski

Cutting down on the sizes of your site’s assets—images, CSS, and JavaScript—will definitely improve your site’s load time. You shouldn’t have small icons that weigh hundreds of kilobytes when you could scale them down, perhaps saving 90% in bandwidth used. And you certainly shouldn’t have a ten megabyte animated background image on your site when a still image literally one percent of that size would suffice.

Now you don’t have to hyperoptimize bandwidth usage and loading time, and pull your hair out trying to find exactly the right JPG compression quality for your images, but at least try to be considerate to visitors with poor Internet connections.

Here are some guidelines to follow to combat website obesity and sluggishness.

  • Keep your images small; their sizes add up pretty quickly and can consume a lot of bandwidth, especially with bad caching. Ideally, each image should weigh less than 150-200 kilobytes.
  • Use a content delivery network (CDN) so that your website loads more quickly for visitors around the world. I suggest Cloudflare because it’s free and beginner-friendly. Karan Thakkar wrote a great post on FreeCodeCamp on how to set up your website with Cloudflare’s CDN.
  • Minify your CSS and JavaScript so that they weigh less and consume less bandwidth. Karan’s tutorial should also cover this.
  • Don’t import too many JavaScript libraries. In all likelihood, your site should only need jQuery and Bootstrap. You probably don’t need to use React, Angular, or another JavaScript framework du jour for your site.

Include Open Graph tags

If someone wants to share your website on Facebook, the link preview would look absolutely horrible unless you specified Open Graph tags in the website’s <head> tag. Here, there are five properties that are especially important.

  • og:image — Specifies the absolute URL of the preview image. The positioning of the image will depend on its dimensions; its behavior is defined in Facebook’s sharing best practices for websites.
  • og:title — Specifies the preview title.
  • og:description — Specifies the preview description. If empty, the preview description defaults to the first text encountered in the HTML, which may not accurately represent the content of your site.
  • og:url — Specifies the website’s URL without querystring parameters.
  • og:type — Specifies the type of content at this URL. For personal websites, this should be "website".
The link preview for my personal website, andrewyang.xyz
An annotated diagram of the link preview for my personal website, andrewyang.xyz

The Open Graph tags for that preview would look like this:

<meta property="og:url" content="https://andrewyang.xyz/">
<meta property="og:title" content="Andrew Yang">
<meta property="og:type" content="website">
<meta property="og:description" content="Computer science student at UIUC. Software engineer. Follow my blog at blog.andrewyang.xyz">
<meta property="og:image" content="https://andrewyang.xyz/images/profile.jpg">

You can test Open Graph tags on your site by using Facebook’s handy Open Graph debugging tool. It even shows what the link preview would look like if someone shared the page right now.

Specify Google Structured Data for better SEO

Usually, your website will only be seen by recruiters. However, if you want to put in effort to improve your site’s SEO on Google, you should specify Structured Data, using JSON-LD (JSON for Linked Data), in the <head> tag. Here is the Structured Data for my landing page:

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Person",
    "name": "Andrew Yang",
    "jobTitle": "Student",
    "url": "https://andrewyang.xyz/",
    "sameAs": [
        "https://github.com/andrewyang96",
        "https://linkedin.com/in/andrewyang96",
        "https://instagram.com/andrewyang96",
        "https://www.quora.com/profile/Andrew-Yang-46",
        "https://medium.com/@andrewyang96"
    ],
    "gender": "male",
    "birthDate": "1996-01-19",
    "image": "https://andrewyang.xyz/images/profile.jpg"
}
</script>
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "https://andrewyang.xyz/",
    "name": "Andrew Yang",
    "image": "https://andrewyang.xyz/images/profile.jpg",
    "author": {
        "@type": "Person",
        "name": "Andrew Yang"
    }
}
</script>

In this example, there are two Structured Data objects declared: one containing information about myself using the Person schema, and another containing information about the website using the WebSite schema. For my blog’s landing page and posts, I use the Blog and WebPage schemas, respectively, instead of the WebSite schema.

Doing this correctly will allow Google to better parse your website and make it look better in Google search results.

Special thanks to Abhinav Seelan for suggesting this!

Spellcheck

Spellcheck

Last but not least, spellcheck everything on your website. You wouldn’t want to misspell something on your résumé, and similarly you wouldn’t want to misspell anything on your website. Consider enlisting a friend to help with the effort.

I hope this guide helps! I’ve been meaning to write this post since summer started, but I’ve only gotten around to actually writing it recently. Subscribe to my blog and follow me on Medium to get the latest updates from me.

Resources

Home