A place for Byron Delpinal to put things on the web.
I'm standing on the shoulder of giants, using the Mate Starter template for Gatsby. If you're a fan of the design/concept, you should buy Ema Suriano a coffee.
- Gatsby v2
- Rebass 3.0 ๐: styled component system
- React Reveal
- Dynamic content from Contentful
- Offline support
- PWA ready
- SEO
- Responsive design
- Icons from font-awesome
- Netlify Deployment Friendly
- Medium integration
- Social sharing (Twitter, Facebook, Google, LinkedIn)
- Developer tools:
eslint
prettier
- Google Analytics integration
- End to End with Cypress:
If you never used Gatsby before, I highly recommend you to Set up your development environment!
To copy and install this starter run this command:
$ gatsby new mate-portfolio https://github.com/EmaSuriano/gatsby-starter-mate
At 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:
TypeError: Expected parameter accessToken
This 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!
After the space is created, run the following command:
yarn setup
This CLI will request 3 values:
Space ID
Content Delivery API - access token
Personal Access Token
These 3 values are inside the Settings section --> API keys.
After you provide them the CLI will automatically starts copying all the Content models
and Contents
from mate-demo-contentful
to your space โจ
If everything went smooth you should see something like this in your terminal:
Writing config file...
Config file /Users/my-user/Git/test/mate-portfolio/.env written
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ The following entities are going to be imported: โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโฌโโโโโโโโโโโโโโโโโค
โ Content Types โ 3 โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโค
โ Editor Interfaces โ 3 โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโค
โ Entries โ 8 โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโค
โ Assets โ 6 โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโค
โ Locales โ 1 โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโผโโโโโโโโโโโโโโโโโค
โ Webhooks โ 0 โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโดโโโโโโโโโโโโโโโโโ
โ Validating content-file
โ Initialize client (1s)
โ Checking if destination space already has any content and retrieving it (2s)
โ Apply transformations to source data (1s)
โ Push content to destination space
โ Connecting to space (1s)
โ Importing Locales (1s)
โ Importing Content Types (4s)
โ Publishing Content Types (3s)
โ Importing Editor Interfaces (3s)
โ Importing Assets (7s)
โ Publishing Assets (3s)
โ Archiving Assets (1s)
โ Importing Content Entries (1s)
โ Publishing Content Entries (5s)
โ Archiving Entries (1s)
โ Creating Web Hooks (0s)
Finished importing all data
After this step we can finally run the project and see the result in http://localhost:8000/ ๐
$ yarn start
As 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.
SPACE_ID=xxxxx ACCESS_TOKEN=yyyyy yarn build
The 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.
All the text of this starter live inside Contentful, specifically 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.
Regarding 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
๐
The starter comes with a built in End to End Setup using Cypress. As there are no complex logic flow, there are only two tests in place:
- Accessibility check: using the cypress-axe plugin you can easily check a lot of a11y rules at once powered by Axe!
- Visual testing: using percy-cypress plugin you can take screenshot with different resolutions and easily the difference inside their platform. Here you can check the Percy dashboard for this project.
There's an 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 ๐