RobotnixAcademy
← Courses

Computing

Jekyll: For Students

Build one portfolio from a blank folder to a tested, published Jekyll site while learning how the generator actually works. Students trace source files through Jekyll's rendering/build process, use Markdown, YAML front matter, Liquid, layouts, includes, data files, pages, posts, collections, assets, configuration, themes, plugins, Git, and deployment. They repeatedly debug controlled failures, verify generated output, make accessibility/privacy decisions, and finish by defending the site's architecture from source repository to production browser. The course is self-paced and organized as nine learner-facing Units.

Structure
9 units
Audience
Grades 9-12
Entries
121
NJ standards
8.1.12.AP.4 · 8.1.12.AP.8 · 8.1.12.AP.9 · 8.1.12.CS.1 · 8.2.12.ED.1 · 8.2.12.ITH.3 · 8.2.12.NT.2 · 9.4.12.CI.1 · 9.4.12.DC.1 · 9.4.12.DC.6 · 9.4.12.TL.1
Pacing
Self-paced

Unit 01

  1. overviewUnit 1: Foundations and the Jekyll BuildA website can look complicated in the browser while beginning as ordinary files in a folder.
  2. Lesson 1A Website Is Files Before It Is a ScreenOpen a polished website and your brain wants to start with the screen.
  3. Lesson 2What Jekyll Actually DoesJekyll's README calls it a static site generator and describes a file-based workflow: content goes in, Markdown and Liquid can be rendered, and a complete static site comes out.
  4. Lesson 3Ruby, Gems, Bundler, and the `Gemfile`Jekyll is not a standalone mystery executable that appeared on your computer.
  5. Lesson 4Create the First Site Without a ThemeThemes are useful.
  6. Lesson 5Source → Build → `_site` → Server → BrowserYou have already used the pipeline.
  7. Lesson 6`jekyll build`, `jekyll serve`, and the CLIYou do not need to memorize every Jekyll option.
  8. Lesson 7Project Anatomy and Generated FilesA Jekyll site is not just a pile of Markdown files.
  9. Lesson 8Break the First Build and Trace the FailureYou learn a build system faster when you see it fail on purpose.
  10. Lesson 9Unit Build: First Portfolio Checkpointends with a working site, but the site itself is only half the evidence.

Unit 02

  1. overviewUnit 2: Markdown, Front Matter, and Liquidproved that source becomes generated output.
  2. Lesson 1Markdown Is Source, HTML Is OutputYou already built HTML directly.
  3. Lesson 2Markdown Rendering LabMarkdown is easy until you assume every piece of punctuation means what you think it means.
  4. Lesson 3YAML Without the MysteryFront matter is written in YAML.
  5. Lesson 4Front Matter and Page VariablesFront matter is the bridge between a content file and Jekyll's page data.
  6. Lesson 5Liquid ObjectsLiquid is Jekyll's template language.
  7. Lesson 6Jekyll `page`, `site`, and Built-In VariablesOnce you understand a Liquid object, the next question is:
  8. Lesson 7Liquid FiltersObjects give you values.
  9. Lesson 8Conditions and Control FlowSometimes a template should render something only when a condition is true.
  10. Lesson 9Loops and Generated ListsOne of the best reasons to use a static site generator is to stop hand-copying repeated markup.
  11. Lesson 10Debug Broken YAML and LiquidNow combine the two failure families you have been learning.
  12. Lesson 11Unit Build: Data-Driven About Pageends when your About page is no longer a static block of repeated text.

Unit 03

  1. overviewUnit 3: Layouts, Includes, and Reusable StructureYou can now generate values.
  2. Lesson 1The Cost of Copy-Paste HTMLOpen two pages in your portfolio.
  3. Lesson 2Layouts and the `content` BoundaryA Jekyll layout is a reusable template that wraps page content.
  4. Lesson 3Build the First LayoutNow perform the refactor for real.
  5. Lesson 4Page Variables Inside LayoutsA layout is reusable because it can combine shared markup with page-specific data.
  6. Lesson 5Nested LayoutsSometimes every page shares one outer shell, while one content type needs additional structure.
  7. Lesson 6Includes as Smaller Reusable PiecesLayouts solve repeated page shells.
  8. Lesson 7Include ParametersAn include can be more than a fixed fragment.
  9. Lesson 8Build Reusable NavigationNavigation looks like links.
  10. Lesson 9Header and Footer RefactorNow finish the shared page shell.
  11. Lesson 10Debug Layout and Include FailuresShared templates reduce duplication.
  12. Lesson 11Unit Build: Portfolio Template Architectureends with a portfolio that has reusable structure, not merely more files.

