How? Meet the great Gatsby!<\/h2>\n\n\n\n
A blessing for digital marketers & their business critical websites. Thanks to open source frameworks like Gatsby, the new dynamic is now \u201cdynamic generated as static\u201d. We\u2019re no longer debating static or dynamic, but integrating the power of static and dynamic. What\u2019s more? Gatsby also helps you generate code for your static progressive web app.<\/p>\n\n\n\n Do not build a website with last decade\u2019s tech. The future of the web is mobile, JavaScript and APIs\u2014the <\/em>JAMstack<\/em><\/a>. Every website is a web app and every web app is a website. Gatsby.js is the universal JavaScript framework you\u2019ve been waiting for.<\/em><\/p>\nGatsbyJS<\/em><\/cite><\/blockquote>\n\n\n\n We recently built a business critical \u2018lead generation\u2019 website for one of our clients in the EdTech industry, to help meet their digital marketing and sales needs. This was basically an information heavy site sharply focused on user goals and conversion.<\/p>\n\n\n\n Though the content was predominantly static in nature, their key pages were over a 10,000 pixels in length \u2013 the longest in our web development history. These pages had a mix of textual content, charts and infographics none of which could be compromised (or loaded later). Client demanded that the website loaded quickly and by quick they meant within 2 seconds, as they were using the site\u2019s URL for running massive paid promotional campaigns, driving high traffic and concurrent usage.<\/p>\n\n\n\n When there\u2019s a whopping amount of money you spend on marketing campaigns, it\u2019s extremely important that your website loads swiftly given the vanishing attention span of netizens and the shift in Google\u2019s page ranking algorithm. In the recent years google has been openly advocating mobile-friendly sites i.e., responsive in different screen sizes and faster page load speed.<\/p>\n<\/div>\n<\/div>\n\n\n\n And if google favors your site it\u2019ll boost your SEO i.e., rank you higher on SERP which can be game changing for your business.<\/p>\n\n\n\n CMS is nice, but for a business critical site like this one with non-negotiable targets and load speed SLAs, any CMS would slow down the page as the user scrolls down through heaps of information.<\/p>\n\n\n\n Here are the 4 most remarkable 1-second delay stats from Hostingtribunal.<\/p>\n\n\n\n An interesting infographic on what you lose when your website is 1 second slower: <\/em>https:\/\/hostingtribunal.com\/wp-content\/uploads\/2018\/09\/Website-Speed-IG.jpg<\/em><\/a><\/p>\n\n\n\n Speed up or stay behind. \u2018Coz as per Google\u2019s research:<\/p>\n\n\n\n Came in JAM Stack, where Javascript runs it all.<\/p>\n\n\n\n The JAMstack is not about specific technologies. It\u2019s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.<\/em><\/p>\n\u2013 Jamstack.org<\/em><\/cite><\/blockquote>\n\n\n\n We were able to deliver exactly what the client needed without compromising on the design, content or any of the desired functionality.<\/em><\/p>\n<\/blockquote>\n\n\n\n We used Gatsby.js for this project which is a React based static site \/ app generator that can work with most of the headless and decoupled CMS. Out there, we have a plethora of options to choose from when it comes to building business critical, static sites. Some of the most popular static site generators are \u2013 Jekyll, Hugo, Next, Gatsby, Hexo, VuePress and GitBook.<\/p>\n\n\n\n The objective of this article is to provide an overview on static site generators like Gatsby, which will help digital marketers choose the right technologies from the latest ones to develop digital marketing assets for their business (corporate site, microsites, progressive web apps and landing pages). Feel free to jump between sections.<\/p>\n\n\n\n Static sites gets served from the server but there is no server side language involved, furnishes data to the user but there is no database involved. What does that mean? It means unlike dynamic sites, where we need a server side language like PHP, node.js etc to communicate with database and file system to pull the data and serve it to the user through server, static sites are just replica of the files on the server. There is no pulling of data from the database. Static sites are just plain HTML, CSS and Javascript.<\/p>\n\n\n\n You must be thinking, then how dynamic data is served on static sites and how interactions happen? Interactive components like user login, comments etc. are served and taken care of by third party services (APIs). Data i.e., Images, JSON files or any sort of data are stored in files and are merged into the servable HTML, CSS and JS files by Static site generators during build time before pushing to the server.<\/p>\n<\/div><\/div>\n\n\n\n Before giving a proper definition of static site generators let\u2019s recall what it was like to develop static sites in the past. In the earlier days, developers mostly used tools like Dreamweaver and HomeSite to develop static sites. Once the site was ready, to make any changes to it, be it updating the content or adding a new page\/product, you would need the help of someone familiar with the tools and technologies (used to develop the website) to be able to continuously maintain it.<\/p>\n\n\n\n It used to be very tedious and, not to mention, with increasing size of the website the complexity of maintaining the site doubled. So scalability of the site suffered. Forget about adding features like comments or membership forums.<\/p>\n\n\n\n It\u2019s obvious, the aforesaid process was not just inefficient but also quite complex for non-technical content-creators. To their rescue came the content management systems and blog engines. Some of the most popular ones being Joomla, Drupal and WordPress. There is hardly anything that couldn\u2019t be done if a developer is using these platforms. But there is a problem. These tools solved many of the existing problems but also gave birth to new issues (steep learning curve, security vulnerabilities, regularly updating server-side language etc.) and complications.<\/p>\n\n\n\n Fast forward to the present day, we have the tools and third party services that could add dynamic functionality to the static sites without harming the perks of static site. To be specific, performance and speed. Before, not being able to add interactive components in static sites made it appear like a brochureware, dull and dead. But today, third party services (BaaS) and tools like Disqus, Google forms, Discourse, Parse and a wide range of other services enables us to pull and add all kinds of dynamic data to our static website.<\/p>\n\n\n\n We\u2019ve already covered a little over the issues with dynamic sites, performance and security being the major concern. But to decide whether dynamic site or static site would be a viable solution for your project is totally dependent on your business requirements. We\u2019ve expert technical advisors at Codewave<\/a> to help you with that. Feel free to say hello<\/a>.<\/p>\n\n\n\n Let\u2019s take a glance at the benefits of a static site.<\/p>\n\n\n\n Static sites are CFO friendly. Hosting of websites built with static site generators is always going to be cheaper than hosting dynamic websites. There are some free hosting options too.<\/p>\n\n\n\n Yup! That\u2019s the biggest selling point for static sites. No such hassles like database and server computations to perform. So, no time latency in serving the files to the browser. That makes static sites a star performer when it comes to speed.<\/p>\n\n\n\n There could be many options to host your static site. The combo of Amazon S3 and Git platforms works like magic. We don\u2019t need to setup server or install dependencies or verify compatibility between different software versions. It\u2019s. Remember, it\u2019s just html, css and js.<\/p>\n\n\n\n Easy concept is hackers would need something to hack, when there is nothing to hack what would they hack? Static sites don\u2019t need database, neither any server side language. So there is nothing for hackers to exploit. Your site is completely secure (if files on your host are secure).<\/p>\n\n\n\n In a layman\u2019s language, static site generators are the tools that developers use on their local system to build static sites. These generators process dynamic content and data to generate static HTML, CSS and JS files that could be deployed on server. Data sources could be CMSs, Markdown, JSON and CSV files or External APIs. Generators build static pages out of these which can be deployed on AWS S3, netlify<\/a>, Now<\/a>, Github Pages and many more.<\/p>\n\n\n\n Mostly all Static Site Generators comes under JAM Stack. You might be thinking, what is JAM Stack now? It is no rocket-science. It is just an approach to building sites. When your application is built with JAM i.e., Javascript, APIs an Markup.<\/p>\n\n\n\n Most Static Site Generators are made to run only via the command line interface. Though some services like prose.io and cloudcanon etc. provide you with web-based static site editors. But developers mostly prefer developing, testing and deploying through the CLI itself.<\/p>\n\n\n\n This is expected, like so many other development softwares out there, static site generators comes with local server utility to allow developers see the changes the make and modify the site accordingly. For faster development these static site generators also provide template theming languages.<\/p>\n\n\n\n Mostly, all static site generators support Markup. Popular ones support almost all commonly used file formats like JSON, YAML, CSV, also content through headless CMSs like contentful, wordpress etc.<\/p>\n\n\n\n SSGs like HUGO, Jekyll and Gatsby also provide you with plugins for enhancing site experience and for optimization purposes. For example, if you want SEO plugin, Gatsby provides you a pre-built one. Obviously, you can write your own plugins. But if you\u2019re not tech savvy, you can always leverage the plugins made by community members if available in public space.<\/p>\n\n\n\n Each of the static site generators has their own build process. They provide with simple command to achieve this. Some even provide terminal commands to deploy it to server. In gatsby, to build your project you only need to type :<\/p>\n\n\n\n gatsby build<\/p>\n\n\n\n Blogs <\/strong>: Readers these days love blogs which are quick to load, provides valuable content and rich interface. Static site best suites for this particular use case.<\/p>\n\n\n\n Enterprise sites<\/strong> : Some enterprises are playing with AI<\/a>, Blockchain<\/a> and Edge computing while many offline-businesses just seek digital presence of their business, they hardly need any complex interactive functionality (of-course contact forms and common interactive components are required by everyone). In-fact they don\u2019t even need to update their content frequently. So, if you\u2019re someone from the enterprise world you may consider it for your business. As this would mean, cheaper hosting, fast performance and secure website.<\/p>\n\n\n\n Product Documentation or Catalogue Pages<\/strong> : This is also an obvious use case. Buyers need well designed and well documented pages for products they want to buy. It should be fast to load, and secure. Site design could play a deal breaker here.<\/p>\n\n\n\n When there are so many products for the same thing, clients get overwhelmed. I mean to choose from Gatsby.js, hugo, jekyll, nuxt and so many more is going to be tricky. What\u2019s best suited for you is again dependent on your business use case, your future plans for business, skills of your workforce (developers) and other factors. We always suggest to take advice of experts.<\/p>\n\n\n\n Also, static sites are not good for business which need a lot of dynamic functionality. Suppose your project is something that would have millions of users interacting with site every day. If they are just visiting the site it is fine. But, if it would involve interactions (sending and retrieving information dynamically) like in an ecommerce site, then static sites are not for such projects.<\/p>\n\n\n\n As already mentioned in the beginning, we chose Gatsby.js for our client in the edTech industry. A lot of thought process was invoved. The project is a multi-dimensional one, still ongoing so can\u2019t name the client. But you may find it in future on our case studies site.<\/p>\n\n\n\n Gatsby is an open source framework (JAM stack) for building static sites and web applications.<\/p>\n\n\n\n It is based on react and has all the features of a typical static site generator. Here we talk only about the factors that differentiates it from the rest.<\/p>\n\n\n\n We\u2019ll do a dedicated post to Gatsby. Stay tuned.<\/p>\n\n\n\n We guess by now you have a clear picture of what static sites are and the perks, the tradeoffs. You also read about static site generators and an overview of Gatsby. We\u2019re sure this would have helped you in weighing if your project suits for static site. For more detailed and expert recommendations get in touch with Codewave Technologies. Thanks for reading. See you soon.<\/p>\n\n\n\n![\"gatsby](\"https:\/\/res.cloudinary.com\/codewavetechnologies\/image\/upload\/q_auto:eco\/v1554886905\/gatsby-cli-cover-min.png\")
<\/figure>\n\n\n\n\n
Our inspiration<\/strong> behind GatsbyJS<\/h2>\n\n\n\n
![\"\"\/](\"https:\/\/res.cloudinary.com\/codewavetechnologies\/image\/upload\/q_auto:eco\/v1554886905\/ezgif.com-optimize.gif\")
<\/figure>\n<\/div>\n\n\n\nWhy slow kills? How precious is 1 second exactly?<\/strong><\/h2>\n\n\n\n
\n
\n
![\"gatsby-for-fast-static-sites-mobile-page-speed-new-industry-benchmarks\"\/](\"https:\/\/res.cloudinary.com\/codewavetechnologies\/image\/upload\/q_auto:eco\/v1554886905\/mobile-page-speed-new-industry-benchmarks-01-21-min.png\")
<\/figure>\n\n\n\n\n
![\"jam](\"https:\/\/res.cloudinary.com\/codewavetechnologies\/image\/upload\/q_auto:eco\/v1554886905\/jamstack-min.jpg\")
<\/figure>\n\n\n\nGatsby js experience<\/h3>\n\n\n\n
\n
What are static sites ?<\/strong><\/h2>\n\n\n\n
What is a Static Site Generator?<\/strong><\/h2>\n\n\n\n
Dawn of Dynamic Sites and CMSs<\/h2>\n\n\n\n
Static Sites in a New Avtar<\/strong><\/h2>\n\n\n\n
Why build a static site? Isn\u2019t dynamic sites the need of the hour?<\/strong><\/h2>\n\n\n\n
Cost-effective<\/strong><\/h3>\n\n\n\n
Best Performance<\/strong> <\/h3>\n\n\n\n
Easy Deployment<\/strong><\/h3>\n\n\n\n
Security<\/strong> <\/h3>\n\n\n\n
Static Site Generators Explained<\/strong><\/h2>\n\n\n\n
Characteristics of Static Site Generators<\/strong><\/h2>\n\n\n\n
JAM Stack<\/strong><\/h3>\n\n\n\n
\n
Command Line Interface<\/strong><\/h3>\n\n\n\n
Local Development Server<\/strong><\/h3>\n\n\n\n
Support for File Formats & Extensible Plugins<\/strong><\/h3>\n\n\n\n
Build & Deploy Process<\/strong><\/h3>\n\n\n\n
Who Should consider Static Sites ?<\/strong><\/h2>\n\n\n\n
Drawbacks of Static Site Generators<\/strong><\/h2>\n\n\n\n
Gatsby.js \u2013 an Overview<\/strong><\/h2>\n\n\n\n
\n
What\u2019s next ?<\/strong><\/h2>\n\n\n\n