¿Qué es ButterCMS?

ButterCMS es un CMS sin interfaz principal basado en la API y basado en la nube que le permite crear rápidamente aplicaciones y sitios web basados ​​en CMS. Tiene un tablero fácil de usar para crear y administrar contenido. Viene con un motor de blog API-first preconstruido que está optimizado para SEO listo para usar, lo que le permite construir e integrar rápidamente un sistema de blog funcional para sitios web o aplicaciones. Se integra a la perfección en aplicaciones nuevas y existentes y es uno de los mejores CMS sin cabeza disponibles en el mercado.

Requisitos previos del tutorial

A continuación se detallan los principales requisitos a seguir junto con este tutorial:

• Conocimientos básicos de Next.js
• Un editor de código como Sublime o Visual Studio Code
• Fuente Awesome Icons
• A MantequillaCMS cuenta de prueba.

Configuración del entorno de desarrollo

Antes de comenzar, abra una terminal y navegue hasta donde desea crear/almacenar y ejecute este comando a continuación para ejecutar create-next-app para iniciar el proyecto.

$ npx create-next-app my-blog

Luego, aparecerá un mensaje que le solicitará que confirme algunas dependencias adicionales. Después de eso, el comando anterior creará automáticamente una estructura de carpetas para nuestro proyecto.

El siguiente paso es configurar ButterCMS en nuestro proyecto Next.js con ButterCMS SDK usando el siguiente comando:

$ npm install butter --save
# OR
$ yarn add buttercms

Después de eso, crea una cuenta de Butter. Haga clic en este liga para crear tu cuenta. Luego, para conectar ButterCMS a su aplicación, deberá guardar la clave del token READ API como una variable de entorno. Cree un archivo .env en la raíz de su directorio de proyectos y agregue su token API ButterCMS como una variable de entorno:

NEXT_PUBLIC_API_KEY=YOUR_API_KEY

Usted puede obtener su LEER API ficha de su panel de configuración.

Configuración de ButterCMS

Después de crear una cuenta de ButterCMS, inicie sesión en su tablero en el MantequillaCMS sitio web. Una de las características más impresionantes de ButterCMS es que viene con un motor de blog preconstruido que se integra fácilmente con sus sitios web o aplicaciones utilizando una API bien estructurada. Blog Engine tiene una configuración de contenido intuitiva diseñada para crear publicaciones de blog, por lo que no se requiere configuración de su parte; es un enfoque plug-and-play. Para configurar un blog, vaya a su tablero y haga clic en Publicaciones de blog en la barra lateral izquierda:

Una vez que se abra la nueva página, haga clic en el Nueva publicación en la esquina superior derecha del tablero y agregue la información de su publicación de blog en la página que se abre.

El motor de blog ButterCMS viene con un WYSIWYG editor que le permite crear fácilmente contenido para su sitio de blog. Cuenta con varias funciones que le permiten insertar archivos multimedia como videos e imágenes, proporciona un editor de texto fácil de usar e incluye una sección para configurar todos los metadatos de su blog.

En la página de edición de blog, ingrese el título de su publicación de blog, agregue contenido usando el editor de texto e incluya una imagen de portada, información del autor, etiquetas relevantes y datos importantes de SEO.

En la imagen de arriba, el motor del blog incluye una sección que le permite agregar categorías y etiquetas, el resumen del blog y una sección para el SEO del blog. Puede seguir los pasos anteriores para agregar más publicaciones de blog. Después de insertar todos los detalles de su blog, haga clic en el Publicar en la esquina superior derecha de su tablero para publicar su publicación.

Integración y representación de datos de la API de ButterCMS

No olvide que para conectar su ButterCMS a su aplicación, debe guardar su Leer API clave como una variable de entorno. Una vez que haya terminado de preparar su contenido en ButterCMS, abra su editor de código y cree una carpeta de componentes en el src carpeta de su próximo proyecto, luego cree una Pie de página componente y Disposición componente.

Abra el componente Footer.js y agregue el siguiente código:

 const Footer = () => { return ( <> <hr/> <div className="footer-container"> <p> (c) {new Date().getFullYear()} David Adeneye </p> <div className="social_icons"> <a href="https://twitter.com/davidadeneye" aria-label="Twitter" target="_blank" > <i className="fa-brands fa-twitter"></i> </a> <a href="https://github.com/daacode" aria-label="GitHub" target="_blank" > <i className="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/david-adeneye-490027188/" aria-label="LinkedIn" target="_blank" > <i className="fa-brands fa-linkedin"></i> </a> </div> </div> </> ) } export default Footer;

El código anterior agregará la sección de pie de página de la página, que se mostrará en todas las páginas del blog.

En este artículo, utilizaremos los íconos de Font Awesome. Para usar Font Awesome, puede instalarlo en su proyecto o usar su CDN. Puede agregar el enlace CDN a su _document.js archivo como este:

import { Html, Head, Main, NextScript } from 'next/document' export default function Document() { return ( <Html lang="en"> <Head> <meta charSet="utf-8" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossOrigin="anonymous" referrerPolicy="no-referrer" /> </Head> <body> <Main /> <NextScript /> </body> </Html> )
}

Luego cree el componente Diseño y agregue el componente Pie de página a su página envolviendo el contenido de su página dentro de él. Como resultado, el componente de diseño aceptará elementos secundarios como accesorios, lo que le permitirá acceder al contenido de sus páginas de Next.js.

