Introducing Hive's Gatsby Plugin

in #hive-1395312 months ago

Gatsby is a static site generator for React. Thus I thought of using it to show all my Hive posts as a blog which will be as fast as possible. Gatsby has a list of plugins which include Wordpress, Firebase, etc, thus I have created Hive Plugin so that anyone can create their Static site which will show the list of posts one has done.

Hive Posts using Gatsby

The project is a combination of Blog and Plugin which will be pulling your posts from api.hive.blog to Gatsby. You need to provide your hive account name and it will get all the posts.

The plugin is embedded into the application under the plugins/gatsby-source-hive folder where you have two files gatsby-node.js and package.json. In gatsby-node.js we are querying api.hive.blog to get the posts based on the username.

Repository: https://github.com/codingdefined/hive-blog
Demo Site: https://codingdefined.github.io/hive-blog/

It takes all the posts which you have written till now, with the images pointing to hive.blog. Since its a static site generator, you need to build and deploy if you would like to see the new posts which can be automated using node.js. The site has Seo plugin as well as Google Analytics if you would like to see how many visitors are coming to your site.

The site has been deployed to Github Pages, using the npm package gh-pages and thus I need to enable it.

image.png

As of now, the comments are not enabled, but we can enable it using Disqus and get all the comments already on the Hive Blockchain.

If you would like to create your own static site, then you need to change the tag to your username, on gatsby-node.js file.

Index Page :

image.png

Individual Blog Page:

image.png

Full Page :

image.png

The Graph QL query which is being used here is, where we are taking top 10 results and then querying then

  query($skip: Int!, $limit: Int!) {
    site {
      siteMetadata {
        title
      }
    }
    allHiveArticle (
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          id
          title
          author
          created(formatString: "MMMM DD, YYYY")
          permlink
          body,
          json_metadata
        }
      }
    }
  }
'

The initial code was generated using Gatsby Starter Blog

Sort:  

Nice work bro. Two more days to go for Hackathon right. I couldn't make anything useful. I was held up in other projects. All the best bro. The the project is cool. 😀

Thanks a lot, Yeah it was just a weekend project where I got some time, it will be useful for many if they want to keep their blog on one location.

Yes that's nice. 👍

Hey, we appreciate your work, and we would feature your post in how Gitplait-elite publication today. Kudos!

Thanks @gitplait, Much appreciated

Hey ! Nice work !
I've made SuperHive, who looks like your plugin. It generate a real website with HIVE posts too (not a gatsby plugin, you need a real web host with SuperHive).

Your project is really cool ! Don't give up and all the best for you <3

Thanks @bambukah, SuperHive is a great project. Let's make Hive great with all the good apps.

You guys are inspiring me to accentuate my learning process. I have been learning the basics of programming for a while now. For last one week, I am learning it religiously along with trading. Since I did Mechanical Engineering in graduation, my knowledge of coding was absolutely zero.

Just covered basics such as variables, data types, operators, conditional statements and Loops. Today I have set arrays as my target.

All the best to win the Hackathon.

Wow nice, good progress. I wanted to work on something bigger, but could not got time to complete it. It was a small application which was completed in a weekends time to enter into the hackathon.

Neat initiative and idea here. Being able to create something like this through this code is certainly interesting.

Thanks, hopefully it will help people.

hey, hope you win this is super awesome. i was hoping something would come out like this. have you thought about maybe looking at all the other major static cms masker too? I think that would really open up some doors. i hope you win.

Yeah, I can actually think of creating it for open source CMS. I know this will open a lot of doors to a lot of people.

maybe, they have to want to use blockchain and understand/educate themselves a little on the WHY of that but yes, it's a good gateway if plenty of signposting to things they can learn.