Raywon Kari - Published on January 31, 2021 - 5 min read
Following are the tools/info we need to get started:
After cloning the template repo, create a
.env.development file, and add the following code in it:
gatsby develop and navigate to
localhost:8000 to see your new website up and running.
Now that, your local site is up and running, its time to start adding new blog posts.
Navigate to the
articles folder, and have a look around. Each blog post gets its own folder.
create a new folder (I named it with numbers, followed by the name just for identification purpose, you are free to choose your own startegy).
social.png files from other article folders to your new blog folder, and start writing your own content.
Each mdx file, contains a frontmatter on top, they are self explanatory by themselves. Quickly have a look to see what's happening over there. Each of those have a purpose, try to find out in the blogging source code, which one is used where :)
Gatsby is built on top of React, so most of the stuff available, are developed keeping in mind the re-usability aspect, using components, similar to how react works.
It also has a rich set of APIs, to create dynamic pages, setup routing etc. I personally liked Gatsby alot. If you are coming from a non-react background, you might face some hurdles initially, but it will get better.
.├── LICENSE├── README.md├── articles│ ├── 0001-first-blog│ │ ├── image.png│ │ ├── index.mdx│ │ └── social.jpg│ ├── 0002-second-blog│ │ ├── image.png│ │ ├── index.mdx│ │ └── social.jpg│ ├── 0003-third-blog│ │ ├── image.png│ │ ├── index.mdx│ │ └── social.jpg│ └── 0004-fourth-blog│ ├── image.png│ ├── index.mdx│ └── social.jpg├── gatsby-browser.js├── gatsby-config.js├── gatsby-node.js├── package-lock.json├── package.json└── src├── components│ ├── 404.css│ ├── 404.js│ ├── articles-list.css│ ├── articles-list.js│ ├── code.js│ ├── footer.js│ ├── header.css│ ├── header.js│ ├── index-content.css│ ├── index-content.js│ ├── post-headings.js│ ├── post-links.js│ ├── seo.js│ ├── share.css│ ├── share.js│ ├── subscribe-content.js│ ├── subscribe.css│ ├── tags.css│ └── tags.js├── images│ ├── homeimage.png│ └── raywon-bitmoji.png├── pages│ ├── 404.js│ ├── index.js│ ├── subscribe.js│ └── tags.js└── templates├── article-pages.css├── article-pages.js├── post.css├── post.js├── tag-page.css└── tag-page.js
Starting with the most interesting one, the template's source code. its in the
/Components folder consists of all the individual components used to build this blog:
jsfile has the code, and
cssfile is the styling.
/Images folder contains the static images used, such as the one from the main home page and the icon in the browser tab.
/Pages folder contains the static pages such as the home page, subscribe, tags page.
/Templates folder contains the templates used to create other pages automatically, such as the template for the blog post, template for the individual tag page etc.
/articles page consists of all blog posts, written in mdx files, and other supporting files such as images etc.
/ gatsby* files are gatsby config files. Among all, gatsby-config is the most important, which has all the information related to the plugins, and other static data, which are re-used across multiple places.
Feel free to reach out to me, if you need help with anything.
To deploy a production site, we need to run a few commands such as gatsby build, gatsby serve etc.. Check out my first blog posts on Gatsby part-1 and part-2 to know more on how it works.
If we integrate our github repo to the static site hosting platform, they will do the heavy lifting for us. We just need to make sure to add the MAILCHIMP_ENDPOINT env var.
For Netlify, we can find the instructions here.