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 aboutGatsbyJS and was curious to check it out. So I jumped straight into theofficial tutorial and the ones byScott 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.

cdjulia-starter/    gatsby develop

1. Open the source code and start editing!

Your site is now running athttp://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 theGatsby tutorial.

Open thejulia-starter directory in your code editor of choice and editsrc/pages/index.js orsrc/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:

importReactfrom"react"importLayoutfrom"../components/layout"importSEOfrom"../components/seo"constPageName=()=>(<Layout><SEOtitle="PageName"keywords={[`gatsby`,`application`,`react`]}/>//CONTENT HERE</Layout>)exportdefaultPageName

What are all those files?

To get a better overview of all these files used by GatsbyJS have a look at the README onGitHub. 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

This post was first posted on my blog:niklasmtj.de

Photo byBlake Connally onUnsplash