Peloton

Editing software

You are free to use whatever HTML editor you like, if you can’t decide, Visual Studio Code is a good choice. It is a free code editor, brought to you by Microsoft, and you can customize it to suit your working style. Your technical coordinator can help you install your editing software.

To be upfront, Peloton is all about HTML, just the HTML necessary to communicate with and you preview your work in a browser. There is no WYSIWYG editor in Peloton, but there is a pattern library so you can copy and paste code to build a robust page layout with predictable behavior on desktop and mobile. 

HTML is a language that describes the structure of your content and anyone can master the two dozen HTML elements needed to communicate clearly on the web. Search rankings and accessibility both rely on proper HTML usage. Everyone wants good search results, and adhering to accessibility guidelines is University policy as well as a good thing to do in general. 

Connect to backstage with your code editor

If you are off campus, first make a VPN connection to the U. 

Connect to the development environment for all units except ICD:

Apple:
smb://backstage.cehd.umn.edu/backstage$

Windows:
 \\backstage.cehd.umn.edu\backstage$

ICD only:

Apple:
smb://dev.icd.umn.edu/ICD$

Windows:
\\dev.icd.umn.edu\ICD$

If using Visual Studio Code, drag and drop the folder or file you would like to edit on the left pane of Visual Studio Code to open. You can also goto the top menu File > Open Folder

Navigate to backstage > app_routing and click open
(This will open the whole college, you can also drill down and open a specific site if you wish)

If using Atom: goto top menu item File > Add Project Folder

Navigate to backstage > app_routing and click open
(This will open the whole college, you can also drill down and open a specific site if you wish)

Your technical coordinator can assist with making your connections.

Pattern library

The pattern library has layout and element examples with code snippets to copy and paste into your site.

Pages – they are “templates”

All of your web pages live in the templates folder, because they are essentially templates. They do not become web pages until a request is made to Peloton and your page is assembled on the fly. 

The most basic template example is below, four lines of code to start, one line at the end, and your content goes in between. Easy peasey! 

{% extends "cehd/layout/base.html" %}
{% set page_title = "Contact Us" %}
{% block title %}{{ page_title }}{% endblock %}
{% block main_content %}
  <h1>My example page</h1>
    <p>All your HTML goes in between the template code.</p> 
{% endblock %}

Anatomy of the template code

The first line extends

This is the template you are building on top of. It will have the UMN header, your navigation, a footer, etc. all stored in another file so you don’t have to scroll past that junk to edit your page. 

The next line set page_title
Yes all pages need a title, you only need to describe the page on this line. Your unit name is in the template and comes in from the next block of code.

Next, block title
Your template has base page title content, like “My Unit – UMN”, and this line of template code takes your page title from the line above and assembles it with the template base title. So in the example above, it would render out:

<title>Contact Us - My Unit - UMN</title>

Last line at the top, block main_content
All of your content starts after this block. You can add content to your heart’s content between that starting block and the ending block. {% endblock %}

And that’s it! If the page has dynamic displays you may see a few more lines at the top and some more code at the bottom after the {% endblock %}, it’s as simple as that.

Pages – make a new one

Find one you like and make a copy! You can duplicate pages just like any other file through your finder (Apple) or explorer (Windows) directly on backstage if you prefer. 

After a new page is made, you need to tell Peloton you made a new page by updating the routes.yml file. See the section “Publishing – the routes file” for more information.

Pro tip

Make some layouts you like in a sandbox folder and duplicate those when you need a new page. Make as many as you like, just be sure to set publishing to false. 

Pages – delete one

Like making a new page, but in reverse, also due to security an editor like Atom usually cannot delete pages so go through the finder window and delete directly off backstage. 

Remember to remove the reference(s) to your deleted page(s) from the routes file. See next section “Publishing – the routes file” 

Publishing – the routes file

Where is it? backstage > app_routing > cehd > config > (your site) > routes.yml

Yeah, this isn’t in the routes folder, it’s a routes file written in YAML. It tells the application your template is a web page and allows you to set the URL, published state, and section. 

Warning: In YAML spaces and returns have meaning, so be careful. The routes file will have basic instructions at the top. 

Here’s what to expect, the numbered list refers to the line numbers below.

1. The URL after your base URL, for the college this would be:
   https://www.cehd.umn.edu/departments-centers/
2. Which template is it going to turn into the URL on line 1
3. Publish
   • set to false and you can only view it on backstage
   • set to true and it can be viewed on the live site
   • note, this file has to publish live for the changes to take place
4. template_data: this just outlines the next section
5. -section: this is used to group pages for future expansion, like navigation sections.

1 /departments-centers/:
2 template: cehd/departments-centers.html
3   publish: true
4   template_data:
5     - section: home

Images/documents – assets folder “public”

Images and documents do not need to be processed by the Peloton application so they are housed in an assets folder inside the public folder. app_routing > public > assets

The public folder serves up files at the base URL cehd.umn.edu, the word “public” does not come up in the URL. 

So for example: app_routing > public > assets > images > goldie.jpg

Will have the URL: https://cehd.umn.edu/assets/images/goldie.jpg

When authoring pages, call up images using a root relative URL,
like this: /assets/images/goldie.jpg

Notice, you do not include the “public” folder in that link.

Organize the assets folder to mirror asset usage and your site. “Images” is an obvious choice for images, and inside that folder you might make folders for specific sections of your site or by type of image, headshots for example. Docs is the name typically used for a documents folder.

Includes – reusing content

Have a chunk of content you are going to show on more than one page? An include might be the thing you’re looking for to save some time. You make a file with just the content you want to reuse, then you call it up in a page template wherever you like. 

Typically include files are stored in a folder named include so they can be located easily, and give the include file name something that will help you identify it at a glance. 

Like this:

• application-instructions-spring-2026.html
• program-contacts.html

You do not need to add includes to a routes file, just insert the following code wherever your content should appear. 

This example would include content from a file called “repeat-content.html” in a folder named “includes” at the root of the kin website.

{% include "kin/includes/repeat-content.html" %}

Pro tip. Layout a page with all of your content first to make sure it is picking up the styles properly. Then cut the content out, paste it into the include file, then include it on your page.