Going Further with Your Static Site F26

3 minute read

Going Further with Your Static Site F26

This post explains some more things we can do with our site.

So far

So far we know how to

fork a repo containing a template
create a page
edit the navigation.yml file and the config.yml file to organize our site

New topics

creating a post and tagging the post
inserting an interactive map using an iframe
inserting an image in a page or post
setting the landing page beyond the default view of the blog roll
creating a table of contents for a page

Creating a post

The only parts which are complex here are (1) making sure you have the right yml header and (2) naming the file correctly.

Let’s look at the name of this very post and its yml header.

---
title: "Going Further with Your Static Site F26"
last_modified_at: 2026-09-24T12:00:00-05:00
tags:
  - static sites
  - Markdown
  - Interactive Map
  - R
  - F26
---

It contains a title, modified date, and tags. Minimal mistakes allows us to use both tags and categories. Think of categories as the main chapters or folders that broadly organize your site into a few big topics, while tags are the specific index terms or keywords that describe the exact details inside a post.

I find that both too much for our purposes in one semester. I would suggest that you create a post now, reuse this header and add some tags. The tags index is created automatically when you commit changes and rebuild your site.

Tagging is an art and you may revise them over time. In general it makes finding content by its topic easier.

You will do assignments as posts. So go ahead and create four posts for the assignments.

Inserting an interactive map using an iframe

In Assignment 1, we use a notebook that creates a “standalone” map in html. We need to host that map on Github and then call it up using an iframe.

Go to your assets folder and add a subfolder called maps. You can do that in VSCode.
Take the html you create at the end of the notebook and export it from posit.cloud. Export is found under the settings icon.
Drag and drop that html file into the maps subfolder you created in assets. Commit these changes.

Make sure that you can see the map, formatted like this https://djwrisley.github.io/DHS/assets/maps/LB_featuremap-2.html

Now we create an iframe.

<div style="width:100%; height:70vh;">
  <iframe
    src="{{ '/assets/maps/nameofyourmap.html' | relative_url }}"
    style="width:100%; height:100%; border:0;"
    loading="lazy">
  </iframe>
</div>

The div is a container for the map with some parameters specifying how much space is alloted to the map in the theme. 100% means the full allocation of the containing element of the theme.

If you are interested in fixing the center point of your map, you can’t do this in with iframe, but it should be established in the part of your code related to leaflet.

Likewise, if you have many thousands of points, remember that all of those points will sit in the self contained html, maybe making the map slow to load. Consider using a bounding box to filter the data from within the code itself before creating the html.

Inserting an image in your post.

It is easy to put screenshots or other images you have that you want into your posts or pages.

Create an images folder in assets and then place any image you want to use in it.

Within the markdown, use this syntax:

<img src="/assets/images/imagename.png|jpg" style="zoom:50%;" />

Setting the landing page to be the index.md file

Out of the box, the Minimal Mistakes theme sets the blog roll as the default page. Take a look at the course site, and in particular, how the yml header of index.md file is constructed.

---
layout: single
title: "Welcome"
permalink: /
---

If you leave the permalink blank after the slash it becomes the landing page!

Creating a Table of Contents (TOC) for a Page

Take a look at the course site, and in particular, how the yml header of schedule.md file is constructed.

---
title: "Schedule F26"
permalink: /schedule/
author_profile: false
toc: true
toc_label: "Fall 2026 Schedule"
toc_sticky: true
toc_icon: "calendar"
---

Try other icons including:

toc_icon: "calendar"
toc_icon: "calendar-alt"
toc_icon: "clock"
toc_icon: "book"
toc_icon: "graduation-cap"
toc_icon: "map"
toc_icon: "list"
toc_icon: "bars"
toc_icon: "bookmark"
toc_icon: "cog"

You can also put in a custom sidebar with

sidebar:
  nav: "docs"

Good luck with your customization! Let the group know if you find out other interesting features.

Going Further with Your Static Site F26