Select Page

How to Setup a Data Science Portfolio using GitHub Pages step-by-step

Setting up a data science portfolio website is the best way to showcase your work to employers.

In this post I’ll show you how to setup a website for FREE using GitHub pages.

I’ll show you step-by-step how to clone my data science portfolio and customize it for your personal website.

We’ll finish up by taking a look at how to convert a Jupyter Notebook file to markdown. This is the format that GitHub Pages uses to build web pages.

Getting Started

To setup your website, you’ll need to have some familiary with GitHub and Git.

Git is a version control system that allows you to track changes to your code, and collaborate with others.

GitHub is the platform where you can host your code work with others.

If you’re note familiar with Git or GitHub, here’s some free resources to get you started:

learn git

If you don’t already have a GitHub profile, take a minute to sign up for free. You’ll just need a valid email address to get going.

After you login it’s time to clone my data science portfolio to your GitHub. I’ve created a basic data science portfolio template built on top of the minimal-mistakes theme. Be sure to check out the awesome documentation from that theme for advanced lessons on customization.

Go ahead and navigate to the DataOptimal GitHub Profile at the following link:

https://github.com/dataoptimal/dataoptimal.github.io

Once you’re there, go ahead and fork the repository.

You’ll see the Fork button in the top right corner.

fork button

fork github repository

This is basically just going to make a copy of the original repository to your repository. You can then modify and customize the forked copy for your portfolio.

Once you fork the repository, GitHub will bring you back to your profile.

Now let’s go ahead and modify this forked copy for your personal portfolio website.

Start by clicking on the Settings button, which is in the top navigation bar.

github settings

Now let’s go ahead and change the name of the repository.

To make sure the repository is named correctly, use your username, followed by github.io.

In this example I’m using the username “example-user-account”, so I need to rename the repository, example-user-account.github.io.

repository name

Make sure that you follow this naming convention correctly, or else your site won’t build.

After you’ve renamed it, go ahead and click the “Rename” button.

To navigate to your website, just type in the name of your repository into the browser.

In my case, the location is example-user-account.github.io.

It will take a few minutes for your website to build, so don’t worry if you get a “404 Site not found” error message right away. Just check back in a few minutes.

Once your website builds, you should see the following on the homepage.

data science portfolio homepage

You’ll see a “Your Name” button in the top left, and two more buttons in the top right. One that says “About” and one that says “Data Wrangling Projects”.

I’ll show you how to modify these in a minute.

If you scroll down a little bit, you’ll see the rest of the homepage.

data science portfolio information

In the bottom left is where your contact info will be.

Right now there’s a little robot image, but you can replace that with your own image.

Below that is a LinkedIn button, where we’ll put a link to your LinkedIn Profile. Underneath that is the GitHub button to navigate to your GitHub Profile.

Towards the middle is the “Recent Posts” section. Right now there’s just a single post called “Data Wrangling Project”. This isn’t a real project, just an example page. We’ll take a look at that later.

Now that you’ve got a working website, let’s get into the modifications to personalize it for you.

Customizing Your Portfolio

Let’s start by modifying the contents on the homepage.

Go ahead and navigate back to the forked copy on your GitHub Profile.

Navigate to the _config.yml file. This is the config file for changing the settings to your site.

config YML file

For this example, we’ll just make the edits directly from GitHub.

You can just as easily clone a local copy and make the edits directly from your machine. If you’re a more experienced Git user, feel free to follow that workflow.

Go ahead and click the “edit this file” button in the top right. You’ll see that the button is a pencil.

edit this file button

In the “Site Settings” section at the top, go ahead and change the “title” and “name”.

Just as an example, I’ll say that my name is “Joe Smith”, so I’ll change both of those to that name.

Here’s what that looks like.

title and name settings

Now let’s scroll down a little bit and make some more changes.

Scroll down towards the bottom to the “Site Author” section.

Here I’ll change the “name” to “Joe Smith”, since this is the example user I’m creating. Again, this should be whatever your name is.

The robot profile picture is the “bio-pic-2.jpg” file that’s located in the “images” folder. We’ll take a look at that folder in a bit so that you can upload and link to your own picture.

