Spruce up your website

Get started with Jekyll themes

It can be challenging to build an attractive website from scratch. Fortunately, many web designers have created themes to make any website look great.

Authors

Elsa Culler

Nate Quarderer

Published

October 16, 2024

Keywords

Earth Data Science, STEM Education, Jekyll, GitHub Pages

Make attractive websites with themes

Website themes are a system for applying a particular design to your web content. They consist of acollection of website configuration files, content templates, and style files that control how a website looks, but can be filled in with any content. Themes are great because: * Your website will immediately look and function like the theme * Most themes allow you to change style elements (like colors and fonts), and store data (like your name and email address) in a central location. * Themed websites will most likely work on lots of different devices, like phones, tablets, and computers. You can double-check if your theme mentions being adaptive or responsive, bu most themes these days are. * Some themes support interactive components like photo carousels or lightboxes without needing to write a lot of code

Jekyll is a system for building websites from Markdown, HTML, and CSS. In fact, Jekyll is the system that GitHub Pages uses to deploy websites. This means that we can take advantage of free Jekyll themes to make any website look great.

Check out our themes demo video!

DEMO: Add a theme to your portfolio (Shortcourse) by ESIIL

Jekyll plays well with GitHub Pages

Supported themes

We recommend starting out by using one of the GitHub Pages supported themes. Follow these instructions from GitHub.

Even if you don’t ultimately end up using one of these themes, you can make sure that everything is working with one of these themes.

Remote themes

GitHub Pages allows you to add any Jekyll theme available on GitHub to your site with a configuration file.

To do this you can: 1. Choose the Jekyll theme you want to use (here are some examples). Note that some themes work more seamlessly than others, so you may have to try more than one. 2. Preview the theme by clicking Live Demo on jekyllthemes.io, or searching the GitHub README for a preview link. 3. Follow the instructions from GitHub on how to apply the theme using a _config.yml file. 4. Go to the GitHub repository for the theme by clicking on the Get THEME on GitHub button on jekyllthemes.io. Follow any instructions about customizing things like your name or the title of your webpage.

So what is YAML?

The _config.yml file is written in YAML, a human-readable format for structured information (lists and key/value pairs). Learn more about YAML on their website

The _config.yml file that you created to add a theme can also sometimes be used to change the title of your website from the default (the name of your repository). Check out the README for your theme to see what parameters are available For example, and example _config.yml file for the minimal theme looks like:

title: J. Doe's Awesome Portfolio Website
description: Check out my projects!
logo: img/headshot.png
remote_theme: pages-themes/minimal@v0.2.0
Warning

You may need or want to add a _data/data.yml file or your own templates in _layouts in addition to the _config.yml file, depending on your theme. You will need to read the README for the theme you are using to see what you can customize. We recommend copying any example configuration files from the theme repository, and then modifying them to meet your needs.