Make your GitHub profile dynamic using a serverless function

YouTube generated these captions and sometimes gets names, punctuation, and code wrong. Check the recording if something reads oddly.

0:00 — so get up asses new feature where you can display a readme markdown file on your profile home page and today I want to show you how you can take full advantage of this new feature by automatically pulling in your latest content from YouTube or any other source using a free neckla fire service function so I had two reasons for doing this on my own profile the first was just make my github profile a bit more exciting and a bit more dynamic and secondly I really wanted to learn a little bit more about service and to see how easy it would be to deploy some sort of backend logic that runs in a service

0:31 — context so let's dive in and be sure to like this video if you enjoyed it and subscribe if you want to see more so my example shows how you can do this for youtube videos but you can set this up to pull in your latest tweets or your latest blog posts or anything else you want to pull in I'll let you use your creativity there so let's take a look at how this works first when I upload a new video to YouTube YouTube's gonna fire off a web hook which will call my Neto Phi function and then it might notify function I'll first fetch my three latest YouTube videos using the YouTube API then I'll generate some nice fancy

1:01 — thumbnails and lastly I will commit the thumbnails to my github repo as well as a new readme that my natal Phi function is generated so it's as simple as that let's dive in so what we're gonna do in this video is take a look at the code that I wrote to do this and I'm gonna show you how you can set this up for yourself if you want to skip ahead to the setup instructions and skip over the overview of the code I have put timestamps in the description so you can just skip ahead to the next section if you want to so let's take a look at the code you can see that we have a package

1:33 — JSON and a functions folder now this functions folder is where all of your net lefeve functions will set that you can call so we just have this one for now which is YouTube's readme sync but if you wanted to create another one that syncs to something else you could just modify this code so if we scroll all the way to the bottom you can see that we have this exports dot Handler and this is the function that gets called when you call the notify function so this function is basically just gonna call our run function for us so our run function first it gets the latest YouTube videos for your channel and you

2:04 — can see that these are the parameters that we pass in so we say give us the latest three videos for a specific channel and we also pass in our Google API which we'll get to in a second so then when we get the latest YouTube videos we generate thumbnail images for all of them so for each YouTube video we download the thumbnail from YouTube and then we use a library called sharp to resize it and then give it a blur and then put an overlay over it and add rounded corners so it takes a thumbnail that looks like this

2:34 — and turns it into something that looks like this which i think is pretty cool next we have some logic here which fetches all of the assets in the assets directory of my personal github repo so we have this readme which is what appears on my profile page but then we have the assets and the assets right now are just these two thumbnail images and then what we do is we go through each of the videos and upload the thumbnail images and the way we we name these thumbnail images is we just name these images by the order that the videos appear in this list so the first one would be 0 the second one would be 1 and

3:05 — if I had another video in my channel a third video there would be a 2 dot PNG over here so basically what we do is we just go through each of the videos and we'll determine what the paths will be for that thumbnail and then if there's already a file existing at that path we're gonna replace that file with our new image otherwise if one doesn't exist in we'll just create one and what this allows us to do is no matter how many videos are added we're not going to keep creating a new thumbnail image in this repo for each video we're just gonna keep replacing existing ones over here

3:35 — and now we take all of our videos and we generate some markdown for each one so you can see it's just an image and that image is wrapped in a URL which points to the video and then we also have a bolded title with the link which also points to the video and then we have a new line and the date and that gets rendered like this and then we take all of our video rows and we join them so between each video row we put this black

4:05 — image and that gives us a nice divider that separates the two and you might ask well how do we know where to put these videos in the readme well if you look at the readme you can see that we have these two comments YouTube lists start and YouTube lists end so we've stored them here in variables start comments and end comment so what we do is we get the current readme from the github repo and we take everything before that start comment and everything after that end comment and basically take out what's in between it

4:35 — and then we replace what is in between these and then once we have that new readme content we upload the new readme content to github and it's really as simple as that if we wanted to do this with some other content you could just change this logic around of it so instead of fetching the latest YouTube videos from an API you can fit for example your latest medium posts using the medium API and then you can fetch the medium thumbnails if you want to and you can change around this markdown formats over here to really work with a kind of content that you want to show so