In the “location” section I’ve just put “Somewhere, USA”, but you can use whatever your location is.

site author settings

Now if we scroll down further we can enter in our GitHub and LinkedIn information.

The github section will just contain our GitHub username. In this example, my username is “example-user-account”.

Similarly, the LinkedIn section contains our LinkedIn username.

github path

I don’t have a LinkedIn profile, but there’s an example username commented out with the # sign. This user is “john-doe-12345678”.

To find your personal LinkedIn profile navigate to your LinkedIn page, and copy the last piece of the url. For example, this user’s url would be “https://www.linkedin.com/in/john-doe-12345678”, so the last part to put in the linkedin section is “john-doe-12345678”.

There’s additional modifications you can do, but that’s plenty to get us going. Let’s go ahead and scroll down to the bottom, and click “Commit changes”.

github commit changes

Give the changes a minute, and then navigate to your site, and refresh the page.

You should now see your name appear in the top navigation bar and the bottom left of the page. The GitHub button will also link to your GitHub profile.

github navigation bar update

github bottom left update

Now that we’ve got the basics, let’s go ahead and modify the “About” page.

If you navigate there right now, you’ll see the following.

github about page

Let’s go ahead and learn how to make some modifications to this page.

Start by heading back to the home directory for your GitHub Page.

Next, go ahead and navigate to the _pages folder.

github pages directory

Once you’re inside there, go ahead and open the about.md file.

This is a Markdown file, which is used to convert text to HTML so that the website can be rendered. This makes creating webpages much easier than writing HTML from scratch.

about markdown file

Just like before, go ahead and click on the pencil button in the top right so that we can edit the file.

The top portion I’ve enclosed in the blue box is known as the “front matter“. The front matter is always enclosed between triple-dashed lines. This must always be in the markdown file, and must always be the first thing in the file.

Below that is the page text where we can write a brief description about ourselves.

about raw markdown

Let’s go ahead and modify this section.

Replace the existing text with the following description:

“I’m an apsiring data scientist, experienced with Python and R programming. I specialize in machine learning techniques, and data wrangling. I love working on projects together, so feel free to reach out for collaboration!”

new about file

After you’ve made those changes, scroll down to the bottom and click the “Commit changes” button.

Now if we navigate back to the About page and refresh it, we should see the changes. If it doesn’t update right away don’t worry, sometimes it can take a minute.

updated about page

Awesome, things look great!

So far we’ve customized the homepage, and updated the about page.

Now let’s learn about creating some posts. The posts will be the projects that we want to showcase on our portfolio website.

Navigate to the “Data Wrangling Projects” page. You can find that button in the top navigation bar next to “About”.

Once you’re there, you should see the page where your projects will be displayed. So far there’s just one named, “Data Wrangling Project”.

data wrangling page

Let’s go ahead and click on that project. That will take us directly to that project’s page.

Taking a look we can see a bunch of texts with example Markdown formats.

Various things such as headings, lists, and code blocks.

markdown formats

Let’s go ahead and navigate to this page on our GitHub profile.

Head back to the main directory for your GitHub Pages profile.

Go ahead and click on the _posts folder.

github posts folder

Once you navigate into that folder, click on the “2018-01-28-perceptron.md” file.

Again, click on the pencil button in the top right to edit that file.

At the top, we can see the front matter for this page.

post front matter

It contains the “title” and “date” of our project. Make sure that the date follows the year-month-day format or the page might not build correctly. In this case, the date I used was 2018-01-28.

Underneath that are some “tags” that I used. These can help for Search Engine Optimization purposes, and for users navigating your site. Use some keyword tags relevant to whatever topic your post is about.

Next is the “header” section. Be careful to note that the sub-sections are indented by one space. You can see that the colons for “image”, “excerpt”, and “mathjax” are all indented once space from the “header” colon. If you don’t indent correctly, your page won’t build.

The “mathjax” option is just so that you can render equations nicely using LaTeX. Most of the time you won’t need to have equations, but if you do, check out this resource on LaTeX equation formatting.

