This is a guide on how to setup your Grav Course Hub for a single course using the Admin Panel (accessed by adding ‘/admin’ to the Browser URL of your Grav site) or directly working with files. This guide assumes you have the Grav Course Hub up and running and that you are familiar with the basics of Grav.
This guide is now outdated. View the updated Setting up a Course documentation on the new learn.hibbittsdesign.org site.
Table of Contents
Overview of How the Course Hub is Organized
Setting the Name of Your Course Hub
Setting the Header Image for Your Course Hub
Adding Custom Menubar Items to Your Course Hub
Editing Important Reminders on Your Course Hub Homepage
Editing Class Preparations on Your Course Hub Homepage
Adding Class/Topic summaries to Your Course Hub Homepage
Customizing Your Course Hub Sidebar
Adding Pages to Your Course Hub
Editing Pages in Your Course Hub
Enabling GitHub/GitLab Collaboration in Your Course Hub
All Course Hub Site Configuration Options
All Course Hub Page Header Options
A Course Hub containing a single course (multiple courses are also supported) has a blog-style Homepage, with entries for weekly summaries or topics, and one or more pages. Pages are ordered in the menubar by their numeric prefixes (i.e. 01.Home
is the first item in the menubar).
Figure 1. Course Hub pages
folder structure.
Each page in the Course Hub consists of a folder which contains a Markdown file, which determines how the page is rendered (i.e. which template is used to display the file). Page folders may also contain one or more images to be displayed on a page.
Figure 2. Example Course Hub page
folder (including Markdown file).
Figure 3. Course Hub Site Title field on Configuration - Site Admin Panel page.
Figure 4. Course Hub title
field in site.yaml
file (located in /user/config/
folder).
If an image (regardless of its filename) is placed within the /pages/headerimage
folder it will be used as the header image for every page within the Course Hub. To have no image displayed as a header image simply remove the default image file provided.
Figure 5. Course Hub header image file (located in /pages/headerimage
folder).
Figure 6. Course Hub Menubar items on Configuration - Site Admin Panel page.
To include custom menubar items set the displaymenuentries
field to true
. To have no custom menubar items displayed set the displaymenuentries
field to false
Figure 7. Course Hub displaymenuentries
toggle field in site.yaml
file (located in /user/config/
folder).
To define one or more custom menubar items include a text
and/or icon
value along with the url
value for each defined menu
list.
Figure 8. Course Hub menu
items in site.yaml
file (located in /user/config/
folder).
To change the content of the Important Reminders area on the Course Hub homepage edit the page ‘Important Reminders’, located under the page ‘Home’.
Figure 9. Course Hub Important Reminders Admin Panel page.
To not display the Important Reminders area on the Course Hub homepage, set the ‘Published’ option of that page to ‘No’.
Figure 10. Course Hub Important Reminders page Published option in the Admin Panel.
To not display the Important Reminders area on the Homepage, set the ‘published’ field to false.
Figure 11. Course Hub important-reminders.md
Markdown file (located in /01.home/_important-reminders/
folder).
To change the content of the Class Preparations area on the Course Hub homepage edit the page ‘Class Preparations’, located under the page ‘Home’.
To not display the Class Preparations area on the Course Hub homepage, set the ‘Published’ option of the page to ‘No’.
Figure 12. Course Hub Class Preparations page in Admin Panel.
Figure 13. Course Hub Class Preparations page Published option in the Admin Panel.
To not display the Class Preparations area on the Homepage, set the ‘published’ field to false.
Figure 14. Course Hub important-preparations.md
Markdown file (located in /01.home/_class-preparations/
folder).
To add a class/topic summary to your Course Hub Homepage when working with the Admin Panel, tap the Add Page
button, then in the resulting dialog box (see below) name the page, set the Parent Page
to Home
and use the Template Item
.
Figure 15. Course Hub HomePage items in the Admin Panel.
Figure 16. Adding a new Course Hub HomePage item within the Home
parent folder and using the item
template.
To add a class/topic summary to your Course Hub Homepage when working with files directly, copy an existing item and then edit both the name of the page folder and the Markdown file contained within it. Do not change the name of the Markdown file unless you want to change the Grav Template used to render it.
Figure 17. Course Hub HomePage items folder.
Figure 18. Course Hub Sidebar page in Admin Panel
Figure 19. Course Hub sidebar folder (located in /pages/sidebar
folder).
Figure 20. Course Hub sidebar.md
Markdown file (located in /pages/sidebar
folder).
To add a page to your Course Hub when working with the Admin Panel, tap the Add Page
button, then in the resulting dialog box (see below) name the page, set the Parent Page
to Root
and use the Template Sidebarpage
or Fullwidthpage
.
Figure 21. Adding a new Course Hub page using the sidebarpage
template in the Admin Panel.
To add a page to your Course Hub Homepage when working with files directly, copy an existing page and then edit both the name of the page folder and the Markdown file contained within it. Use the filename sidebarpage.md
for a page with a sidebar, or fullwidthpage.md
for a page without a sidebar.
Figure 22. Course Hub resources page with sidebar sidebarpage.md
Markdown file (located in /02.resources/
folder.
Figure 23. Course Hub syllabus page with no sidebar fullwidthpage.md
Markdown file (located in /03.syllabus/
folder.
Figure 24. Course Hub Resources page in the Admin Panel.
Figure 25. Course Hub Resources page options in the Admin Panel.
Figure 26. Course Hub Resources page header in the Admin Panel (Expert View
).
Figure 27. Course Hub resources page sidebarpage.md
Markdown file (located in /02.resources/
folder).
Figure 28. Course Hub GitHub/GitLab Integration items on Configuration - Site Admin Panel page.
To enable GitHub (or GitLab or any other Web-based Git service) set the GitHub:Enabled
field to either page
or menu
, set the GitHub:icon
field to the relevant Font Awesome icon and then finally set the Github:url
field to the URL of your Git repository (this usually includes the pages
folder).
Figure 29. Course Hub github
settings in site.yaml
file (located in /user/config/
folder).
title: CPT-363
metadata:
description: 'A short description of your course would go here'
displaymenuentries:
enabled: true # display of additional menu entries
menu: # menu entry for adding external sites/tools
- text: Grav
icon: arrow-circle-right
url: http://getgrav.org/
icon: # default Font Awesome icons for preparation and post entries
post: calendar-o
github:
location: none # menu | page | none
icon: github
tree: https://github.com/hibbitts-design/grav-skeleton-course-hub-site/edit/master/user/pages/
twittertimeline:
enabled: false # display of Twitter timeline on sidebar
url: https://twitter.com/hibbittsdesign/lists/cpt-363
text: A Twitter List by hibbittsdesign
height: 700
hidehomemenulink: false # suppress Home menu link
Figure 30. All Course Hub site configuration options in site.yaml
file (located in /user/config/
folder).
icon: users # optional Font Awesome icon for page title
header_image: false # display of header image located within page folder
continue_link: false
header_image: false # display entire post on blog listing page
taxonomy:
tag: Featured # setting to make post 'sticky' (i.e. remain at top)
Figure 31. All optional Course Hub page header options for Homepage items.
hidegithublink: true # hide GitHub edit link for this page
githublink: https://github.com/hibbitts-design/grav-skeleton-course-hub/tree/master/pages/01.home # to override the automatically calculated GitHub URL
hidepagetitle: true # hide the display of the title of this page
Figure 32. All optional Course Hub page header options for pages.
Suggestion or corrections to this guide? Edit this Page on GitHub
Want to reuse this open content? Save this Page as Markdown