I recently worked with some friends (Edmund He and Chris Jung) to create a tool that can (almost?) automatically turn your Github Profile into a Beautifully rendered portfolio website quickly and easily. We wanted to build a tool that could be used by developers who are not necessarily web dev savy. Something that was quick to set up, required no maintenance, stayed up to date with your work, and of course was free.
TL;DR
We did it. Follow the instructions in our read me to set it up for yourself:
CREATE YOUR GITHUB PORTFOLIO WEBSITE RIGHT NOW
See the results from my Github Account :
Robert’s Portfolio Resume Website
GOAL
First and foremost credit to Tim Baker who built a beautiful Resume/Portfolio Template using ReactJS and NextJS. Tim’s template allows anyone to manually enter all of their information into a file and deploy the site as a Static Web app easily using Vercel. We wanted to leverage Tim’s great work and go a step further…
- What if you could just keep your Github Account up to date with your personal information and Best work and have it automatically flow through to your personal website?
- What if you could achieve this quickly and easily?
This is what we set about to accomplish
BUT HOW ?
We decided to leverage Github’s very accessible API to grab all the information you would need to create a portfolio site. There was just 3 limitations that we kept in mind:
- We wanted to keep this project lean and make it really easy to set up. No Database to maintain.
- The Github API has limitations, you cannot make more than 60 API calls per hour (actually you can make more if you get a specific access token, but like I said, we wanted to keep it simple for the user.)
- We want the website to be dynamic! When your github information changes, we want this to automatically flow through to your site.
Thanks to the joyous magic of NextJS, we were able to find a solution that works for all 3 of these constraints by leveraging Incremental Static Regeneration!
ISR allows you to create a Static Web Page that will re-produce itself after a given amount of time has passed. This is perfect for our use case. The app will remain statically generated, but will also be able to look for new data from Github periodically. In order to accommodate the API limitations, we set this refresh time to run every 30 minutes
Ok, so of course this does not produce a “dynamic website”, it’s still static and thats what we want for a portfolio website. Only now it will dynamically pick up any changes you make to your Github profile.
TRY IT FOR YOUR SELF
You can find detailed instructions in the README of our project. We recommend you follow those to get set up. To summarize these steps :
- Fill out your Github Bio information. Things like your name, bio, social media links (as much as you want to include)
- Select your Pinned Repos. Github allows you to select which Repos will show you up on your profile page that best show case your work
- Github allows you to create a README file for your account by creating a repo that has the same name as your username. Here is a useful blog post to give youre more details about what you can do with this REAME
- Add some custom information to your profile README contained in some specific tags:
- Upload your resume to Github to this location : https://github.com/<username>/<username>/blob/main/resume.pdf
- And Finally (and totally optionally), we have also made it possible for you to pull in your Experience, Education and received recommendations from your linked in profile! Unfortunately LinkedIn does not make this data available via an API. So will need to download it thru the LinkedIn website whenever you make a change. But if you prefer you can just skip this step and still show off your Github Information
- That’s basically it. Deploy the app to Vercel following these instructions: https://vercel.com/docs/frameworks/nextjs
If you do try to set this up for yourself, please do reach out if you have any issues, this is not exactly stressed tested so far, but we have seen it working for multiple accounts now.
Robert David West 