I won’t go over all of the Markdown formatting examples, but here’s a snapshot of a few from that file.

markdown formatting examples

For even more examples, take a look at that whole file.

Here’s another useful cheatsheet that you can use for Markdown formatting.

One very final important, you need to follow the “date-filename.md” format. If you don’t, you could run into issues with your site building.

The filename for this post is “2018-01-28-perceptron.md”. The first part, “2018-01-28” corresponds to the “date” that I have in the front matter. The name after that is “-perceptron.md”. You can be a little bit more flexible with this second part. The only strict portion you must have is the “.md” file extension.

Now that we’ve gone over some Markdown basics, let’s create a new post from scratch.

Creating a New Post

Now let’s learn how to create a new post.

To do this, we’ll be using a Jupyter Notebook. These are awesome interactive notebooks that let us combine text in Markdown blocks, with interactive Python code blocks.

If you’re not familiar with these notebooks, take a few minutes to watch this awesome tutorial.

The easiest way to work with these is by installing the Anaconda Distribution.

This awesome distribution will install all of the tools we’ll need, such as Jupyter Notebook and the Anaconda Prompt.

Start by pulling up the Anaconda Prompt. This is the terminal where we’ll launch our notebook from. The easiest way to do that is to type “Anaconda Prompt” into your file search bar.

anaconda prompt search

Now that we have the prompt open, change directory or “cd” into wherever you want to put your project file.

I’m just going to work from my desktop, so I’ll type “cd Desktop”.

cd desktop

Now that I’m working out of my desktop, I’ll launch a notebook.

To do that, type “jupyter notebook”. This will launch a local server so that your notebook can be hosted and viewed locally.

launch jupyter notebook

From there, select a “New” notebook using “Python 3” from the top right button.

new jupyter notebook

Now you should have a blank notebook opened.

I’m going to go ahead and rename this file “Example-Post” in the top section.

In the section I’ll create a “Markdown” block and I’ll put in a title, followed by some body text.

top of notebook

Underneath that I’ll create a “Code” block and create a “hello_world()” function that prints “hello world!”

code block example

Now that we have a basic notebook, let’s convert this to a Markdown file for our site.

To do that, go ahead and open up a new Anaconda Prompt, again, navigate to the Desktop.

Finally, finish up by typing “jupyter nbconvert –to markdown Example-Post.ipynb”.

nbconvert to markdown

For a detailed post with even more instructions on using “nbconvert”, check this out.

Now let’s go ahead and open that “Example-Post.md” Markdown file that was just created.

Use whatever text editor you prefer. I like to use Atom, so I’m going to stick with that.

first-markdown-file

This looks somewhat similar to what we saw before, but it’s missing the front matter at the top.

Go ahead and modify the front matter, as shown in the picture below. The easiest way to do that is by copy and pasting the front matter from the first markdown file we saw.

post updated with front matter

Remember that the front matter must be the first thing in the file, located at the very top. We can see that this is at the top because it starts on line 1.

It’s also important to put the date in the correct format. The date I’m using is 2019-08-12.

Now we need to clean up the bottom of the file a little bit. 

Code blocks for Python need to be enclosed in the following way:

“`Python

code goes here

“`

The output from our code did not get formatted correctly, so let’s include the formatting above to fix that.

code block formatting

The final step is to rename this file properly.

Remember from before that the filename must start with the date.

Let’s go ahead and rename this file “2019-08-12-example-post.md”.

In the next section, we’ll learn how to push this post to GitHub.

Pushing the Post to GitHub

Now we’ll need to get into some basic git.

I’ll assume that you’ve downloaded git, and have some basic git knowledge.

If not, no big deal. Go back to the beginning of this post and check out the git resources I provided.

Let’s go ahead and clone our repository to our desktop.

Start by navigating to our repository, and click the “Clone or download” link. Grab a copy of that url.

clone url

Now, navigate to your desktop, right click, and select “Git Bash Here”. This will bring up 

git bash here

This will bring up a git shell so that we can run git from commands. 

Next type in “git clone” followed by the url you copied.

