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.

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

Overview of How the Course Hub is Organized

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

Setting the Name of Your Course Hub

Admin Panel (Course Hub Skeleton v1.4+)

Figure 3. Course Hub Site Title field on Configuration - Site Admin Panel page.

Working with Files

Figure 4. Course Hub title field in site.yaml file (located in /user/config/ folder).

Setting the Header Image for Your Course Hub

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

Adding Custom Menubar Items to Your Course Hub

Admin Panel (Course Hub Skeleton v1.4+)

Figure 6. Course Hub Menubar items on Configuration - Site Admin Panel page.

Working with Files

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

Editing Important Reminders on Your Course Hub Homepage

Admin Panel (Course Hub Skeleton v1.4+)

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.

Working with Files

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

Editing Class Preparations on Your Course Hub Homepage

Admin Panel (Course Hub Skeleton v1.4+)

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.

Working with Files

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

Adding Class/Topic summaries to Your Course Hub Homepage

Admin Panel (Course Hub Skeleton v1.4+)

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.

Working with Files

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.

Customizing Your Course Hub Sidebar

Admin Panel (Course Hub Skeleton v1.4+)

Figure 18. Course Hub Sidebar page in Admin Panel

Working with Files

Figure 19. Course Hub sidebar folder (located in /pages/sidebar folder).

Figure 20. Course Hub sidebar.md Markdown file (located in /pages/sidebar folder).

Adding Pages to Your Course Hub

Admin Panel (Course Hub Skeleton v1.4+)

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.

Working with Files

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.

Editing Pages in Your Course Hub

Admin Panel (Course Hub Skeleton v1.4+)

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

Working with Files

Figure 27. Course Hub resources page sidebarpage.md Markdown file (located in /02.resources/ folder).

Enabling GitHub/GitLab Collaboration in Your Course Hub]

Admin Panel (Course Hub Skeleton v1.4+)

Figure 28. Course Hub GitHub/GitLab Integration items on Configuration - Site Admin Panel page.

Working with Files

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

Using GitHub and GitHub Desktop

• Introduction to GitHub
• Getting Started with GitHub Desktop

All Site Configuration Options

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

All Page Header Options

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