Homework 1 Office Hours Recap

Below is a concise, structured summary of the questions and answers discussed during the Thursday Feb 6th recitation (2-3PM) in which we covered “HW1 office hours,” covering the key points that will help anyone who missed the session.

The session was recorded and can be viewed here.

The attendees were:

• Mia Kim: “How do I get code . to work? I keep getting an error, even after reinstalling VS Code.”
• Hanxi Guo: “I’ve made changed to the exampleSite and to the root of the hugo-mock-landing-page but they don’t connect, why is that?”
• Akash Kaukuntla: “I’m confused about Part I of the homework—creating user stories. How many ideas or products do we come up with, and how many features do we outline?”
• Abdullah Goher
  • “Do I need to add user stories for every idea, or just the final product?”
  • “How do I change styling or the favicon in the code base? I see multiple styling files—where do I edit?”
  • “Why doesn’t git commit -m "..." appear on GitHub?”
• Arya Bansal: “When I change the baseURL in config.toml, my front-end breaks. Why does that happen?”
• Shafaa Munial: “My images look broken when I switch back to the original repo—how can I fix that?”

• Question: Mia was unable to run code . from the terminal on macOS, despite having reinstalled Visual Studio Code.
• Key Points:
  • The code . command is a shortcut to open the current folder in VS Code, but it must be enabled in VS Code’s settings or properly added to your system PATH.
  • Temporary workaround: Manually open folders via VS Code’s “File → Open Folder…” if code . fails.
  • Solution:
    1. In VS Code, open the Command Palette (⇧⌘P on Mac), type “Shell Command: Install ‘code’ command in PATH,” and select it.
    2. Confirm in a new terminal that code . now works.
    3. Alternatively, follow the Visual Studio Code Docs to add VS Code to your PATH automatically.

• Question: Abdullah was committing but changes never appeared on GitHub.
• Key Points:
  • git commit -m "message" saves your changes locally.
  • You must also git push to upload your commits to the remote GitHub repository.
  • GitHub’s own “Quick Setup” or “Create a new repository” page usually shows the needed commands (including git push).

• Issue: Students saw the Hugo Bootstrap Theme’s example site inside themes/hugo-bootstrap-theme/exampleSite, and then had trouble making it display at the top level.
• Key Points:
  1. Hugo expects the main site’s content (like config.toml, /content, etc.) at your repository’s root level.
  2. If you want to use the example site as your starting point, copy its contents out of exampleSite into your root folder, replacing the default top-level.
  3. Check the line themesdir = "../.." in some config files; you usually remove or update that if copying everything to the root.
• Tip:
  • If you only edit inside exampleSite but keep running hugo server from the root, it may not render as expected. Copy or move the content to the root folder.

• Question: Multiple questions about changing the favicon or images.
• Strategy:
  1. Browser DevTools: Right-click → “Inspect” to see the file path and name used.
  2. Search in VS Code: Search for “favicon,” or for the image’s filename, to see what partial/template references it.
  3. Override or Replace the default files in static/ or the relevant partial in layouts/partials/head/.

• Question: Which CSS file to edit among many possible files?
• Advice:
  1. Code Archaeology: Use global search in VS Code, or the DevTools “Elements” panel to see which CSS file is being applied.
  2. Theme Build Process: The hugo-bootstrap-theme uses Node.js to compile SCSS. Follow the README for that theme (install dependencies and run the build script).
  3. Custom Overrides: Often you can add your own custom.css and reference it in your site’s HTML head, or use partial overrides in Hugo.

• You do create 3–4 ideas on paper initially but only submit user stories for the one product you choose.
• In USER-STORIES.md, have 15–20 user stories that meet INVEST criteria.
• You only need to highlight 6 big features on the final landing page, 3 of which must be illustrated with images (created manually or via AI tools).

• Each user story typically maps to a feature.
• You might generate more user stories than the final site can showcase; pick the top 6 that are most “marketable” for the landing page.

• The professor said: “As much as you want. This is your chance to experiment!”
• Minimum:
  • Change the title, brand name, site descriptions, any placeholders, the footer name/year, etc.
  • Include at least one blog post (for practice) and set the rest to draft: true or remove them.

• If you change baseURL, be sure it aligns with how you’ll actually host on GitHub Pages, e.g.

  baseURL = "https://<username>.github.io/hugo-mock-landing-page/"
  

• Restart hugo server after changing the config to see updates locally.

• Key Steps:
  1. Build site: hugo generates the public/ folder.
  2. Push or deploy public/ to a gh-pages branch (the professor provided a sample shell script publish_to_gh_pages.sh).
  3. Configure the repository settings so that GitHub Pages serves from gh-pages.
  4. Verify by visiting https://<username>.github.io/<repo-name>/.

• At Least One Post: The homework calls for at least one blog post or article.
• Possible Post Ideas:
  • A tutorial on how to use your product.
  • A behind-the-scenes “mission statement” or background story.
  • A “hello world” / sample feature highlight post.
• Posts can be placed in /content/posts/ or similar. Mark draft: false to make them visible.

• The professor encouraged students to answer each other’s questions on Slack (#questions-technical or a new channel for “technical-sharing”).
• Doing so earns participation credit and mimics real software engineering teamwork.

1. Push your work frequently to GitHub to avoid losing progress.
2. Use good commit messages to keep track of changes.
3. Don’t be afraid to delete unneeded example files—less clutter makes your site easier to customize.
4. If you get stuck, do the following:
   • Inspect the site in your browser (DevTools).
   • Search for references in your project with “Search Across Files.”
   • Consult the Slack channels or official Hugo docs.
   • Keep an eye on your git submodules if the theme does not appear to build properly.

1. Cloning your repo (example):

   git clone https://github.com/<username>/hugo-mock-landing-page.git
   cd hugo-mock-landing-page
   

2. Running Hugo locally:

   hugo server
   

3. Adding a git submodule (theme):

   git submodule add https://github.com/filipecarneiro/hugo-bootstrap-theme themes/hugo-bootstrap-theme
   

4. Overriding the example site:

   cp -r themes/hugo-bootstrap-theme/exampleSite/* .
   

5. Basic Git Steps:

   git add .
   git commit -m "Your commit message"
   git push
   

6. Publish:
   • Generate the static site: hugo
   • Run the provided publish script (if using the professor’s approach):

     ./publish_to_gh_pages.sh public <username>/hugo-mock-landing-page
     

These notes capture the main office-hours Q&A for Homework 1. Focus on:

• User stories (Part I)
• Hugo setup and theming (Part II & III)
• Customization & deployment (Part IV)

If you have more questions, check Slack for existing threads or post a new question in #questions-technical. Good luck completing HW1, and remember to push your repository to GitHub Pages so it is live!