{"id":14962888,"url":"https://github.com/emasuriano/gatsby-starter-mate","last_synced_at":"2025-05-15T09:04:36.213Z","repository":{"id":34694487,"uuid":"146887316","full_name":"EmaSuriano/gatsby-starter-mate","owner":"EmaSuriano","description":"An accessible and fast portfolio starter for Gatsby integrated with Contentful CMS","archived":false,"fork":false,"pushed_at":"2025-01-01T01:42:09.000Z","size":31682,"stargazers_count":542,"open_issues_count":8,"forks_count":161,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-07T03:17:40.612Z","etag":null,"topics":["contentful","gatsby","gatsby-starter","gatsbyjs","landing-page","medium","netlify","portfolio","react","reactjs","rebass"],"latest_commit_sha":null,"homepage":"https://gatsby-starter-mate.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EmaSuriano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"emasuriano"}},"created_at":"2018-08-31T12:10:46.000Z","updated_at":"2025-03-03T08:21:46.000Z","dependencies_parsed_at":"2023-02-18T13:16:13.223Z","dependency_job_id":"e2b4a788-a7f4-40bc-b860-00e2ac81ea68","html_url":"https://github.com/EmaSuriano/gatsby-starter-mate","commit_stats":{"total_commits":959,"total_committers":15,"mean_commits":63.93333333333333,"dds":0.6204379562043796,"last_synced_commit":"420fcbb50e446bc86ec3c742b65c950cdee3e233"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Fgatsby-starter-mate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Fgatsby-starter-mate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Fgatsby-starter-mate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmaSuriano%2Fgatsby-starter-mate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EmaSuriano","download_url":"https://codeload.github.com/EmaSuriano/gatsby-starter-mate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248890787,"owners_count":21178505,"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":["contentful","gatsby","gatsby-starter","gatsbyjs","landing-page","medium","netlify","portfolio","react","reactjs","rebass"],"created_at":"2024-09-24T13:30:41.183Z","updated_at":"2025-04-14T13:47:54.464Z","avatar_url":"https://github.com/EmaSuriano.png","language":"TypeScript","funding_links":["https://ko-fi.com/emasuriano"],"categories":[],"sub_categories":[],"readme":"# Gatsby Starter: Mate 🧉\n\n[![Build](https://github.com/EmaSuriano/gatsby-starter-mate/actions/workflows/master.yml/badge.svg)](https://github.com/EmaSuriano/gatsby-starter-mate/actions/workflows/master.yml)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/f532a32d-4fc1-441d-aa28-cdc5e2c2e79c/deploy-status)](https://app.netlify.com/sites/gatsby-starter-mate/deploys)\n\n\u003e An accessible and fast portfolio starter for Gatsby integrated with Contentful CMS.\n\nThe target audience are Developers 💻 and Tech Writers ✍️.\n\n**[Check the Demo ✨](https://gatsby-starter-mate.netlify.app/)**\n\n## Why? 🤔\n\nIn case you are looking for a quick setup portfolio or upgrade your current, you have to definitely try Mate!\n\nThis starter is totally content based on [Contentful](https://contentful.com), which is a headless CMS where you can write the content for your page. In summary, Contentful is the Model when Gatsby with React is the View.\n\nAt the same time, as this portfolio is written with Gatsby is extremely easy to add more than one source of data! For example, the demo comes with an integration of [Medium](https://medium.com) posts based on a user name ✌️\n\n## Features 🛠\n\n- [Gatsby 5](https://www.gatsbyjs.org/)\n- [Rebass](https://rebassjs.org/): styled component system\n- [React Awesome Reveal](https://github.com/dennismorello/react-awesome-reveal)\n- CMS Integration with [Contentful](https://contentful.com)\n- PWA ready\n- SEO\n- Responsive design\n- Icons from [font-awesome](https://fontawesome.com/)\n- [Netlify](https://www.netlify.com) and [Gatsby Cloud](https://www.gatsbyjs.com/products/cloud/) Deployment Friendly\n- Medium integration\n- Social sharing (Twitter, Facebook, Google, LinkedIn)\n- Google Analytics integration\n\n## How to start\n\nAs this process needs more steps compared to other starters, I decided to made a tutorial video of how to set up your own instance of Mate. You can follow the video or jump directly to the written documentation.\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.youtube.com/watch?v=YviWsypJF9c\"\u003e\n   \u003cimg src=\"https://media.giphy.com/media/LQp2DrNPPUPybUwVx9/giphy.gif\" alt=\"Watch the tutorial\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nIf you never used Gatsby before, I highly recommend you to [Set up your development environment](https://www.gatsbyjs.org/tutorial/part-zero/)!\n\nAlso, it's recommended that you use `Yarn` as your Package Manager inside `gatsby-cli`:\n\n```bash\n$ gatsby options set pm yarn\ninfo Preferred package manager set to \"yarn\"\n```\n\nTo copy and install this starter run this command:\n\n```bash\n$ gatsby new mate-portfolio https://github.com/EmaSuriano/gatsby-starter-mate\n```\n\nAt this point you have the repository download with all the dependencies installed, but if you try to start by running `yarn develop` you are going to received this message in the console:\n\n```bash\n  TypeError: Expected parameter accessToken\n```\n\nThis is because you didn't specify from which `Contentful` space the portfolio will take the information. So the next step is create an empty space in [Contentful](https://www.contentful.com/)!\n\nAfter the space is created, run the following command:\n\n```bash\nyarn setup\n```\n\nThis CLI will request 3 values:\n\n- `Space ID`\n- `Content Delivery API - access token`\n- `Personal Access Token`\n\nThese 3 values are inside the Settings section --\u003e API keys.\n\nAfter you provide them the CLI will automatically starts copying all the `Content models` and `Contents` from `mate-demo-contentful` to your space ✨\n\nIf everything went smooth you should see something like this in your terminal:\n\n```text\nWriting config file...\nConfig file /Users/my-user/Git/test/mate-portfolio/.env written\n┌──────────────────────────────────────────────────┐\n│ The following entities are going to be imported: │\n├─────────────────────────────────┬────────────────┤\n│ Content Types                   │ 3              │\n├─────────────────────────────────┼────────────────┤\n│ Editor Interfaces               │ 3              │\n├─────────────────────────────────┼────────────────┤\n│ Entries                         │ 8              │\n├─────────────────────────────────┼────────────────┤\n│ Assets                          │ 6              │\n├─────────────────────────────────┼────────────────┤\n│ Locales                         │ 1              │\n├─────────────────────────────────┼────────────────┤\n│ Webhooks                        │ 0              │\n└─────────────────────────────────┴────────────────┘\n ✔ Validating content-file\n ✔ Initialize client (1s)\n ✔ Checking if destination space already has any content and retrieving it (2s)\n ✔ Apply transformations to source data (1s)\n ✔ Push content to destination space\n   ✔ Connecting to space (1s)\n   ✔ Importing Locales (1s)\n   ✔ Importing Content Types (4s)\n   ✔ Publishing Content Types (3s)\n   ✔ Importing Editor Interfaces (3s)\n   ✔ Importing Assets (7s)\n   ✔ Publishing Assets (3s)\n   ✔ Archiving Assets (1s)\n   ✔ Importing Content Entries (1s)\n   ✔ Publishing Content Entries (5s)\n   ✔ Archiving Entries (1s)\n   ✔ Creating Web Hooks (0s)\nFinished importing all data\n```\n\nAfter this step we can finally run the project and see the result in http://localhost:8000/ 😃\n\n```bash\n$ yarn start\n```\n\n## Screenshot and Design\n\nAs the starter is a SPA it only has two routes:\n\n- `/`: main page with the sections of `Home`, `About me`, `Projects` and `Writing`.\n- `/404`: error page for unexpected route.\n\n| Section  |                 Screenshot                  |\n| -------- | :-----------------------------------------: |\n| Home     |   ![Home](media/screenshots/Landing.png)    |\n| About me |  ![About me](media/screenshots/About.png)   |\n| Projects | ![Projects](media/screenshots/Projects.png) |\n| Writing  |  ![Writing](media/screenshots/Writing.png)  |\n| 404      |      ![404](media/screenshots/404.png)      |\n\n## Building your site\n\nAs we are dealing with environment variables, the `.env` file is excluded from `.gitignore` file. Therefore, in order to deploy the website you have to send `SPACE_ID` and `ACCESS_TOKEN` with the `build` command.\n\n```bash\nSPACE_ID=xxxxx ACCESS_TOKEN=yyyyy yarn build\n```\n\nThe result will be stored inside the `public` folder, so you can upload to your web host. I highly suggest using this starter with Netlify when you can define which command will build the project and also send the environment variables inside the website configuration.\n\n## Customization\n\nWhen you first bootstrap the project, you will notice that it doesn't contain many files. This is because of how the project is structured, for example where is the data coming from and how it is displayed to the user. The starter is based on 2 principles:\n\n1. Data coming from an external source: Contentful. Therefore in case you want to change the content of the website, please refer to [Adding your information section](#adding-your-information).\n2. Components and pages decoupled inside a Gatsby Theme: [gatsby-theme-mate](https://github.com/EmaSuriano/gatsby-theme-mate). The reason behind it is to provide an easy way to keep your starter up to date. To know more about Gatsby Theme, please refer to the [official documentation](https://www.gatsbyjs.com/docs/themes/). Most common customizations:\n   1. [Theming](#theming)\n   2. [Changing Icons](#changing-icons)\n   3. [Modifying the Sections](#modifying-the-sections)\n\n### Adding your information\n\nAll the information of this starter resides inside [Contentful](https://www.contentful.com/), inside the Content of `About`. To change it, just go to the `Content` section and change the entity with the information you want.\n\n![Contentful About change](./media/contentful-about-change.png)\n\nRegarding the projects and social links, the process is the same! Contentful is easy to learn so don't be afraid of breaking everything, remember that you can restore to the start point by running `yarn setup` 😄\n\n### Theming\n\nThanks to the [Theme Shadowing](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/), changing the colors of your portfolio is quite easy! You have to create a new file located at `src/gatsby-theme-mate/colors.json`. Some examples I made by using palettes from [Color Hunt](https://colorhunt.co/):\n\n| Name     | Code                                                                                                               | Screenshot                                     |\n| -------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------- |\n| Original | `{ \"text\": \"#333333\", \"background\": \"#FFFFFF\", \"muted\": \"#f0e6f6\", \"primary\": \"#7c37ad\", \"secondary\": \"#ff4081\" }` | ![Original Schema](./media/theme-original.png) |\n| Teal     | `{ \"text\": \"#40514e\", \"background\": \"#FFFFFF\", \"muted\": \"#e4f9f5\", \"primary\": \"#11999e\", \"secondary\": \"#30e3ca\" }` | ![Teal Theme](./media/theme-teal.png)          |\n| Dark     | `{ \"text\": \"#e3e3e3\", \"background\": \"#1b262c\", \"muted\": \"#0f4c75\", \"primary\": \"#bbe1fa\", \"secondary\": \"#3282b8\" }` | ![Dark Theme](./media/theme-dark-blue.png)     |\n\n### Changing Icons\n\nThis project is using the icons from [Font Awesome](https://fontawesome.com/), with the implementation made by [fortawesome](https://fortawesome.com/). A good practice when dealing with icons is to load **only** the ones that the project is going to use. Therefore not all the icons inside FA are loaded by default.\n\nTo change the icons used in your portfolio, you have to make use of [Theme Shadowing](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/) and create a file located at `src/gatsby-theme-mate/icons.js` with your icons. By default this is the content of the file:\n\n```javascript\nimport {\n  faMedium,\n  faTwitter,\n  faGithub,\n} from '@fortawesome/free-brands-svg-icons';\nimport {\n  faGlobe,\n  faEnvelope,\n  faCoffee,\n} from '@fortawesome/free-solid-svg-icons';\n\nexport const ICONS = [\n  faMedium,\n  faTwitter,\n  faGithub,\n  faGlobe,\n  faEnvelope,\n  faCoffee,\n];\n```\n\nSimply import the icons you want to use either `@fortawesome/free-brands-svg-icons` or `@fortawesome/free-solid-svg-icons` and export them inside the `ICONS` array. They get loaded as soon as the app starts.\n\n### Modifying the Sections\n\nThis starter by default provides 4 different sections:\n\n- Landing: your name, roles, and social links.\n- About: information about yourself plus the image on the side.\n- Projects: summary of the projects you worked on.\n- Writing: articles from Medium you wrote (this will be visible only if you specify a Medium user).\n\nIn case you want to change the order, remove or even add new sections. You can do it by using the feature of [Theme Shadowing](https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/) and create a file inside `src/gatsby-theme-mate/templates/Home.js` and have total control over what you want to render. This will be an example of swapping between the About and Projects section.\n\n```jsx\nimport React from 'react';\n\n// Layout components\nimport Layout from 'gatsby-theme-mate/src/components/Layout';\nimport Header from 'gatsby-theme-mate/src/components/Header';\nimport Footer from 'gatsby-theme-mate/src/components/Footer';\n\n// Sections that will fetch data for you\nimport Landing from 'gatsby-theme-mate/src/sections/Landing';\nimport About from 'gatsby-theme-mate/src/sections/About';\nimport Projects from 'gatsby-theme-mate/src/sections/Projects';\nimport Writing from 'gatsby-theme-mate/src/sections/Writing';\n\nconst Home = () =\u003e (\n  \u003cLayout\u003e\n    \u003cHeader /\u003e\n    \u003cLanding /\u003e\n    \u003cProjects /\u003e\n    \u003cAbout /\u003e\n    \u003cWriting /\u003e\n    \u003cFooter /\u003e\n  \u003c/Layout\u003e\n);\n\nexport default Home;\n```\n\nBy following this approach it's possible to modify the code of any component of the project. But please be aware, that by using Theme Shadowing you are going to **always override** the content of this, so in case there will be an update of the same file inside `gatsby-theme-mate` you are not going to use it.\n\nMy final recommendation with shadowing is to try to keep as minimum as possible to avoid having breaking changes between new releases of the theme.\n\n## Tracking with Google Analytics (Optional)\n\nThis starter has the analytics plugin inside the `gatsby-config`, so the only need to do in order to enable it is to provide the `Tracking Id` for your site (starts with `UA-`). Just set a new variable inside your `.env` file called `ANALYTICS_ID` and analytics will be turn on automatically 😄\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femasuriano%2Fgatsby-starter-mate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femasuriano%2Fgatsby-starter-mate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femasuriano%2Fgatsby-starter-mate/lists"}