{"id":24322538,"url":"https://github.com/gemfarmer/.com","last_synced_at":"2026-04-21T11:35:37.939Z","repository":{"id":42350112,"uuid":"188479056","full_name":"gemfarmer/.com","owner":"gemfarmer","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-11T19:05:21.000Z","size":7962,"stargazers_count":0,"open_issues_count":29,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T02:36:29.712Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gemfarmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-24T19:47:14.000Z","updated_at":"2019-05-24T19:49:31.000Z","dependencies_parsed_at":"2023-02-09T04:31:32.900Z","dependency_job_id":null,"html_url":"https://github.com/gemfarmer/.com","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gemfarmer/.com","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gemfarmer%2F.com","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gemfarmer%2F.com/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gemfarmer%2F.com/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gemfarmer%2F.com/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gemfarmer","download_url":"https://codeload.github.com/gemfarmer/.com/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gemfarmer%2F.com/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28001453,"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","status":"online","status_checked_at":"2025-12-24T02:00:07.193Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-01-17T17:57:51.552Z","updated_at":"2025-12-24T11:13:38.862Z","avatar_url":"https://github.com/gemfarmer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Gatsby Starter Mate logo](./media/gatsby-starter-mate-logo.png)\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/EmaSuriano/gatsby-starter-mate.svg)](https://greenkeeper.io/)\n[![Travis badge](https://api.travis-ci.org/EmaSuriano/gatsby-starter-mate.svg)](https://travis-ci.org/EmaSuriano/gatsby-starter-mate)\n[![eslint](https://img.shields.io/badge/eslint-enabled-green.svg)](https://eslint.org/)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![Maintainability](https://api.codeclimate.com/v1/badges/c8fc076b30bd493f0cfc/maintainability)](https://codeclimate.com/github/EmaSuriano/gatsby-starter-mate/maintainability)\n\n# Gatsby Starter: Mate\n\n\u003e A portfolio starter for Gatsby integrated with Contentful CMS.\n\nThe target audience are developers 💻 and tech writers ✍️.\n\n### [Demo Website](https://gatsby-starter-mate.netlify.com/)\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 v2](https://www.gatsbyjs.org/)\n- [Rebass 3.0 🎉](https://rebassjs.org/): styled component system\n- [React Reveal](https://www.react-reveal.com/)\n- Dynamic content from [Contentful](https://contentful.com)\n- Offline support\n- PWA ready\n- SEO\n- Responsive design\n- Icons from [font-awesome](https://fontawesome.com/)\n- [Netlify](https://www.netlify.com) Deployment Friendly\n- Medium integration\n- Social sharing (Twitter, Facebook, Google, LinkedIn)\n- Developer tools:\n  - eslint\n  - prettier\n- Google Analytics\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\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-portofolio/.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\nyarn 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/home.png)     |\n| About me |  ![About me](media/about.png)   |\n| Projects | ![Projects](media/projects.png) |\n| Writing  |  ![Writing](media/writing.png)  |\n| /404     |      ![404](media/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 webhost. 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## Adding your information 📝\n\nAll the text of this starter live inside Contentful, more spefically inside the Content of `About`. In order to change it, just go to `Content` section and change the entity of About 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 really 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## Configuration (Optional) 👷‍♂️\n\nMate starter is a SPA (Single Page Application), so basically you have only two pages:\n\n- Main.js (portfolio itself)\n- 404.js (nice 404 error page that match the style)\n\nThe structure for the main page is the following:\n\n```javascript\n\u003cLayout\u003e\n  \u003cLanding /\u003e\n  \u003cAbout /\u003e\n  \u003cProjects /\u003e\n  \u003cWriting /\u003e\n\u003c/Layout\u003e\n```\n\n`Layout` is the core of the application, it manages the theme for the application, the navigation between sections, also it defines the `header`.\n\nAll the components inside `Layout` are `Section` components. A section can have a link inside the `Header` or not, in order to add you need to wrapped the exported `Section` with `withNavigation` HOC and it will be automatically registered (Context magic ✨).\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 wil be turn on automatically 😄\n\n## Update your Starter (Optional) 💡\n\nIn case you cloned this repository before and you want all the latest changes of it, you can execute the following command to update the code in your repository with the one in this repository:\n\n```bash\n# Add repository remote entry\n$ git remote add mate https://github.com/EmaSuriano/gatsby-starter-mate\n\n# Get changes from master branch of gatsby-starter-mate\n$ git pull mate master --allow-unrelated-histories\n\n# Reset changes in unnecesary folder/files\n$ git reset media/ bin/ README.md manifest-config.js\n\n# Remove files affected by the reset\n$ git checkout .\n\n# In this step you migth need to fix a lot of conflicts, you can do fix manually or use just accept all the changes from mate\n$ git checkout --theirs .\n\n# WATCH OUT that some configuration can be overwritten in this last step, like package.json, colors, etc. I highly recommend to do an overall look up at the end of fixing the conflicts.\n\n# Install in case there is any new dependency added to the starter\n$ yarn\n\n# Build the project to see if everything is working as expected\n$ yarn build\n```\n\n## Deployment Automation (Optional) ⚙️\n\nEverytime you made a change in your Contentful data or you add a new post in Medium you need to trigger a manual deployment, which can be an annoying task. Therefore I found a nice way to make this process automatic and it is by using a tool called Zapier.\n\nThis tool will be watching for changes in Contentful and Medium and then trigger a new deploy in Netlify (or the service you are using). In summary, you don't need to care anymore about deploying your application and can focus on writting content or developing features!\n\nIn case you want to know more I wrote an article in Medium that explains the whole process especially for this starter 🙌 [Click here to read it.](https://medium.com/@emasuriano/make-any-static-site-dynamic-without-coding-9dde5673b1a)\n\n**UPDATE:** Contentful added a feature to link it with Netlify as a built in option, but in case you are using another provider I recommend going with Zapier!\n\n## Contributing 💪\n\nI came with the idea of creating the starter after the positive feedback I received when I deployed [my website](emasuriano.com). Therefore this starter is not perfect! I tried my best to remove all the personal information, also improve the code to make it easier to understand.\n\nI'm totally open for pull requests with bug fixes, changes in Documentation, or new features to the starter 🙌\n\nPlase check the [Contribution guidelines](CONTRIBUTING.md) before opening yours 🙏\n\n## License 📝\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgemfarmer%2F.com","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgemfarmer%2F.com","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgemfarmer%2F.com/lists"}