Today you will be making your own website using Github Pages, specifically the Minimal Mistakes template. To make things universal, everyone will be making a portfolio of the resources from this class and the projects they completed in it. If you would rather make a website about something else, talk to the instructors. For your website you will be creating a homepage with a short bio and links to other pages across the site, featuring computational biology resources, lectures from this course, and your own image analysis and ggplot projects!
My personal website uses the same template and you’re welcome to use it for inspiration: https://kalaniwilliams.github.io/
You’re also welcome to look at its github repo as an example: https://github.com/kalaniwilliams/kalaniwilliams.github.io/tree/master
But your goal is to make something like this: https://cm515.github.io/
Ok let’s get into it!
Navigate to the minimal-mistakes theme repo on Github
Fork the repository
Clone the repository onto your local machine
cd <YOUR DIRECTORY OF CHOICE>
git clone <YOUR FORKED REPO LINK>
Generate a personal access token (if you don’t already have one)
Remove files you don’t need
`.editorconfig`
`.gitattributes`
`.github`
`/docs`
`/test`
`CHANGELOG.md`
`minimal-mistakes-jekyll.gemspec`
`README.md`
`screenshot-layouts.png`
`screenshot.png`
cd <YOUR CLONED REPO>
# it is good practice to always pull *before* you begin working
# to make sure what you're working from is up to date
# or your push later won't work
git pull origin master
git rm <FILE>
git rm -r <DIRECTORY>
# note: you can also add files using 'git add', but you have to have moved that file into the local directory first... slightly confusing
git commit -m "describe what you changed”
git push origin master
Make your first page!
Make the _pages directory
To do this, either go to “Add file” on the repo page in your browser, or use git add in your terminal. If using the terminal, remember to always update your local clone first, then make your changes, then commit your changes, then push them to the repo. For either method, Github does not allow you to make empty directories. To make a new directory you can just add an empty file to initialize the new directory. I usually call it initialize.txt.
Delete the index.html file
Again, you can either do this in the browser or locally through the terminal. This is a default homepage that will override your homepage unless you delete this one.
Make your homepage in the _pages directory, home.md (for now just copy and paste what I have below… you’ll come back and edit it later).
---
layout: single
permalink: /
hidden: true
header:
#image: /assets/images/header.jpeg
#overlay_color: #"#5e616c"
#overlay_image: /assets/images/fog_road.jpeg
title: " "
tagline: " "
author_profile: true
classes: wide
feature_row1:
- image_path: path_to_your_image.png # no quotes this time
alt: "Resources"
excerpt: "Enter a relatively short description here"
url: "/resources/" # note that these can also be full urls that take people to other sites
btn_class: "btn--inverse" # feel free to change the button style!
btn_label: "Whatever you want your button to say"
feature_row2:
- image_path: path_to_your_image.png # no quotes this time
alt: "Lectures"
excerpt: "Enter a relatively short description here"
url: "/lectures/" # note that these can also be full urls that take people to other sites
btn_class: "btn--inverse" # feel free to change the button style!
btn_label: "Whatever you want your button to say"
feature_row3:
- image_path: path_to_your_image.png # no quotes this time
alt: "Image Analysis Project"
excerpt: "Enter a relatively short description here"
url: "/image_analysis_project/" # note that these can also be full urls that take people to other sites
btn_class: "btn--inverse" # feel free to change the button style!
btn_label: "Whatever you want your button to say"
feature_row4:
- image_path: path_to_your_image.png # no quotes this time
alt: "ggplot Project"
excerpt: "Enter a relatively short description here"
url: "/gglplot_project/" # note that these can also be full urls that take people to other sites
btn_class: "btn--inverse" # feel free to change the button style!
btn_label: "Whatever you want your button to say"
---
Portfolio of materials from [CSU CM515](<https://github.com/Colorado-State-University-CMB/CM515-course-2025/tree/main>)!
# Resources
{% include feature_row id="feature_row1" type= "left" %}
# Lectures
{% include feature_row id="feature_row2" type= "left" %}
# Image Analysis Project
{% include feature_row id="feature_row3" type= "left" %}
# ggplot Project
{% include feature_row id="feature_row4" type= "left" %}
Configure _config.yml
The documentation here will also walk you through all of the configuration options and show you what the various skins available for this theme look like. This same site has lots of other important documentation we will refer back to later- you’re welcome to explore it! Once you start working on the site configuration, you might want to check how the changes look as you go. In the “Pages” section of your repo’s settings you can see when the actual site last updated. This is super helpful for knowing when your edits should be live.
Theme
Uncomment the remote theme and select a skin of your choice!
# theme : "minimal-mistakes-jekyll"
remote_theme : "mmistakes/minimal-mistakes"
minimal_mistakes_skin : "sunrise" # "default", "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
Site Settings
Here I’m only showing things that need to be updated, everything else can be left alone!
# Site Settings
title : "Your Site Title"
subtitle : # An optional tag line or subtitle for your site
name : "Your Name"
description : # An optional longer description for your website
url : "<https://reponame.github.io>"
repository : "username/reponame" # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
masthead_title : "Your Site Title" # Website title displayed regardless of actual site name
search : true #false (default)
search_full_content : true #false (default)
search_provider : lunr #(default), algolia, google
lunr:
search_within_pages : true #false (default)
SEO Related (skip)
Social Sharing (skip)
Analytics (skip)
Site Author
Feel free to delete any of these links, or add more. See available icons here.
# Site Author
author:
name : "Your Name"
avatar : "/assets/images/yourphoto.jpg" # path to profile picture
bio : "Write whatever you want here, can be as short as just your pronouns or a longer introduction. But shouldn't be too long!"
location : "Your affiliation, ex. Colorado State University"
email : "Your email address" # OPTIONAL
links:
- label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:YOUREMAILADDRESS" # OPTIONAL
- label: "GitHub"
icon: "fab fa-fw fa-github"
url: "link to your Github" # OPTIONAL
- label: "LinkedIn"
icon: "fab fa-fw fa-linkedin"
url: "link to your LinkedIn" # OPTIONAL
- label: "ResearchGate"
icon: "fab fa-researchgate"
url: "link to your ResearchGate" # OPTIONAL
- label: "Google Scholar"
icon: "fab fa-google"
url: "link to your Google Scholar" # OPTIONAL
- label: "Website"
icon: "fas fa-fw fa-link"
url: "link to this site" # OPTIONAL
Site Footer
These are the same links as above, feel free to copy/paste or to change it up!
# Site Footer
footer:
links:
- label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:YOUREMAILADDRESS" # OPTIONAL
- label: "GitHub"
icon: "fab fa-fw fa-github"
url: "link to your Github" # OPTIONAL
- label: "LinkedIn"
icon: "fab fa-fw fa-linkedin"
url: "link to your LinkedIn" # OPTIONAL
- label: "ResearchGate"
icon: "fab fa-researchgate"
url: "link to your ResearchGate" # OPTIONAL
- label: "Google Scholar"
icon: "fab fa-google"
url: "link to your Google Scholar" # OPTIONAL
- label: "Website"
icon: "fas fa-fw fa-link"
url: "link to this site" # OPTIONAL
Finally, to the very bottom add the following text:
defaults:
# _pages
- scope:
path: ""
type: pages
values:
layout: single
author_profile: true
share: #true
If you haven’t already, take a look at your site.
Wow, doesn’t that look nice? Now it just needs stuff in it!