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.
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.
Install plugin with npm or yarn.
Enable and configure the plugin in gatsby-config.js.
Done! Now you can query data using GraphQL.
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
Thanks to sharing information @sekhmet
Nice information, thanks @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!
Click on the badge to view your Board of Honor.
Do not miss the last post from @steemitboard:
Congratulations @sekhmet! You received a personal award!
Click here to view your Board of Honor
Do not miss the last post from @steemitboard:
Congratulations @sekhmet! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
<table><tr><td><span><img src="https://images.hive.blog/768x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201812172027" srcset="https://images.hive.blog/768x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201812172027 1x, https://images.hive.blog/1536x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201812172027 2x" /><td>You made more than 300 upvotes. Your next target is to reach 400 upvotes. <p dir="auto"><sub><em><a href="https://steemitboard.com/@sekhmet" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Click here to view your Board of Honor<br /> <sub><em>If you no longer want to receive notifications, reply to this comment with the word <code>STOP <blockquote> <p dir="auto">Support <a href="https://steemit.com/@steemitboard" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">SteemitBoard's project! <strong><a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vote for its witness and <strong>get one more award!Congratulations @sekhmet! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
<table><tr><td><span><img src="https://images.hive.blog/768x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201812232358" srcset="https://images.hive.blog/768x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201812232358 1x, https://images.hive.blog/1536x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201812232358 2x" /><td>You made more than 400 upvotes. Your next target is to reach 500 upvotes. <p dir="auto"><sub><em><a href="https://steemitboard.com/@sekhmet" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Click here to view your Board<br /> <sub><em>If you no longer want to receive notifications, reply to this comment with the word <code>STOP <p dir="auto"><strong><span>Do not miss the last post from <a href="/@steemitboard">@steemitboard: <table><tr><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><img src="https://images.hive.blog/768x0/https://steemitimages.com/64x128/http://i.cubeupload.com/kf4SJb.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/64x128/http://i.cubeupload.com/kf4SJb.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/64x128/http://i.cubeupload.com/kf4SJb.png 2x" /><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Christmas Challenge - Send a gift to to your friends <blockquote> <p dir="auto">Support <a href="https://steemit.com/@steemitboard" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">SteemitBoard's project! <strong><a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vote for its witness and <strong>get one more award!Hi @sekhmet, thanks a lot for merging my pull request (edit old posts). I also heard that you made this plugin, quite cool! Merry Christmas!
Hi @sekhmet, It's me again. I've made 3 pull requests! as you might have seen :) I should get some salary or full vote from busy :) All are simple, so I'd appreciate if you could merge them soon. Thanks for your work!
Congratulations @sekhmet! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
<table><tr><td><span><img src="https://images.hive.blog/768x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201812301819" srcset="https://images.hive.blog/768x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201812301819 1x, https://images.hive.blog/1536x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201812301819 2x" /><td>You made more than 500 upvotes. Your next target is to reach 600 upvotes. <p dir="auto"><sub><em><a href="https://steemitboard.com/@sekhmet" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Click here to view your Board<br /> <sub><em>If you no longer want to receive notifications, reply to this comment with the word <code>STOP <p dir="auto"><strong><span>Do not miss the last post from <a href="/@steemitboard">@steemitboard: <table><tr><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends-the-party-continues" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><img src="https://images.hive.blog/768x0/https://steemitimages.com/64x128/http://i.cubeupload.com/kf4SJb.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/64x128/http://i.cubeupload.com/kf4SJb.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/64x128/http://i.cubeupload.com/kf4SJb.png 2x" /><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends-the-party-continues" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Christmas Challenge - The party continues <blockquote> <p dir="auto">Support <a href="https://steemit.com/@steemitboard" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">SteemitBoard's project! <strong><a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vote for its witness and <strong>get one more award!Hi @sekhmet, could you review and merge my PRs for busy? They're all simple so it won't take much time. Thank you and happy new year!
Congratulations @sekhmet! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
<table><tr><td><span><img src="https://images.hive.blog/768x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201901061434" srcset="https://images.hive.blog/768x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201901061434 1x, https://images.hive.blog/1536x0/https://steemitimages.com/60x70/http://steemitboard.com/@sekhmet/votes.png?201901061434 2x" /><td>You made more than 600 upvotes. Your next target is to reach 700 upvotes. <p dir="auto"><sub><em><a href="https://steemitboard.com/@sekhmet" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Click here to view your Board<br /> <sub><em>If you no longer want to receive notifications, reply to this comment with the word <code>STOP <blockquote> <p dir="auto">Support <a href="https://steemit.com/@steemitboard" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">SteemitBoard's project! <strong><a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vote for its witness and <strong>get one more award!Hello @sekhmet! This is a friendly reminder that a Partiko user has just followed you! Congratulations!
To get realtime push notification on your phone about new followers in the future, download and login Partiko using the link below. You will also get 3000 Partiko Points for free, and Partiko Points can be converted into Steem token!
https://partiko.app/referral/partiko
Congratulations @sekhmet! You received a personal award!
You can view your badges on your Steem Board and compare to others on the Steem Ranking
Vote for @Steemitboard as a witness to get one more award and increased upvotes!
Your level lowered and you are now a Red Fish!@sekhmet, sorry to see you have less Steem Power.
Vote for @Steemitboard as a witness to get one more award and increased upvotes!
Congratulations @sekhmet! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :
<table><tr><td><img src="https://images.hive.blog/60x70/http://hivebuzz.me/@sekhmet/upvotes.png?202005052213" /><td>You distributed more than 6000 upvotes. Your next target is to reach 7000 upvotes. <p dir="auto"><sub><em>You can view <a href="https://hivebuzz.me/@sekhmet" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">your badges on your board and compare to others on the <a href="https://hivebuzz.me/ranking" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Ranking<br /> <sub><em>If you no longer want to receive notifications, reply to this comment with the word <code>STOP <p dir="auto"><strong><span>Do not miss the last post from <a href="/@hivebuzz">@hivebuzz: <table><tr><td><a href="/revolution/@hivebuzz/revolution-revolution"><img src="https://images.hive.blog/64x128/https://i.imgur.com/kvCt22V.png" /><td><a href="/revolution/@hivebuzz/revolution-revolution">Revolution! Revolution! <h6><a href="https://hivesigner.com/sign/account-witness-vote?witness=steemitboard&approve=1" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vote for us as a witness to get one more badge and upvotes from us with more power!