The following is a draft outline of the lab.

Hugo Portfolio Lab - Onboarding Project Outline

Introduction

Welcome to the Hugo Portfolio Lab! In this lab, you'll create a portfolio website using Hugo, a powerful and flexible static site generator. This portfolio will not only serve as a showcase of your skills and projects but also lay the groundwork for your onboarding journey with the club. This lab will guide you through the process of setting up Hugo, choosing a template, and ultimately building a website that represents your professional self.

If you haven't read the formal introduction to this onboarding series, we recommend starting there. If you're ready and have chosen Hugo as your web development framework, let's proceed!

This lab is structured to accommodate different levels of engagement:

Green (Essentials): 🟢 Read and complete the essential parts to set up your basic website.
Yellow (Intermediate): 🟡 Learn about more advanced concepts and make small customizations.
Red (Advanced): 🔴 Dive deep into Hugo and customize every part of your website.

No matter your level of interest, you'll leave this lab with a working portfolio. The only difference is how deep you decide to explore the Hugo ecosystem.

Lab Structure

1. Getting Started with Hugo

🟢 Introduction to Hugo

What is Hugo?: Hugo is an open-source static site generator designed for speed and simplicity. It is highly suitable for creating lightweight, fast-loading websites.
Why Hugo?: Discuss the benefits of Hugo, including its speed, ease of use, and support for Markdown-based content. Provide a high-level view of why this lab is valuable in the broader software development journey.

🟢 Installing Hugo

Option 1: Using Docker (Recommended for Beginners)
- Why Docker?: Explain why Docker is a better choice, as it simplifies setup, ensures consistency, and helps build foundational knowledge for later labs.
- Link to the club’s "Learn Docker" wiki article for first timers.
- Installation Steps: Explain the steps to pull an image from the docker hub and run it.
Option 2: Native Installation
- Provide installation instructions for different operating systems:
- Linux Installation Guide
- Windows Installation Guide

2. Setting Up Your Site

🟢 Creating Your First Hugo Site

Run the following commands to get started:
```
hugo version
hugo new site ./ --force
```
Creating Your Own Repository: remind the users to create their own repository from the provided template. Emphasize that the repository should be created in their personal GitHub account, not the club's organization account. If they require guidance with Github and Git point the users to the Git track that was prerequisite to this one.

3. Choosing Your Path: Template vs. Custom Theme

🟢 Using an Existing Template (Recommended)

Template Introduction: Explain that using an existing template is the most straightforward approach for beginners and will help them focus on content creation rather than design.
Gallery of Themes: Provide a link to Hugo’s official themes gallery.
Setup Instructions: Walk users through downloading and using an existing theme, including steps to customize the theme.
- Explain file layout and how to modify a template: Explain what content, layout, static, data, and assets mean within Hugo, and how to add or modify content using Markdown.

🟡 Customizing an Existing Template

Intermediate Customization: Guide users on how to make small customizations, such as editing CSS or modifying the layouts to personalize their site further.
Tips: Provide links to Hugo's documentation to learn more about customizing templates.

🔴 Creating Your Own Theme from Scratch (Advanced)

Warning: Let users know that building a custom theme is challenging.
- Provide some background about your club's attempt to do this and what we learned.
- Explain why we don't recommend it given the challenges we faced with making the UI look good.
Basic Setup: If you are sure you want to continue, walk through the command to create a new theme:
```
hugo new theme your-theme-name
```
Theme Building Blocks: Introduce users to Hugo-specific concepts, such as shortcodes, archetypes, and layouts.
Documentation Links: Provide links to the appropriate documentation for each concept.

4. Content Creation

🟢 Customizing Existing Pages

Essential Customizations: Guide members through customizing the existing pages in their chosen template to make it personal:
- Homepage: Customize the homepage to "sell yourself." Walk users through modifying the content to include personal information using Markdown.
- Blog/Case Studies: Customize the blog or case study pages for documenting their various professional accomplishment (e.g. their onboarding journey, future project they are part of in the club or other projects they have worked on).
Rebuild and Test: Walk through the steps to rebuild the project after changes and verify that the modifications are correct.

🟡 Enhancing Content

Intermediate Customization: Provide additional ideas for intermediate customizations, such as modifying the layout of a page by moving sections arround, adding new sections, or editing existing components to fit their brand.

🔴 Creating New Pages from Scratch (Advanced)

Creating New Pages: Explain that creating entirely new pages not present in the original template while masterfully staying consistent with the original UI design can be complex and is intended for advanced users. Provide guidance on the basics of creating new page layouts and adding them to the site.
Hugo File Structure Deep Dive: Offer a deeper understanding of the Hugo file structure, including how new content types can be added effectively.

5. Acceptance Criteria for Completion

🟢 Minimum Requirements

The minimum requirement is to have the following two pages in ones portfolio website:

Homepage: the homepage to "sell yourself." Walk users through modifying the content to include personal information using Markdown.
Blog/Case Studies: the blog or case studies page for documenting their various professional accomplishment (e.g. their onboarding journey, future project they are part of in the club or other projects they have worked on).

🟡 Documenting Your Experience

First Blog Post: Encourage members to write a blog post about their experience building in this training tutorial walking them through making their own Hugo portfolio and learning all the steps needed to eventually deploy it - focusing on what they learn, the challenge they faced and how they resolved them.

7. Next Steps

DevOps Lab: Mention that after completing this Hugo Lab, the next step will be setting up CI/CD for the website using Docker in the DevOps Lab.
Foster a knowledge transfer mindset: Emphasize the value of sharing what they've learned by documenting their feedback on the Hugo lab and the pain point they have faced to help make the experience better for future new members.

Conclusion

This multi stage training project is the beginning of your journey with CEDILLE. By the end of this experience, you’ll not only have a portfolio that showcases your skills but also foundational experience in DevOps, SRE, and application development through subsequent labs. Take your time, experiment, and make the most out of it. We’re here to help you slowly get ready for the industry, one project at a time!

This is the baseline skeleton of the lab that will need to be expended upon with actual content.

ClubCedille / Plateforme-Cedille

Créer le lab pratique pour le "Développement web" avec Hugo #217