This project is a content focused website made using Contentful's Headless CMS and Astro, and deployed to Netlify. We will use React and Svelte for especially interactive components, with preference to Svelte because it ships significantly less Javascript.
-
Astro Docs, especially:
-
Create a Netlify account, preferably using the GitHub account that forked the repository.
-
After signing up to Netlfiy, you should see a prompt to Deploy your first project. If not, or if you lose that link, go here. Click Deploy with GitHub. Follow the steps that Netlify provides to connect to your GitHub account, allow access to the repository you forked, and deploy the repository. We'll come back to Netlify in a bit.
-
Now, create a Contentful account, after entering some personal information, you'l be prompted to Start with a template, or Start from scratch. Select to Start from scratch.
-
Now, you should be prompted to design you content model, we'll skip that for now and revisit it later.
-
Instead, click on Settings in the top right corner, then click on API Keys. Click Add API key, then keep the page it opens ready for later.
-
Login in the Contentful CLI using
contentful login -
Clone the forked GitHub repo to your local machine. In the project folder, run \
contentful space import --space-id SPACE_ID --content-file contentful-config.jsonReplace SPACE_ID with the space id from the API Key page you openned in step 6. This will import the content models, and some content from DSSD Madison, into your Contentful project. The Content Types page should now have several types, and the the Content page should now have many entries.
- Finally, we need to tell Netlify the credentials of our Contentful project. In your Netlify projecy, click on Site Settings, then Environment Variables. Add the following 4 variables:
CACHING_MAX_AGE with value equal to the number of seconds you want netlify cache the html for. e.g. 86400 for one day. CONTENTFUL_ACCESS_TOKEN with value equal to the "Content Delivery API - access token" which you can copy from the API Key page CONTENTFUL_ENVIRONMENT with value equal to "master" CONTENTFUL_SPACE with value equal to the space id from the API Key page (same as from step 9) NODE_VERSION with value 16.13.1
- Click on Deploys, then click on the most recent deploy. Click Options then Clear cache and retry with latest branch commit
Now, if you go to Site Overview, and click on the url, you should see your fully functional site. You can edit the content in contentful with your own Hub's info, and make edits to the website's styling by updating the main branch in your GitHub repository
To run the project in development, you must have Node.js and npm installed (search the web for a guide if needed). Once you've cloned this repository, first run:
npm iThis will install all of the external libraries used by the project. You'll also need to set up a few environment variables that configure Contentful and caching. Create a file called .env that sets the following variables:
CACHING_MAX_AGE
CONTENTFUL_ACCESS_TOKEN
CONTENTFUL_ENVIRONMENT
CONTENTFUL_SPACE
Now you're ready to go! Run:
npm run devThis will start a local development server that hosts the website at localhost:3000, and refreshes every time you make a change.
For colors, we will use tailwind's default greys, as well as a few custom blues that are defined in the tailwind config
400: '#0091E9', //dssd logo's blue, mainly for buttons and accents
500: '#006FB2', //slightly darkened dssd logo blue, good for text on light background
900: '#0D1C26' //very dark blue for text or background