Welcome!

This is a sample website template created with Next.js , Chakra UI and DatoCMS

The purpose of this project is to provide an example of how to use DatoCMS to create a Next.js website with a blog and translate some blocks into components.

The Stack

This is a static site built with Next.js. The contents are provided by DatoCMS.

The graphical interface is created through the Chakra-Ui library, many layout blocks were taken from Chakra Templates.

The images contained come mainly from Unsplash.

What's on the plate?

How to organize pages and queries on a quite articulated content structure that includes: Pages, Blog Posts, Tags, Authors

Bonus on this site you will also find some examples of integration of tools and libraries, for example, to list some of them:

Finally, under the route /samples, you will find most of the blocks used to create the site, but in static form, therefore customizable, most of these blocks have been adapted starting from this link:

Blocks

As already mentioned above this topic includes a series of components that reflect the CMS models, here is a list of the main ones:

Quote

Code Blocks

This use Prism.js, you can choose the theme you prefer on the front end. From DatoCMS you can specify the code language.

Here is a sample of CSS code:

/*css sample*/
.grid {
  display: grid;
}

And here is an example of Javascript

//javascript sample
(function repeat() {
    eat();
    sleep();
    code();
    repeat();
})();

Call to Actions

there are two types of block to create an engagement call to acion, you can choose the layout on the CMS and the frontend will render the one you have choosen. Here is a sample with "vertical" layout:

Create Accessible Apps
With Speed!

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Get Started

Try Now

Media Blocks

Like Galleries, Video Players, Carousels, Cards

Some landing page blocks

As Featured Post, Last posts widget, Team, Testimonials, Stats etch other you can see on the

landing page sample

Contents

Within the content blocks, thanks to the Modular Blocks and Structured Text provided by DatoCMS, it is possible to include links and sections to internal records and models. For example, it is possible to create an Inline link to a Post, or to a Page, to include media gallery as above, and style the nodes like paragraphs, quotes, emphasis, lists:

And add the model that you want, for example as a custom link with a preview to an author.

Source and Deploy

You can find the source code of this template is on Github,

To start the project you have to fill the env file with your keys.

clone git@github.com:Lorezz/Next-DatoCMS-Template.git MY-PROJECT-NAME
cd MY-PROJECT-NAME
rm -fr *.git
mv sample-env.local .env.local #and fill your variables
yarn install
yarn dev

You can clone the DatoCMS instance from this link: Clone Dato Instance

You can publish directly this template with these links on Netlify or Vercel.

Or you can do all previous steps following the DatoCMS wizard with a click through the following link: Deploy DatoCMS Starter

Finally

Now you can take all of this, create your own version, and begin your journey for world domination.

Give this repository a star on Github if you like it.

The end.