Next, “cd” into that repository that you just cloned.

cd into repo

Now lets go ahead and copy the “2019-08-12-example-post.md” file that we created, and put it in the _posts folder.

copy file to repo

If we go back to the git shell and run the “git status” command we’ll see that the new file was added.

git status

Now let’s type “git add .” to add the file. Make sure to add the “.”, this will add all files.

In this case it’s just one, but sometimes you might have multiple files you want to add.

We can also run git status again. We can see that the file is green, so it has been added.

git add command

Next, lets type “git commit -m” followed by a message. Something like, git commit -m “added new project to website”.

This is just a way to keep track of what you did by adding a message to your file on GitHub.

git commit command

Finally, let’s finish up by pushing the changes back to GitHub. 

To do that, go ahead and type “git push”.

You’ll probably be asked to put in your GitHub username and password, so make sure to go ahead and do that.

Now if we navigate back to GitHub we can see that our file is in the repository.

 It looks like it worked. 

Let’s navigate to our site just to be sure.

We can see that our “Example Project Post” made it to our “Recent Posts” page.

Let’s click on the project to make sure it looks okay.

Taking a look, things look great!

We’ve successfully pushed our new project to our Data Science portfolio and GitHub!

Conclusion

In this post we learned how to setup a data science portfolio, step-by-step.

Along the way you learned the following:

  • How to setup a GitHub Pages site for Free
  • Configuring and customizing your Data Science site
  • The basics of Markdown formatting
  • How to create a project using a Jupyter Notebook and convert it to Markdown
  • Git basics (clone, add, commit, push)

For even more ways to customize your portfolio website, check out the complete documentation from the minimal-mistakes theme.

If you run into trouble rendering a page, it’s most likely either an issue with your filename structure, or your posts front matter. Review those setions from this post, and you should be fine.

Keep on building and sharing projects, and you’ll have a data science job in no time!

How to Setup a Data Science Portfolio using GitHub Pages step-by-step

Setting up a data science portfolio website is the best way to showcase your work to employers.

In this post I’ll show you how to setup a website for FREE using GitHub pages.

I’ll show you step-by-step how to clone my data science portfolio and customize it for your personal website.

We’ll finish up by taking a look at how to convert a Jupyter Notebook file to markdown. This is the format that GitHub Pages uses to build web pages.

Getting Started

To setup your website, you’ll need to have some familiary with GitHub and Git.

Git is a version control system that allows you to track changes to your code, and collaborate with others.

GitHub is the platform where you can host your code work with others.

If you’re note familiar with Git or GitHub, here’s some free resources to get you started:

learn git

If you don’t already have a GitHub profile, take a minute to sign up for free. You’ll just need a valid email address to get going.

After you login it’s time to clone my data science portfolio to your GitHub. I’ve created a basic data science portfolio template built on top of the minimal-mistakes theme. Be sure to check out the awesome documentation from that theme for advanced lessons on customization.

Go ahead and navigate to the DataOptimal GitHub Profile at the following link:

https://github.com/dataoptimal/dataoptimal.github.io

Once you’re there, go ahead and fork the repository.

You’ll see the Fork button in the top right corner.

fork button

fork github repository

This is basically just going to make a copy of the original repository to your repository. You can then modify and customize the forked copy for your portfolio.

Once you fork the repository, GitHub will bring you back to your profile.

Now let’s go ahead and modify this forked copy for your personal portfolio website.

Start by clicking on the Settings button, which is in the top navigation bar.

github settings

Now let’s go ahead and change the name of the repository.

To make sure the repository is named correctly, use your username, followed by github.io.

In this example I’m using the username “example-user-account”, so I need to rename the repository, example-user-account.github.io.

repository name

Make sure that you follow this naming convention correctly, or else your site won’t build.

After you’ve renamed it, go ahead and click the “Rename” button.

To navigate to your website, just type in the name of your repository into the browser.

In my case, the location is example-user-account.github.io.

It will take a few minutes for your website to build, so don’t worry if you get a “404 Site not found” error message right away. Just check back in a few minutes.

