Next Level GitHub Profile README (NEW) | How To Create An Amazing Profile ReadMe With GitHub Actions

[Music] i'm sure by now you know that you can add a github profile readme but in this video i'm going to show you how to take it to the next level we're going to add an automated feed of my blog posts youtube videos and github stats really quick before we get into it today's video is sponsored by scrimba if you've never heard of scrimba you really need to check it out this is the most unique learning platform that i've ever seen the unique thing about scrimba is the interactivity you learn by doing you get to edit the teacher's code during the lesson scrimba just launched the front-end developer career path this is a curated set of courses that are arranged in a way that will help you efficiently learn front-end development you'll learn enough html css javascript and react to get your first job as a front-end developer it contains over 70 hours of top-notch tutorials hundreds of coding challenges and dozens of real-world projects you're going to code more than you watch so act now on this amazing offer before it goes away the link is in the description below customizing your github profile page with a readme file is as simple as creating a repo that is named the same as your username so i created a folder on my computer named codestacker and i have that open here in vs code now we're going to create a readme.md file so i'll just create a new file readme.md this is a markdown file and the point of this video isn't to teach you about markdown i'm going to assume that you have a basic knowledge of markdown and if not just copy and paste my code and modify it to fit your needs a link of course to the code will be in the description below so i'm just going to paste in some markdown and we'll quickly go through it so i start out with an h3 and i say hi there my name is jesse aka code stacker and i'm going to use definitions so this is going to be a link to my website and then i have another h2 heading it says i'm a husband father developer and teacher and then i'm currently working on a vs code course and then a link there currently learning everything and i'm looking at collaborating with other content creators one of my 2020 goals is to contribute more to open source projects and then fun fact i love to draw and play musical instruments then i've got some contact information these are just icons that link to my website youtube twitter linkedin and instagram right then we've got a line break and then my languages and tools again these are just icons they're images and then these have links to playlists on my youtube channel and then if we go down a bit more a couple of line breaks and then these are all the definitions these don't actually show up uh these are just linked within the document so i've got my website definition twitter youtube and so on all right so this is just the basics let's go ahead and upload this to github and see what we have so before i do that actually let's look at my github profile right now this looks like an average profile actually it's very underused again my goal is to contribute more in 2020. now let's save this and then i'm going to go to my source control and then we're going to push to github and then again the name of this needs to be the same as your username so my username is codestacker so that's what i'm going to do and we're going to push it then we're going to select the files that we want it to push there's only one file so that's the readme and we'll say ok and now it's getting pushed there we go now we can open in github and by default vs code pushes it to a private repository so this needs to be set to public in order for it to work so we'll go over to settings and then we'll scroll down and change the visibility we need to make this public and we have to type in this so i'll just copy and paste it and i understand right now let's go back to my profile page and now you'll see the readme looks a bit different so all that markdown defines what we see here i've got the links here to my website youtube twitter linkedin and instagram and then all of the languages and tools that i use so this is probably about all that you've seen so far this is a typical profile readme again like i said we're going to take this to the next level so we're going to add a list of my blog posts to do this i'm going to use a github action called blog post workflow and this was created by bontam krishna r sorry if i mispronounce your name and of course a link to the repo will be in the description below so if we scroll through this we'll see that we need to add this blog post list start and end comment to our readme file so let's go over to vs code and do that so i want that to be right after these line breaks i'm just going to paste that in so we're going to have a header here it's going to say latest blog posts and then we have these comments so the github action workflow will add the actual blog posts in between these comments so if we go back to the readme the next thing that we need to do is to create a folder named github and within that another folder called workflows and within that we'll create a yaml file so let's go back to vs code and do that so back in my files i'm going to just do that in one line here we're going to create a file and it's going to be dot github slash workflows slash blog dash post dash workflow.yaml there we go so we created those directories and the file all at once and now we have a blank yaml file so the wikipedia definition of yaml is a human readable data serialization language basically think of it as like xml or json it just provides data points so i'm going to paste the code in here so we're going to provide a name and you can name it whatever you want latest blog post workflow and then on schedule we're going to run this every hour so this is a cron job and then i added workflow dispatch so what this allows you to do is manually run it without this it will just run on schedule and then jobs we have an update readme with blog job then we've named it update this repos readme with the latest blog posts runs on ubuntu latest the steps we're going to use actions checkout version 2. we're going to use gantom krishna r's blog post workflow at master and then with feed list this is where we give it our list of blog posts now this can be comma separated if you have multiple sources i'm just going to pull from my dev2 feed for now so i'm going to save this and then i'm going to save this as well and then we'll go to our source control and let's go ahead and commit this so we'll say added blog post workflow and then let's sync and let's go back to github so now that we've added that you'll see here latest blog posts and there are no posts yet so let's go back to the repo and then you can see that it's just been updated and then let's go to actions no actions have been run yet and we can see our new workflow let's click on the workflow now we can run our workflow manually let's just refresh this and we'll see that it's been queued normally it just takes a few seconds so we'll wait on that there we go so it took 25 seconds total and now we can go back to our profile and let's refresh and now we have our list of blog posts now by default it will pull in the latest five and there are a few other options that we can set so if we go back to the blog post workflow repo here we can see these options so we have our feed list which is required we have that we can also set the max post count by default it's 5. we can increase that or decrease it we can specify a readme path if the readme is in a different directory we can add a github token and we can change the default comment tag name so by default it's blog post list but we can name it to something else which we're going to do in just a minute let's add our youtube video list next let's go back to vs code so now i'm going to actually put that before the blog post i'm going to add that right here we're going to do something very similar i'm going to say latest youtube videos and then on the comment i'm going to change it to youtube start and end so let me save that and now we're going to create a new file and we'll name it youtube dash workflow.yaml and then i'm going to paste this in so this one is called latest youtube videos we're gonna schedule it for the same thing run every hour we have our workflow dispatch so that we can manually run it and then jobs is going to be update readme with youtube update the repos read me with the latest videos from youtube again ubuntu latest checkout and the same blog post workflow now we're going to change the comment tag name that's one of the options so that's where we specify we're looking for the youtube comment and then we're going to add our feed list so for youtube you can get your feed of youtube videos with this url and then we have the option here of channel id and then this is my channel id so you'd want to change this to your channel id let's save that and we'll go ahead and commit those changes so i'll just say added youtube list list workflow and then let's sync and then we'll go back to github and then let's refresh our profile now we should see the heading here latest youtube videos but we haven't gotten our list yet so let's go back to the actions tab here in our repo and let's refresh this right now we're just seeing the one workflow and here's our next workflow latest youtube videos so this one hasn't run yet let's go ahead and run it we'll refresh and we should see that it's queued and we'll give it a few seconds all right so that took 26 seconds let's go back to our profile and refresh and there's our list of latest videos pretty awesome all right the last thing that we're going to add is github stats for this we're going to use github readme stats and this is from anurag azra again sorry if i mispronounce your name this is an awesome repo here so it's very simple to implement it doesn't require any actions we just need to add a simple line to our readme file let's go back into vs code and then in the readme we're going to add it right after the blog post in case you're wondering these are like horizontal rules um like a hr tag in html the three dashes so we're just going to add this image tag and i have an alt in here and then here's the source this is what we're pulling out so it's github readmestats.versel and then api username so you want your github username to be here and then i've got a couple of options here show icon set to true and hide border set to true all right so let me save this then let's commit these changes added github stats and then let's sync and we'll go back to github go to my profile and let's refresh and now at the bottom we see my github stats not very great again my goal is to contribute more to open source this year so i hope to get these stats up but let's go back to the repo here there's a lot that you can actually do with this you can hide individual stats so if you want to hide your stars your commits your pr's issues or contributions you can also make private contributions count towards your total commits you can show or hide the icons and you can change the theme so there's a few different themes i just went with the the default white theme but you can change to any one of these and then there's a ton of customization he did a great job on this you can change the title color text color icon color background color all of these are completely customizable you can also add extra pins so you're no longer limited to six pinned repositories besides that you can also style these pins which i'll show you in just a minute this is what the pin would look like there's also a language card so you can add this url and have a language card and this is an example of what that looks like and then here is some demos so this is the default hiding specific stats showing icons the different themes this is the customization to the repo card so if you want to pin extra cards you can also customize the theme of those so this is a great repo so it's pretty cool i like being able to have the ability to customize your github profile like this and i'm excited to see what else people come up with to add to our profiles let me know what you think that's going to be it for this video i hope it was helpful like this video to help me out and subscribe if you haven't already for more videos like this [Music]

Channel: codeSTACKr

Views: 674,944

Keywords: github profile, github 2020, github readme, github readme tutorial, github tutorial, github for beginners, github pages, github actions, github explained, how to setup a github profile, how to add a readme to your github profile, github, github profile readme, github markdown, markdown, readme file, github readme image, github profile settings, github tutorial for beginners, github readme template, readme.md, github actions tutorial, github workflow tutorial, github workflow

Id: ECuqb5Tv9qI

Length: 14min 28sec (868 seconds)

Published: Wed Jul 29 2020

Reddit Comments

[u/Earl61]

This was cool ok thank you

[u/Kawaaii-Programming]

So how about everyone shows their creation here now? I wanna see what everyone else made so I can maybe have some inspiration 😊

[u/codeSTACKr]

Finally, your GitHub profile page is useful! No more boring profile. Customize it with a new feature! I'm going to show you how to create an amazing GitHub profile README and take it to the next level.

We are going to create the profile repo, add a README.md file, create an automated feed of blog posts, YouTube videos, and GitHub stats.

We'll use GitHub Actions Workflows to get our latest posts and list them on our profile.