{"id":20521701,"url":"https://github.com/hack4impact/chapter-website-template","last_synced_at":"2025-04-14T02:44:20.811Z","repository":{"id":53151347,"uuid":"325889192","full_name":"hack4impact/chapter-website-template","owner":"hack4impact","description":"The template all chapters can use to build their own website. First created by our UIUC chapter using NextJS, and perfected with Contentful CMS integration 🚀","archived":false,"fork":false,"pushed_at":"2021-11-01T21:35:28.000Z","size":181654,"stargazers_count":5,"open_issues_count":0,"forks_count":12,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-27T16:49:33.631Z","etag":null,"topics":["graphql","nextjs","react"],"latest_commit_sha":null,"homepage":"https://hack4impact.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hack4impact.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-31T23:36:35.000Z","updated_at":"2023-10-30T00:07:10.000Z","dependencies_parsed_at":"2022-08-30T04:22:03.129Z","dependency_job_id":null,"html_url":"https://github.com/hack4impact/chapter-website-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"hack4impact-uiuc/uiuc.hack4impact.org","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hack4impact%2Fchapter-website-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hack4impact%2Fchapter-website-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hack4impact%2Fchapter-website-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hack4impact%2Fchapter-website-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hack4impact","download_url":"https://codeload.github.com/hack4impact/chapter-website-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248812744,"owners_count":21165472,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","nextjs","react"],"created_at":"2024-11-15T22:31:26.802Z","updated_at":"2025-04-14T02:44:20.603Z","avatar_url":"https://github.com/hack4impact.png","language":"JavaScript","readme":"# Hack4Impact's Chapter Website Template 🚀\n\n[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/hack4impact/chapter-website-template\u0026utm_source=github\u0026utm_medium=nextstarter-cs\u0026utm_campaign=devex)\n\n## Our tech stack\n\nThis template is built for generating a _static, super-efficient_ website that you can easily update overtime. For this, NextJS + Contentful formed the perfect dream team.\n\n### NextJS ⚙️\n\n[**NextJS**](https://nextjs.org/) is a great match for static sites, especially if you're already familiar with React. The main benefit is **flexibility:** you can build most of your site to _static,_ super-efficient HTML. Then, as your site expands, you can explore [server rendering and caching](https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d07ff2cefe8) with almost zero extra setup. This opens to door for admin portals, nonprofit dashboards, and more!\n\n### Contentful 📝\n\n[**The Contentful CMS**](https://www.contentful.com/) is where all your text content and media (images and videos) are hosted. Above all, this services _eliminates_ the need to \"ask the developer\" whenever you want to add content to the site.\n\nHave a new nonprofit project page to create? Need to update applications for the next recruitment cycle? Just edit some Google-Doc-style text boxes and hit \"publish.\" If you're hosting your site on Netlify, you can [trigger your site to redeploy whenever](https://www.contentful.com/developers/docs/tutorials/general/automate-site-builds-with-webhooks/) new content is published!\n\n## Set up Contentful\n\nIf you're unfamiliar with connecting NextJS and Contentful using GraphQL, read this article before proceeding 👇\n\n[**NextJS, Contentful CMS, GraphQL, oh my!**](https://dev.to/hack4impact/nextjs-contentful-cms-graphql-oh-my-352o)\n\n### Set your environment variables\n\nTo use Contentful in your project, you'll need to set some keys to talk to our Hack4Impact space.\n\nNote that **we recommend using our existing Hack4Impact Contentful space.** Please contact us over slack or at contact@hack4impact.org for these credentials.\n\nOnce you have them, create a `.env` file in the base folder of this repo, and paste these contents:\n\n```\n# Token to log into our Contentful organization\nNEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN=\n# ID for the Hack4Impact website space\nNEXT_PUBLIC_CONTENTFUL_SPACE_ID=\n# ID for your Website Layout model\nLAYOUT_ENTRY_ID=\n```\n\n### Create a new Website Layout entry\n\nIf you use our Hack4Impact space, you'll have a content model called **Website Layout** that you can access. This model outlines _all major_ pieces of your site, from your university logo to your nonprofit projects to your recruitment cycle information.\n\nTo create a new entry for your chapter's website:\n1. Head to the **Content** tab and search for the \"Example Template\" to see how your end product might look ![contentful search for Example Template, filtered by Website Layout](public/images/readme-assets/website-layout-search.png)\n3. Back out and create a new Website Layout entry from the **Add Entry** button. You can also **Duplicate** our template for a nice starting point, but _be warned!_ All referenced entries in this template (values, projects, etc) are _not_ duplicated. You'll need to detach these from your duplicated template, or you'll accidentally modify our example 😬\n4. Fill out the contents as you wish. Feel free to omit non-required values where necessary, since this repo should be smart enough to handle optional content!\n5. Copy your layout's **Entry ID** into your environment variables (`.env`) as the `LAYOUT_ENTRY_ID`. To find this, just head to the **Info** tab on your entry and copy the ID from there. \n\n## Building the site\n\nMake sure you [have node installed](https://nodejs.org/en/) first. Then, pop open a terminal and run these commands in the project directory:\n\n```\nnpm i\nnpm run dev\n```\n\nThis will spin up a local server for you to preview your site. Note that the build _will_ fail if you haven't set your `.env` file! Head back to the \"Set up Contentful\" step for this.\n\n💡 And no, **don't use `yarn` here.** That will create a second \"lock\" file that you won't want to push to the repository.\n\n### Set up your editor\n\n**[VS Code](https://code.visualstudio.com/) is our editor of choice at Hack4Impact.** This is why our repo comes with a `.vscode` directory, which will auto-configure some settings for this project (like auto-formatting code on save) and recommend some important extensions ([eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)).\n\nIf you use an editor other than VS Code, don't fret! Just make sure you are using a prettier equivalent to format code while you work. All else fails, you can manually run these commands to fix formatting issues:\n\n- **`npm run format`** - to fix any styling issues in your code (indentation and spacing, namely)\n- **`npm run lint:fix`** - to fix any syntax concerns (like accessibility problems, bad HTML attributes, etc.)\n\n### Building for production\n\nIf you use our template as-is, you'll probably want to \"export\" your site to a static set of HTML files. For this, just run the command:\n\n```\nnpm run export\n```\n\nThis will create a production-ready build of your site in the **`/out`** directory. This is the command you'll want to run for deployment as well.\n\n## Deployment\n\nWe recommend deploying your site using [Netlify](https://www.netlify.com). It offers a whole host of benefits, like a generous free tier, automatic redeploys whenever your `main` branch updates, integrations for contact forms (if you implement them), etc.\n\nHit the button at the top of this repo to try it out! Just don't forget to [set the environment variables](https://docs.netlify.com/configure-builds/environment-variables/) to the contents of your `.env`. Your build command will be `npm run export`.\n\n### Redeploy on Contentful changes\n\nNetlify lets you set up \"webhooks,\" which trigger redeploys on certain conditions. Just [read this guide](https://www.contentful.com/developers/docs/tutorials/general/automate-site-builds-with-webhooks/) to get set up! You should be able to use the webhook already configured in our Contentful space.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhack4impact%2Fchapter-website-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhack4impact%2Fchapter-website-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhack4impact%2Fchapter-website-template/lists"}