I stumbled upon a post by Chuck Groom regarding the benefits of creating a one page profile. I liked the template he came up with but there were a few things I wanted to change. So I created my own template and in this post we’ll be looking at how to customize it.

A couple of things to consider before getting going… the template we’ll be working with is an adaption of https://github.com/chuckgroom/onepage-bio and https://github.com/BlackrockDigital/startbootstrap-freelancer. Either of these templates are good alternatives and if you aren’t already familiar with Jekyll I’d recommend just using the HTML template, i.e. the startbootstrap-freelancer template. Jekyll might be a bit of overkill for a simple one page site but I do prefer the structure it allows versus a plain HTML site which is why I went with it.

A summary of the primary differences between the template I’ve created and the templates above are…

The primary differences between this template and the Chuck Groom version:

• Updated to use Bootstrap 4.1.3.
• Updated to use FontAwesome 5.3.1.
• Removed the color variables from the config file so experimenting with different color schemes doesn’t require a Jekyll restart.

The primary difference between this template and both the Chuck Groom and Startbootstrap-Freelancer versions:

• Replaced the contact section with a resume download section.
• Added links in the footer.

OK, with that out of the way, let’s get going!

Getting started

The first step is download the code from GitHub.

Clone the Repo

We’ll clone the repo, but if you prefer you can download a zip file of the code.

If cloning…

Terminal

git clone https://github.com/riebeekn/jekyll-bootstrap-4-one-page-bio.git
cd jekyll-bootstrap-4-one-page-bio

What we’re starting with

OK, we’ve got the code, let’s see what we’re starting with.

Terminal

jekyll s --livereload

If you navigate to http://localhost:4000/ you’ll see the following.

Not too bad, now let’s see how we can customize the template for our own purposes.

Customizing the template

The process of customizing the template is pretty simple. There are 4 required steps and 2 optional steps which we’ll be going over.

• Updating the _config.yml file.
• Updating the profile image.
• Updating the resume file.
• Updating the text.
• Updating the color scheme (optional).
• Updating the favicon (optional).

Updating the _config.yml file

The _config.yml file contains a number of key settings we need to change. The comments in the file are pretty self explanatory but we’ll go thru and update the various settings to see what affect they have.

Site settings

First let’s tackle the site settings section.

/_config.yml

# SITE SETTINGS
# replace with the name you want displayed on the bio (i.e. your name)
name: John Doe
# replace with your desired description
description: Software Developer in SomeCity, SomeCountry
# replace with keywords you want placed in the meta keywords section of the HTML header
keywords: Software Developer, .NET, Ruby, Elixir, Javascript, HTML, Testing
# replace with your contact email (used for the email link in the footer)
email: john.doe@example.com
# replace with the production URL of your bio site
root_url: https://johndoe.com
# optionally replace with the name / extension of your image file
# i.e if using perhaps a .jpg instead, the below should be changed to `profile.jpg`
profile_image_file: profile.png

The comments give us a good indication of what we need to do. We’ll pretend we’re creating a profile for Bob Log who is a master baker living in Toronto. He’s planning to register boblogthebaker.com as his domain… so let’s update the site settings with the below.

/_config.yml

# SITE SETTINGS
# replace with the name you want displayed on the bio (i.e. your name)
name: Bob Log
# replace with your desired description
description: Master Baker from Toronto, Canada
# replace with keywords you want placed in the meta keywords section of the HTML header
keywords: Culinary Arts, Baking, Cakes, Pastry Chef
# replace with your contact email (used for the email link in the footer)
email: bob.log@example.com
# replace with the production URL of your bio site
root_url: https://boglogthebaker.com
# optionally replace with the name / extension of your image file
# i.e if using perhaps a .jpg instead, the below should be changed to `profile.jpg`
profile_image_file: me.png

Everything is pretty much self explanatory, we’ve updated the settings with Bob Log's information.

Let’s move on to the navigation bar links section of the config file.

/_config.yml

