

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