Grav CMS for Educators
2 likes962 views
Move beyond the LMS with Grav! Do you have unmet pedagogical goals due to the constraints of your current LMS? Do you want to have a better experience for your students and yourself? In this hands-on workshop, Paul will provide a detailed introduction to Grav, the modern flat-file (no database) CMS and his open source Course Hub project to help other instructors flip their LMS to overcome these challenges. Participants should be comfortable with editing text files, connecting to a Web server, and be familiar with basic Web page elements.
Tip: To ensure a new paragraph after text in markdown,
put two spaces after the end of the line](https://image.slidesharecdn.com/grav-cms-for-educators-170131003541/85/Grav-CMS-for-Educators-46-320.jpg)
'
Note: '../' indicates moving up the 鍖le directory](https://image.slidesharecdn.com/grav-cms-for-educators-170131003541/85/Grav-CMS-for-Educators-50-320.jpg)
'
Note: the above assumes media is stored within folder of page](https://image.slidesharecdn.com/grav-cms-for-educators-170131003541/85/Grav-CMS-for-Educators-54-320.jpg)
Grav CMS for Educators
- 1. Grav CMS for Educators Paul D Hibbitts Flipping the LMS with an Open + Collaborative Web Platform EDUCATOR AND EXPERIENCE DESIGN CONSULTANT @hibbittsdesign hibbittsdesign.org Workshop resources: bit.ly/1PDs3N8
- 2. Hello, Grav (Workshop I) What is a Modern Flat-鍖le CMS? Getting Grav Up and Running The Basics of Grav
- 3. What is a Modern Flat-鍖le CMS?
- 4. What makes a CMS Modern? Modern PHP code (i.e. reliability, speed, extensibility, etc.) Use of current standards (i.e. Markdown, Twig, YAML, etc.) Modular/customizable content chunks (i.e. reuse of content) Further separation of content (i.e. 鍖les) from presentation
- 5. What makes a CMS Flat-鍖le? No database means less (or no) IT involvement needed Content stored in text 鍖les rather than in a database Takes full advantage of the collaborative ecosystem now available (i.e. GitHub) Increased portability, as moving a site now only requires simply copying 鍖les to another location All template and content 鍖les are 100% version controllable
- 7. Getting Grav Up and Running
- 8. Requirements A Webserver (Apache, Nginx, LiteSpeed, etc.) PHP 5.5.9 or higher (7.0 recommended, 2X faster!)
- 9. Installation (Server only) 1. Download Grav Workshop Demo Site ( ) 2. Unzip the package onto your desktop 3. Copy the entire Grav folder to your Web server 4. Point your browser at the Web server folder 5. Create your site administrator account 6. And you're done! bit.ly/1ZZjstZ
- 10. Installation (Local Desktop) 1. Download and install MAMP ( ) 2. Download/unzip Grav Workshop Demo Site ( ) 3. Unzip the downloaded Grav package onto your desktop 4. Copy the entire Grav folder into the MAMP 'htdocs' folder 5. Launch MAMP and press the MAMP 'Start Servers' button 6. Enter 'localhost:8888' in Web Browser and choose Grav folder 7. Create your site administrator account 8. And you're done! mamp.info bit.ly/1ZZjstZ
- 11. The Basics of Grav Admin Panel
- 13. Admin Panel Overview The 'Admin Panel' provides the ability to easily manage your site, modify content, and perform updates
- 24. The Basics of Grav Working with Files (instead of Admin Panel)
- 25. Your Content and Grav All of your site content is stored in the 'user/pages' folder
- 28. Pages Each page within Grav is stored as a folder, and within each folder the text and other elements of a page are stored
- 30. Page Folders The numeric pre鍖xes of a page folder name (i.e. '01') are used to determine the position of that page within a site navigation bar
- 32. Page Folders To prevent a page from being included within the site navigation bar do not pre鍖x the folder name with a number (i.e. 'sidebar)
- 33. The Basics of Grav Page Content
- 34. Page Editing Within a page folder a text 鍖le with the su鍖x '.md' (markdown) contains the content for that page
- 37. Recommended Text Editors (shown in these slides) (my preferred text/markdown editor) Adobe Brackets Atom
- 38. Page Names The name of the 鍖le within a page folder determines the template used to display it (i.e. page 'item.md' would use the template 'item')
- 41. Page Headers Each page within Grav contains two main parts; a header (starting and ending with three dashes ('---'), with the content of the page below
- 45. Markdown Markdown is a syntax to format the display of content stored as plain text - similar but simpler than HTML formating
- 46. Markdown Examples H1 # Your Header Text Here H2 ## Your Header Text Here H3 ### Your Header Text Here Italics _your italic text here_ bold **your bold text here** unordered list item * your item here ordered list item 1. your item here link [link title](www.google.com) Tip: To ensure a new paragraph after text in markdown, put two spaces after the end of the line
- 50. Linking Pages To included a link to one of your site's Grav pages you would generally use the following format: '[your link text](../path/page)' Note: '../' indicates moving up the 鍖le directory
- 54. Embedding Media To embed an image you would use the following format: '' Note: the above assumes media is stored within folder of page
- 58. Things to Explore Next... Learn about more options Review a Try out some open source Grav and Use the built-in functionality Page Header Markdown tutorial themes plugins media manipulation
- 59. Thank you! Questions? Contact Info Blog: Email: Twitter: LinkedIn: Grav Resources Website: Twitter: Documentation: (built with Grav itself) hibbittsdesign.org paul@paulhibbitts.com @hibbittsdesign linkedin.com/in/paulhibbitts getgrav.org @getgrav learn.getgrav.org
- 60. Flip Your LMS with Grav (Workshop II) Flipping your LMS An Open and Collaborative 安看姻一鍖o敬 Course Companion Skeleton Package
- 62. What is a Flipped LMS? A 鍖ipped LMS approach is where an open platform, in the control of course participants, serves as an alternative front-end to the institutional LMS.
- 63. Why Flip the LMS? To support pedagogical goals unmet by the current LMS To deliver a better student (and facilitator) experience To increase capability of access, sharing and collaboration
- 64. Experience Design Goals For Students Engaging Organized Relevant Convenient Enjoyable For Facilitator(s) Controllable (i.e. manageable) Pliable (i.e. 鍖exible) E鍖cient Enjoyable (hey, instructors are people too...)
- 66. Why Grav? The best modern 鍖at-鍖le CMS currently available (to me) Due to it's 鍖at-鍖le nature, Grav also fully supports...
- 67. An Open + Collaborative 安看姻一鍖o敬
- 69. Recommended Toolset MAMP Git service (e.g. GitHub, GitLab Gogs, etc.) GitHub Desktop Automatic deployment service (e.g. Deploy or Buddy)
- 70. What Skills are Required? Basic User Skills, Level I (Web-server Only) Text 鍖le editing Copying/pasting/editing URLs Markdown or simple HTML formatting Web server access (i.e. FTP) Basic User Skills, Level II (supports an open and collaborative work鍖ow, which is also very e鍖cient!) Setting up a GitHub account Con鍖guring GitHub Desktop app Setting up a GitHub to FTP server service (e.g. Deploy)
- 72. So, what does that work鍖ow look like?
- 77. How long would that update take? ~ 30 Seconds (your mileage may vary)
- 78. Setting up An Open and Collaborative 安看姻一鍖o敬 - Part I 1. Download/unzip Grav Course Hub Skeleton ( ) 2. Create a folder 'MAMP Websites' in your 'Documents' folder 3. Copy the entire Grav folder into the 'MAMP Websites' folder 4. Download, install, and launch 5. Launch MAMP 6. Change the 'Document Root' MAMP preferences setting to the 'MAMP Websites' folder (within 'Documents') 7. Press the MAMP 'Start Servers' button 8. Enter 'localhost:8888' as the URL in your Web Browser 9. Choose the displayed Grav folder name 10. Create your site administrator account Want more details? bit.ly/1QQsJ7z MAMP Running Grav Locally with MAMP
- 79. Setting up An Open and Collaborative 安看姻一鍖o敬 - Part II 1. Setup a account 2. Download and con鍖gure 3. Using GitHub Desktop, create a new repository of your locally running Grav installation 4. Commit your entire site to your repository 5. Setup an automatic deployment service (can be done later) Want more details? GitHub GitHub Desktop Using Grav with GitHub Desktop
- 84. Course Hub Highlights A complete ready-to-run Grav Skeleton Package (open source) Blog-format, with 'featured' (sticky) posts Important reminders & class preparations areas Additional site pages can be easily added Image header area above site navbar Sidebar is a simple markdown 鍖le, which can also contain HTML URL 鍖ag to only display page content (for display within LMS ) External links are automatically opened in a new Tab/Window Built-in support for entire site to be maintained on GitHub Since everything is built with Grav it can be entirely customized Want more information? Explore the online demo at Download the Course Hub skeleton at github.com/hibbitts-design demo.hibbittsdesign.org bit.ly/1QQsJ7z
- 106. Things to Explore Next... icons (included) Modular content using plugin (included) plugin (included with Course Hub Bootstrap Additional Font awesome Page Inject Gravstrap Shortcodes theme customizations
- 107. Thank you! Questions? Contact Info Blog: Email: Twitter: LinkedIn: Grav Resources Website: Twitter: Documentation: (built with Grav itself) Course Hub Grav Course Hub Getting Started Guide: EDUCAUSE Next Gen LMS paper (NGDLE): hibbittsdesign.org paul@paulhibbitts.com @hibbittsdesign linkedin.com/in/paulhibbitts getgrav.org @getgrav learn.getgrav.org http://hibbittsdesign.org/blog/getting-started http://net.educause.edu/ir/library/pdf/eli3035.pdf