# Icon Links to display in the navbar as round icon buttons
# options, leave empty and no extra buttons will appear in
# the navbar
navbar-links:
  - fa-icon: linkedin-in
    url: https://www.linkedin.com/in/jdoeexampe/
  - fa-icon: medium-m
    url: https://medium.com/@jdoeexample
  - fa-icon: twitter
    url: https://twitter.com/jdoeexampe

Let’s say Bob doesn’t have a twitter account, and hosts his own blog at boblogbakerblog.com. So we’ll remove the Twitter link and instead of using the Medium icon, we’ll swap that out for the Blogger icon as it’s a little more generic and maybe makes more sense in this case. And we’ll also of course update the URLs.

/_config.yml

# Icon Links to display in the navbar as round icon buttons
# options, leave empty and no extra buttons will appear in
# the navbar
navbar-links:
  - fa-icon: linkedin-in
    url: https://www.linkedin.com/in/boblog/
  - fa-icon: blogger-b
    url: https://boblogbakerblog.com

Finally the last section to update is the footer navigation links.

/_config.yml

# Icon Links to display in the footer, leave empty and
# just the email link will appear (which can be removed by
# updating /_includes/footer.html)
footer-links:
  - fa-icon: github
    url: https://github.com/jdoeexample
  - fa-icon: stack-overflow
    url: https://www.stackoverflow.com/users/987654321

It doesn’t make much sense for a baker to have a GitHub or StackOverflow account, but hey we’ll go with it… and maybe Bob also wants to link to his Facebook page, so we’ll add an additional link for Facebook.

/_config.yml

# Icon Links to display in the footer, leave empty and
# just the email link will appear (which can be removed by
# updating /_includes/footer.html)
footer-links:
  - fa-icon: github
    url: https://github.com/boblog
  - fa-icon: stack-overflow
    url: https://www.stackoverflow.com/users/9876543217777
  - fa-icon: facebook
    url: http://facebook.com/boblogthebaker

We’ve updated the URLs and added the new entry for Facebook. If we save the configuration file and have a look at our site, we’ll notice that nothing has changed 😞.

This is because changes to the _config.yml file require a server restart. So use Ctrl-C to stop the Jekyll server and then fire it back up again:

Terminal

jekyll serve --livereload

And with that we see our changes showing up in our navigation bar and the header:

And the footer has been updated:

Updating the profile image

Currently we’re missing our profile image so let’s fix that. This is a simple matter of replacing the current file in the /img directory with our own file. Note that as part of our configuration changes we updated the name of the image file to be me.png. Therefore this is what we’ll need to name our file.

We can grab a new profile image from the startbootstrap-freelancer repository via this link.

And then move it into the /img directory either manually or via the command line, for instance:

Terminal

mv ~/Downloads/profile.png img/me.png

We might as well remove the old profile image while we are at it.

Terminal

rm img/profile.png

And now we see our new profile image.

Updating the Resume

The process for updating the resume file that will get downloaded is pretty much identical to what we did with the profile image. We just need to swap out the file. Create a .pdf version of your resume and call it resume.pdf. Now replace the current default /assets/resume.pdf file with your file.

That’s it!

Updating the text

Next the text in both the _includes/about.html and _includes/interests.html files should be updated. This is simply a process of replacing the HTML content in these files with your own content.

I found this was one of the hardest things to do as it can be difficult to know what to write. For some great ideas around what you should be putting in your profile I suggest reading the Chuck Groom blog post . He has some great thoughts on what sort of content you should include.

Updating the color scheme (optional)

It isn’t necessary to update the color scheme, but if you aren’t digging the black and pink color scheme we got going on, it’s pretty easy to customize things. All that is required is to change the css/custom/_variables.scss file.

/css/custom/_variables.scss

// Variables

// the color used as a background for the header
// and interests sections and for the links
// in the about section and the footer
// $primary: #3AAFA9;
$primary: #CB2d6f;

