New documentation for all Grav open education projects is now available! Visit learn.hibbittsdesign.org.

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

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).
Course Hub ```pages``` folder structure
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. Example Course Hub ```page``` folder (including Markdown file)
Figure 2. Example Course Hub page folder (including Markdown file).

Setting the Name of Your Course Hub

Admin Panel (Course Hub Skeleton v1.4+)

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

Working with Files

Course Hub ```title``` field in ```site.yaml``` file (located in ```/user/config/``` folder)
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.

Course Hub header image file (located in ```/pages/headerimage``` folder)
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+)

Course Hub **Menubar** items on **Configuration - Site** Admin Panel page
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

Course Hub ```displaymenuentries``` toggle field in ```site.yaml``` file (located in ```/user/config/``` folder
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. Course Hub ```menu``` items in ```site.yaml``` file (located in ```/user/config/``` folder)
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’. Course Hub **Important Reminders** Admin Panel page
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’. Course Hub **Important Reminders** page **Published** option in the Admin Panel
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. Course Hub ```important-reminders.md``` Markdown file (located in ```/01.home/_important-reminders/``` folder)
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’.

Course Hub **Class Preparations** page in Admin Panel
Figure 12. Course Hub Class Preparations page in Admin Panel.

Course Hub **Class Preparations** page **Published** option in the 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.
Course Hub ```class-preparations.md``` Markdown file (located in ```/01.home/class-preparations/``` folder)
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. Course Hub HomePage items in the Admin Panel
Figure 15. Course Hub HomePage items in the Admin Panel.

Adding a new Course Hub HomePage item within the ```Home``` parent folder and using the ```item``` template.
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. Course Hub HomePage ```item.md``` Markdown file (located in ```/01.home/``` folder
Figure 17. Course Hub HomePage items folder.

Customizing Your Course Hub Sidebar

Admin Panel (Course Hub Skeleton v1.4+)

Course Hub **Sidebar** page in Admin Panel
Figure 18. Course Hub Sidebar page in Admin Panel

Working with Files

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

Course Hub ```sidebar.md``` Markdown file (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. Adding a new Course Hub page using the ```sidebarpage``` template in the Admin Panel.
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. Course Hub resources page with sidebar ```sidebarpage.md``` Markdown file (located in ```/02.resources/``` folder
Figure 22. Course Hub resources page with sidebar sidebarpage.md Markdown file (located in /02.resources/ folder.

Course Hub syllabus page with no sidebar ```fullwidthpage.md``` Markdown file (located in ```/03.syllabus/``` 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+)

Course Hub **Resources** page in the Admin Panel
Figure 24. Course Hub Resources page in the Admin Panel.

Course Hub **Resources** page options in the Admin Panel
Figure 25. Course Hub Resources page options in the Admin Panel.

Course Hub **Resources** page header in the Admin Panel (```Expert View```)
Figure 26. Course Hub Resources page header in the Admin Panel (Expert View).

Working with Files

Course Hub resources page ```sidebarpage.md``` Markdown file (located in ```/02.resources/``` folder
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+)

Course Hub **GitHub/GitLab Integration** items on **Configuration - Site** Admin Panel page
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). Course Hub `github` settings in ```site.yaml``` file (located in ```/user/config/``` folder)
Figure 29. Course Hub github settings in site.yaml file (located in /user/config/ folder).

Using GitHub and 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  # 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

comments powered by Disqus