Once your website builds, you should see the following on the homepage.

data science portfolio homepage

You’ll see a “Your Name” button in the top left, and two more buttons in the top right. One that says “About” and one that says “Data Wrangling Projects”.

I’ll show you how to modify these in a minute.

If you scroll down a little bit, you’ll see the rest of the homepage.

data science portfolio information

In the bottom left is where your contact info will be.

Right now there’s a little robot image, but you can replace that with your own image.

Below that is a LinkedIn button, where we’ll put a link to your LinkedIn Profile. Underneath that is the GitHub button to navigate to your GitHub Profile.

Towards the middle is the “Recent Posts” section. Right now there’s just a single post called “Data Wrangling Project”. This isn’t a real project, just an example page. We’ll take a look at that later.

Now that you’ve got a working website, let’s get into the modifications to personalize it for you.

Customizing Your Portfolio

Let’s start by modifying the contents on the homepage.

Go ahead and navigate back to the forked copy on your GitHub Profile.

Navigate to the _config.yml file. This is the config file for changing the settings to your site.

config YML file

For this example, we’ll just make the edits directly from GitHub.

You can just as easily clone a local copy and make the edits directly from your machine. If you’re a more experienced Git user, feel free to follow that workflow.

Go ahead and click the “edit this file” button in the top right. You’ll see that the button is a pencil.

edit this file button

In the “Site Settings” section at the top, go ahead and change the “title” and “name”.

Just as an example, I’ll say that my name is “Joe Smith”, so I’ll change both of those to that name.

Here’s what that looks like.

title and name settings

Now let’s scroll down a little bit and make some more changes.

Scroll down towards the bottom to the “Site Author” section.

Here I’ll change the “name” to “Joe Smith”, since this is the example user I’m creating. Again, this should be whatever your name is.

The robot profile picture is the “bio-pic-2.jpg” file that’s located in the “images” folder. We’ll take a look at that folder in a bit so that you can upload and link to your own picture.

In the “location” section I’ve just put “Somewhere, USA”, but you can use whatever your location is.

site author settings

Now if we scroll down further we can enter in our GitHub and LinkedIn information.

The github section will just contain our GitHub username. In this example, my username is “example-user-account”.

Similarly, the LinkedIn section contains our LinkedIn username.

github path

I don’t have a LinkedIn profile, but there’s an example username commented out with the # sign. This user is “john-doe-12345678”.

To find your personal LinkedIn profile navigate to your LinkedIn page, and copy the last piece of the url. For example, this user’s url would be “https://www.linkedin.com/in/john-doe-12345678”, so the last part to put in the linkedin section is “john-doe-12345678”.

There’s additional modifications you can do, but that’s plenty to get us going. Let’s go ahead and scroll down to the bottom, and click “Commit changes”.

github commit changes

Give the changes a minute, and then navigate to your site, and refresh the page.

You should now see your name appear in the top navigation bar and the bottom left of the page. The GitHub button will also link to your GitHub profile.

github navigation bar update

github bottom left update

Now that we’ve got the basics, let’s go ahead and modify the “About” page.

If you navigate there right now, you’ll see the following.

github about page

Let’s go ahead and learn how to make some modifications to this page.

Start by heading back to the home directory for your GitHub Page.

Next, go ahead and navigate to the _pages folder.

github pages directory

Once you’re inside there, go ahead and open the about.md file.

This is a Markdown file, which is used to convert text to HTML so that the website can be rendered. This makes creating webpages much easier than writing HTML from scratch.

about markdown file

Just like before, go ahead and click on the pencil button in the top right so that we can edit the file.

The top portion I’ve enclosed in the blue box is known as the “front matter“. The front matter is always enclosed between triple-dashed lines. This must always be in the markdown file, and must always be the first thing in the file.

Below that is the page text where we can write a brief description about ourselves.

about raw markdown

Let’s go ahead and modify this section.

Replace the existing text with the following description:

“I’m an apsiring data scientist, experienced with Python and R programming. I specialize in machine learning techniques, and data wrangling. I love working on projects together, so feel free to reach out for collaboration!”

