In the last two years there has been a monumental shift in how we approach the design and development of components for our various products. Storybook has been the catalyst for all of this. Before we had a custom documentation site for our components, or worse they were integrated directly into products/libraries that we produced. This led to a messy disorganized system where it was hard to find and use what you needed to. …

This post aims to outline the steps one must take to publish and manage a Github Pages website for your user account.

Goals:

  • Host source code on Github
  • Use your-username.github.io to host the page
  • Use custom domain

This website was made using the following technique.

1. Setup source repository

Set up a repository that contains the files used to build your website. It doesn’t really matter how you build it but it must output a directory with all the static files needed to serve your website. For this post I will be using next.js as an example static website generator.

2. Setup github.io repository

This repository will be…

Images on the webpack have a few drawbacks that take some programming to get around.

  • Height and width are unknown — this can cause page jumps and weird layouts
  • Blank space while loading
  • Large images are slow on old devices or weak internet connections
  • The HTML page will download all the images on page load — this can be super slow if you have a lot of images on one page

Luckily there have been a bunch of web standards made to solve these problems. But navigating them all them and then putting it all together can be daunting.

Enter…

Andrew Lisowski

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store