Build a Data Science Portfolio (Free & Easy) with Jekyll & GitHub Pages | Part 3: Customization

Key Takeaways

welcome back to my tutorial series on building a data science blog check out part one and part two if you haven't already where i show you how to set up your website and add data science content for this third and final video i'm going to show you how we can further customize your site and really make it our own but before we get started i will say that because we use the jekyll blog we can essentially modify our site in any way we want so it'd be impossible for me to cover everything in just one video so instead i made a list of some functional and aesthetic changes i want to implement and i'm hoping it at least gives you a general idea of jekyll's potential so let's get started so once we have vs code open we can go ahead and run our jekyll server so bundle exec jekyll serve and we can just take a quick look at our site so the first change we're going to make is actually removing this contact page and instead adding a youtube page so we'll go back to vs code and because that element is in our nav bar that's going to be somewhere and includes we've got navbar.html and this is the actual link going to the contact page so we're going to change this to youtube and then instead of having the href argument going to the contact page we're going to set it to our channel link so we'll save that and we can refresh and now the contact page is gone and when we click on it it goes to our youtube page now the next change is going to be changing the background on each of our pages so we've got the home page the about page and the post page and we went into changing the background for different posts so this isn't too difficult but let's go over to our image and you see we have those pages right here so i'm going to actually delete all of these and now i've got some new images that i'm just going to drag in and put right in that folder now let's take a look at that so we've got our new home background a new about background and a post background actually it looks like our home background isn't showing up it should be this image so let's see why that isn't working let's go to index.html and the file name is bg index but ours is bg home so let's just change that refresh and now it looks good so our next change is going to be modifying the about page right now it's just lorem ipsum so let's go ahead and add some content we'll go to about.html and you can see right there but instead of modifying this about.html page directly we're actually going to create a new one called about.md and we'll copy the front matter and paste it in our md file and now we can delete this html and the reason i'm making it a markdown is just so i can write in markdown i just think it's easier for me and then i'm going to paste some of my content that i already wrote just into this markdown i'm also going to get rid of the description and i'll save that and we can go back to our site and there we go and then the next change is going to be removing this posted by data slice this appears on the home page on our post page and then if we go into a post it appears here and the reason i want to get rid of it is because i'm going to be the only one posting on this site and i just don't think it's fully necessary so the easiest way to find the files that have posted by let's just search for posted by and you see it's in our home in our post and then our index and we want to remove the posted by data slice on so we're just going to delete this right here and then we're also going to remove the posted by to the on right here and then last is the home page and we're gonna do the same exact thing we'll save it go back and just check that it changed so it changed on our home page changed it on our post page and it changed on our individual posts and then the next change i want to make is actually changing this data slice text into a logo but the tricky thing here is i'm actually going to use two different versions of the logo because right now we have data slice in white and then if we scroll down and scroll up a bit there's now this nav bar that appears again and now all the text is in black so i'm going to have like a light version and a dark version of the logo and i'll show you guys how to deal with that so i'm first going to drag over the two versions of the logo i have into our image folder and i'll just show you what these look like so this is the dark version it says ds in gray and then this is the light version you can see it's in white and we're gonna go back to our navbar.html and we've got this a tag with the site title so this is where it actually says data slice i'm gonna get rid of that and i'm gonna create two new tags they're both gonna be image tags the source is gonna be first we're gonna pick the relative path of the dark logo and we'll paste it in here but we do have to make sure that we remember our slash we're gonna make the class called logo dash dark and then we're going to copy this line and paste it and then make this the light version and this is going to be logo light and essentially we want to only show the dark logo on that white background and the light logo on the dark background but if we go back to chrome right now it shows both of them so let's go ahead and fix that we're going to go into our assets folder into vendor and to our css and we're going to go to navbar so in our navbar scss we want to go to navbar brand which is what's enclosing the current image tags we're going to come down here and specify a new class logo dark this is what we're using for the image tags and this is going to be when we're scrolled up all the way to the top so like this we want the light logo to be displayed so we're going to make logo dark display none and then we're going to copy this paste it and change dark to light and then make the display inline save that so we'll go back to chrome just see so that looks right and now the only issue is we need to need to also have it switched to dark when we scroll back up and we see this white so we'll come and copy this and scroll down a bit to where we see when the user scrolls down and we again have that nav bar brand and it's setting the color to that dark gray so we're going to paste this down here except now we just need to switch the two display properties so i'll go ahead and do that and save it we'll go back to chrome and that logo looks good and if we scroll up that logo looks good but the only problem here is now this nav bar is actually coming down too much so let's see if we can go ahead and inspect the element and see what's causing that to happen let me make this full screen so i'm gonna try to select the nav bar and i see that there's this property called top if i go ahead and play with this number i can see we can actually set it and it looks like 90 pixels is about a good spot so we'll go back to vs code and we see that right here so let's make that 67 into 90 and we can refresh our page the logo looks good and if we scroll up the navbar is exactly where we want it to be so that's great the next thing is going to be adding a custom fave icon to the actual site so right now you see it's the default one it's just this gray globe but it's the icon that will appear on the tab and also if anyone bookmarks your site it's the icon that the browser would automatically download so i'd recommend going to this website realfaveicongenerator.net all you need to do is select your icon that you want to use i'm going to use this one right here and essentially it'll do a lot of the grunt work for you and generate a lot of different images and the correct scripts the only important thing is that before we hit this generate button i actually don't want to add everything to the root of my website because i don't want to make that folder messy so instead i'm going to come down here and set this to assets slash fave icon and i'll click this generate button and eventually it'll redirect you to this other page where it'll generate a package for you to download it also gives you some steps on what to do which is pretty nice but we can go ahead and download this package and we'll go back to our vs code we're going to create a new folder under assets called fave icon but i already have one right here and then we're just going to drag in all these files into there we'll go back to this site we just need to copy all of this go back to vs code and we'll go to our head.html that has all the links to our style sheets and any js that we're using and we can just paste this at the bottom down here and i'll save that go back to our data slice site refresh and now you see we have the data slice icon at the top the next change is going to be actually modifying the font that our website uses there are actually two fonts on our website the sans serif font and the serif font i'm gonna go ahead and keep the serif one but i'm gonna modify the sans-serif one so first we'll find a font i really recommend fonts.google.com and i think i'm gonna go with this font called work sans and now you can select the styles you wanna use so this is pretty important if your css is using different varieties of the font so the thin or medium or bold version you need to make sure that you download those or else all the text will appear the same so i'm just going to grab a few of these styles and then google fonts gives me this neat little thing to embed into my head so i'll do that again right here you can actually see on these lines these are where the fonts are being imported from so i'll paste that right here and we'll save that and now we'll go back to our assets and i think the mixins.css yeah this has where the serif font and the sans serif font are and it looks like it's using laura and open sans and then after that it shows fonts that are going to be the fallback but for the sans-serif font now we're using work sans so let's just change that we'll save it go back to our site and it might not be a huge change but we can refresh and we do notice that the font does actually change and then the last big modification i want to make is actually adding syntax highlighting to our blog posts because right now all of our code blocks are just colored black there's no syntax highlighting at all and it's actually not that hard to configure so we'll go back to vs code and we need to go to our config file so let's open that up for the build settings we need to add a highlighter and the one we're going to use is called rouge and just remember that any time you modify your config.yml file you have to stop your server so we'll hit control c and then rerun it just for the changes to go into effect but we're still not done yet because even though we're now able to interpret code we still don't have any css to highlight the code so i actually found this github repo with some different styling for code so i'll download this as a zip we're going to open this up and i'm going to create a new folder let's do it under vendor and we're going to call it syntax highlighting and i'm gonna drag in these four scss files and they're just different themes so you don't really need all of them but by default our website doesn't know that these scss files are here so we just need to do one other thing which is go to our main css file styles and then we need to import the scss highlighter that we want to use i just copied and pasted this line i'm going to choose the github styling so i'll copy the relative path and now i'm just going to paste this here save it and if we go back to chrome back to our website and refresh you see that it does make it into a code block but on this post specifically we don't actually specify the syntax if we go to our other post though that we directly imported from rstudio and from jupyter notebooks we should see actual syntax highlighting here and it looks like we do and let's just check interactive maps and yep this is highlighted for r so the reason that it's not in this one is because this is the markdown file we made so the difference there is when we have these code blocks we're not specifying what language it is whereas in these code blocks for the other posts we actually are you can see it says r here and then for that other markdown it says python so if you do want to have that syntax highlighting you need to make sure that you specify the actual language so i think that's all i'm going to change for now but i do think this site looks a lot better and hopefully this gives you an idea of what jekyll can do the last thing i want to do is just commit and push my changes so i'll add a message customize site and i'll commit that and once it's done being committed i just come down here and push it and now i can go back to my github repo which we see was just changed 23 seconds ago and if we head over to the actual live site we see that my changes have been made so obviously in addition to all the changes i made you can definitely go further i'm going to share a link with you guys for these jekyll plugins so if you want to add emojis to your site or embed youtube videos or really do any of these things down here you're able to do that with jekyll you just need to follow along with the documentation additionally you can add a custom domain to your website so if i wanted this to be dataslice.com you can do that i'd recommend namecheap or google domains and again setting it up isn't too difficult i'll add some documentation for that too in the description but anyway if you make a cool blog or find any cool chuckle themes definitely share it down below additionally if you have any recommendations for future videos also let me know and if you found this series in any way helpful i definitely appreciate if you like the video and subscribe to the channel just to stay up to date i've got a lot of video ideas in the backlog but thanks for watching and i'll catch you in the next one