Skip to content
Gatsby theme
TypeScript JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.eslintrc Style change and addition of series Jul 28, 2019
.gitignore add example Jun 6, 2019
.lintstagedrc change from styled-components to emotion Aug 13, 2019
.npmignore add example Jun 6, 2019
.prettierrc Style change and addition of series Jul 28, 2019
LICENSE
README.md
gatsby-config.js
gatsby-node.js change blog path Jul 29, 2019
index.ts export components Jun 30, 2019
package.json change from styled-components to emotion Aug 13, 2019
tsconfig.json Style change and addition of series Jul 28, 2019
yarn.lock replace mdx library Jul 15, 2019

README.md

Gatsby-crudzoo is Gatsby theme for blog site.

Demo site

demo

demo site repository: https://github.com/Hidekazoo/gatsby-crudzoo-demo

I also use gatsby-crudzoo theme on my website. https://crudzoo.com

Getting started

Installation

npm init -y
npm install gatsby react react-dom gatsby-crudzoo

or using yarn

yarn init -y
yarn add gatsby react react-dom gatsby-crudzoo

Update package.json

Add a new Scripts "develop" and "build" to your package.json. And It is convenient to add cache clear command "clean"

Example

{
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "clean": "rm -rf .cache public"
  }
}

create gatsby-config.js

create gatsby-config.js in your root directory and write your site settings

Example

//gatsby-config.js
module.exports = {
  siteMetadata: {
    language: `en`, // or `ja`
    title: `site title`,
    author: `your name`,
    keywords: [`blog`, `gatsby`],
    description: `site description`,
    siteUrl: `site url`,
    mainColor: `#e65100`,
    social: {
      twitter: `your twitter name`,
    },
  },
  plugins: [
    {
      resolve: "gatsby-crudzoo",
      options: {},
    },
  ],
}

profile picture

put on your profile picture on assets/profile-pic.jpg

write your first article

Write your first post at mdx on blog/hello-world/index.mdx.

Example

// blog/hello-world/index.mdx
---
id: "article-1"
title: "Hello world"
date: "2019-06-03T21:58:03.284Z"
tags: ["blog", "self-introduction"]
spoiler: "this is my first article"
image: "./thumbnail.jpg"
---

hello world!

Series folder

By creating a json file in the series folder, You can create a list of articles called series

{
  "seriesId": "sample",
  "title": "sample title",
  "spoiler": "my sample series",
  "image": "sample.png",
  "articles": ["article-1"]
}

Folder Structure

the folder structure is as follows

  .
  ├── blog
  │   └── hello-world
  │        ├── thumbnail.jpg
  │        └── index.mdx
  ├── assets
  │   └── profile-pic.jpg
  ├── series
  │   ├── sample.png
  │   └── sample.json
  │
  ├── gatsby-config.js
  ├── package-lock.json
  └── package.json

Start Developing

npm develop

or using yarn

yarn develop
You can’t perform that action at this time.