new about file

After you’ve made those changes, scroll down to the bottom and click the “Commit changes” button.

Now if we navigate back to the About page and refresh it, we should see the changes. If it doesn’t update right away don’t worry, sometimes it can take a minute.

updated about page

Awesome, things look great!

So far we’ve customized the homepage, and updated the about page.

Now let’s learn about creating some posts. The posts will be the projects that we want to showcase on our portfolio website.

Navigate to the “Data Wrangling Projects” page. You can find that button in the top navigation bar next to “About”.

Once you’re there, you should see the page where your projects will be displayed. So far there’s just one named, “Data Wrangling Project”.

data wrangling page

Let’s go ahead and click on that project. That will take us directly to that project’s page.

Taking a look we can see a bunch of texts with example Markdown formats.

Various things such as headings, lists, and code blocks.

markdown formats

Let’s go ahead and navigate to this page on our GitHub profile.

Head back to the main directory for your GitHub Pages profile.

Go ahead and click on the _posts folder.

github posts folder

Once you navigate into that folder, click on the “2018-01-28-perceptron.md” file.

Again, click on the pencil button in the top right to edit that file.

At the top, we can see the front matter for this page.

post front matter

It contains the “title” and “date” of our project. Make sure that the date follows the year-month-day format or the page might not build correctly. In this case, the date I used was 2018-01-28.

Underneath that are some “tags” that I used. These can help for Search Engine Optimization purposes, and for users navigating your site. Use some keyword tags relevant to whatever topic your post is about.

Next is the “header” section. Be careful to note that the sub-sections are indented by one space. You can see that the colons for “image”, “excerpt”, and “mathjax” are all indented once space from the “header” colon. If you don’t indent correctly, your page won’t build.

The “mathjax” option is just so that you can render equations nicely using LaTeX. Most of the time you won’t need to have equations, but if you do, check out this resource on LaTeX equation formatting.

I won’t go over all of the Markdown formatting examples, but here’s a snapshot of a few from that file.

markdown formatting examples

For even more examples, take a look at that whole file.

Here’s another useful cheatsheet that you can use for Markdown formatting.

One very final important, you need to follow the “date-filename.md” format. If you don’t, you could run into issues with your site building.

The filename for this post is “2018-01-28-perceptron.md”. The first part, “2018-01-28” corresponds to the “date” that I have in the front matter. The name after that is “-perceptron.md”. You can be a little bit more flexible with this second part. The only strict portion you must have is the “.md” file extension.

Now that we’ve gone over some Markdown basics, let’s create a new post from scratch.

Creating a New Post

Now let’s learn how to create a new post.

To do this, we’ll be using a Jupyter Notebook. These are awesome interactive notebooks that let us combine text in Markdown blocks, with interactive Python code blocks.

If you’re not familiar with these notebooks, take a few minutes to watch this awesome tutorial.

The easiest way to work with these is by installing the Anaconda Distribution.

This awesome distribution will install all of the tools we’ll need, such as Jupyter Notebook and the Anaconda Prompt.

Start by pulling up the Anaconda Prompt. This is the terminal where we’ll launch our notebook from. The easiest way to do that is to type “Anaconda Prompt” into your file search bar.

anaconda prompt search

Now that we have the prompt open, change directory or “cd” into wherever you want to put your project file.

I’m just going to work from my desktop, so I’ll type “cd Desktop”.

cd desktop

Now that I’m working out of my desktop, I’ll launch a notebook.

To do that, type “jupyter notebook”. This will launch a local server so that your notebook can be hosted and viewed locally.

launch jupyter notebook

From there, select a “New” notebook using “Python 3” from the top right button.

new jupyter notebook

Now you should have a blank notebook opened.

I’m going to go ahead and rename this file “Example-Post” in the top section.

In the section I’ll create a “Markdown” block and I’ll put in a title, followed by some body text.

top of notebook

Underneath that I’ll create a “Code” block and create a “hello_world()” function that prints “hello world!”

code block example

Now that we have a basic notebook, let’s convert this to a Markdown file for our site.

