How to Make a Data Science Portfolio With GitHub

Learn how to create a professional portfolio website without coding using GitHub Pages. This step-by-step guide is perfect for data scientists and non-developers looking to showcase their skills and projects online.

Introduction: Building a Portfolio Website with GitHub Pages

Why a Portfolio Website is Essential for Data Scientists

Everyone, I'm sure and in this article, I'm going to walk through a super easy way to make a portfolio website without any coding using GitHub pages. So it's about that time of year people are graduating college maybe. You're graduating from grad school and now it's time to enter the workforce. If you're like a lot of people, you've probably heard of data science.

You know they're building chat gpts. They're building models. They're using machine learning and AI to solve business problems and create impacts. This sounds like a really fun and exciting field to be a part of as someone that works in data science.

The Challenge: Showcasing Your Data Science Skills Without Web Development Expertise

Why Data Scientists Struggle with Web Development

If you're trying to get a job whether that's full-time at a company or you want to go into freelancing or Consulting, being able to sell yourself is a critical part of the process. So one thing that I found super helpful in getting data science work is having a website portfolio that employers can go to to see my experience, and my projects and just get to know me.

But the problem is, I'm a data scientist. I can build you a machine learning model but don't ask me to build you a website because it's not going to be great. I'm totally incompetent with HTML CSS any kind of like web dev type of stuff and if you're a data scientist, you're likely in a similar boat but lucky for us our friend.

The Importance of a Professional Online Presence

GitHub has this built-in functionality for generating and hosting websites completely for free without requiring any kind of web development experience. Whatsoever, so GitHub Pages makes this spinning up a website super simple. I used this functionality a lot in grad school in spinning up websites for my own portfolio and for projects that I was working on quickly running through here.

GitHub Pages: A Free and Easy Solution for Non-Developers

Overview of GitHub Pages and Jekyll

What are the steps you have these two options you can build a website from scratch and just host it on GitHub or you can go a much easier route where GitHub will generate a website automatically from your readme file using a package called Jekyll. And so here all you gotta do is fill out your readme file with what you want in your portfolio.

Then Jekyll will take that text and generate a website based on the theme that you chose not too long ago like one two years ago. This was like really really stupid. Simple just looking at this website it's a pages.github.com.

Getting Started: Creating Your GitHub Repository for Your Portfolio

Step-by-Step Guide to Setting Up a New Repository

Just a few steps so you go to the repository settings and then it used to have this Theme Chooser built in. So you just say which branch do you have your readme file in and then you like choose a theme. Then you have this user interface. This GUI where you could just click which theme you wanted and it would just automatically generate the website. So when I first wanted to make this article. I'm like okay, yeah. It's gonna be super simple show people how they can make a website completely for free without any web development experience.

However, when I came to spin up my website, this button was not there anymore. This kind of let me down a rabbit hole, trying to figure out what happened. I couldn't find anything anywhere. No one's made a website article about this, no one's written a blog about this, and GitHub's documentation was not very helpful to me. I finally figured it out. Now, I'm gonna walk through step by step.

How you can build your website using GitHub pages and this built-in functionality? So this is what the final product looks like. So it's a really clean design-looking website. You have your picture here. You think about your name like whatever job you're looking for. I didn't do any kind of coding.

Whatsoever, I just typed up a markdown file and this was automatically generated. So I was able to throw this together in less than 30 minutes because of a lot of the stuff. It's just like copy-pasting from your LinkedIn or your resume or something similar. So this is the final product.

Now, I'll walk through the steps to build this. So first step go to your GitHub Pro profile. If you don't have a GitHub profile, go ahead and make one it should be straightforward and a good idea. If you're trying to get a job in data science here at our GitHub profile. We're going to go ahead and click repositories and you can see this is the example portfolio I made this past week.

Choosing a Repository Name: GitHub Username or Custom Name?

We're going to start over from scratch and click new and then we should get a screen like this. So create a new repository repository name. So we have two options here option. One is if you want this portfolio website name to just be your GitHub username.github.io. You just type that in right here. So Shaheen T is my username GitHub dot IO. This will appear in the search bar and this will be your website name. I already created a website portfolio using this website name. But if you haven't done this already then it should work for you.

The second option is you can give it any repository name you like. So it could just be a portfolio. Well, it could be data science. It could be a data scientist. You know whatever you want and what's going to happen in the search bar. For example, if you make your repository name portfolio, what's going to appear in the search bar is going to be your GitHub username. GitHub dot IO slash. Whatever you make this repository name. So if I make a portfolio, it'll be Shaheen T's github.io portfolio, Okay.

So, we'll go ahead and name it portfolio. We don't need a description here and it's probably best that we don't have one, but we're going to initialize our repository with a readme file. So we'll click that this is gonna make it really quick and easy to spin up our website. I'm not going to have a git ignore. We're not going to add a license that's not necessary. So just to recap, we make our repository name either our GitHub username.github.io or whatever other name that we like so just go in portfolio. Here don't need a description and just be sure to click read me and then we're gonna create a repository.

Configuring Your Portfolio: Using the `config.yml` File

Adding a Config File: What You Need to Know

There we go so now we have the super Bare Bones repository. So we already have a readme file here. But we're going to need to add one more file called a config file. So to do that we can just go to add a file, create a new file and we'll call it config.yml. So now that GitHub got rid of this choose theme button in the interface. So let me go back.

Now that they got rid of this choose theme button here you can't have this super easy user interface for picking your theme. You have to do it using this config.yaml file. So this is actually super simple and it's not much more difficult than this interface. So I'm going to kind of jump ahead and this is the config file.