Unit 04

  1. overviewUnit 4: Data and Content SystemsThis is the largest content-model Unit in the course because Jekyll gives you several ways to represent information.
  2. Lesson 1Content Is Not All the Same ShapeA portfolio contains different kinds of information.
  3. Lesson 2Data Files and `site.data`Jekyll can load YAML, JSON, and CSV data from _data.
  4. Lesson 3Build a Project Grid from `_data`Before moving projects into a collection, use a data file to understand the tradeoff.
  5. Lesson 4Pages and Generated URLsA source filename and a public URL are related, but they are not identical concepts.
  6. Lesson 5PermalinksA permalink controls an output path.
  7. Lesson 6`url`, `baseurl`, and Safer Link ConstructionA local site at / and a deployed site under /repository-name/ can expose the same generated content through different base paths.
  8. Lesson 7Posts and Filename ConventionsJekyll is blog-aware without requiring a database.
  9. Lesson 8`site.posts`, Dates, Categories, and TagsOne post is a file.
  10. Lesson 9Build a Technical Project JournalA portfolio shows results.
  11. Lesson 10Collections and Custom Content TypesPosts solve date-oriented content.
  12. Lesson 11Define a Project CollectionNow migrate the portfolio projects into a real content type.
  13. Lesson 12Collection Documents and OutputYour project files exist.
  14. Lesson 13Data Files vs Pages vs Posts vs CollectionsYou now have enough Jekyll features to make bad architecture decisions with confidence.
  15. Lesson 14Debug a Content-Model FailureContent systems fail in different ways depending on the model.
  16. Lesson 15Unit Build: Portfolio Content Architectureends with a portfolio whose content model can be explained.

Unit 05

  1. overviewUnit 5: Assets, CSS, Responsive Design, and AccessibilityThe portfolio finally gets a deliberate visual system in this Unit.
  2. Lesson 1Processed Assets vs Static FilesJekyll does not treat every file the same way.
  3. Lesson 2Asset Paths and Why They BreakAn image can exist perfectly in source and still fail in the browser.
  4. Lesson 3CSS Architecture for a Small Jekyll SiteJekyll can generate the page structure.
  5. Lesson 4Typography, Spacing, and Visual HierarchyA portfolio should help someone understand your work.
  6. Lesson 5Responsive LayoutsA portfolio that only works at your laptop width is not finished.
  7. Lesson 6Images and Alternative TextImages are content and assets.
  8. Lesson 7Semantic HTMLJekyll can generate valid-looking pages from terrible HTML.
  9. Lesson 8Keyboard and Focus ChecksA site can look perfect with a mouse and be frustrating from the keyboard.
  10. Lesson 9Metadata and Link QualityA generated page has more responsibilities than visible body content.
  11. Lesson 10Responsive and Accessibility Failure LabYou now have enough shared design source to create failures that affect the whole site.
  12. Lesson 11Unit Build: Portfolio Visual SystemThe portfolio can look like yours now.

Unit 06

  1. overviewUnit 6: Configuration, Rendering, and DebuggingThis is the troubleshooting core of the course.
  2. Lesson 1`_config.yml` Is Site-Wide StateA page controls page-level data.
  3. Lesson 2Common Configuration ValuesConfiguration is not a checklist of keys to copy.
  4. Lesson 3Front Matter DefaultsIf every project repeats the same front-matter value, that value may not belong in every project.
  5. Lesson 4`url` and `baseurl`This pair causes a lot of "works locally, breaks online" confusion.
  6. Lesson 5Development vs Production EnvironmentsA development build and a production build can intentionally behave differently.
  7. Lesson 6The Jekyll Rendering ProcessThe rendering pipeline is one of the most useful upstream documents in this entire course.
  8. Lesson 7Read Build Output Before Editing Random FilesA terminal error is not punishment.
  9. Lesson 8YAML FailuresYAML appears in front matter, configuration, and data files.
  10. Lesson 9Liquid FailuresLiquid failures live inside the rendering/template layer.
  11. Lesson 10Path and URL FailuresPaths cross source, destination, and deployment layers.
  12. Lesson 11Configuration FailuresConfiguration failures can have a huge blast radius because _config.yml influences the whole build.
  13. Lesson 12Build a Failure TreeYou now have enough failure families to build a reusable diagnostic model.
  14. Lesson 13Broken-Site Diagnostic LabYou will diagnose four bounded incidents.
  15. Lesson 14Write a Reproducible Bug ReportDebugging yourself is one skill.
  16. Lesson 15Unit Build: Configuration and Debugging Evidence Packis complete when you can diagnose the build as a pipeline instead of treating Jekyll as one black box.

