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.
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.
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
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.