For the example, that I've already put together. We can just go ahead and like copy-paste this. So title would be at the top left corner of the portfolio website. You can just put your name here logo. We can actually comment on this for now because this is going to be the relative path of the image. You want on that left-hand side. So let me just go back. This is where the title appears. This logo's relative path is where this image is located in your GitHub repo. But, since we're starting fresh, I'm going to comment on that.

If you want to add text below here. So if we added a description to our repo it would appear here or we can overwrite that by manually putting a description here. So show downloads true, it's just giving you these options to download the zip the tar, or go to the GitHub, So I put true. For example, in my portfolio if people want to steal the code but for yours, I mean this is optional. If you want people to be able to download your code. You can make it false or just comment it out and then finally the key thing is this theme.

Choosing and Applying a Jekyll Theme

So instead of being able to click on the theme, we have to manually kind of type it out using this syntax here. So I went with this Jekyll theme minimal. So that's what we're seeing here, it's super Sleek super nice. I think it makes a lot of sense for a portfolio.

Designing Your Portfolio Website with Jekyll

How to Customize Your Portfolio with Markdown

If you don't like that for every reason, there are a bunch of other supported themes. For example, let's click on architect and we can see what that looks like. So that looks like this a little different design but again this will be generated automatically based on your readme file in the GitHub repository. So I'll share this link, it's pages.github.com themes and I'll share it below. If you want to explore the other theme options, okay.

Understanding the Basic Elements of Your ReadMe File

We have our title, and we're going to have show downloads. We're going to just comment this out. We don't really need that and then we're just left here. So really right now all you need is the title and the theme that you want to choose. You go ahead and hit commit changes. So now, you have two files in your repository. You have your readme file and your config file. Now you can just start adding stuff in here. So like data scientist education and work experience, data scientists are full of points.

Here, we go big impact project one big impact project two. Let's see what else is good to have here education and your work experience. What else do I have projects? Yes, that's important. So projects see and then so on and so forth. So you can start just building some stuff out. I'm just doing this. So when we spin up the website something appears. So just through something really simple together here and so still we just have a readme file in this simple config.yaml file.

Deploying Your Portfolio: Final Steps and Troubleshooting

Deploying from a Branch: Settings and Configuration

The last step is to go to settings. Here we're in settings. Then we're going to scroll down to pages and then we have this section here, build and deployment. So here, we're going to leave the source as is we're going to deploy from a branch, and then under Branch, we're just going to hit Main and then we're going to keep it as root. Because we want GitHub pages to look at the readme file and the config file in our root directory.

We're going to hit save. So now notice that we didn't have that super simple GUI to select our theme and then if you hit add a jackal theme. You get some instructions here, but I got tripped up on the theme name because this isn't the right syntax here. So this typo here, it's made this like a really straightforward task like a two-hour task for me. So you can put just Minima or Minimal.

Common Issues and How to Resolve Them

Here, you have to put Jekyll Dash theme Dash Minima. So if you were in a similar boat and you were struggling for hours like me, it's just a simple syntax issue. That's why the website's not working.

Reviewing Your Portfolio Website

What Your Finished Portfolio Looks Like

Anyway, going back. So if we go here to actions, we see it's already been built. But, if we came back earlier. We would have seen this is like processing and something's happening. We built Pages and deployed them.

Comparing Your ReadMe File with the Live Site

If we click over here to deployment, we can hit this view deployment option here and it'll take us to our website. So look at that and then you can look in your search bar. What the website name is? So for me, it's the shaheent.github.io portfolio and then if we look over here, we see our readme file built out.

Enhancing Your Portfolio: Adding Images and Links

How to Add and Customize Images in Your Portfolio

We have data scientists which was in the title. So, I'll go back. So we can compare. We have our readme file here. So data scientist education work experience projects EEG band discovery that looks a little different, but looks better here on the website, and then we just build it out. So we can kind of do it on the cooking shows where I don't walk through the process here and just kind of jump to the final product. So going to this example portfolio repo.

Here are a few simple things to do. I'll definitely add an assets slash image path and then dump all the images, you want to use in your portfolio here. The next big thing is we'll go ahead and edit this readme so configuring a readme file is a lot easier than building a website with HTML. You can just copy-paste this or clone the repo and use this as a starting point.

Incorporating Links and Other Content

You can customize the structure. You can start completely from scratch, whatever makes sense for you. Just a couple things you know, you can add links here. So this is the standard GitHub syntax. You just say what you want the text to appear as and then this is what the link is that people click on.

If you want to add images, you put the title of whatever image. You put the relative path to the image so again it's in this assets image subdirectory and then that's the file name and then so on and so forth

Conclusion: Launching and Optimizing Your Professional Portfolio

Tips for Continuous Improvement and Career Growth

So really go to town on this. You know you can spend probably hours just tweaking and fine-tuning it. But this is hopefully a nice jump start. It'll get you something pretty close to a final product, okay. So I rambled on a bit at the end there. But hopefully, this is helpful. You know it's hard to get that first job and bring it to the data science field.

Additional Resources and Community Support for Data Scientists

I hope this kind of accelerates that process for you. If you enjoyed this article please consider liking subscribing and sharing the article with others. If you have any questions about building a portfolio or getting a job in data science. You know feel free to drop those in the comment section below. I do read all the comments and I try to respond to all the questions that I receive and as always thank you for your time and thanks for reading.

How to Make a Data Science Portfolio With GitHub - icoversai

Table of Contents:

Introduction: Building a Portfolio Website with GitHub Pages

Why a Portfolio Website is Essential for Data Scientists

The Challenge: Showcasing Your Data Science Skills Without Web Development Expertise

Why Data Scientists Struggle with Web Development

The Importance of a Professional Online Presence