5:05 — let's actually set this up so that we can see how the whole thing works together so to set this up for yourself what you want to do is fork this repository so that it's on your github account and you can make the edits yourself and what you also want to make sure you have is a repository that is named the same as your username right so the repository will be github.com forward slash your username forward slash your username right and then add a readme and make sure that the YouTube list starts and YouTube list ends comments exist we don't have to have

5:36 — anything in between them it could just be like this and they can sit anywhere within the readme so let me commit these changes so now you can see that you don't actually see anything here because there's nothing in between those comments next you want to go to net lefur and sign up for a free account and create a new site then you want to link your github account with neckla fire and once you've done that choose the dynamic gets hub profile repo and then for the builder command you're just gonna put in yarn and all this is gonna do is unbold it's just gonna do your yarn dependency

6:06 — install and now the next step is to setup environment variables so let's have a look at the list of environment variables that you need for this so github repo is gonna be the repo that we created earlier so my username forward slash my username and then these two up your github username and your github access token which is going to be a personal access token and this is going to allow metal afire access to your github repos but i strongly recommend that you set up a special github account and give neckla fie

6:36 — access to that special github account and not to you main account because that personal access token will have full access to all of your github repos so what I've done is I've created a special github account let's say my normal email addresses name at example.com I just added plus but to it this is still a different email address to your normal email address but emails sent to this account should come to your normal email so you can see that in my main account I've given my butt access only to this

7:06 — personal repo of mine so now that my butt account has access only to my personal repo let's head into settings for my butt account head into developer settings and personal access tokens and then we're gonna generate a new token and we're gonna give it a name and we're gonna send this token we'll have full access to our repos and once we've generated the token let's copy it and then just keep it somewhere like in a text file over here and then your github username is gonna be the username of your but account cool so now we have our github environment variable set up next

7:36 — is gonna be your YouTube channel ID and if you're just following along you can just use my YouTube channel ID next is gonna be the Google API key so to get a Google API key head over to consult developers.google.com and create a new project so I've just called it a net LaFace service then you want to head over to credentials and in credentials you want to say create credentials and API key this just allows you to access public Google resources like someone's public uploads to their channel this

8:06 — just kind of tells Google who you are to make sure that no one sort of anonymous makes any requests to them ok so now that we have that Google API key let's just store that somewhere as well in a notepad so now that we have all of our environment variables added and again keep in mind that these two are secret so you don't want to share them with anyone but they will be safe if you keep them in a telephone so now let's click deploy site so normally with net refer you to play a site you actually are deploying a website like a static site but here we don't actually have a web site that we're deploying we're just deploying a function and we're gonna go to our

8:36 — function settings and then we're gonna edit the settings here and say that the functions directory so the place that they can find our functions is just gonna be functions right because that's where we stored our net lefur function now once we've saved that we need to go back here to natal if I go to our deploys we're going to trigger a new deploy because now that we have our functions directory setup with this deploy it's gonna find our function and deploy that for us here you can see that it's packaging functions from the functions directory and there it is setting it up

9:06 — so now that our function is published let's head over to functions and here you can see our function is listed and here is the endpoint for our function so let's copy this endpoint let's open up a tool like postman or you can use coal if you want to and we're gonna make a post request to our server list function might take a few seconds because obviously it has to download images and process them and upload them to github but if all is well we should get an ok response over here so now if we head back to our username slash username repo and if you look at the commit history you can see that our jean blonde but

9:38 — committed ad thumbnail and AD thumbnail to add the two thumbnails and it committed to update the videos table so it added in our videos table over here between the start and the end and now if we head back to our profile you can see that our latest videos have pulled in so this is really cool but it still means that we have to call this function whenever a new video is uploaded to automate that we can set up a web hook so we're going to head to pubsubhubbub appspot.com forward slash subscribe which is

10:09 — Google's web hook service which looks like it's from the 1990s and for the callback URL we're gonna put in our service function and for our topic URL we're gonna put in this URL with our channel ID and we're gonna leave everything as default and click do it if all went well you should just see a white screen which is okay whenever you upload a new YouTube video YouTube is gonna call your net lafay function and it's gonna automatically update your readme and that is how you can make your github profile super dynamic and way

10:39 — more exciting thanks for watching thanks for making it all the way to the end and if you enjoyed this please give it a like and subscribe if you want to see more