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!
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.
What we’re starting with
OK, we’ve got the code, let’s see what we’re starting with.
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
_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.
First let’s tackle the
site settings section.
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.
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.
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.
Finally the last section to update is the
footer navigation links.
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.
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:
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.
And then move it into the
/img directory either manually or via the command line, for instance:
We might as well remove the old profile image while we are at it.
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
resume.pdf. Now replace the current default
/assets/resume.pdf file with your file.
Updating the text
Next the text in both the
_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
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.
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:
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.
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
This means when building the site prior to uploading it to production we need to use the following command:
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!
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:
This makes deploys a snap, I just need to run:
This also ensures I don’t forget to build the site in production mode prior to deploying it.
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!