jekyll-course-website-template

jekyll-course-website-template

Feature-rich and easy-to-use Jekyll website template for academic courses

#jekyll#jekyll-theme#html-template#academic-website#course-website
Demo Download

Features

  • Individual page for assignments, lectures, course material, course schedule
  • Auto generated Course schedule Page
  • Auto generated course updates section (for each new lectures and assignments) + custom/manual announcements
  • Super lightweight
  • Highly customizable
  • Ready to be used in Github Pages
  • Responsive Mobile View
  • Support for Google Analytics

Change log

  • Version 2.0
    • New Schedule page with more efficient use of space.
    • Gregorian calendar is now the default one (English Calendar).
    • Add customization options to home, assignments, lectures, and schedule pages.
    • Add support for themes (so you can modify the website's look according to your school's brandings)!.
    • Move navigation menus to YAML which means it is now easier to add new pages.
    • Add more flexibility to lecture's links

Demo

Checkout for a working demo at kazemnejad.github.io/jekyll-course-website-template/. You may also want to see this real-world example at iust-deep-learning.github.io/972 or iust-courses.github.io/ai97/ (Please note the last two examples are using the older version).

Some Screenshots

Acknowledgement

This template is heavily based on svmiller / course-website.

How to deploy your own website (on GitHub pages)

  1. Fork this repository.
  2. Open _config.yml.
    1. Update url field according to your GitHub account (e.g., https://<your-github-username>.github.io/).
    2. Update baseurl field according to your reporsitory's name (e.g., /cs101).
    3. Commit and push your changes.
  3. Go to your repository's settigns (https://github.com/<your-github-username>/<your-repo-name>/settings).
  4. On GitHub Pages section, choose source to be your master branch, and enable Github Pages.
  5. You are now ready to go! Start customizing your website.

Pro Tip: You don't need to clone your repo to update your website. Use GitHub web UI to update its source files, and GitHub will build and deploy your website automatically!

Best Practice for managing repositories: If you plan to use this template for university courses, and the course is offered for multiple semesters/quarters, I suggests you to create a GitHub account or an Organization for it. Then, create new repoository under that account/organization for each semester.

  • Example:
    • Course name: CS101
    • Semester: Fall 2020
    • School name: CMU
  • => account/org name: cmu-cs101
  • => repo name: fa2020
  • => website address will be: https://cmu-cs101.github.io/fa2020/

How to test your website locally

  1. Install Jekyll (Installation guide)
  2. Clone your repo
  3. Watch your website while editing: bundle exec jekyll serve

How to customize

Changing the names

  • Open _config.yml
  • Update course_name, course_semester, and course_description (this will appear in the home page).
  • Update schoolname, schoolurl, twitter_username, and address accordingly.
  • (Optional) Enter your Google Analytics tracking ID in the google_analytics field (Remember to uncomment it).
  • Add more content to your home page: Update index.md (it supports Markdown!)
  • Update course staff info at _data/people.yml (You may need to upload the profile pics to _images folder.
  • (Optional) Open _data/previous_offering.yml and update the data if needed.

Change the looks

  • Open _sass/_user_vars.scss

  • Select your favorite from the pre-defined themes (comment all other themes, and uncomment your desired one)

  • Here are all themes:

  • You can also change the colors manually to match your branding

    Contents

    Lectures

    To add a new lecture, create an empty file with .md postfix in _lectures/ directory. fill it using below template: ```markdown

type: lecture date: 20xx-xx-xxTx:xx:xx+4:30 title: </p> <h1 id="optional">optional</h1> <h1 id="please-use-static_filesnotes-directory-to-store-notes">please use /static_files/notes directory to store notes</h1> <p>thumbnail: /static_files/path/to/image.jpg</p> <h1 id="optional-1">optional</h1> <p>tldr: "What is AI? How does it impact our lives? The current state of the art."</p> <h1 id="optional-2">optional</h1> <h1 id="set-it-to-true-if-you-dont-want-this-lecture-to-appear-in-the-updates-section">set it to true if you dont want this lecture to appear in the updates section</h1> <p>hide_from_announcments: false</p> <h1 id="optional-3">optional</h1> <p>links: - url: /static_files/presentations/lec.zip name: notes - url: /static_files/presentations/code.zip name: codes - url: <a target="_blank" rel="nofollow noreferrer noopener external" href="https://google.com" title="Jekyll Themes">https://google.com</a> name: slides - url: <a target="_blank" rel="nofollow noreferrer noopener external" href="https://example.com" title="Jekyll Themes">https://example.com</a> name: other</p> <hr> <!-- Other additional contents using markdown --> <p><strong>Suggested Readings:</strong></p> <ul> <li><a target="_blank" rel="nofollow noreferrer noopener external" href="http://example.com" title="Jekyll Themes">Readings 1</a></li> <li><a target="_blank" rel="nofollow noreferrer noopener external" href="http://example.com" title="Jekyll Themes">Readings 2</a> ```</li> </ul> <h3 id="assignments">Assignments</h3> <p>To add a new assignments, create an empty file with <code>.md</code> postfix in <code>_assignments/</code> directory. fill it using below template:</p> <pre><code class="language-markdown">--- type: assignment date: 20xx-xx-xxTx:xx:xx+4:30 title: <Assignment title (e.g. Assignment #1> # optional pdf: /static_files/assignments/assign_01.pdf # optional solutions: /static_files/assignments/assign_01_solutions.pdf # optional attachment: /static_files/assignments/assign_01_attachment.zip # optional # set it to true if you don't want this assignment to appear in the announcements section hide_from_announcments: false due_event: type: due date: 20xx-xx-xxTx:xx:xx+4:30 description: 'Assignment #1 due' --- <!-- Other additional contents using markdown --> </code></pre> <h3 id="dues--deadlines">Dues & Deadlines</h3> <p>Use <code>_events/</code> directory to add new a deadline, use <code>type: due</code>. These events will apear at the schedule page.</p> <pre><code class="language-markdown">--- type: due date: 20xx-xx-xxTx:xx:xx+4:30 description: <Description of deadline (e.g. 'Final report due')> # optional # set it to true if you don't want this event to appear in the announcements section hide_from_announcments: false --- </code></pre> <h3 id="exams">Exams</h3> <p>Use <code>_events/</code> directory to add new Exam alert, use <code>type: exam</code>. These events will apear at the schedule page.</p> <pre><code class="language-markdown">--- type: exam date: 20xx-xx-xxTx:xx:xx+4:30 description: <Description of the exam (e.g. 'The midterm exam')> # optional # set it to true if you don't want to this event appear in the announcements section hide_from_announcments: false --- </code></pre> <h3 id="custom-events">Custom Events</h3> <p>Use <code>_events/</code> directory to add new custom events, use <code>type: raw_event</code>. These events will apear at the schedule page.</p> <pre><code class="language-markdown">--- type: raw_event name: <Event name> date: 20xx-xx-xxTx:xx:xx+4:30 description: <Event description> # optional # if you want to hide time in Schedule, set this to true hide_time: false # optional # set it to true if you don't want this event appear to in the announcements section hide_from_announcments: false --- <!-- you can create custom content using markdown. this section will be placed in "Course Materials (in schedule section)" --> ## Hello this is a custom event with `code` </code></pre> <h3 id="updatesannouncements">Updates/Announcements</h3> <p>All contents here appear in at the home page Use <code>_announcements/</code> directory to create new Announcement</p> <pre><code class="language-markdown">--- date: 20xx-xx-xxTx:xx:xx+4:30 --- <put a short announcement here, you can use all markdown features> </code></pre> <h2 id="advanced-customization">Advanced Customization</h2> <p>You can add custom contents to each section (lectures, assignments, schedule, materials, and project)</p> <ul> <li>Lectures: Edit <code>lectures.md</code></li> <li>Assignments: Edit <code>assignments.md</code></li> <li>Schedule: Edit <code>schedule.md</code></li> <li>Materials: Edit <code>materials.md</code></li> <li>Project: Edit <code>project.md</code></li> </ul> <p>Additionally, you can update navigation menus (the menu at the top of the website) by editing <code>_data/nav.yml</code></p> <p>To add new section, add new navigation menu. Then create a new file in website's root directory using the following template:</p> <pre><code class="language-markdown">--- layout: page title: Page Title permalink: /page-address/ --- </code></pre> <!-- HTML_TAG_END --></div> <div class="categories grid grid-cols-1 md:grid-cols-3 gap-1 lg:grid-cols-4 mt-3"><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/minimal">minimal</a><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/academic">academic</a><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/resume">resume</a><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/portfolio">portfolio</a><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/documentation">documentation</a><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/wiki">wiki</a><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/tailwind">tailwind</a><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/bootstrap">bootstrap</a><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/dark">dark</a><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/ecommerce">ecommerce</a><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/github-pages">github-pages</a><a data-sveltekit-prefetch class="relative font-bold grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/blog">blog</a></div> </div> <footer class="border-t border-gray-400 mt-20 py-4"><ul class="md:flex items-center"><li class="mr-3"><a class="underline hover:text-red-500" href="/" title="Home">Home</a> </li><li class="mr-3"><a class="underline hover:text-red-500" href="/blog" title="Blog">Blog</a> </li><li class="mr-3"><a class="underline hover:text-red-500" href="/free" title="Free Themes">Free Themes</a> </li><li class="mr-3"><a class="underline hover:text-red-500" href="/category" title="Categories">Categories</a> </li><li class="mr-3"><a class="underline hover:text-red-500" href="/sitemap.xml" title="Sitemap">Sitemap</a> </li></ul></footer></div> <div class="loader-animation svelte-dd0kya"><div class="box-loader svelte-15wh1h2"><div class="container-1 svelte-15wh1h2"><div class="glass svelte-15wh1h2"><div class="cap-left svelte-15wh1h2"><span></span></div> <div class="cap-right svelte-15wh1h2"><span></span></div> <div class="fill svelte-15wh1h2"><div class="bubble-1 svelte-15wh1h2"><span></span></div> <div class="bubble-2 svelte-15wh1h2"><span></span></div> <div class="bubble-3 svelte-15wh1h2"><span></span></div> <div class="bubble-4 svelte-15wh1h2"><span></span></div> <div class="bubble-5 svelte-15wh1h2"><span></span></div> <div class="bubble-6"><span></span></div></div></div></div> </div></div> <script type="application/json" data-sveltekit-fetched data-url="/api/kazemnejad/jekyll-course-website-template.json" data-ttl="604800">{"status":200,"statusText":"","headers":{},"body":"{\"id\":\"MDEwOlJlcG9zaXRvcnkxNzA0NjcyMTM=\",\"stargazerCount\":95,\"updatedAt\":\"2024-04-05T18:53:22Z\",\"homepageUrl\":\"https://kazemnejad.github.io/jekyll-course-website-template/\",\"description\":\"Feature-rich and easy-to-use Jekyll website template for academic courses\",\"descriptionHTML\":\"\u003Cdiv>Feature-rich and easy-to-use Jekyll website template for academic courses\u003C/div>\",\"forkCount\":150,\"openGraphImageUrl\":\"https://opengraph.githubassets.com/73bdcccd68db89703e0e715bd8a08823e7e841712cef5db5a135eeef55f865b0/kazemnejad/jekyll-course-website-template\",\"url\":\"https://github.com/kazemnejad/jekyll-course-website-template\",\"nameWithOwner\":\"kazemnejad/jekyll-course-website-template\",\"name\":\"jekyll-course-website-template\",\"readme1\":{\"text\":\"# Features\\n- Individual page for assignments, lectures, course material, course schedule\\n- Auto generated Course schedule Page\\n- Auto generated course updates section (for each new lectures and assignments) + custom/manual announcements \\n- Super lightweight \\n- Highly customizable\\n- Ready to be used in Github Pages\\n- Responsive Mobile View\\n- Support for Google Analytics\\n\\n# Change log\\n- Version 2.0\\n - New Schedule page with more efficient use of space.\\n - Gregorian calendar is now the default one (English Calendar).\\n - Add customization options to home, assignments, lectures, and schedule pages.\\n - Add support for themes (so you can modify the website's look according to your school's brandings)!.\\n - Move navigation menus to YAML which means it is now easier to add new pages.\\n - Add more flexibility to lecture's links\\n\\n# Demo\\nCheckout for a working demo at [kazemnejad.github.io/jekyll-course-website-template/](https://kazemnejad.github.io/jekyll-course-website-template/). You may also want to see this real-world example at [iust-deep-learning.github.io/972](https://iust-deep-learning.github.io/972/) or [iust-courses.github.io/ai97/](https://iust-courses.github.io/ai97/) (Please note the last two examples are using the older version).\\n\\n# Some Screenshots\\n\u003Cp float=\\\"left\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_home.jpg\\\" width=\\\"300\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_schedule.jpg\\\" width=\\\"300\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_lecture.jpg\\\" width=\\\"300\\\">\\n\u003C/p>\\n\\n\u003Cp float=\\\"left\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_assign.jpg\\\" width=\\\"300\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_sample_assign.jpg\\\" width=\\\"300\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_material.jpg\\\" width=\\\"300\\\">\\n\u003C/p>\\n\\n# Acknowledgement \\nThis template is heavily based on [svmiller / course-website](https://github.com/svmiller/course-website).\\n\\n# How to deploy your own website (on GitHub pages) \\n1. Fork this repository.\\n2. Open `_config.yml`.\\n 1. Update `url` field according to your GitHub account (e.g., `https://\u003Cyour-github-username>.github.io/`).\\n 2. Update `baseurl` field according to your reporsitory's name (e.g., `/cs101`).\\n 3. Commit and push your changes.\\n3. Go to your repository's settigns (`https://github.com/\u003Cyour-github-username>/\u003Cyour-repo-name>/settings`).\\n4. On GitHub Pages section, choose source to be your master branch, and enable Github Pages.\\n5. You are now ready to go! Start customizing your website.\\n\\nPro Tip: You don't need to clone your repo to update your website. Use GitHub web UI to update its source files, and GitHub will build and deploy your website automatically!\\n\\n**Best Practice for managing repositories**: If you plan to use this template for university courses, and the course is offered for multiple semesters/quarters, I suggests you to create a GitHub account or an Organization for it. Then, create new repoository under that account/organization for each semester.\\n- Example: \\n - Course name: CS101\\n - Semester: Fall 2020\\n - School name: CMU\\n- => account/org name: `cmu-cs101`\\n- => repo name: `fa2020`\\n- => website address will be: `https://cmu-cs101.github.io/fa2020/`\\n\\n# How to test your website locally\\n1. Install Jekyll ([Installation guide](https://jekyllrb.com/docs/installation/))\\n2. Clone your repo\\n3. Watch your website while editing: `bundle exec jekyll serve`\\n\\n# How to customize\\n## Changing the names\\n- Open `_config.yml`\\n- Update `course_name`, `course_semester`, and `course_description` (this will appear in the home page).\\n- Update `schoolname`, `schoolurl`, `twitter_username`, and `address` accordingly.\\n- (Optional) Enter your Google Analytics tracking ID in the `google_analytics` field (Remember to uncomment it).\\n- Add more content to your home page: Update `index.md` (it supports Markdown!)\\n- Update course staff info at `_data/people.yml` (You may need to upload the profile pics to `_images` folder.\\n- (Optional) Open `_data/previous_offering.yml` and update the data if needed.\\n\\n## Change the looks\\n- Open `_sass/_user_vars.scss`\\n- Select your favorite from the pre-defined themes (comment all other themes, and uncomment your desired one)\\n- Here are all themes:\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/themes.png\\\">\\n\\n- You can also change the colors manually to match your branding\\n## Contents\\n### Lectures\\nTo add a new lecture, create an empty file with `.md` postfix in `_lectures/` directory. fill it using below template:\\n```markdown\\n---\\ntype: lecture\\ndate: 20xx-xx-xxTx:xx:xx+4:30 \\ntitle: \u003CTitle of this lecture>\\n\\n# optional\\n# please use /static_files/notes directory to store notes\\nthumbnail: /static_files/path/to/image.jpg\\n\\n# optional\\ntldr: \\\"What is AI? How does it impact our lives? The current state of the art.\\\"\\n \\n# optional\\n# set it to true if you dont want this lecture to appear in the updates section\\nhide_from_announcments: false\\n\\n# optional\\nlinks: \\n - url: /static_files/presentations/lec.zip\\n name: notes\\n - url: /static_files/presentations/code.zip\\n name: codes\\n - url: https://google.com\\n name: slides\\n - url: https://example.com\\n name: other\\n---\\n\u003C!-- Other additional contents using markdown -->\\n**Suggested Readings:**\\n- [Readings 1](http://example.com)\\n- [Readings 2](http://example.com)\\n```\\n\\n### Assignments\\nTo add a new assignments, create an empty file with `.md` postfix in `_assignments/` directory. fill it using below template:\\n```markdown\\n---\\ntype: assignment\\ndate: 20xx-xx-xxTx:xx:xx+4:30\\ntitle: \u003CAssignment title (e.g. Assignment #1>\\n\\n# optional \\npdf: /static_files/assignments/assign_01.pdf\\n\\n# optional\\nsolutions: /static_files/assignments/assign_01_solutions.pdf\\n\\n# optional\\nattachment: /static_files/assignments/assign_01_attachment.zip\\n\\n# optional\\n# set it to true if you don't want this assignment to appear in the announcements section\\nhide_from_announcments: false\\n\\ndue_event: \\n type: due\\n date: 20xx-xx-xxTx:xx:xx+4:30\\n description: 'Assignment #1 due'\\n---\\n\u003C!-- Other additional contents using markdown -->\\n```\\n\\n### Dues & Deadlines\\nUse `_events/` directory to add new a deadline, use `type: due`. These events will apear at the schedule page.\\n```markdown\\n---\\ntype: due\\ndate: 20xx-xx-xxTx:xx:xx+4:30\\ndescription: \u003CDescription of deadline (e.g. 'Final report due')>\\n\\n# optional\\n# set it to true if you don't want this event to appear in the announcements section\\nhide_from_announcments: false\\n---\\n```\\n\\n### Exams\\nUse `_events/` directory to add new Exam alert, use `type: exam`. These events will apear at the schedule page.\\n```markdown\\n---\\ntype: exam\\ndate: 20xx-xx-xxTx:xx:xx+4:30\\ndescription: \u003CDescription of the exam (e.g. 'The midterm exam')>\\n\\n# optional\\n# set it to true if you don't want to this event appear in the announcements section\\nhide_from_announcments: false\\n---\\n```\\n\\n### Custom Events\\nUse `_events/` directory to add new custom events, use `type: raw_event`. These events will apear at the schedule page.\\n```markdown\\n---\\ntype: raw_event\\nname: \u003CEvent name>\\ndate: 20xx-xx-xxTx:xx:xx+4:30\\ndescription: \u003CEvent description>\\n\\n# optional\\n# if you want to hide time in Schedule, set this to true\\nhide_time: false\\n\\n# optional\\n# set it to true if you don't want this event appear to in the announcements section\\nhide_from_announcments: false\\n---\\n\u003C!-- you can create custom content using markdown. this section will be placed in \\\"Course Materials (in schedule section)\\\" -->\\n## Hello\\nthis is a custom event with `code` \\n```\\n\\n\\n### Updates/Announcements\\nAll contents here appear in at the home page\\nUse `_announcements/` directory to create new Announcement\\n```markdown\\n---\\ndate: 20xx-xx-xxTx:xx:xx+4:30\\n---\\n\u003Cput a short announcement here, you can use all markdown features>\\n```\\n\\n## Advanced Customization\\nYou can add custom contents to each section (lectures, assignments, schedule, materials, and project)\\n- Lectures: Edit `lectures.md`\\n- Assignments: Edit `assignments.md`\\n- Schedule: Edit `schedule.md`\\n- Materials: Edit `materials.md`\\n- Project: Edit `project.md`\\n\\nAdditionally, you can update navigation menus (the menu at the top of the website) by editing `_data/nav.yml`\\n\\nTo add new section, add new navigation menu. Then create a new file in website's root directory using the following template:\\n```markdown\\n---\\nlayout: page\\ntitle: Page Title\\npermalink: /page-address/\\n---\\n```\\n\\n\"},\"readme2\":null,\"readme3\":null,\"readme4\":null,\"readme5\":null,\"repositoryTopics\":{\"nodes\":[{\"topic\":{\"name\":\"jekyll\"}},{\"topic\":{\"name\":\"jekyll-theme\"}},{\"topic\":{\"name\":\"html-template\"}},{\"topic\":{\"name\":\"academic-website\"}},{\"topic\":{\"name\":\"course-website\"}}]},\"owner\":{\"avatarUrl\":\"https://avatars.githubusercontent.com/u/2122102?s=30&u=5ad3d580afc06893cd22d3ebe95dedca4b18efc7&v=4\",\"url\":\"https://github.com/kazemnejad\",\"login\":\"kazemnejad\"},\"htmlContent\":\"\u003Ch1 id=\\\"features\\\">Features\u003C/h1>\\n\u003Cul>\\n\u003Cli>Individual page for assignments, lectures, course material, course schedule\u003C/li>\\n\u003Cli>Auto generated Course schedule Page\u003C/li>\\n\u003Cli>Auto generated course updates section (for each new lectures and assignments) + custom/manual announcements \u003C/li>\\n\u003Cli>Super lightweight \u003C/li>\\n\u003Cli>Highly customizable\u003C/li>\\n\u003Cli>Ready to be used in Github Pages\u003C/li>\\n\u003Cli>Responsive Mobile View\u003C/li>\\n\u003Cli>Support for Google Analytics\u003C/li>\\n\u003C/ul>\\n\u003Ch1 id=\\\"change-log\\\">Change log\u003C/h1>\\n\u003Cul>\\n\u003Cli>Version 2.0\u003Cul>\\n\u003Cli>New Schedule page with more efficient use of space.\u003C/li>\\n\u003Cli>Gregorian calendar is now the default one (English Calendar).\u003C/li>\\n\u003Cli>Add customization options to home, assignments, lectures, and schedule pages.\u003C/li>\\n\u003Cli>Add support for themes (so you can modify the website's look according to your school's brandings)!.\u003C/li>\\n\u003Cli>Move navigation menus to YAML which means it is now easier to add new pages.\u003C/li>\\n\u003Cli>Add more flexibility to lecture's links\u003C/li>\\n\u003C/ul>\\n\u003C/li>\\n\u003C/ul>\\n\u003Ch1 id=\\\"demo\\\">Demo\u003C/h1>\\n\u003Cp>Checkout for a working demo at \u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://kazemnejad.github.io/jekyll-course-website-template/\\\" title=\\\"Jekyll Themes\\\">kazemnejad.github.io/jekyll-course-website-template/\u003C/a>. You may also want to see this real-world example at \u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://iust-deep-learning.github.io/972/\\\" title=\\\"Jekyll Themes\\\">iust-deep-learning.github.io/972\u003C/a> or \u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://iust-courses.github.io/ai97/\\\" title=\\\"Jekyll Themes\\\">iust-courses.github.io/ai97/\u003C/a> (Please note the last two examples are using the older version).\u003C/p>\\n\u003Ch1 id=\\\"some-screenshots\\\">Some Screenshots\u003C/h1>\\n\u003Cp float=\\\"left\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_home.jpg\\\" width=\\\"300\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_schedule.jpg\\\" width=\\\"300\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_lecture.jpg\\\" width=\\\"300\\\">\\n\u003C/p>\\n\\n\u003Cp float=\\\"left\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_assign.jpg\\\" width=\\\"300\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_sample_assign.jpg\\\" width=\\\"300\\\">\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/screen_material.jpg\\\" width=\\\"300\\\">\\n\u003C/p>\\n\\n\u003Ch1 id=\\\"acknowledgement\\\">Acknowledgement\u003C/h1>\\n\u003Cp>This template is heavily based on \u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://github.com/svmiller/course-website\\\" title=\\\"Jekyll Themes\\\">svmiller / course-website\u003C/a>.\u003C/p>\\n\u003Ch1 id=\\\"how-to-deploy-your-own-website-on-github-pages\\\">How to deploy your own website (on GitHub pages)\u003C/h1>\\n\u003Col>\\n\u003Cli>Fork this repository.\u003C/li>\\n\u003Cli>Open \u003Ccode>_config.yml\u003C/code>.\u003Col>\\n\u003Cli>Update \u003Ccode>url\u003C/code> field according to your GitHub account (e.g., \u003Ccode>https://<your-github-username>.github.io/\u003C/code>).\u003C/li>\\n\u003Cli>Update \u003Ccode>baseurl\u003C/code> field according to your reporsitory's name (e.g., \u003Ccode>/cs101\u003C/code>).\u003C/li>\\n\u003Cli>Commit and push your changes.\u003C/li>\\n\u003C/ol>\\n\u003C/li>\\n\u003Cli>Go to your repository's settigns (\u003Ccode>https://github.com/<your-github-username>/<your-repo-name>/settings\u003C/code>).\u003C/li>\\n\u003Cli>On GitHub Pages section, choose source to be your master branch, and enable Github Pages.\u003C/li>\\n\u003Cli>You are now ready to go! Start customizing your website.\u003C/li>\\n\u003C/ol>\\n\u003Cp>Pro Tip: You don't need to clone your repo to update your website. Use GitHub web UI to update its source files, and GitHub will build and deploy your website automatically!\u003C/p>\\n\u003Cp>\u003Cstrong>Best Practice for managing repositories\u003C/strong>: If you plan to use this template for university courses, and the course is offered for multiple semesters/quarters, I suggests you to create a GitHub account or an Organization for it. Then, create new repoository under that account/organization for each semester.\u003C/p>\\n\u003Cul>\\n\u003Cli>Example: \u003Cul>\\n\u003Cli>Course name: CS101\u003C/li>\\n\u003Cli>Semester: Fall 2020\u003C/li>\\n\u003Cli>School name: CMU\u003C/li>\\n\u003C/ul>\\n\u003C/li>\\n\u003Cli>=> account/org name: \u003Ccode>cmu-cs101\u003C/code>\u003C/li>\\n\u003Cli>=> repo name: \u003Ccode>fa2020\u003C/code>\u003C/li>\\n\u003Cli>=> website address will be: \u003Ccode>https://cmu-cs101.github.io/fa2020/\u003C/code>\u003C/li>\\n\u003C/ul>\\n\u003Ch1 id=\\\"how-to-test-your-website-locally\\\">How to test your website locally\u003C/h1>\\n\u003Col>\\n\u003Cli>Install Jekyll (\u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://jekyllrb.com/docs/installation/\\\" title=\\\"Jekyll Themes\\\">Installation guide\u003C/a>)\u003C/li>\\n\u003Cli>Clone your repo\u003C/li>\\n\u003Cli>Watch your website while editing: \u003Ccode>bundle exec jekyll serve\u003C/code>\u003C/li>\\n\u003C/ol>\\n\u003Ch1 id=\\\"how-to-customize\\\">How to customize\u003C/h1>\\n\u003Ch2 id=\\\"changing-the-names\\\">Changing the names\u003C/h2>\\n\u003Cul>\\n\u003Cli>Open \u003Ccode>_config.yml\u003C/code>\u003C/li>\\n\u003Cli>Update \u003Ccode>course_name\u003C/code>, \u003Ccode>course_semester\u003C/code>, and \u003Ccode>course_description\u003C/code> (this will appear in the home page).\u003C/li>\\n\u003Cli>Update \u003Ccode>schoolname\u003C/code>, \u003Ccode>schoolurl\u003C/code>, \u003Ccode>twitter_username\u003C/code>, and \u003Ccode>address\u003C/code> accordingly.\u003C/li>\\n\u003Cli>(Optional) Enter your Google Analytics tracking ID in the \u003Ccode>google_analytics\u003C/code> field (Remember to uncomment it).\u003C/li>\\n\u003Cli>Add more content to your home page: Update \u003Ccode>index.md\u003C/code> (it supports Markdown!)\u003C/li>\\n\u003Cli>Update course staff info at \u003Ccode>_data/people.yml\u003C/code> (You may need to upload the profile pics to \u003Ccode>_images\u003C/code> folder.\u003C/li>\\n\u003Cli>(Optional) Open \u003Ccode>_data/previous_offering.yml\u003C/code> and update the data if needed.\u003C/li>\\n\u003C/ul>\\n\u003Ch2 id=\\\"change-the-looks\\\">Change the looks\u003C/h2>\\n\u003Cul>\\n\u003Cli>\u003Cp>Open \u003Ccode>_sass/_user_vars.scss\u003C/code>\u003C/p>\\n\u003C/li>\\n\u003Cli>\u003Cp>Select your favorite from the pre-defined themes (comment all other themes, and uncomment your desired one)\u003C/p>\\n\u003C/li>\\n\u003Cli>\u003Cp>Here are all themes:\u003C/p>\\n\u003Cimg src=\\\"https://raw.githubusercontent.com/kazemnejad/jekyll-course-website-template/master/_images/screenshots/themes.png\\\">\\n\u003C/li>\\n\u003Cli>\u003Cp>You can also change the colors manually to match your branding\u003C/p>\\n\u003Ch2 id=\\\"contents\\\">Contents\u003C/h2>\\n\u003Ch3 id=\\\"lectures\\\">Lectures\u003C/h3>\\n\u003Cp>To add a new lecture, create an empty file with \u003Ccode>.md\u003C/code> postfix in \u003Ccode>_lectures/\u003C/code> directory. fill it using below template:\\n```markdown\u003C/p>\\n\u003C/li>\\n\u003C/ul>\\n\u003Chr>\\n\u003Cp>type: lecture\\ndate: 20xx-xx-xxTx:xx:xx+4:30 \\ntitle: \u003CTitle of this lecture>\u003C/p>\\n\u003Ch1 id=\\\"optional\\\">optional\u003C/h1>\\n\u003Ch1 id=\\\"please-use-static_filesnotes-directory-to-store-notes\\\">please use /static_files/notes directory to store notes\u003C/h1>\\n\u003Cp>thumbnail: /static_files/path/to/image.jpg\u003C/p>\\n\u003Ch1 id=\\\"optional-1\\\">optional\u003C/h1>\\n\u003Cp>tldr: "What is AI? How does it impact our lives? The current state of the art."\u003C/p>\\n\u003Ch1 id=\\\"optional-2\\\">optional\u003C/h1>\\n\u003Ch1 id=\\\"set-it-to-true-if-you-dont-want-this-lecture-to-appear-in-the-updates-section\\\">set it to true if you dont want this lecture to appear in the updates section\u003C/h1>\\n\u003Cp>hide_from_announcments: false\u003C/p>\\n\u003Ch1 id=\\\"optional-3\\\">optional\u003C/h1>\\n\u003Cp>links: \\n - url: /static_files/presentations/lec.zip\\n name: notes\\n - url: /static_files/presentations/code.zip\\n name: codes\\n - url: \u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://google.com\\\" title=\\\"Jekyll Themes\\\">https://google.com\u003C/a>\\n name: slides\\n - url: \u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://example.com\\\" title=\\\"Jekyll Themes\\\">https://example.com\u003C/a>\\n name: other\u003C/p>\\n\u003Chr>\\n\u003C!-- Other additional contents using markdown -->\\n\u003Cp>\u003Cstrong>Suggested Readings:\u003C/strong>\u003C/p>\\n\u003Cul>\\n\u003Cli>\u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"http://example.com\\\" title=\\\"Jekyll Themes\\\">Readings 1\u003C/a>\u003C/li>\\n\u003Cli>\u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"http://example.com\\\" title=\\\"Jekyll Themes\\\">Readings 2\u003C/a>\\n```\u003C/li>\\n\u003C/ul>\\n\u003Ch3 id=\\\"assignments\\\">Assignments\u003C/h3>\\n\u003Cp>To add a new assignments, create an empty file with \u003Ccode>.md\u003C/code> postfix in \u003Ccode>_assignments/\u003C/code> directory. fill it using below template:\u003C/p>\\n\u003Cpre>\u003Ccode class=\\\"language-markdown\\\">---\\ntype: assignment\\ndate: 20xx-xx-xxTx:xx:xx+4:30\\ntitle: <Assignment title (e.g. Assignment #1>\\n\\n# optional \\npdf: /static_files/assignments/assign_01.pdf\\n\\n# optional\\nsolutions: /static_files/assignments/assign_01_solutions.pdf\\n\\n# optional\\nattachment: /static_files/assignments/assign_01_attachment.zip\\n\\n# optional\\n# set it to true if you don't want this assignment to appear in the announcements section\\nhide_from_announcments: false\\n\\ndue_event: \\n type: due\\n date: 20xx-xx-xxTx:xx:xx+4:30\\n description: 'Assignment #1 due'\\n---\\n<!-- Other additional contents using markdown -->\\n\u003C/code>\u003C/pre>\\n\u003Ch3 id=\\\"dues--deadlines\\\">Dues & Deadlines\u003C/h3>\\n\u003Cp>Use \u003Ccode>_events/\u003C/code> directory to add new a deadline, use \u003Ccode>type: due\u003C/code>. These events will apear at the schedule page.\u003C/p>\\n\u003Cpre>\u003Ccode class=\\\"language-markdown\\\">---\\ntype: due\\ndate: 20xx-xx-xxTx:xx:xx+4:30\\ndescription: <Description of deadline (e.g. 'Final report due')>\\n\\n# optional\\n# set it to true if you don't want this event to appear in the announcements section\\nhide_from_announcments: false\\n---\\n\u003C/code>\u003C/pre>\\n\u003Ch3 id=\\\"exams\\\">Exams\u003C/h3>\\n\u003Cp>Use \u003Ccode>_events/\u003C/code> directory to add new Exam alert, use \u003Ccode>type: exam\u003C/code>. These events will apear at the schedule page.\u003C/p>\\n\u003Cpre>\u003Ccode class=\\\"language-markdown\\\">---\\ntype: exam\\ndate: 20xx-xx-xxTx:xx:xx+4:30\\ndescription: <Description of the exam (e.g. 'The midterm exam')>\\n\\n# optional\\n# set it to true if you don't want to this event appear in the announcements section\\nhide_from_announcments: false\\n---\\n\u003C/code>\u003C/pre>\\n\u003Ch3 id=\\\"custom-events\\\">Custom Events\u003C/h3>\\n\u003Cp>Use \u003Ccode>_events/\u003C/code> directory to add new custom events, use \u003Ccode>type: raw_event\u003C/code>. These events will apear at the schedule page.\u003C/p>\\n\u003Cpre>\u003Ccode class=\\\"language-markdown\\\">---\\ntype: raw_event\\nname: <Event name>\\ndate: 20xx-xx-xxTx:xx:xx+4:30\\ndescription: <Event description>\\n\\n# optional\\n# if you want to hide time in Schedule, set this to true\\nhide_time: false\\n\\n# optional\\n# set it to true if you don't want this event appear to in the announcements section\\nhide_from_announcments: false\\n---\\n<!-- you can create custom content using markdown. this section will be placed in "Course Materials (in schedule section)" -->\\n## Hello\\nthis is a custom event with `code` \\n\u003C/code>\u003C/pre>\\n\u003Ch3 id=\\\"updatesannouncements\\\">Updates/Announcements\u003C/h3>\\n\u003Cp>All contents here appear in at the home page\\nUse \u003Ccode>_announcements/\u003C/code> directory to create new Announcement\u003C/p>\\n\u003Cpre>\u003Ccode class=\\\"language-markdown\\\">---\\ndate: 20xx-xx-xxTx:xx:xx+4:30\\n---\\n<put a short announcement here, you can use all markdown features>\\n\u003C/code>\u003C/pre>\\n\u003Ch2 id=\\\"advanced-customization\\\">Advanced Customization\u003C/h2>\\n\u003Cp>You can add custom contents to each section (lectures, assignments, schedule, materials, and project)\u003C/p>\\n\u003Cul>\\n\u003Cli>Lectures: Edit \u003Ccode>lectures.md\u003C/code>\u003C/li>\\n\u003Cli>Assignments: Edit \u003Ccode>assignments.md\u003C/code>\u003C/li>\\n\u003Cli>Schedule: Edit \u003Ccode>schedule.md\u003C/code>\u003C/li>\\n\u003Cli>Materials: Edit \u003Ccode>materials.md\u003C/code>\u003C/li>\\n\u003Cli>Project: Edit \u003Ccode>project.md\u003C/code>\u003C/li>\\n\u003C/ul>\\n\u003Cp>Additionally, you can update navigation menus (the menu at the top of the website) by editing \u003Ccode>_data/nav.yml\u003C/code>\u003C/p>\\n\u003Cp>To add new section, add new navigation menu. Then create a new file in website's root directory using the following template:\u003C/p>\\n\u003Cpre>\u003Ccode class=\\\"language-markdown\\\">---\\nlayout: page\\ntitle: Page Title\\npermalink: /page-address/\\n---\\n\u003C/code>\u003C/pre>\\n\"}"}</script> <script> { __sveltekit_2alqnt = { base: new URL("..", location).pathname.slice(0, -1), env: {} }; const element = document.currentScript.parentElement; const data = [null,null]; Promise.all([ import("../_app/immutable/entry/start.60b4bdf8.js"), import("../_app/immutable/entry/app.d56797c8.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 13], data, form: null, error: null }); }); if ('serviceWorker' in navigator) { addEventListener('load', function () { navigator.serviceWorker.register('../service-worker.js'); }); } } </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" crossorigin="anonymous"></script> </div> </body> </html>