Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

39

.99

$

32

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Importing Assets In Gatsby

In this series, we dive into Gatsby.js by building a blog with markdown, Netlify CMS & Contentful and cover everything from page animations, to several hosting options that automatically rebuild.

Blazing-fast static site generator for React

Modern web tech without the headache Enjoy the power of the latest web technologies – React.js , Webpack , modern JavaScript and CSS and more — all setup and waiting for you to start building.

Bring your own data Gatsby’s rich data plugin ecosystem lets you build sites with the data you want — from one or many sources: Pull data from headless CMSs, SaaS services, APIs, databases, your file system & more directly into your pages using GraphQL .

Scale to the entire internet Gatsby.js is Internet Scale. Forget complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling fears. Gatsby.js builds your site as “static” files which can be deployed easily on dozens of services.

Future-proof your website Don't build a website with last decade's tech. The future of the web is mobile, JavaScript and APIs—the JAMstack. Every website is a web app and every web app is a website. Gatsby.js is the universal JavaScript framework you’ve been waiting for.

Static Progressive Web Apps Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.

Speed past the competition Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, pre-build pages and lift them into a global cloud of servers — ready to be delivered instantly to your users wherever they are.

Downloads

Become a pro to download code and videos

Comments

User avatar

Lucas

over 2 years ago [edited]

@Dave For others experiencing what Dave went through, Gatsby's current default starter has changed a bit since the videos were made. To fix the issue with the new starter, simply wrap your return in about.js in a Layout element (a component from the starter project) instead of a div:

import React from 'react'
import Layout from '../components/layout'

class About extends React.Component {
  render () {
    return(
      <Layout>
        <h1>About Us</h1>
        <p>
          Vegan fixie DIY air plant ennui hella affogato. Mumblecore mixtape ethical austin stumptown. Brooklyn raw denim woke mumblecore biodiesel. Craft beer YOLO shabby chic, brooklyn drinking vinegar pug 90's actually squid hammock chartreuse mlkshk cred paleo. Cred tacos cold-pressed mlkshk.
        </p>
      </Layout>
    )
  }
}

export default About;

Dave

almost 3 years ago

I just completed lesson 3: Pages & Navigation in Gatsby. When I build the About page it doesn't have the header with the links or the purple color. The font also isn't centered, it pretty much goes from margin to margin. In the console log I get the following warning:

2:10 warning 'Link' is defined but never used no-unused-vars

I downloaded the code and copied the about.js and header.js code and pasted it into my code but there is still no formatting on the About page.

I will continue on with the course just wanted to make you aware of this issue with getting the About page to format properly.

Want to join the conversation?

Become a Pro member today!