Gatsby Js Markdown

by




By David Fekke
  1. Using Chart.js with Gatsby markdown. Ask Question Asked 7 months ago. Active 7 months ago. Viewed 312 times 0. I'm trying to display a chart.js chart in a markdown.
  2. Markdown is a very common way to write content in Gatsby posts and pages. This guide contains tips for Markdown syntax and formatting that might come in handy!

Mapping from generic HTML elements. You can also map a generic HTML element to one of your own components. This can be particularly useful if you are using something like styled-components as it allows you to share these primitives between markdown content and the rest of your site.

March 24th, 2019

I recently moved my Website to a new static site generator called Gatsby JS

Gatsby JS is a site generator based on the React framework. I have been using Jekyll for the last couple of years, but I have had real problems with some of the Ruby system not installing ruby gems properly. Another thing that is nice about Jekyll is that itis natively supported on Github pages. All you have to do with any github probject is make sure your jekyll site is checked into the gh-pages branch, and Github will auto-publish your site everytime you check into that branch.

Gatsbyjs Markdown Image

I help run a user group on Node.js called JaxNode here in Jacksonville, Fl. Since we are heavily node focused, I decided to use one of the many site generators available on Node. There are many including Hugo, Hexo and Metalsmith. I opted to go with Gatsby JS.

Gatsby JS

So why did I choose Gatsby? One reason is that it is based on React JS. Another reason is that it uses GraphQL for pulling in data into the site for things like markdown files, and I have been wanting to learn more about GraphQL. There is also a large ecosystem of plugins for everything from Wordpress support to image manipulation. I have decided to write my first post on some of the challenges I encountered in porting my site and blog over to Gatsby.

Learning the basics

Gatsby is actually very well documented. They have their main documentation site here, and they have a great set of tutorials here. If you are starting from scratch they have great set of starter sites. I initially tried to use a couple of there starter sites, but I was not happy with any of the layouts they used, so I decided to create mine from scratch. This turned out to be a worthwhile thing to do because it gave me a chance to get caught up on some of the trends with styling and web design. It is a lot easier to build good looking responsive website just using the built in tools that come with modern browsers now.

Gatsby has a set of CLI tools you can use for developing, building and browsing your site. Here are some of the basic commands;

Gatsby Js Markdown Download

Styling

There is a neverending list of options for applying styles to your content. You use plain old CSS, or use styled components, emotion or styling in JS. You can also use SASS or SCSS to compile your CSS. Gatsby also allows you to use something called CSS Modules. These are nice because it allows you to create styles that are scoped locally to a single component.

Gatsbyjs markdown image

And then in your component you can import the style as a class onto your component. Here is an example of a component consuming the previous CSS file.

I tried to use inline styles where ever I could, but CSS modules are nice when you have to add media queries to make you components responsive. Here is a module I used on one of my headers so it would work on a desktop, tablet or smartphone.

Pages

Creating pages in Gatsby is fairly easy. All you have to do is create a functional component in the src/pages directory in your project. If you name your page about.js, Gatsby will automatically create a route to that page as /about/. Here is what my about page looks like in React syntax;

Linking to other pages

Gatsby does not require the use of the React router. If you want to link to another page, they have a component you can use to create hyperlinks to other pages. This is the <Link /> component. If you want to use it in your page or component, all you have to do is import it from the gatsby module.

Conclusion

I have not finished making changes to my site yet, but I should be making some more changes soon. I will have some posts on how to add a blog to your site, how to use markdown and how to use the image manipulation features in Gatsby plugins.

← Previous Page Next Page →