My first GatsbyJS starter

3 min read

666 words

GatsbyJS Open Source Software

After seeing a post on Free Code Camps’ Blog from Amber Wilkie (here) about a Gatsby site using my theme I really have to do a post about the GatsbyJS starter I did a couple weeks back. To be honest, this is the first personal project I publish.

I thought about relaunching my personal website for a long time. And I already heard a lot about GatsbyJS and was curious to check it out. So I jumped straight into the official tutorial and the ones by Scott Tolinski (which are for v1) and tried to wrap my head around it. After completing these I started building my own page from scratch with Gatsby’s default starter which worked out to be a pretty good start. After finishing the first version of the page I thought „why not developing as a Starter for Gatsby“. So here we are. You can start with it right away. How you can do it will be described in the following lines.

Gatsby is a static site generator using React under the hood. Which means that Gatsby creates plain HTML files to serve. The idea to use react components for static sites is great. It enables a lot of opportunities for simple static webpages and it’s also really quickly coded when you understood react. It’s worth to have a look at.

First of all how the page will look at the start: Julia Starter

Features

  • Landing- and Blog overview page
  • To better split between a clean landing page and a blog overview page I implemented the blog to be on /blog
  • Markdown sourcing from /content folder
    • Since I am a huge fan of Markdown I choose it to be my go-to sourcing
  • Estimated reading time for each post
    • I really liked this feature about Medium and a lot of other blogs so this one was something I had to implement
  • Styled components with emotion
  • Netlify deployment friendly
  • Nunito font included as npm module for faster page load
  • Textmarkerstyle headings inspired by Basecamp

Quick Start

  1. Create a Gatsby site.

    Use the Gatsby CLI to create a new site, specifying the Julia starter.

# create a new Gatsby site using the Julia starter
gatsby new julia-starter https://github.com/niklasmtj/gatsby-starter-julia
  1. Start developing. Navigate into your new site’s directory and start it up.
cd julia-starter/
gatsby develop
  1. Open the source code and start editing!

Your site is now running at http://localhost:8000!

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Open the julia-starter directory in your code editor of choice and edit src/pages/index.js or src/pages/blog.js. Save your changes and the browser will update in real time!

  1. Create your own page

Create new pages like an About page in the /pages directory. The minimum code is:

import React from "react";

import Layout from "../components/layout";
import Seo from "../components/seo";

const PageName = () => (
  <Layout>
    <Seo title="PageName" keywords={[`gatsby`, `application`, `react`]} />
    //CONTENT HERE
  </Layout>
);

export default PageName;

What are all those files?

To get a better overview of all these files used by GatsbyJS have a look at the README on GitHub. There are explanations of all the files used.

Future

This is a huge work-in-progress project and there is still a lot to do. I will try to implement new features from time to time. But this will depend on how much free time I have from the university.

Thank you for reading,
Niklas