Gatsby.js — Videos, GIFs, and Hard-Coded Content

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Hosting Your Own HTML5 Video Files

We can host our own HTML5 video files and show them.

To do this, we write:

import React from "react"
import SampleVideo from "../assets/sample.mp4"

const IndexPage = () => {
  return (
    <div>
      <video controls>
        <source src={SampleVideo} type="video/mp4" />
      </video>
    </div>
  )
}
export default IndexPage

We import a video file from the /assets folder.

Then we pass them into the src prop of the source element.

Also, we can add captions for our video by writing:

src/assets/sample.vtt

WEBVTT

00:00:00.500 --> 00:00:02.000
The Web is always changing

00:00:02.500 --> 00:00:04.300
and the way we access it is changing

src/pages/index.js

import React from "react"
import SampleVideo from "../assets/sample.mp4"
import Captions from "file-loader!../assets/sample.vtt"

const IndexPage = () => {
  return (
    <div>
      <video controls>
        <source src={SampleVideo} type="video/mp4" />
        <track kind="captions" srcLang="en" src={Captions} />
      </video>
    </div>
  )
}
export default IndexPage

We add the track element to add the captions.

We just import them like any other module and set it as the value of src .

srcLang has the language of the caption.

Including GIFs in Components

We can add GIFs to components.

For instance, we can write:

import React from "react"
import otterGIF from '../assets/dancing-otter.gif'

const IndexPage = () => {
  return (
    <div>
      <img src={otterGIF} alt="Otter" />
    </div>
  )
}
export default IndexPage

to import the otter GIF into our component file.

They can also be included in Markdown by writing:

![otter](./assets/dancing-otter.gif)

Create a Page with Hard-Coded Data

We can create a page with hard-coded data.

To do this, we write:

gatsby-node.js

exports.createPages = ({ actions: { createPage } }) => {
  createPage({
    path: "/page-with-context/",
    component: require.resolve("./src/templates/post.js"),
    context: {
      title: "No GraphQL",
      content: "<p>This is page content.</p><p>No GraphQL required!</p>",
    },
  })
}

src/templates/post.js

import React from "react"
const WithContext = ({ pageContext }) => (
  <section>
    <h1>{pageContext.title}</h1>
    <div dangerouslySetInnerHTML={{ __html: pageContext.content }} />
  </section>
)
export default WithContext

gatsby-node.js has the content, which are hardcoded in the createPage call.

path has the path of the document.

component has the template to render the document.

context has the title and content , which are rendered in the template file.

post.js is the template file.

We get the pageContext prop and render the properties.

They’re passed in from the createPage call.

We can render JSON data that are imported from APIs or a file.

Query Nodes

We can query for metadata about the site with GraphQL.

For example, we can get the plugins that are used in the project with:

{
  allSitePlugin {
    totalCount
    edges {
      node {
        name
        version
        packageJson {
          description
        }
      }
    }
  }
}

name is the plugin name. version is the plugin version.

description has the plugin description. totalCount has the result count.

Conclusion

We can show videos and create pages with hard-coded content with Gatsby.