DEV Community: Hugo Torzuoli

My free Jamstack tools choices

Hugo Torzuoli — Sat, 04 Jul 2020 00:56:10 +0000

In 2020, Jamstack is becoming very popular in the frontend world. If you don't know it, it allows developer to create static websites with modern tools such as React, Vue, Go etc.

In this post, I won't focus on what Jamstack is, there are plenty of articles about it. I will just present you my tools pick from static generator tool to CDN choice, including Headless CMS and data storage.

tl;dr > all steps I follow in my Jamstack projects

Static Generator

My static generator tool choice is Gatsby, the React Jamstack framework.

It comes with all the benefits of React ecosystem : lot of libraries, big community, easy styling.
On Gatsby official website, you will find a great documentation, with several tutorials, a showcase (almost 1000 websites submitted), lot of starters, and a plugin for any of your need.
Configuration is very easy, in a single file gatsby-config.js that includes all your plugin configurations and more.

An example of Gatsby Page that will generate a static HTML page.

// src/pages/index.js
const Index = () => (
  <Layout>
    <SEO title="My Gatsby website" />
    <h2>Hello World</h2>
  </Layout>
)

Headless CMS

You have to pick a Headless CMS to edit data of your website.
My personal choice is NetlifyCMS.

NetlifyCMS is an customizable, git-based, open source CMS.
The configuration of content type is very easy: a single YAML file where you will define every options of the CMS.

My basic NetlifyCMS configuration is:

backend:
  name: git-gateway
media_folder: "static/images"
public_folder: "/images"

All my data is stored in Git (GitHub as host). As said above, NetlifyCMS is git-based. That means that all data is pushed in repository.

I parse Rich Content with Remark.

CDN

As a Content Delivery Network, I use Netlify. It provides free host with powerful CDN, great Build & Deploy system, and, the most important, Identity.

I use Netlify Identity to connect to NetlifyCMS and push data with git.

With free plan, Netlify allows to create 5 Identity Users in each project.

Steps

Install Gatsby CLI

npm install -g gatsby-cli

Create new Gatsby project

gatsby new my-website

Install Netlify CMS dependencies

npm install --save netlify-cms-app gatsby-plugin-netlify-cms

Create config file in static/admin/config.yml

backend:
  name: git-gateway
media_folder: "static/images"
public_folder: "/images"

Add NetlifyCMS Gatsby plugin in gatsby-config.js

plugins: [`gatsby-plugin-netlify-cms`]

Add version control to your project : https://www.netlifycms.org/docs/gatsby/#push-to-github
Create your Netlify project : https://www.netlifycms.org/docs/gatsby/#add-your-repo-to-netlify
Enable Netlify Identity : https://www.netlifycms.org/docs/gatsby/#enable-identity-and-git-gateway

Once deployed, you will be able to connect with Identity and edit data at https://your-website-url/admin.

And you? What are your Jamstack tools?

Show us your Gridsome website

Hugo Torzuoli — Thu, 03 Oct 2019 17:17:59 +0000

Hey frontend developers!

This week I've launched Built with Gridsome, a showcase for Gridsome projects.

If you have a project, open or closed source, don't hesite to share it!

Add your project

Edit projects.json

Structure

{
  "id": 0,
  "name": "Name of your site",
  "description": "Optional description of your site",
  "url": "Public URL",
  "source": "Optional Public source",
  "tags": ["optional", "tag1", "tag2"]
}

Pull Request

Create a pull request of the repository and I will merge it.

Auto deploy

Thanks to the JAMstack, once merged, the site will rebuild & redeploy automatically on builtwithgridso.me.

Fast Static Site with Gridsome and Bulma in 5 minutes

Hugo Torzuoli — Wed, 11 Sep 2019 19:02:38 +0000

Gridsome is a Static Site Generator developed on the top of Vue.js. It builds very fast static sites thanks to the PRPL Pattern and the JAMstack.
If Gridsome is in beta version (0.6.9 now), it already has a lot of available plugins:

source plugin for fetching data from Headless CMS
CSS frameworks

At the moment, there is no plugin for using Bulma with Gridsome.

Let's see how to add Bulma styles to your Gridsome project!

Create Gridsome project

npx gridsome create gridsome-bulma

Add Buefy (Bulma for Vue)

Easiest way to add Bulma styles to your Gridsome project is to install Buefy as a dependency. Buefy is the component library for Vue.js projects based on Bulma.

npm install --save buefy

Edit src/main.js:

import DefaultLayout from '~/layouts/Default.vue'

// import Buefy
import Buefy from 'buefy'
import 'buefy/dist/buefy.css' 

export default function (Vue, { router, head, isClient }) {
  // add Buefy to Vue project with use global method
  Vue.use(Buefy)
  Vue.component('Layout', DefaultLayout)
}

Write a page

It's time to try it yourself!

Edit src/pages/Index.vue, replace all the content by:

<template>
  <Layout>
    <div class="container is-fluid">
      <section class="section">
        <div class="container has-text-centered">
          <h2 class="title">Bulma + Gridsome = 💚</h2>
          <div class="block">
            <a href="#">
              <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
            </a>
          </div>
          <div class="columns is-mobile">
            <div class="column is-4">
              <a href="#">
                <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
              </a>
            </div>
            <div class="column is-4">
              <a href="#">
                <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
              </a>
            </div>
            <div class="column is-4">
              <a href="#">
                <img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt />
              </a>
            </div>
          </div>
          <h4 class="title is-spaced is-4">Bulma is working with Gridsome!</h4>
        </div>
      </section>
    </div>
  </Layout>
</template>

Start develop server

npx gridsome develop

Access to http://localhost:8080/, and you should see this page:

This template has been generated with Bulma Builder, thanks to the team!

It was easy isn't it?

In 5 minutes you have been able to create a new Gridsome project, add Bulma style and get a first working page, great! 🔥

Have you already tried Gridsome + Bulma? Share your projects in comment section!

Is Angular dead ?

Hugo Torzuoli — Tue, 20 Nov 2018 13:50:29 +0000

Do you know State of Javascript? This is a famous survey about JavaScript language for JavaScript developers. This year, more than 20,000 JavaScript developers have participated to it.

It talks about JavaScript flavors, such as Ecmascript, TypeScript, Elm etc, mobile app tools, backend and frontend frameworks.

Let's take a look at this last point. I assume you know React, Vue and Angular.

We can easily say that React is the most loved frontend framework, more than 80% of developers used it and would use again or would like to learn it. It's about 70% for VueJS.

Take a look at Angular: only 33% in these categories and more than 60% would not use it again or are not interested.

Whereas version 7 of the framework has been release a month ago, it seems that the Google framework is dying.

Let's talk about reasons that could explain unpopularity of Angular framework in the comment section!