Unit 07

  1. overviewUnit 7: Themes, Plugins, and Extension BoundariesYou built the important Jekyll mechanisms yourself first.
  2. Lesson 1What a Theme Actually ProvidesA theme is not a coat of paint floating above your site.
  3. Lesson 2Gem-Based ThemesA gem-based Jekyll theme can hide source files from the project tree while still participating in the build.
  4. Lesson 3Find the Theme Files You Cannot SeeIf a theme supplies your layout, you should be able to locate that source.
  5. Lesson 4Override a Theme SafelyJekyll allows site source to override theme defaults for important source families.
  6. Lesson 5What Plugins Add to the BuildA plugin extends Jekyll's build behavior without requiring you to modify Jekyll core.
  7. Lesson 6Plugin Categories and Build HooksPlugins make more sense when you understand where they enter the build.
  8. Lesson 7Dependency and Portability TradeoffsEvery dependency buys something.
  9. Lesson 8GitHub Pages Plugin ConstraintsLocal Jekyll and hosted Jekyll are related environments, not automatically identical environments.
  10. Lesson 9Theme vs Custom Layout DecisionYou already have a working custom template system.
  11. Lesson 10Plugin Decision LabThis lab is a controlled extension experiment.
  12. Lesson 11Unit Build: Extension Decision Recorddoes not end with "installed a theme and five plugins."

Unit 08

  1. overviewUnit 8: Git, GitHub, and DeploymentYour Jekyll site is mature enough to become a real public software artifact.
  2. Lesson 1Why the Source Repository MattersA deployed website is the output.
  3. Lesson 2Initialize and Read Git HistoryVersion control becomes useful when you read it as evidence, not when you memorize commands.
  4. Lesson 3Small Commits and Useful MessagesA commit is not a save button with a timestamp.
  5. Lesson 4BranchesA branch lets a line of development move without immediately changing another branch's current tip.
  6. Lesson 5Read a DiffA diff is one of the most useful technical reading tools in this course.
  7. Lesson 6Review a Change Before Merging ItA branch can contain valid code that you still should not merge.
  8. Lesson 7Read an Upstream Jekyll CommitOpen-source software is not a frozen textbook.
  9. Lesson 8Local Build Is Not DeploymentYour browser showing localhost proves one thing:
  10. Lesson 9Production BuildsA production build should be deliberate and reproducible.
  11. Lesson 10GitHub Pages ArchitectureGitHub Pages can publish static sites and has built-in Jekyll support.
  12. Lesson 11Repository and Pages ConfigurationPublishing requires repository settings that connect source history to Pages.
  13. Lesson 12Publish the PortfolioThis is the point where your source becomes publicly reachable.
  14. Lesson 13Production URLs and Base PathsProduction is where hidden URL assumptions become visible.
  15. Lesson 14Local-Works / Production-Breaks LabThis lab is built around the most misleading deployment sentence in web development:
  16. Lesson 15Deployment Evidence and RecoveryA production deployment can fail after a perfectly good local build.
  17. Lesson 16Unit Build: Published Portfolioends with a public portfolio tied to inspectable source history and a reproducible deployment path.

Unit 09

  1. overviewUnit 9: Production Portfolio and Architecture DefenseNo new Jekyll feature is the goal here.
  2. Lesson 1Audit the Portfolio as a SystemYou are done adding major Jekyll features.
  3. Lesson 2Content and Public-Identity ReviewA portfolio is deliberately public.
  4. Lesson 3Accessibility Auditintroduced accessibility during the build.
  5. Lesson 4Performance and Asset AuditStatic sites can be fast.
  6. Lesson 5Link and Metadata AuditA portfolio with broken internal links feels unfinished even when every page individually looks good.
  7. Lesson 6Source Hygiene and Generated-File ReviewA mature repository should make it obvious which files humans maintain and which files tools regenerate.
  8. Lesson 7Trace One Page Through the Entire Jekyll PipelineThis is the technical core of the final defense.
  9. Lesson 8Architecture DiagramYour final diagram should explain the system better than a screenshot can.
  10. Lesson 9Stress-Test the BuildA final project should survive more than the one happy path you used while building it.
  11. Lesson 10Stress-Test DeploymentNow test the path beyond your laptop.
  12. Lesson 11Final Revision SetYou have probably accumulated a long list of possible improvements.
  13. Lesson 12Prepare the Evidence DossierThe portfolio itself is one artifact.
  14. Lesson 13Portfolio Architecture DefenseThis is the final checkpoint.