roseline124 / wannabe_gatsby

gatsby blog with typescript, react, ...

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Wanna be Gatsby

roseline's blog.

other blogs

πŸ“ To DOs

main page

  1. design
  • apply material UI and theme
  • pagelayout - header
  • pagelayout - footer
  • split pagelayout header as file
  • add post list
  • add cover image
  • add parallax scroll to post list
  • add thumbnail to post list
  • add pagination
  • add category link to 'in category'
  1. query and route
  • query posts
  • add link to post list
  • add thumbnail to frontmatter
  • use fragment in index.tsx (PostListItem fragment)

post detail page

  • fix createPage in gatsby-node.js (forgot await)
  • design postlayout

🧐 What's inside?

A quick look at the top-level files and directories in this project.

.
β”œβ”€β”€ gatsby-config.js
β”œβ”€β”€ gatsby-node.js
β”œβ”€β”€ src
  β”œβ”€β”€ assets
  β”œβ”€β”€ components
  β”œβ”€β”€ constans
  β”œβ”€β”€ templates
  β”œβ”€β”€ style
  β”œβ”€β”€ pages
  β”œβ”€β”€ posts
  β”œβ”€β”€ utils
β”œβ”€β”€ static
  1. gatsby-config.js: add plugins and options.
  2. gatsby-node.js: create post pages automatically.
  3. src
  • assets: static files for post or blog itself.
  • components: re-usable components.
  • constants: re-usable constants.
  • templates: page layout.
  • style: theme files for material-ui.
  • pages: page component. query for page data muse be in page component. and assign the query to const named pageQuery. (I wonder why fragment is not recognized in page query doc)
  • posts: markdown files.
  • utils: my tool box.
  1. static: static files (images, favicon) for website. static folder in root directory is automatically copied in public folder. refer this.

πŸ’« Deploy

My Blog(WIP) was deployed in netlify. It'll be moved to github.io soon later.

Deploy to Netlify

About

gatsby blog with typescript, react, ...

License:MIT License


Languages

Language:TypeScript 82.7%Language:JavaScript 17.3%