Abra la Diseño.js componente y agregue el siguiente código a continuación:

import Footer from './Footer'; const Layout = ({ children }) => { return ( <> <main>{children}</main> <Footer /> </> )
} export default Layout;

Ahora puede integrar el componente Diseño en sus páginas envolviendo el contenido de la página en él.

Abierto _app.js archivo para agregar el siguiente código:

 import '@/styles/globals.css';
import Layout from '../components/Layout'; export default function App({ Component, pageProps }) { return ( <Layout> <Component {...pageProps} /> </Layout> );
}

Entonces abre tu index.js Archivo y agregue el código siguiente:

import React, { useEffect, useState } from "react"; import Link from "next/link"; const read_token = process.env.NEXT_PUBLIC_API_KEY; export default function Blog({ posts }) { console.log(posts); return ( <> <div className="nav-container"> <div className="logo"> <Link href="/"> David Adeneye </Link> </div> <Link href="#" className="blog-menu"> My Blog </Link> <a href="" className="cta-btn">Subscribe</a> </div> <div className="blogpost-container"> {posts.data.map((post, index) => ( <div className="blogpost-box" key={index}> <div className="blogpost-img"> <img src={post.featured_image} alt="Blog" width={300} height={300}/> </div> <div className="blogpost-text"> <span className="blogpost-tag">{post.tags[0].name}</span> <a href={`/posts/${post.slug}`} className="blogpost-title">{post.title}</a> <p>{post.summary}</p> </div> <div className="blogpost-footer"> <div> <img src={post.author.profile_image} alt="avatar" /> <p className="blogpost-name">{ post.author.first_name + " " + post.author.last_name }</p> </div> <Link href={`/posts/${post.slug}`} className="blogpost-link"> Read More </Link> </div> </div> ))} </div> </> );
} export async function getStaticProps() { const res = await fetch(`https://api.buttercms.com/v2/posts?auth_token=${read_token}`) const posts = await res.json() return { props: { posts, }, } }

El código anterior obtiene los datos de publicación de la API de ButterCMS y los muestra en la página.

A continuación, debemos crear una página de blog individual a la que se vincule cada publicación de blog mediante rutas dinámicas. Next.js le permite generar páginas con rutas que dependen de datos externos. Para crear rutas dinámicas para las publicaciones del blog, cree una carpeta llamada mensajes dentro de src / páginas carpeta. Dentro de la carpeta actual, cree un nuevo archivo llamado [identificación].js y agregue el siguiente código:

import React, { useEffect, useState } from "react"; const read_token = process.env.NEXT_PUBLIC_API_KEY; export default function Post({ post }) { console.log(post.data.title) return( <> <div className="blog-container"> <span className="blog-goBack"><a href="/es/blog">Go back</a></span> <div className="blog-wrap"> <header> <p className="blog-date">Published {post.data.created}</p> <h1>{post.data.title}</h1> <div className="blog-tag"> <div></div> </div> </header> <img src={post.data.featured_image} alt="cover" /> <div className="blog-content" dangerouslySetInnerHTML={{__html: post.data.body }}></div> </div> </div> </> )
} // This function gets called at build time
export async function getStaticPaths() { // Call an external API endpoint to get posts const res = await fetch(`https://api.buttercms.com/v2/posts?auth_token=${read_token}`) const posts = await res.json() // Get the paths we want to pre-render based on posts const paths = posts.data.map((post) => ({ params: { id: post.slug }, })) // We'll pre-render only these paths at build time. // { fallback: false } means other routes should 404. return { paths, fallback: false } } // This also gets called at build time
export async function getStaticProps({ params }) { // params contains the post `id`. // If the route is like /posts/1, then params.id is 1 const res = await fetch(`https://api.buttercms.com/v2/posts/${params.id}?auth_token=${read_token}`) const post = await res.json() // Pass post data to the page via props return { props: { post } } }

En el código anterior, cada página se generará en función de la id de parámetros: post.slug.

Nota: No olvide copiar el archivo style/global.css del Repo de Github y agréguelo a su propio archivo de proyecto si está siguiendo el tutorial.

Luego ejecute el siguiente comando para iniciar su aplicación en modo desarrollador:

La página de tu blog se verá así:

Y cada página de publicación de blog se verá así:

Puede obtener el código base para este tutorial aquí en Github.

Conclusión

En este artículo, hemos explicado cómo montar fácilmente un sitio web de blog o integrar un motor de blog en su sitio web utilizando Next.js y el motor de blog ButterCMS. ButterCMS es un gran CMS sin cabeza para crear blogs; le ahorrará el dolor de cabeza y el tiempo de crear un blog manualmente. Puede configurar fácilmente un blog con cualquier lenguaje de programación o marco de trabajo de su elección con ButterCMS.

Para obtener más información sobre ButterCMS, puede consultar ButterCMS documentación.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• PlatoData.Network Vertical Generativo Ai. Empodérate. Accede Aquí.
• PlatoAiStream. Inteligencia Web3. Conocimiento amplificado. Accede Aquí.
• PlatoESG. Automoción / vehículos eléctricos, Carbón, tecnología limpia, Energía, Ambiente, Solar, Gestión de residuos. Accede Aquí.
• Desplazamientos de bloque. Modernización de la propiedad de compensaciones ambientales. Accede Aquí.
• Fuente: https://stackabuse.com/building-a-blog-with-next-js-and-buttercms/