raywontalks.com website template

My blog's Gatsby template

Raywon Kari - Published on January 31, 2021 - 5 min read

Following are the tools/info we need to get started:

• template repo: clone it from here.
• Gatsby CLI
• mailchimp endpoint ( Refer this doc for info on that.)
• Netlify account, or any other static site hosting platform of your choice.

After cloning the template repo, create a .env.development file, and add the following code in it:

MAILCHIMP_ENDPOINT="https://your_mailchimp_endpoint_url"

Simply run 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).

• Then copy index.mdx, image.png and 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.

Folder structure:

.
├── 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 src/ folder.

/Components folder consists of all the individual components used to build this blog:

• 404: is used to display a page not found page, whenever someone tries to access a page which does not exist. js file has the code, and css file is the styling.
• articles-list: is used to display the latest articles in the home page.
• code: to used to display any source code with coloring. Adding code in markdown files is used by using format.
• footer, header, index-content are also used for the main home page, and the cross linking between each other in other pages.
• post-heading, post-links, are used as helper functions to create the main headings in the blog, and adding links to external URLs.
• seo, is used for, yeah, you can get it by its name, SEO purpose. It is a helper function to add SEO related parameters to each page.
• share, is used as a components which is added on bottom of every blog post, linking social media platforms for sharing purpose.
• subscribe, is used as a component displayed in the subscribe page.
• tags, is used in the tags page to display all tags.

/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.