Instruction to use gatsby-starter-griddy

Gatsby-starter-griddy is a starter for everyone like me who want to share the artwork while and blogging. I wrote this for temporary instruction 'cause the starter is on pre-release. But still, this starter is the better version of my themes that i ever created for hexo hexo-theme-griddy.

Requirement

Little knowledge about html
Little knowledge about Bulma Framework
Little knowledge about CLI
Linux distribution recommended
Text editor (I recommend you to use VSCode)
Nodejs installed
Gatsby installed
Git installed

Install

Install Gatsby first.
Clone the repo

git clone https://github.com/mustofa-id/gatsby-starter-griddy

Go to gatsby-starter-griddy directory then install the dependencies

npm i

Run to it

gatsby build && gatsby develop

Instruction

Directory tree

├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── griddy-config.js
├── LICENSE
├── mkpost
├── package.json
├── package-lock.json
├── README.md
└── src
    ├── assets
    │   ├── icons
    │   │   └── feather.svg
    │   └── images
    │       ├── cover.jpg
    │       ├── gatsby-icon.png
    │       └── profile.jpg
    ├── components
    │   ├── footer.js
    │   ├── navbar.js
    │   ├── seo.js
    │   └── widget
    │       ├── bottom-sheet.js
    │       ├── category.js
    │       ├── hashtag.js
    │       ├── icon-button.js
    │       ├── icon.js
    │       ├── masonry.js
    │       ├── share-button.js
    │       └── toast.js
    ├── pages
    │   ├── 404.js
    │   ├── about.js
    │   ├── blog
    │   │   ├── bagi-link-gan
    │   │   │   ├── hot.jpg
    │   │   │   ├── index.md
    │   │   │   └── xxx.zip
    │   │   ├── cara-install-gdrive-di-kde-neon
    │   │   │   ├── googledrive.jpg
    │   │   │   ├── index.md
    │   │   │   ├── OnlineAccount.png
    │   │   │   └── sampleGdrive.png
    │   │   ├── flat-palette-for-inkscape
    │   │   │   ├── FlatbySira.gpl
    │   │   │   ├── index.md
    │   │   │   └── palette.png
    │   │   ├── kompres-ukuran-gambar-tanpa-mengurangi-kualitas
    │   │   │   ├── index.md
    │   │   │   ├── squooshonline.png
    │   │   │   └── squoosh.png
    │   │   └── tes-the-highlight
    │   │       ├── cover.jpg
    │   │       └── index.md
    │   ├── blog.js
    │   ├── friend.js
    │   ├── gallery
    │   │   ├── Alex-and-seira
    │   │   │   ├── alex-seira.jpg
    │   │   │   └── index.md
    │   │   ├── Alex-Fanart
    │   │   │   ├── alex.jpg
    │   │   │   └── index.md
    │   │   ├── free-palestine
    │   │   │   ├── freepalestine.jpg
    │   │   │   └── index.md
    │   │   ├── mira
    │   │   │   ├── index.md
    │   │   │   └── mira.jpg
    │   │   ├── stylized-portrait-tribute-to-razan-al-najjar
    │   │   │   ├── index.md
    │   │   │   └── razan.jpg
    │   │   └── wahyu
    │   │       ├── index.md
    │   │       └── wahyu.jpg
    │   ├── gallery.js
    │   └── index.js
    ├── shared
    │   ├── infinite-scroll.js
    │   ├── post-filter.js
    │   └── util.js
    ├── store
    │   └── love-reducer.js
    ├── styles
    │   ├── _all.scss
    │   ├── animation.scss
    │   ├── bulma.scss
    │   ├── custom.scss
    │   └── highlight.scss
    └── templates
        ├── blog-post.js
        └── gallery-post.js

I just write what you really need to know before use this starter. For the better, you can learn about gatsby on the official site

Site config

The site config is on griddy-config.js. You can set the title of your sites, description, twitter author, google analytic, etc.
The icon we use for this site is feathericons. But for the better performance, we only take what icon we need. So if you want to add more icon, you need to edit the file in /src/assets/icons/feather.svg as the format we created.
The menu home you created should be match with the file name in /src/pages.

Plugins

The gatsby plugins are configured on gatsby-config.js. Learn how to to install and configure gatsby plugins on the offical site.

Custom style

We use Bulma Framework here. But if you want to use your custom class, just edit the file in /src/styles/custom.scss. Why do we use scss? 'cause the syntax is css look-alike.

Configure your home

Edit the index file in /src/pages/index.js for your home. You're gonna need the knowledge of html and bulma framework here.

Configure your another pages

For another pages, we created /src/pages/blog.js and /src/pages/gallery.js by default. If you have the knowledge about Reactjs that would be awesome to create more pages as you wanted, if you don't, it's okay. I'm sure you'll understand what's write in the code.

The template of blog and gallery post

If you feel unsatisfied about the layout, you can edit both of them in /src/templates.

Love button

Love button in the post is using our API. You need to add yours and configure the API in /src/store/love-reducer.js 'cause if you don't, there will be more error message on your post. If you don't know how to create the API, ask your master or your community to help you about that.

Comment system

We already create the sample of comment system using valinejs but we are not gonna use that for the official. You can see the example how to implementation of that on the valine branch.

Create a post

If you're using linux distribution as your OS, that would be easier to create a post 'cause we already created the script file mkpost for that. For example:

./mkpost -b "My New Blog Title Here"

Your new post will be appear in /src/pages/blog. Put all your images in the same directory as index.md. The post's frontmatter configuration look like this

---
title: My New Blog Title Here
date: 2019-07-09 19:18:58
tags:
  - new
  - post
  - here
category: Something new
cover: cover.jpg
---
Content post here

Available options:

-b : blog
-g : gallery

But if you're using another OS, we're so sorry that you need to create a post manually.

Happy publish guys