Skip to content

EllisMin/gatsby-blog-mdx

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

icon

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

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published