Host a blazing fast portfolio page in 59 minutes

My old Wordpress site was dying. I added an elegant custom theme but it seemed to be breaking the site after a few years. My site performance started getting slower, and I was embarrassed by glacial page loads and broken components.

Design Idea

I noticed that colleagues and other product people I follow have really simple sites that load fast and look great. I wanted one too.

So I decided to start fresh. There are a ton of free tools to help you publish a responsive site that suits your style. Also, I was feeling nostalgic for early web in the sense that I didn’t need to build an interactive site, I just wanted to publish a beautiful site quickly. I wrote this post to share with you a wealth of free resources I found for free web hosting.?

Here's the design I landed on for my portfolio at keithreynolds.me (fig)

Easy, Free, and FUN Resources

Have you thought about a portfolio page but needed a nudge to commit? Here’s a few reasons to compel you to try this out:

• Do you use GitHub? You can set up a repository in minutes. It’s free, and comes with free web hosting via GitHub Pages
• Did you know you can browse and modify free responsive web templates that look great on both desktop and mobile?
• Did you know that you can be up and running with a beautiful site in minutes with no cost to you other than your time? Did you know that you could do all this with a time budget of just under one hour?

Impact

On top of the kudos I got from people, I'm using my site to measure the efficacy of a little marketing campaign.

If this sounds good to you, or if you’ve been inspired by a colleague’s site, you can do the same by yourself. Consider the confidence that comes with learning a new skill (or scraping the rust off while ditching your old web site).

OK how to do this in 59 minutes or less? I summarized the major steps below, with some optional TODOs that I think you’ll appreciate once you’ve done the basics.

Create and host a beautiful site in 3 easy steps (59 minutes)

This procedure will lead you through creating a user site at username.github.io. If you’re happy with that, you can actually stop after completing step one and just configure your theme in GitHub Pages.

1) Sign up / set up GitHub Pages (5-15 mins)        

• Set up GitHub Pages for FREE hosting by navigating to GitHub and sign up for an account
• Click on Create a repository?
• Give your repo a specific name. Now you have a place where you can put your own HTML and CSS files that you can modify in Step 2

Complete the rest of GitHub’s quickstart and come back to this page when you’re done?

Note: You can actually stop here! You might be done in 15 minutes!

?? Continue with steps 2-3 if you want to use your own theme or a vanity URL?

2) Select a responsive HTML template (15-30 mins)        

There are a wealth of resources out there, I'm partial to HTML5UP for their elegant, minimal designs that are easy to edit. You don't have to know how responsive pages work, they just present beautifully on mobile and desktop!

• Visit HTML5UP to browse beautiful, responsive templates
• Download a template
• Modify it in your favorite editor

3. Upload your customized template to your GitHub repo (9 mins)?        

• Click on uploading an existing file
• Drag the contents of your HTML template files you edited (including your index.html and your style.css files) to the box labeled Drag files here to add them to your repository.

? Now verify your site is published!??

Optional TODOs?

These aren’t required, but I wanted a fast site. Because I publish sporadically, I am fine with posting article previews that link out to LinkedIn (where you’re reading this).

If I get more active, I may explore tools like Jekyll for a more efficient posting flow. In the meantime, check out some of the things I did, why I did them, and their impact:

Register a vanity domain & keep your free hosting        

• Your GitHub Pages repository URL is always https://{yourUserid}.github.io/{yourReponame} The GitHub Pages URL is based on the GitHub repo URL, and takes the format https://{userid}.github.io/{reponame}.
• The moment you use it, GitHub Pages will generate a website based on the contents of your repo.

??GitHub Pages hosting remains free even if you use a vanity URL

?? To configure your vanity domain (and enjoy free hosting from GitHub pages):

1. On GitHub, navigate to your site's repository
2. Under your repository name, click Settings
3. In the "Code and automation" section of the sidebar, click Pages
4. Under "Custom domain", type your custom domain, then click Save

Optimize site performance        

Remember how my Wordpress (plus out of support theme) performance was deteriorating? I was curious to see how my new site performed. I wanted my page to load super fast.

I used PageSpeed Insights for a quick audit of desktop and mobile performance, along with actionable suggestions to improve my score. My first iteration scored in the 70s for Desktop. After making a few of the suggested changes I bumped it up to a 96. Not bad!

