Turn your Steem posts into static blog. Introducing Steem plugin for Gatsby

in #steem7 years ago

I recently started playing with Gatsby. Gatsby is static site generator for React. It allows you to build fast websites with data, that can come from anywhere. Gatsby has many plugins already (e.g. WordPress, Medium, Contentful, Netlify) and now Steem as well.
Add plugins you need and you can use data they provide to build anything you want.

I created basic Gatsby plugin (called gatsby-source-steem). You can use it to pull data from Steem into your website.

Website built using Gatsby
You can see this website online here.

Why would you want to build a static blog? For me, Steem is not about incentives. It is great technology that allows everyone to publish content they want. With Steem you don't have to worry that your work will disappear forever. And now you can use it, to build your blog your way. Even if all you need is to create the website that links to some other Steem client like Busy or Steemit, you can do it.

How to use gatsby-source-steem?

Using Steem source is similar to using any other Gatsby source plugin.

  1. Install plugin with npm or yarn.
    Plugin installation

  2. Enable and configure the plugin in gatsby-config.js.
    Enabling plugin

  3. Done! Now you can query data using GraphQL.
    Query

Example website built using this plugin

To show what can you do with this plugin I created a basic website using my plugin (the one you might have seen at the top). It is bare because I wanted to keep it simple, so people can use it to get a better feel of Gatsby.
You can view it here: https://gatsby-steem.surge.sh/
Source code: https://github.com/Sekhmet/gatsby-steem

Sort:  

Congratulations @sekhmet! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 400 upvotes. Your next target is to reach 500 upvotes.

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

Christmas Challenge - Send a gift to to your friends

Support SteemitBoard's project! Vote for its witness and get one more award!

Thanks to sharing information @sekhmet

Beautiful programming. Thank you for your efforts and works

WORK APPRECIATED @sekhmet

Nice information.
Thank you to sharing for information @sekhmet

Hey, this is great stuff. Now, all I have to do is to start learning react :)

What server do you need to serve these pages?

Congratulations @sekhmet! You have received a personal award!

SteemFest 3 Attendee
Click on the badge to view your Board of Honor.

Do not miss the last post from @steemitboard:

SteemFest³ - SteemitBoard Contest Teaser
The new Steemfest³ Award is ready!

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @sekhmet! You received a personal award!

Thank you for your participation in the "Meet The Steemians" contest in Kraków. We hope you enjoyed it and made lots of new friends. See you at SteemFest4!

Click here to view your Board of Honor

Do not miss the last post from @steemitboard:

Meet the Steemians Contest - The results, the winners and the prizes
Meet the Steemians Contest - Special attendees revealed
Meet the Steemians Contest - Intermediate results

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @sekhmet! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 300 upvotes. Your next target is to reach 400 upvotes.

Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP

Support SteemitBoard's project! Vote for its witness and get one more award!

Nice information, thanks @sekhmet