Introduce gatsby-starter-blog

2020년 05월 10일

#Dev

#Blog

Gatsby-starter-devlog

Gatsby starter for developer’s blog.

Demo

demo

Tell me if you use this starter

Features

Grid View 🌈
Code Highlight ✨
Comment with Utterances 💬
Buy me a coffee ☕️💸
Google Analytics 📊
Considered UI / UX 🤓
Dark Mode Support !!! 🌗

Getting Start

Create a Gatsby app

yarn gatsby new my-blog https://github.com/WDever/gatsby-starter-devlog

or

npx gatsby new my-blog https://github.com/WDever/gatsby-starter-devlog

Start development server

yarn develop

or

npm run develop

Create your post

Create post in content/articles with cli!!!

create-post

Write your post

You can write your content wit GitHub Flavor Markdown.

Also you can add thumbnail images or not. If you won’t add thumbnail images, remove image in metadata

Deploy to vercel

Structure

root

/root
├── .eslintrc.json // eslint config file
├── .prettierrc // prettier config file
├── gatsby-browser.js // font, code style
├── gatsby-config.js // Gatsby config & metadata
└── gatsby-node.js // import gatsby files from lib

src

src
├── components // Components with styling & some logic
├── hooks // Hooks that useful
├── lib // Fonts & gatsby files rewrite with TypeScript
├── pages // Routing except post: /(home), /about, /404
├── templates
│   ├── blog-post.tsx
│   └── home.tsx

├── types // Types that generate by graphql-codegen
└── utils
    ├── functions // Useful functions
    └── hooks //

content

content
├── about // About you / resume
│   └── index.md
│
├── articles //  Posts
│   ├── my-first-post-example // Name of this directory will be the path
│       └── index.md // and some pictures or more...
│
├── assets
    ├── profile-pic // Profile picure that will use in BIO
    └── wdever-icon // Icon will be show in tab.