@kunalja's math blog starter

Write and release your important mathematical and technical findings with this blog boilerplate. This starter is built with Gatsby, a blazing fast app generator for React.

✨ Features

Responsive - utilizing tachyons, this site was built mobile first!
MDX - allowing you to utilize hydrated React components in Markdown!
Latex - with both inline and block options with the `$` key word.
Code Syntax Highlighting - allowing you to communicate about software with specificity and clarity.
Dynamic Configurations customizing your site's title, author, description, and social links!

Your website will change depending on the options you set in your `site.config.js`

🚀 Get Started

Install Gatsby.

Install the gatsby cli via npm.
```
npm install -g gatsby-cli
```
Create a Gatsby site.

Use the Gatsby CLI to create a new site, specifying the blog starter.
```
gatsby new math-blog-starter https://github.com/kunalja/gatsby-starter-math-blog
```
Start developing.

Navigate into your new site’s directory and start it up.
```
cd math-blog/
npm run develop
```
See the development server live!

Your site is now running at http://localhost:8000!

Configure your site.

//site.config.js
module.exports = {
  title: `M@th B|og`,
  description: `The premier math blog starter for Gatsby.`,
  author: `@kunalja`,
  personalDescription: `I am a student at the University of Texas.`,

  //Add your links to these websites or put a 0 if you don't use those sites
  //Do not add or remove any sites (unless you are willing to modify the grapql in pages/index.js)
  socialLinks: {
    facebook: 0,
    gatsby: 0,
    github: `https://github.com/kunalJa/gatsby-starter-math-blog`,
    imdb: 0,
    linkedin: `https://www.linkedin.com/in/kunalja`,
    reddit: 0,
    skype: 0,
    slack: 0,
    spotify: 0,
    telegram: 0,
    twitter: 0,
    whatsapp: 0,
  },
}

Write new posts.

Navigate to the blog folder and create new .mdx files for each new post you make.

cd blog/
# Windows cmd
type NUL >> 2020-03-25-my-first-post.mdx
# Unix zsh or bash
touch 2020-03-25-my-first-post.mdx

Make sure you include valid frontmatter with the fields title, date, and description.

---
title: "My first post"
date: "2020-03-25"
description: "This post is my first and probably my last"
---

# My first post!

this is an example of a post one might make.

Save your changes and the site will update in real time!

🧐 What's inside?

A quick look at the important files and directories you'll see in this starter.

.
├── .storybook
├── node_modules
├── src
│    └── blog
├── .eslintrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── LICENSE
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── site.config.js
└── UI_Design.xd

/node_modules: This directory contains all of the modules of code (npm packages) that your project depends on and are automatically installed.
/src: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. src is a convention for “source code”.
/src/blog: This directory is where you should place all of your blog posts. Make sure to give them a .mdx file extension and include a title, date, and description in the frontmatter of each post.
.eslintrc.json: This is a configuration file for ESLint. ESLint is a tool to help find and fix linting problems in JavaScript code.
.gitignore: This file tells git which files it should not track / not maintain a version history for.
.prettierignore: (See .prettierrc below, first). This file tells prettier which directories and files it should not attempt to format.
.prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.
gatsby-browser.js: This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser.
gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).
gatsby-node.js: This file is where Gatsby expects to find any usage of the Gatsby Node APIs (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
LICENSE: This starter is licensed under the MIT license, much like Gatsby itself.
package-lock.json (See package.json below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly).
package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.
postcss.config.js: This is a configuration file for PostCSS. PostCSS is a tool for transforming CSS with JavaScript.
README.md: A text file containing useful reference information about your project.
site.config.js: This file allows you to edit the site metadata that is used to automatically generate several elements of the blog. Make sure to update the title, author, and personal description sections with your information.
UI_Design.xd: This is a file (openable with Adobe XD) used to come up with the user experience and design of the website in its inception.

🐞 Bugs or Questions?

Please send them my way at gatsby-starter-math-blog/issues

sjsarsa/test-gatsby-blog

@kunalja's math blog starter

✨ Features

🚀 Get Started

🧐 What's inside?

🐞 Bugs or Questions?

💖 Thank you for checking this starter out