Build a Data Science Portfolio (Free & Easy) with Jekyll & GitHub Pages | Part 1: Site Configuration

Key Takeaways

the goal for this video series is to create a basic but good-looking data science blog for free with minimal effort this is what the final product looks like and it was surprisingly easy to build and didn't even require much coding from me in this video i'll show you how to get your site up and running but in future videos we'll cover how to add data science content and how to further customize your site to really make it your own but before we get started you'll need three things first a github account which you can create for free second you need to install jekyll on your computer along with its dependencies and i'll put a link to this documentation in the description and third you need an ide or some kind of text editor but here i'm going to be using visual studio code since it really integrates well with github so you may be wondering why github pages and why jekyll well github pages is great because it can host your jekyll site for free github has great collaboration tools and version control jekyll is a static site generator that can turn your markdown files and layouts into a full html site so what's really nice here is that we don't need to make a new html page for each post because we have layouts we just need to make markdown files which are a lot easier so let's get started so the first step is going to be finding a website template now you can build a site from scratch with jekyll but there are thousands of templates online that have a lot of the boilerplate code already set up for us so we don't need to do a whole lot here are a couple links i'll add in the description of places that you can browse for jekyll theme once you find one you like goes to the github repo so the theme i'll be using is called clean blog jekyll and we'll go ahead and take a look at the live preview we've got our main home page which shows us some of our most recent posts we've got an about page our post page which shows us all of our posts that we can click through and again these posts can be generated for markdown files and don't necessarily need a lot of code to be written for them and last we have our contact page but we're going to go back to our github repo and go to the top and we're going to click fork but essentially forking the repo creates a copy of the website's repository and it adds it to our own account that way we can make our own changes on our own website and we also need to rename the repository so we'll go to settings over here and for repository name this is pretty important it needs to be your username.github.io so my username for github is datasliceyt so i'm going to make my repository name datasliceyt.github.io and it's important you set it up this way so github knows that this repository is a github website and we'll click rename so now we're going to locally clone the website all these files right now are in github but we want to get them onto our computer that way we can modify them normally if you scroll down you'll see installation and setup or something similar in the readme of the repository and generally you'll be fine following those steps if i scroll down a bit it specifically has steps for using core files starting with cloning the repository so this is what i'm going to follow so in order to clone the repository i'll go back up to the top i'll click this little green button and i'll copy this link now i'm going to open up visual studio code and click on the source control button and then clone repository and i'll paste that link that i just copied hit enter and i'm just going to select a repo location for it to copy the files to then i'll go ahead and open my repository and you can see in visual studio code on the left all the files here are also the files that are in my github repo so i've locally cloned it to my computer and now i can start modifying the files and if we go back to the steps it says we need to update our config.yml file and once we've done that we can go ahead and build our site to run locally but before i modify my config yaml file i just want to give you a brief overview of the jekyll site structure because in general they'll be roughly the same so this config.yaml file stores our site configuration data now in general when you have a jekyll site and you make modifications they'll appear live on your site just from refreshing the page but any changes you make to your config.yml file you'll need to actually stop your server and then restart it to see those changes and i'll show you what i mean in a second the includes folder usually contains snippets of html code like your header or navigation bar so we define the html code here and we later embed them onto our pages next is the layouts folder these are templates or layouts for our different pages the idea is we could have one blog post layout for our blog post but if we make minor changes like changing the format of the date under the title we'd only need to do it on the layout page and then all of those changes would be propagated to all of our blog posts the post folder contains all of your blog posts and both html files and markdown files are supported here the sas folder generally has where you'd create sas files that turn into the main css file for your website you'll also notice that there's some css files or scss files under assets and you may have some other folders like bin image and post that are specific to your jekyll templates repository and i'd recommend just taking a quick look at them just to see what kind of files are in there and then in the parent folder again you'll have the config file you may also have some other html files that are actually the main pages on your website like about.html contact and index along with some other files specifically there for jekyll for your website to be able to compile like the gem file and the jekyll theme cleanblog.gemspec file so just like the readme in our repo says we're going to update our configuration settings in our config.yml file i'm going to make the title data slice i'll put my email in i'll add a description put in the author for the base url i'm going to leave this empty this is the text that would show up at the end of your github website but because this is the only github website linked on my github account i'm going to leave the base url empty and i'm going to replace url with dataslice yt dot github.io i'm going to also remove all the social profiles for now just because i'm not using any and i'll go ahead and save this file and then it says step three is to build our site so i'll go ahead and copy this command bundle exec jekyll serve and in vs code i can actually go to view terminal and i'll paste my code and it should start running a local server for you you might have an error that comes up that says you don't have the dependencies and if that's the case you just need to run bundle install and then bundle exec check will serve but once you get your site up and running you can go to your browser go to localhost 4000 and you should see what looks like the live preview we looked at earlier but now with your own title description and other items that you configured in your config file all the posts are still here you can tell from the posts folder we have the corresponding files but i'll remove that in a later video so once we've done our main website configuration we want to go ahead and commit these changes back to our github repo that way we can view our website not just locally but also on dataslice.github.io so we're going to stop our server and really quickly you'll actually notice this new folder here in gray called site and each time we run the command to start our server jekyll is actually taking all of our content here and generating a static site that our browser can interpret and it puts it in this site folder so that's actually what github is doing too through github pages it's generating a static site so we actually don't need to upload this folder back to github and you'll notice in our git ignore file which tells us what folders to ignore you'll see that site is in here but anyway to commit our changes for the config.yml file we'll click on our version control button in vs code type in a commit message so i'm going to just call this basic site configuration and we'll go ahead and stage and commit these changes so now we've locally committed our changes but now we need to push it back to our github repo so we'll go down here to push one commit to origin master and hit ok and now it'll actually push these changes back to our github repo so if we go back to our repo and refresh you can see that i made a commit 43 seconds ago called basic site configuration and if we go to datasliceyt.github.io we see our live website here so that's all for this video and in the next one i'm going to cover how to add blog posts both manually written and directly from rstudio i know that everyone may have varying levels of experience so if any of this was confusing to you i just want to point you to a couple more resources that i'll also link in the description if you want to learn more about jekyll i'd recommend the giraffe academy tutorial series most of what i learned is actually straight from these videos for html and css i'd recommend w3schools and for more information on github pages i'll share this link to the getting started documentation and as always if you have any other questions feel free to leave a comment below and i'll try to get back to you thanks for watching and i'll catch you next one