https://gatsbycleanblogstarterkit.gatsbyjs.io/
Use the Gatsby CLI (install instructions) to create a new site, specifying the gatsby-clean-blog starter.
npx gatsby new gatsby-clean-blog-starter https://github.com/soheee-bae/Gatsby-Clean-Blog-Starter
if you are not using
npx
, following Gatsby Getting Started
npm install -g gatsby-cli
gatsby new gatsby-clean-blog-starter https://github.com/soheee-bae/Gatsby-Clean-Blog-Starter
Navigate into your new site's directory and start it up.
cd gatsby-clean-blog-starter/
gatsby develop
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.
You can write contents to blog in /content
directory.
As you add a new directory, it will be listed as new category in the navbar!
You can fix meta data in /gatsby-metaconfig.js
file.
root
βββ gatsby-config.js
βββ gatsby-metaconfig.js
βββ gatsby-node.js
src
βββ components // components with styling
βββ constants // collections of string global variables
βββ layout // layout for home and post
βββ pages // 404 page, about page, home page
βββ hooks
βββ styles
βββ utils
βββ templates
βββ blog-post.js // blog template
You can customize color, font, breakpoints and height / width of layout in src/styles
directory.
src/styles
βββ _breakpoints.scss
βββ _colors.scss
βββ _mixins.scss
βββ _size.scss
βββ _typography.scss
- Profile image : replace file in
/assets/images/moon.jpeg
. - Pagination : set sibling count (of the current page) and page size (number of posts per page) in
src/constants/page.js
. - Resize layout : You can resize layout (e.g.
height of footer
) insrc/styles/_size.scss
. - Change color : All colors that have been used in this blog are in
src/styles/_color.scss
. You can simply change hex code color fromsrc/styles/_color.scss
! - Post thumbnail : You can display or hide (
title, subtitle, date, content
) by setting the option fromsrc/constants/contentItem.js
!