gatsby-blog-mdx

Description

A ready-to-use, customizable personal blog with minimalistic design

Demo

Demo is available here

Features

• Simple blog with responsive design

  

• Light / Dark Mode Switch

  

• Fast !

  • gatsby-blog-mdx is built on top of Gatsby.js that pre-builds pages that's delivered to viewers instantly

• Mdx (or Markdown) to create post & about page

  • Mdx enables to use React components along with markdown in your post. This blog also includes some pre-built components to enhance your blog experience.

  • Learn more

• Code syntax highlighting (Light / Dark)

  

• Comments plugins

  • Supports Facebook | Disqus | Utterances(GitHub) Comments

• Social Media Links & Share Buttons

  • Supports Email | GitHub | Facebook | Twitter | LinkedIn | Instagram | Medium

• Google Analytics

  • Google Analytics measure how users interact with your blog

• SEO + sitemap + RSS

  • Auto generates metadata & sitemap & rss to boost search engine result for your website.

• Easy & Highly Customizable

  • Customize everything by tweaking customize.js

Get Started 🚀

More detailed guide is available on Demo site

1. Download using npx | npm

   # Using npx
   npx gatsby new my-blog https://github.com/EllisMin/gatsby-blog-mdx
   # Using npm
   npm i -g gatsby-cli && gatsby new my-blog https://github.com/EllisMin/gatsby-blog-mdx
   

   If you haven't, download npm with Node.js

2. That's it! Run your blog locally

   cd my-blog
   npm start
   

   Then, open your web browser and go to localhost:8000

   Post Example

   Create *.mdx under _posts directory in the root directory

   ---
   title: First Post
   date: 2020-05-23
   tags: [category1]
   ---
   
   ## First post
   This is first post
   

   Learn more about creating post

3. Modify customize.js to your needs

   Learn more about customizing config

4. Deploy your Blog on Netlify 💫

   Learn how to deploy your blog online

What's inside? 🔍

.
├── _assets             # Contains profile image & favicon
├── _posts              # All of your posts goes in here as well as any other files
├── src                 # All the front-end source code
├── customize.js        # ----> Modify this to customize your blog
├── customize-styles.js # ----> Modify this to customize stylings
├── ...
├── .gitignore          # Contains file names that won't be pushed to git repository
├── .prettierrc         # Helps formatting your code
├── gatsby-browser.js   # Contains gatsby browser APIs / extension of default gatsby settings
├── gatsby-config.js    # Contains site meta data & gatsby plugins
├── gatsby-node.js      # Contains gatsby node APIs--it's where post pages & slugs are created
├── gatsby-rss.js       # Contains gatsby RSS feed plugin configuration
├── gatsby-ssr.js       # Contains gatsby server-side rendering APIs
├── LICENSE             # Contains MIT License
├── package-lock.json   # Contains versions of npm dependencies used for this project
├── package.json        # Node.js manifest file that contains project's meta data
└── README.md           # Markdown file that describes the project

Issues

Issues

License

MIT