Wanna be Gatsby
roseline's blog.
other blogs
π To DOs
main page
- 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'
- 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
- gatsby-config.js: add plugins and options.
- gatsby-node.js: create post pages automatically.
- 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.
- 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.