{"id":372514,"date":"2024-05-21T05:14:20","date_gmt":"2024-05-21T05:14:20","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=372514"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-21T05:14:20","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=372514","title":{"rendered":"Gatsby and its Greatness<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

I\u2019m Aleksei Volkov, a front-end engineer at\u00a0Luxoft<\/a>. Our clients often present new requirements, but our focus remains on cost savings. A single application can replace days of bureaucracy, and a single line of code can carry a hefty price tag.<\/p>\n

As part of my role, I prioritize choosing the right tools. To tackle server-related expenses, AWS bills, and Google FCP metrics, I\u2019ve delved into serverless technologies. My preferred way to showcase achievements? Blogging.<\/p>\n\n

The Evolution of\u00a0Blogging<\/h4>\n

In the internet\u2019s early days, blogging was straightforward. A server with PHP and MySQL allowed you to share your thoughts globally. Even FTP access with an\u00a0index.html<\/em>\u00a0file sufficed.<\/p>\n

However, as the web evolved, so did blogging requirements. Non-programmers needed user-friendly web interfaces, faster loading times, and seamless daily publishing. Platforms like Reddit, WordPress, and Tumblr emerged, but they faced a common issue: website ownership.<\/p>\n

\"LinkedIn<\/p>\n
LinkedIn load up to 30 MB of JavaScript<\/figcaption><\/div>\n<\/figure>\n

Today, hosting a basic blog still requires purchasing MySQL and PHP hosting. Notably, popular personal sites like\u00a0LinkedIn load up to 30 MB of JavaScript<\/a>. But is there a simpler, nearly free way? Can we publish weekly serving just an HTML file and using a WYSIWYG editor? ?<\/p>\n\n

A New Way of Storing and Distributing Content<\/h4>\n

Sanity IO<\/strong><\/a><\/p>\n

\"Sanity<\/p>\n
Sanity Editor<\/figcaption><\/div>\n<\/figure>\n

Sanity IO<\/strong>\u00a0is a\u00a0headless CMS<\/strong>\u00a0that empowers you to create and host content exclusively under your control. Here\u2019s what makes it stand out:<\/p>\n

    \n
  1. \n

    Customizable WYSIWYG<\/strong>: The WYSIWYG (What You See Is What You Get) editor is fully configurable. You decide how your content appears to your audience.<\/p>\n<\/li>\n

  2. \n

    Portable Text<\/strong>: A novel way of distributing content, similar to old-school HTML. You create content blocks in the editor, and then these blocks can be rendered differently by various frontends based on their values and parameters.<\/p>\n<\/li>\n

  3. \n

    Export and Import<\/strong>: Seamlessly move your content in and out of Sanity IO.<\/p>\n<\/li>\n<\/ol>\n

    In essence, Sanity IO liberates content creators, developers, and users by providing a flexible and tailored content management experience.<\/p>\n

    GatsbyJS<\/strong><\/a><\/p>\n

    \"Gatsby<\/p>\n
    Gatsby deploy<\/figcaption><\/div>\n<\/figure>\n

    GatsbyJS<\/strong>\u00a0is a powerful\u00a0static site generator<\/strong>\u00a0that streamlines web development. Here\u2019s why it\u2019s a game-changer for bloggers and writers:<\/p>\n

      \n
    1. \n

      Static HTML\/CSS\/JS Bundle<\/strong>: Gatsby fetches data, styles, and logic during the build process and compiles them into static files. Your blog becomes a collection of lightweight, pre-rendered pages, reducing server load and enhancing loading speed for readers.<\/p>\n<\/li>\n

    2. \n

      Magic of Build Time<\/strong>: Similar to NextJS or server-side rendering techniques, Gatsby performs its magic during the build phase. When a user visits your site, their browser reads only the HTML and CSS\u200a\u2014\u200ano server-side processing required.<\/p>\n<\/li>\n

    3. \n

      Perfect for Static Sites<\/strong>: Whether you\u2019re a blogger, writer, or running a content-focused site, Gatsby is an ideal choice. Plus, it plays well with GitHub Pages.<\/p>\n<\/li>\n<\/ol>\n\n

      Installation and Configuration<\/h4>\n

      Sanity IO<\/strong><\/p>\n

        \n
      1. \n

        Sign Up<\/strong>: Create an account on Sanity IO.<\/p>\n<\/li>\n

      2. \n

        Project Creation<\/strong>: Set up a new project.<\/p>\n<\/li>\n

      3. \n

        Schema Configuration<\/strong>: Define your content schema.<\/p>\n<\/li>\n

      4. \n

        Start Creating<\/strong>: With everything set up, dive into content creation right away!<\/p>\n<\/li>\n<\/ol>\n

        To get started, visit the\u00a0Sanity documentation<\/a>\u00a0and install the command-line interface and Sanity Studio.<\/p>\n

        npm install - global sanity@latest<\/code><\/pre>\n
        Additionally, consider installing\u00a0@sanity\/code-input<\/em><\/a>\u00a0for pasting code examples.<\/p>\n
        So your\u00a0sanity.config.ts<\/em>\u00a0would be like next example. Rest plugins are not needed for now.<\/p>\n
        \/\/ sanity.config.ts import {structureTool} from 'sanity\/structure' import {schemaTypes} from '.\/schemaTypes' import {codeInput} from '@sanity\/code-input'  export default {   name: 'default',   title: 'My Sanity Project',    projectId: 'odwqzjob',   dataset: 'production',    plugins: [structureTool(), codeInput()],    schema: {     types: schemaTypes,   }, }<\/code><\/pre>\n
        Hit\u00a0npm run deploy<\/em>\u00a0to get an online Editor for your content (local writing is also possible). And finally\u00a0npm run deploy-graphql<\/em>\u00a0to publish api for frontend part.<\/p>\n
        GatsbyJS<\/strong><\/p>\n
        GatsbyJS requires a bit more setup. You\u2019ll need to install the Gatsby CLI, create a new site, and then configure your sources and plugins. However, once you\u2019ve done that, you can start building your site.<\/p>\n
        Start with\u00a0documentation<\/a>\u00a0and install command line interface for GatsbyJS. For minimal start it\u2019s needed to configure main page, config file and single blog post file.<\/p>\n
        npm init gatsby cd my-gatsby-site npm run develop<\/code><\/pre>\n
        GatsbyJS uses GraphQL to fetch data, so use it to get sanity posts. Do the same for single post, but also get _rawBody field which represents Portable Text. It can be rendered with official plugin. Then, the only task is left is making post pages on build time\u200a\u2014\u200aso configure gatsby-node.ts.<\/p>\n
        \/\/ index.tsx import { HeadFC, PageProps, graphql } from \"gatsby\"; import React from \"react\";  function IndexPage({ data }: PageProps<Queries.ArticlesQuery>) {   const articles = data.allSanityPost.nodes;   return (     <div>       <h1>Home Page<\/h1>       <ul>         {articles.map((article) => (           <li key={article.id}>             <a href={article.slug?.current}>{article.title}<\/a> (             {article.publishedAt})           <\/li>         ))}       <\/ul>     <\/div>   ); }  export default IndexPage;  export const Head: HeadFC = () => <title>Home Page<\/title>;  export const articlesQuery = graphql`   query Articles {     allSanityPost(sort: { publishedAt: DESC }, limit: 100) {       nodes {         slug {           current         }         title         id         publishedAt(formatString: \"DD.MM.YYYY\")       }     }   } `;<\/code><\/pre>\n
        \/\/ Post.tsx import * as React from \"react\"; import { graphql, Link, type HeadProps, HeadFC } from \"gatsby\"; import { PortableText } from \"@portabletext\/react\"; import type { PortableTextBlock } from \"@portabletext\/types\";  import portableTextComponents from \"..\/utils\/portableText\";  function Post({ data }: { data: Queries.PostQuery }) {   const post = data?.sanityPost;    if (post == null) {     return (       <p>         Post not found. Go <Link to=\"\/\">to home page<\/Link>.       <\/p>     );   }    return (     <article>       <header>         <h1>{post.title}<\/h1>         <p>           <time dateTime={post.publishedAt}>{post.publishedAt}<\/time>         <\/p>       <\/header>       <main>         {post._rawBody != null && (           <PortableText             value={post._rawBody as unknown as PortableTextBlock[]}             components={portableTextComponents}           \/>         )}       <\/main>     <\/article>   ); }  export default Post;  export const Head = ({ data }: HeadProps<Queries.PostQuery>) => {   const postTitle = data.sanityPost?.title ?? \"\";    return <title>{postTitle}<\/title>; };  export const PostQuery = graphql`   query Post($slug: String!) {     sanityPost(slug: { current: { eq: $slug } }) {       id       title       publishedAt(formatString: \"DD.MM.YYYY\")       _rawBody     }   } `;<\/code><\/pre>\n
        \/\/ gatsby-node.ts import { type CreatePagesArgs, type GatsbyNode } from \"gatsby\"; import path from \"path\";  async function turnPostsIntoPages({   graphql,   actions, }: CreatePagesArgs): Promise<void> {   \/\/ 1. Get a template for this page   const postTemplate = path.resolve(\".\/src\/templates\/Post.tsx\");   \/\/ 2. Query all posts   const {     data,   }: {     data?: {       allSanityPost: {         nodes;       };     };   } = await graphql(`     query AllPosts {       allSanityPost(sort: { publishedAt: DESC }, limit: 100) {         nodes {           title           slug {             current           }         }       }     }   `);    const posts = data?.allSanityPost?.nodes ?? [];   \/\/ 3. Loop over each post and create a page for that post   posts.forEach(function createPostPage(post) {     console.log(\"? Creating page for Article:\", post.title);     actions.createPage({       path: post.slug.current,       component: postTemplate,       context: {         slug: post.slug.current,       },     });   }); }  export const createPages: GatsbyNode[\"createPages\"] =   async function createPages(params) {     Promise.all([turnPostsIntoPages(params)])       .then(function logSuccess() {         console.log(\"\u2705 Finished creating pages.\");       })       .catch(function logError(error) {         console.error(\"\u274c Failed to create pages:\", error);       });   };<\/code><\/pre>\n
        Done! You have Sanity Editor in the Internet, now you can publish Gatsby part in GitHub pages of in\u00a0Netlify<\/a>.<\/p>\n\n
        Conclusion<\/h4>\n
        When comparing traditional blogging to static blogging, several key differences emerge.<\/p>\n
          \n
        1. \n
          Traditional Blogging<\/strong>:<\/p>\n<\/li>\n<\/ol>\n