patrikarvidsson/portfolio-gatsby-contentful

Portfolio on Gatsby, Tailwind and EmotionJS. Content served from Contentful.

Patrik Arvidsson

This project was based on gatsby-tailwind-emotion-starter

A similar version exists with Gatsby + Sanity

I recently rebuilt this portfolio with Sanity instead of Contentful. It's not completely finished yet, and so far I would argue this one is more "flashy".

Sanity had some really nice things like hot-reload of content and GraphQL-support out of the box. It also felt like build times on Netlify was much quicker.

If you're interested you can find the new repository at portfolio-gatsby-sanity.

Build environment

Build fails on Netlify with default node 8.15.1, so make sure environment used is matching listed versions below. Node version is set in netlify.toml so deploying to Netlify should work itself out automatically.

• node version 11.10.1
• yarn version 1.13.0
• npm version 6.7.0

Getting up and running

Install Gatsby CLI:

npm install --global gatsby-cli

Clone project

git clone https://github.com/patrikarvidsson/portfolio-gatsby-contentful

cd portfolio-gatsby-contentful

Rename .contentful.json.sample to .contentful.json and update with Contentful API details.

Make sure graphql queries matches your content model over at Contentful. This repo is using a slightly modified version of the Contentful demo that is shown when signing up.

Install packages from portfolio-gatsby-contentful directory.

yarn

Usage

Start development server

yarn develop

Run format to prettify code

yarn format

Build site

gatsby build

Your built site will be in /public. This folder can then be uploaded to a static host such as Netlify.

Deploying to Netlify

netlify.toml handles all deployment, but you have to manually enter environmental variables at Netlify if you want to use continuous deployment from git. Variables to add are CONTENTFUL_DELIVERY_TOKEN and CONTENTFUL_SPACE_ID.

Install netlify-cli

npm install --global netlify-cli

Deploy to Netlify

netlify deploy -p

Details

Why should I use Tailwind CSS or Emotion JS?

TailwindCSS is really great. If you used Tachyons before, you know how amazing utility first CSS can be compared to CSS framework like Bootstrap.

If you haven't tried a utility first CSS before, I urge you to give it a try. Tailwind is a great place to start, and it's more customizable than Tachyons.

But, because Tailwind CSS gives you alot of class as utilities the file gets bloated very quickly. Most developers solve this by using something like purgeCSS and while it's awesome on it's own you still get into the habit of loading styles the current page doesn't need.

More information on how you can control file size

We use Emotion because it's equally awesome. CSS-in-JS allows you to only load the required styles for the particular page you're on, by defining this as CSS-in-JS. In return, each page CSS footprint is smaller than the magic purgeCSS can do on it's own.

So how do I use it?

import React from 'react'
import styled from '@emotion/styled'

const Container = styled.div`
  ${tw`py-8`};
`
const Text = styled.p`
  ${tw`bg-black text-white`};
`

const Home = () => (
  <Container>
    <Text>I am Text component made with Tailwind CSS + EmotionJS</Text>
  </Container>
)

export default Home

Furthremore, CSS-in-JS is just awesome. CSS in JS: Benefits, Drawbacks, and Tooling

Why Gatsby?

Because Gatsby is blazing fast, is highly extensible and the community is awesome.

Credits

Credits goes to Muhammad Muhajir, creator of the boilerplate used for this portfolio.

And to GatsbyJS, TailwindCSS, Emotion, Contentful and Netlify.

portfolio-gatsby-contentful's Issues

Implement full SEO support