Gatsby Contentful Blog Portfolio

Overview:

The project is a simple website built for a local architect. It showcases the architect’s portfolio and includes a blog section. The website is built using Gatsby and makes use of various technologies such as GraphQL, Contenful, Cypress, and Styled Components. The project is open source and encourages users to give it a star if they find it helpful. The website can be locally installed and configured for development and deployment using Netlify.

Features:

• Gatsby: The website is built using the Gatsby framework, which provides a fast and efficient development experience.
• GraphQL: GraphQL is used to query and retrieve data from the website’s backend, allowing for efficient data fetching and rendering.
• Contenful: The website is configured to use Contenful, a headless CMS, for managing content such as blog posts and portfolio items.
• Cypress: Cypress is used for testing the application, ensuring the website functions as expected.
• Styled Components: The website utilizes Styled Components, allowing for easy and modular styling of the components.
• PWA: The website is built as a Progressive Web App, providing a seamless user experience across different devices and enabling offline access to the website’s content.

Installation:

To install and run the website locally, follow these steps:

1. Clone the repository: Use git to clone the repository to your local machine.

   git clone [repository-url]
   

2. Install the packages: Navigate into the newly cloned site’s directory and install the required packages.

   cd [project-directory]
   npm install
   

3. Configure Contenful: Create a Contenful account, create a new space, and configure the project to use it. Add your spaceID and Content Delivery Token as environment variables to Netlify before deploying the project.

4. Start developing: Once the packages are installed and Contenful is configured, you are ready to start developing. Open the source code and start making edits.

   code .
   

5. Test the application with Cypress: Use Cypress to test the application and ensure it functions correctly. Cypress is already set up as part of the project.

   npm run test
   

6. Run the project locally: Your site is now running at http://localhost:8000. Feel free to make any changes and see them reflected in real-time.

Note: The setup script will write your spaceID and Content Delivery Token to a .env file for local development. Remember that .env files are not pushed to remote git repositories for security reasons. So, you’ll need to set the environment variables for Netlify to access Contenful. Your personal access token for the Content Management API is used to create the initial content types and is not saved.

Summary:

This project is a simple website for a local architect, showcasing their portfolio and including a blog. It is built using Gatsby and incorporates technologies such as GraphQL, Contenful, Cypress, and Styled Components. The project can be installed locally and configured for development using Netlify. It also provides testing capabilities with Cypress. Overall, this project offers an efficient and modern solution for creating and managing a professional architect’s website.