Make your own free online CV/resume with GitHub Pages
A CodeRx tutorial for beginners to start working with GitHub and do some very basic coding
This might feel like a #tbt post to anyone who did this tutorial years ago, but since there are new people following this newsletter, I wanted to re-send it. I wrote this CodeRx tutorial for three reasons:
I know this tutorial isn’t healthcare related, but an impressive CV/resume is important for health tech jobs and having a GitHub portfolio also helps. I hope this tutorial helps historically not-super-technical healthcare workers take a step toward both of these things.
I want more people to have GitHub accounts and at least know how to do some basic things with GitHub.
I want people to know that you can build a pretty cool (and useful) project with very minimal coding.
When I say “very minimal coding”, I don’t mean a “what you see is what you get” (WYSIWYG) editor or “no-code” website building tools. I still mean you are actually coding (in my opinion) - but you don’t necessarily need to understand everything that goes on behind the scenes to be able to do some customization and make things work the way you would like.
This tutorial looks pretty lengthy, but I think you can get through the whole thing in an hour or two of focused effort. If you get stuck, leave a comment on this post and I will try to help you. The screenshots or instructions might be a little out of date too - let me now if anything could use an update. Thanks for reading!
Getting started
In this tutorial, you will learn the following:
How to create a GitHub account, and why it is useful
How to host free websites with GitHub Pages
How to make a copy of a CV website template and customize it
See a live demo of the finished product.
We won’t get into the basics of GitHub (clone, push, pull, etc), but there are definitely guides for that.
At the end of the tutorial, you will have a professional, clean, responsive (looks good on mobile devices) online CV like the one above which you can show off and even keep tinkering with if you want.
Create a GitHub account
A GitHub account is the starting point of learning to code, and is a great way to showcase the work you are doing on any projects. It is also one of the best ways to collaborate with others on coding projects and keep track of changes to your own code. In this case, the reason we are creating a GitHub account is to use an amazing service called GitHub Pages, which allows you to create and host websites for free.
Go to github.com and click Sign up in the top right corner.
Enter a username, email, and password
Fill out the survey about what you’re interested in
Verify your email
When it asks what you want to do first, click Skip this for now
When you’re done, your screen should look like this:
Set up GitHub Pages
We are going to start with a free basic website template that is designed for the purpose of creating an online CV, and then we will make customizations in the next few sections. As I mentioned before, GitHub Pages is the service provided by GitHub to host websites for free. It uses another service called Jekyll to generate static websites from plain text files. You don’t need to know the details of either of these services to complete this project, but thought you might like to know.
The free basic website template we are going to use currently has all of its code hosted in a GitHub repository, which is basically just like a file folder stored on GitHub. The first thing we are going to do with the repository is to fork it, or create a personal copy of the code that you can use to make changes without affecting the original repository.
Go to this GitHub repository.
In the top right, click on the Fork button. It may take a few seconds to complete the process.
Now you have a copy of the original repository on your own GitHub profile. It should look similar to the screenshot below, but instead of
coderx-test
, you should see your username.
Click the Settings button, outlined in red above.
In the Settings page, scroll down to the GitHub Pages section and change the source from
None
tomaster
. Click Save. This means GitHub will start using yourmaster
branch as the place to look for the content of your website. We will get into the details of this soon.
It will take a minute or two before your website is live. Immediately, if you scroll down to the GitHub Pages section again, you will see “Your site is ready to be published at…”. When it is ready, you will see “Your site is published at…”.
Bonus points: If you prefer your CV to be hosted at
<your-username>.github.io
as opposed to<your-username>.github.io/online-cv
, you can change your repository name to<your-username>.github.io
. So for my example, I would set my repository name tocoderx-test.github.io
. Or if you wanted this to be called aresume
instead of anonline-cv
, you can change the repository name toresume
and then it will be hosted at<your-username>.github.io/resume
. For the purposes of this tutorial, I am going to leave mine asonline-cv
.🎉 Congrats! You have hosted your first GitHub Pages website for free! Now it’s time to customize it and make it your own.
Personalize your website
First steps
To get back to your main repository page, click the Code button near the top left of the screen.
Almost all of the work we need to do is in the
_data/data.yml
file, so first click on the_data
folder, and then click on thedata.yml
file.Make sure you are still in the
master
branch of your repository
If you look through this file, you should see a lot of the same information about “Alan Doe” that is currently showing up on your website.
To edit this file, click the pencil icon outlined in red above.
Every time you make changes to this file and are ready to see them in action, scroll down to the bottom and click Commit changes.
It will take GitHub Pages and Jekyll a minute or so to re-build your website
After that, you will immediately see your changes by refreshing your website
Edit the sidebar
The first part of
data.yml
is all about the sidebar.I recommend setting
about
andeducation
toFalse
because I don’t want to see the “how to use?” section and I want education to show in the main sectionI personally removed both
languages
andinterests
sections because they took up too much space and weren’t important to meChange all of the other fields to your personal information
We will update your avatar later
After you’re done updating, scroll down and click Commit changes as described above.
Wait a minute or so and refresh your website to see the changes!
sidebar:
about: True # set to False or comment line if you want to remove the "how to use?" in the sidebar
education: True # set to False if you want education in main section instead of in sidebar
# Profile information
name: Alan Doe
tagline: Full Stack Developer
avatar: profile.png #place a 100x100 picture inside /assets/images/ folder and provide the name of the file below
# Sidebar links
email: hello@webjeda.com
phone: 012 345 6789
website: blog.webjeda.com #do not add http://
linkedin: alandoe
github: sharu725
telegram: # add your nickname without '@' sign
gitlab:
bitbucket:
twitter: '@webjeda'
stack-overflow: # Number/Username, e.g. 123456/alandoe
codewars:
goodreads: # Number-Username, e.g. 123456-alandoe
languages:
- idiom: English
level: Native
- idiom: French
level: Professional
- idiom: Spanish
level: Professional
interests:
- item: Climbing
link:
- item: Snowboarding
link:
- item: Cooking
link:
Edit career profile
Replace the existing text under the
summary
item with a short description of your career profile.You can use line breaks if you want to make it more readable as shown in the example below
If you want to call this section something different (like “Objective” or something), just edit the
title
field
If you don’t want this section at all, just delete it entirely.
Remember to Commit changes when you are done.
career-profile:
title: Career Profile
summary: |
Summarise your career here lorem ipsum dolor sit amet, consectetuer
adipiscing elit. You can [download this free resume/CV template here]().
Aenean commodo ligula eget dolor aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu.
Second paragraph if required.
Edit education, experience, projects, publications, and skills
We will use the education section as an example that you can apply to the other sections. This file is written in YAML (hence the .yml
file extension), but you don’t need to know anything about that to complete this tutorial.
It is important to format everything exactly as the example is formatted (including the number of spaces each line is indented and the specific placement of
-
,|
, and>
characters).Replace the listed fields with your own content.
In the details section, you can add bullet points by using the dash (
-
) character as shown in the example belowIf you only want to show bullet points with no additional introduction paragraph, just delete the introduction text under the details section
If you want to add an additional education subsection, just copy an existing subsection (including
degree
,university
,time
, anddetails
) and paste it below an existing subsection within theeducation
section.If you want to remove an education subsection entirely, just delete one of the education subsections.
Do the same for the other sections - they have different fields, but the same principles apply.
Remember to Commit changes when you are done.
education:
- degree: MSc in Computer Science
university: University of London
time: 2011 - 2012
details: |
Describe your study here lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem.
- Bullet point
- Bullet point
- degree: BSc in Applied Mathematics
university: Bristol University
time: 2007 - 2011
details: |
Describe your study here lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem.
- Bullet point
- Bullet point
Edit photo and favicon
Find a square photo of yourself at least 100x100 pixels in size.
Hint: You can right-click your LinkedIn photo and “Save image as…”
If you want to change your favicon (the little image that shows up in your tabs), generate your own or find one you like somewhere else.
Hint: You can typically find other websites’ favicons by adding “/favicon.ico” to the end of their url. Here’s the favicon for GitHub
Go back to your main repository page (click the Code link in the top left).
If you are changing your favicon: from the main repository page, click Add file -> Upload files and find the favicon to upload. Click Commit changes.
To change your image, navigate from the main repository page to
/assets/images
. Repeat the steps above with your image.Take note of your image name
If your image name is different from
profile.png
, go back to the/_data/data.yml
file and change the line below to match the file name of your image:
avatar: profile.png #place a 100x100 picture inside /assets/images/ folder and provide the name of the file below
Other customizations
Theme color, title, and description
In your main repository page, edit
_config.yml
I would recommend changing
title
,url
,baseurl
(if you changed fromonline-cv
),description
, andtheme_skin
.Remember to Commit changes when you are done.
# Site Settings
title: My Resume
url: 'http://webjeda.com'
baseurl: '/online-cv' #change it according to your repository name
description: A beautiful Jekyll theme for creating resume
# Style will be applied only after restarting the build or serve. Just choose one of the options.
theme_skin: blue # blue turquoise green berry orange ceramic
chrome_mobile_color: #use hex colors (ex:#1976d2) or leave empty if you don't want a color for chrome mobile searchbar
Experience vs experiences
It bugged me that the heading for job experience was plural. Because we have total control over how things work in our CV, we can change it (if it bothers you)!
From your main repository page, navigate to
/includes/experiences.html
and edit this file.Towards the end of the first block of code (pasted below), change “Experiences” to “Experience” or whatever you want to call it.
Remember to Commit changes when you are done.
<section class="section experiences-section">
<h2 class="section-title">
<span class="fa-stack fa-xs">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-briefcase fa-stack-1x fa-inverse"></i>
</span>
Experiences
</h2>
Fix header height on mobile
I noticed the header of the sidebar was too tall on mobile devices. If you notice this, follow the steps below.
From your main repository page, navigate to
/_sass/_base.scss
and edit this file.Around line 39, you should see a
.sidebar-wrapper
section. To fix the issue, delete the line in this section that saysmin-height: 800px;
Remember to Commit changes when you are done.
.sidebar-wrapper {
background: $theme-color;
position: absolute;
right: 0;
width: 280px;
height: 100%;
min-height: 800px;
color: #fff;
Conclusion
Congrats!!! You’ve made it through your first CodeRx tutorial and have a GitHub profile and a free online CV to show for it. Please follow us on LinkedIn, Twitter, and GitHub. Also please share this tutorial with anyone you think might find this useful! Thank you for taking the time to work on this, and enjoy your new online CV!