Overview:

The Student Hub Website Framework is a content-focused website made using Contentful’s Headless CMS and Astro. It is deployed to Netlify and utilizes React and Svelte for interactive components. The website aims to provide learning resources and information for students, with a focus on Git, Javascript syntax, HTTP overview, and Astro documentation.

Features:

• Contentful’s Headless CMS for managing content
• Astro framework for efficient website performance
• Integration with Netlify for easy deployment
• Use of React and Svelte for interactive components
• Learning resources on Git, Javascript syntax, HTTP overview, and Astro documentation
• Project structure and data fetching capabilities
• Support for authoring content and using Contentful API
• Tailwind CSS for extensive styling options

Installation:

To install the Student Hub Website Framework, follow these steps:

1. Fork the repository from GitHub.
2. Create a Netlify account using the GitHub account that forked the repository.
3. Once signed up, click on “Deploy your first project” or go to the provided link.
4. Click on “Deploy with GitHub” and follow the steps to connect to your GitHub account and deploy the repository.
5. Create a Contentful account and select to start from scratch.
6. Design your content model or skip for now.
7. Go to “Settings” > “API Keys” and click on “Add API key”. Keep the page open for later reference.
8. Install the Contentful CLI and log in using “contentful login”.
9. Clone the forked GitHub repo to your local machine and navigate to the project folder.
10. Run the command “\Replace SPACE_ID with the space id from the API Key page” (replace SPACE_ID with the actual space id).
11. This will import the content models and content from DSSD Madison into your Contentful project.
12. Confirm that the Content Types page has several types and the Content page has entries.
13. In your Netlify project, go to “Site Settings” > “Environment Variables” and add the following 4 variables:
    • CACHING_MAX_AGE with a value equal to the number of seconds you want Netlify to cache the HTML for.
    • CONTENTFUL_ACCESS_TOKEN with a value equal to the “Content Delivery API - access token” from the API Key page.
    • CONTENTFUL_ENVIRONMENT with a value equal to “master”.
    • CONTENTFUL_SPACE with a value equal to the space id from the API Key page.
    • NODE_VERSION with a value of 16.13.1.
14. Go to “Deploys” and click on the most recent deploy. Click on “Options” then “Clear cache and retry with latest branch commit”.
15. Finally, go to “Site Overview” and click on the URL to see your fully functional site. Edit the content in Contentful and make edits to the website’s styling by updating the main branch in your GitHub repository.

Summary:

The Student Hub Website Framework is a content-focused website built using Contentful’s Headless CMS and Astro. It provides learning resources and information for students, covering topics such as Git, Javascript syntax, HTTP overview, and Astro documentation. The framework can be easily installed by forking the GitHub repository, creating a Netlify and Contentful account, and following a series of installation steps. Overall, this framework offers a flexible and efficient solution for creating student-oriented websites.