// the color used in the navbar, the footer,
// the headers on white backgrounds and any links
// in the "interests" section
// $secondary: #2B7A78;
$secondary: #222629;

There are already some alternatives in the file for updating the color scheme, so let’s give those a go. We’ll just switch out the commented values with the non-commented values.

/css/custom/_variables.scss

// Variables

// the color used as a background for the header
// and interests sections and for the links
// in the about section and the footer
$primary: #3AAFA9;
// $primary: #CB2d6f;

// the color used in the navbar, the footer,
// the headers on white backgrounds and any links
// in the "interests" section
$secondary: #2B7A78;
// $secondary: #222629;

After saving the file, we have a new color scheme!

If you’re not a graphic designer it can be difficult to figure out what colors go together, I’d recommend Googling something along the lines of website color schemes. This usually brings up some useful sites that you can check out, such as 50 Gorgeous Color Schemes From Award-Winning Websites.

The only bad news is you only have control over the 2 main colors for the color scheme from the _variables file. If you want to for instance swap out the white text for some other text color you’re going to have to dig thru the code. I considered updating things to allow for color customization of more elements, but it looked like it was going to be a bit of a job so left it for now… maybe I’ll revisit this option again in the future.

Updating the favicon (optional)

Another optional update is to change the favicon. This involves creating a logo file and then using something like Favicomatic to create the favicon images. Once that is complete, the following files in the root directory should be swapped out with the files you download from Favicomatic:

• apple-touch-icon-144x144.png
• apple-touch-icon-152x152.png
• favicon-16x16.png
• favicon-32x32.png
• favicon.ico
• mstile-144x144.png

And that is it for customizations. The only thing left to discuss is how to build the site for production and a few quick hints on deployment.

Building for production

In order for the Download Resume button to work both when running locally and on production, the download URL is switched based on the JEKYLL_ENV setting, i.e.

/_includes/resume.html

...
<div class="col">
  {% if jekyll.environment == 'production' %}
    <a href="{{ site.root_url }}/assets/resume.pdf" download target="_blank" class="btn btn-primary btn-xl">
      <i class="fa fa-cloud"></i> Download Resume
    </a>
  {% else %}
    <a href="{{ site.base_url }}/assets/resume.pdf" download target="_blank" class="btn btn-primary btn-xl">
      <i class="fa fa-cloud"></i> Download Resume
    </a>
  {% endif %}
</div>
...

The code above changes the download URL based on the evaluation of the if jekyll.environment == 'production' statement. When the environment is production we use the root_url value from the _config.yml file.

This means when building the site prior to uploading it to production we need to use the following command:

Terminal

JEKYLL_ENV=production jekyll build

Don’t forget this… the resume download will not work if you upload your site to production without building it using the production environment variable!

Deployment

We’re not going to go over deployment in detail, but like any static site there are many options available. Essentially all that is required is to move all the files in the _site directory to your server.

The option I’ve favored is deploying to Amazon AWS S3. This is a very economical and easy solution.

I use s3_website to manage deployments, and I’ve found the following is a great guide for getting everything set up: https://simpleit.rocks/redirect-http-to-https-and-www-to-non-www-with-aws-s3-bucket-cloudfront-route-53-and-a-custom-domain/

After getting things set-up on AWS and configuing s3_website, I then create a simple shell script for building and deploying, i.e. I’ll create something similar to:

/_build-and-deploy.sh

JEKYLL_ENV=production jekyll build
s3_website push

This makes deploys a snap, I just need to run:

Terminal

./_build-and-deploy.sh

This also ensures I don’t forget to build the site in production mode prior to deploying it.

Summary

Hopefully you’ll find this Jekyll starter template useful for building out your own one page profile / bio. All credit goes to https://github.com/chuckgroom/onepage-bio and https://github.com/BlackrockDigital/startbootstrap-freelancer. As mentioned at the onset of this post, my template is simply an adaptation of theirs.

Thanks for reading and I hope you enjoyed the post!