My page loads super fast in Desktop. But one thing I learned is that mobile performance has its own considerations. Other than the easy changes suggested, I didn’t prioritize the bigger ones yet. Why? Because I learned from Google Analytics that >95% of my site traffic is desktop. More on that below.

Tag your site with Google Analytics (GA) to get free measurement and attribution        

I love Google Analytics! Just add a snippet of .js to your HTML and you can collect a wealth of information about visitors to your site, actions they take (incl conversions), time spent, even demographics like geography, etc.

If you want to know more, highly suggest you take a look at what my colleague Ateeq Ahmad is doing over at Albany Analytics. He's got great resources to help demystify web tracking and get to you analyzing your site performance right away. His philosophy is to help Marketers navigate the technology needed to help understand the efficiency of marketing campaigns.

In my case, I wanted to use Google Analytics to do a bit of attribution experimentation on my site. How are people finding it? How many are clicking on links I've shared in my resume vs email or cover letters? Read below to find the answer

Tag your resume, email links, etc. with UTM parameters         

It turns out people (and bots) are clicking on links that I share! How did I determine that?

In this case, I'm tracking visits to my portfolio site. Looks like people are clicking on the link I dropped into my new resume about 20X more often than the original version. Neat!

UTM parameters (also called UTM tags) are snippets of text ("keys") you can add to the end of your URL to help you track your clicks (with "values"). They look like these things after the '?' mark:

https://keithreynolds.me/?utm_source=LinkedIn&utm_medium=July1Article

These snippets help you track where website traffic comes from. So if a user clicks on a URL from your resume to your landing page, you can attribute your inbound traffic sources.

To populate that GA report above, I used parameters which show up in native Google Analytics reports. I use the utm_source= and utm_medium= params and I apply whatever values make sense for the medium (eg. LinkedIn, Resume, etc)

Add a 2nd template for posts and decide between a subdomain and a subdirectory         

Of course, the portfolio site design isn't well suited for posts, and I like to publish things from time to time. So I found another free template and repeated the process

• In my case, my first site was the portfolio site you see at keithreynolds.me. Later, I decided to add another template to showcase some of my writing. I had to decide between a subdomain and a subdirectory. It really doesn’t matter, and I summarized the differences between them below:?
• A subdomain compartmentalizes your website so you can establish specific content types that are distinct from your root domain (eg. posts.yourdomain.com vs yourdomain.com/posts/) On the other hand, a subdirectory is a pathway within your site. Subdirectories are a level within the domain's hierarchy. Subdirectories branch off from the subdomain they belong to. Q: Is it better to use a subdomain or a subdirectory?
• According to Google, subdomains and subdirectories are seen as equal when it comes to indexing and ranking. That said, real-world case studies show that subdirectories tend to rank faster and more effectively than subdomains on the first page of the search engine results page

Tradeoffs & Conclusions

While preparing for this article, I found that GitHub Pages upped their game and they obviated much of what I wanted to write. That's great!

I optimized for speed and low maintenance. Because I post infrequently, I don't mind updating static pages. However, since I like writing, and I like learning new skills, I am excited to try adding Jekyll to my site. Jekyll is a static site generator that text written in your favorite markup language and uses layouts to create a static website. You can tweak the site’s look and feel, URLs, the data displayed on the page, and more.

I may add another post once I figure it out. One lingering issue is accessibility (fig).

One of the things I liked about shipping products at Google is how accessibility tests were part of all launch reviews. I will research what can be done to improve the UX for people who use screen readers, for example.

One more thing

If you've read this far, you may or may not know that 5/20 was my last day at Google. Bummer!

While I'm happy to be working on a few things (incl advising a BI startup called Dablr.io) I'm seeking full time Product Management lead roles.

I'm a skilled 0-1 product development leader. Things I’ve become good at: Solving hard problems, making teams work better, and coaching ICs to high performance.

?? Got a role open? Let's talk! (and please like and share this post) Thanks for reading!

References

• Quickstart for GitHub Pages
• Adding content to your GitHub pages site using Jekyll
• Managing a custom domain for your GitHub Pages site
• PageSpeed Insights to measure your site's performace and get actionable feedback
• Google Analytics for beginners and small businesses