Migrating smoke-indica hexo blog to gatsbyjs

24 days ago


image source

In my last update on the 6th I mentioned how I was thinking of creating the blog using gatsbyjs, I can gladly announce that it's now fully migrated over from using hexo+nginx to using renderer+gatsbyjs!

Check it out!

Desktop lighthouse audit:

These results are great, I'm really happy with the improvement over the previous hexo implementation.

The following desktop hexo result shows a substantial improvement in 'Time to interactive'.

Mobile lighthouse audit

Very impressive improvement for mobile devices!

The following mobile hexo result shows significant improvements, this should be much more mobile friendly now!

Progressive web application installation

The lighthouse audits above show a green tick next to 'progressive web app', this means it can be installed on your device/browser which gives it more of a native app feel than just a web browser.

For the chrome web browser open the menu and scroll down for the install prompt:

Mobile browsers may prompt you to add a desktop/dashboard shortcut.

This was implemented using the gatsbyjs plugin gatsby plugin manifest with offline support too 👍

Updated look

I chose to use the Lumen Gatsbyjs starter blog, began importing and parsing the existing content then recreated the functionality from the old hexo website.

Index

Author page

The image wall is gone, it might come back in the future but was a source of performance loss in the hexo blog.

Top tags/authors sidebar content

Rather than store the information in a sidebar it's now located on the "Smoke Insights" page:

Tag page

Very similar to the index feed, no longer 2 per row with small images.

Nav/side bar links

They've been moved to their own pages (about, contact, related sites, smoke explorers)

Price page

The price page is gone, use the smoke explorers link to get the real time statistics.

Open source

Check out the code, it might be a bit behind the production version.

Old content?

The smoke-indica data collection script ran into an issue at the beginning of this gatsbyjs migration and so posts since the 6th aren't yet displaying. I'll be looking into improving these data collection scripts in the near future.


Thoughts? Any suggestions?

Are you considering working on your own smoke project?

Cheers,
Indica

#gatsbyjs #renderer #progressivewebapp #pwa



Get 4.2 Free Smoke Power On Sign Up To Start Your Journey On Smoke! The First Cannabis Community That Pays You To Post And Curate Content You Love..
Sort Order:  Trending

Thanks for the new version / Checked few minutes ago - definitely looks more better than old one, but need time to get familiar with it .

  • The Author page in past was richer with some banners / photos and will be great if can be added.
  • Most featured and rewarded authors is so hidden under Smoke Insights, as the page starts with Historical tag usage, followed by Trending tags - more visibility will be a kind of publicity for authors as in the old version and this will increase the competition, I think.

Note: un update was done to The Green Smiley in my last post to can lead to my my profile page. / Thanks for great work - Keep it up.

·

The Author page in past was richer with some banners / photos and will be great if can be added.

True this is just the initial version, will keep iterating on the design.

·

more visibility will be a kind of publicity for authors

Like this?

·
·

Looks more better 👍

·
·
·

Thanks

·

Most featured and rewarded authors is so hidden under Smoke Insights

Insights is now stats, where fewer are shown in the overview, the users can navigate to the individual dedicated page for 100 rows instead of 10.

·
·

Thanks for explaining - creative & clear.

The site has now a very clean cut feature of posts because of just one image shown...I wonder what caused the broken images i.e. my post of Nov.3 (Canna Basic Cookies)? Images of other authors I randomly checked seemed ok.

·

Yeah still working on rendering the contents of posts, it's on the TODO list, just a bit tricky. Thanks for the feedback 👍

·
·

Thanks too!

Definitely renders faster (Safari iPadOS).

The metadata at the top of each article are rather big. Counter culture FTW!

I would suggest that the author box and “related” boxes are 3 columns (two rows) on desktop.

·

I'll look into improvements between mobile & desktop views 👍

Keep it up @indica, younare such a good man here in smoke.io. Nice to hear of your good intentions here .Peace be with us in smoke.io

Its great :) Can you put there the price of smoke has you had on your last website? :)

·

The price page was removed because I've switched from using a vps to using a dedicated Web host for gatsbyjs, follow the links to the bts blockchain explorers for a price 👍

·
·

Thank you 😊

Your site is looking great:D

·

Thanks :)

Loads on iOS using brave mobile quick as just feed of posts... Images missing though I notice in another comment you mentioned image/post rendering on TODO list 😅

·

Afterthought... calling it a curation trail implies to me a service I can join with my experience from STEEM... I would join immediately but that’s besides the point... automation does not seem to be supported here and I believe a slight change in terminology can better reflect that 😉

·
·

Perhaps, I figured it was like a manual curation trail, what would you suggest instead?

·
·
·

Well... I assume @acid is the acidyo from steem... I like their OCD - operation curation delegation... includes the act of participation and the means to which they accomplish it by means of your delegation and implied manual efforts of curation as its an "operation"... kinda genius and not sure if the depth I am pulling from it was intentional..

Maybe we could get some insight from the man himself? Of course if I am not mistaken 😅

I would start with thinking of a cannabis related acronym you like... from there we can start spit balling ideas because saying "Cannabis Curation Operation" sounds good but CCO sounds like some sort of investment of itself while OCD makes me think they are obsessive about what they do! Which they kinda are 😉

·
·
·
·

I've changed it from a curation trail to a blog promoting content instead, less confusion in the terminology 👍

·

Yeah I need to figure out how to properly convert all markdown images to html, I got pretty close using [gatsby-remark-images-anywhere] (https://github.com/d4rekanguok/gatsby-remark-images-anywhere/issues/17#ISSUECOMMENT-577731446) but it downloads all external images which took up gigs of space and 7hrs to process. I'll try to edit this plugin to wrap markdown images without the entire download process.

·
·

Yea that seems a little excessive 😅 definitely past my ability’s with web development 😉

This is shittier content than anything I ever posted on smoke.io but self vote + circle jerk for the win!