To do that, go ahead and open up a new Anaconda Prompt, again, navigate to the Desktop.

Finally, finish up by typing “jupyter nbconvert –to markdown Example-Post.ipynb”.

nbconvert to markdown

For a detailed post with even more instructions on using “nbconvert”, check this out.

Now let’s go ahead and open that “Example-Post.md” Markdown file that was just created.

Use whatever text editor you prefer. I like to use Atom, so I’m going to stick with that.

first-markdown-file

This looks somewhat similar to what we saw before, but it’s missing the front matter at the top.

Go ahead and modify the front matter, as shown in the picture below. The easiest way to do that is by copy and pasting the front matter from the first markdown file we saw.

post updated with front matter

Remember that the front matter must be the first thing in the file, located at the very top. We can see that this is at the top because it starts on line 1.

It’s also important to put the date in the correct format. The date I’m using is 2019-08-12.

Now we need to clean up the bottom of the file a little bit. 

Code blocks for Python need to be enclosed in the following way:

“`Python

code goes here

“`

The output from our code did not get formatted correctly, so let’s include the formatting above to fix that.

code block formatting

The final step is to rename this file properly.

Remember from before that the filename must start with the date.

Let’s go ahead and rename this file “2019-08-12-example-post.md”.

In the next section, we’ll learn how to push this post to GitHub.

Pushing the Post to GitHub

Now we’ll need to get into some basic git.

I’ll assume that you’ve downloaded git, and have some basic git knowledge.

If not, no big deal. Go back to the beginning of this post and check out the git resources I provided.

Let’s go ahead and clone our repository to our desktop.

Start by navigating to our repository, and click the “Clone or download” link. Grab a copy of that url.

clone url

Now, navigate to your desktop, right click, and select “Git Bash Here”. This will bring up 

git bash here

This will bring up a git shell so that we can run git from commands. 

Next type in “git clone” followed by the url you copied.

Next, “cd” into that repository that you just cloned.

cd into repo

Now lets go ahead and copy the “2019-08-12-example-post.md” file that we created, and put it in the _posts folder.

copy file to repo

If we go back to the git shell and run the “git status” command we’ll see that the new file was added.

git status

Now let’s type “git add .” to add the file. Make sure to add the “.”, this will add all files.

In this case it’s just one, but sometimes you might have multiple files you want to add.

We can also run git status again. We can see that the file is green, so it has been added.

git add command

Next, lets type “git commit -m” followed by a message. Something like, git commit -m “added new project to website”.

This is just a way to keep track of what you did by adding a message to your file on GitHub.

git commit command

Finally, let’s finish up by pushing the changes back to GitHub. 

To do that, go ahead and type “git push”.

You’ll probably be asked to put in your GitHub username and password, so make sure to go ahead and do that.

Now if we navigate back to GitHub we can see that our file is in the repository.

 It looks like it worked. 

Let’s navigate to our site just to be sure.

We can see that our “Example Project Post” made it to our “Recent Posts” page.

Let’s click on the project to make sure it looks okay.

Taking a look, things look great!

We’ve successfully pushed our new project to our Data Science portfolio and GitHub!

Conclusion

In this post we learned how to setup a data science portfolio, step-by-step.

Along the way you learned the following:

  • How to setup a GitHub Pages site for Free
  • Configuring and customizing your Data Science site
  • The basics of Markdown formatting
  • How to create a project using a Jupyter Notebook and convert it to Markdown
  • Git basics (clone, add, commit, push)

For even more ways to customize your portfolio website, check out the complete documentation from the minimal-mistakes theme.

If you run into trouble rendering a page, it’s most likely either an issue with your filename structure, or your posts front matter. Review those setions from this post, and you should be fine.

Keep on building and sharing projects, and you’ll have a data science job in no time!

Free Bonus: Top 12 Data Science Books for 2018

Free Bonus: Top 12 Data Science Books for 2018

You have Successfully Subscribed!

Top 12 Data Science Books for 2018

Top 12 Data Science Books for 2018

Sign up with your email address to get instant access for free!

You have Successfully Subscribed!