When you combine a title and a subtitle they move closer together.As a rule of thumb, it is recommended to use a size difference of two. So if you use a title is-1, combine it with a subtitle is-3. Gatsby.js is a modern site generator, which means there are no servers to set up or complicated databases to deploy. Instead, the Gatsby build command produces a directory of static HTML and JavaScript files which you can deploy to a static site hosting service.Try using Surge for deploying your first Gatsby website.
Surge is one of many “static site hosts” which makes it possible to deploy Gatsby sites.If you haven’t previously installed & set up Surge, open a new terminal window and install their command-line tool. Earlier, you defined React components as reusable pieces of code describing a UI. To make these reusable pieces dynamic you need to be able to supply them with different data. You do that with input called “props”. Props are (appropriately enough) properties supplied to React components.In about.js you passed a headerText prop with the value of About Gatsby to the imported Header sub-component:
The homepage you were just making edits to was created by defining a page component. What exactly is a component Broadly defined, a component is a building block for your site; It is a self-contained piece of code that describes a section of UI (user interface). Gatsby is built on React. When we talk about using and defining components, we are really talking about React components — self-contained pieces of code (usually written with JSX) that can accept input and return React elements describing a section of UI. One of the big mental shifts you make when starting to build with components (if you are already a developer) is that now your CSS, HTML, and JavaScript are tightly coupled and often living even within the same file. While a seemingly simple change, this has profound implications for how you think about building websites. Take the example of creating a custom button. In the past, you would create a CSS class (perhaps .primary-button) with your custom styles and then use it whenever you want to apply those styles. For example: