WordPress es un popular sistema de gestión de contenidos que impulsa millones de sitios web en Internet. Ofrece una interfaz fácil de usar y una amplia gama de opciones de personalización.
Crear sitios WordPress puede llevar mucho tiempo, sobre todo si se realizan manualmente tareas repetitivas. Kinsta ha simplificado y agilizado este proceso con el panel de control MyKinsta, que también proporciona un dominio temporal para pruebas inmediatas. Sin embargo, la introducción de la API de Kinsta significa que los desarrolladores pueden mejorar el flujo de trabajo de creación de sitios y desarrollar interfaces personalizadas para satisfacer necesidades específicas.
Este tutorial profundiza en el aprovechamiento del poder de la API de Kinsta para crear sitios de WordPress. Y utilizamos la biblioteca React JavaScript para demostrar cómo crear una aplicación que cree sitios de WordPress sin MyKinsta.
Aquí tienes una demostración en tiempo real de la aplicación de creación de sitios.
Comprender la API de Kinsta
La API de Kinsta es una potente herramienta que te permite interactuar con la plataforma de Alojamiento Administrado de WordPress de Kinsta mediante programación. Puede ayudar a automatizar varias tareas relacionadas con los servicios proporcionados por Kinsta, incluyendo la creación de sitios, la recuperación de información del sitio, la obtención del estado de un sitio, y mucho más.
Esta API simplifica la creación de sitios de WordPress, lo que la convierte en una herramienta inestimable para los desarrolladores. Para utilizar la API de Kinsta, debes tener una cuenta con al menos un sitio, aplicación o base de datos de WordPress en MyKinsta. También necesitas generar una clave API para autenticarte y acceder a tu cuenta a través de la API.
Para generar una clave API:
- Ve a tu panel de MyKinsta.
- Ve a la página Claves API (Tu nombre > Configuración de la empresa > Claves API).
- Haz clic en Crear Clave API.
- Elige una fecha de caducidad o establece una fecha de inicio personalizada y un número de horas para que caduque la clave.
- Dale a la clave un nombre único.
- Haz clic en Generar.
Después de crear una clave API, cópiala y guárdala en algún lugar seguro (recomendamos utilizar un gestor de contraseñas), ya que es la única vez que se revela dentro de MyKinsta. Puedes generar múltiples claves API — están listadas en la página Claves API. Si necesitas revocar una clave API, haz clic en Revocar junto a la que quieras revocar.
Crear un Sitio de WordPress con la API de Kinsta
Ahora que tu clave API está lista, vamos a crear un sitio de WordPress con la API de Kinsta. Para ello, utiliza el endpoint /sites que espera un payload que contenga los siguientes datos:
- company: Este parámetro espera un ID de empresa único que se puede encontrar en la configuración de MyKinsta. Ayuda a identificar la empresa asociada al sitio de WordPress.
- display_name: El nombre para mostrar, que es el mismo que el nombre del sitio en MyKinsta, te ayuda a identificar tu sitio. Sólo se utiliza en MyKinsta. Se utiliza para el dominio temporal de tu sitio de WordPress y WordPress admin (para la API de Kinsta, es display_name .kinsta.cloud y display_name.kinsta.cloud/wp-admin).
- region: Este parámetro te permite elegir entre 37 la ubicación del centro de datos para tu sitio web. Seleccionar la región más cercana a tu público objetivo puede ayudar a mejorar el rendimiento y la velocidad del sitio web (Consulta la lista de regiones disponibles).
- install_mode: Este parámetro determina el tipo de instalación de WordPress. El valor por defecto es «plain», que configura un sitio de WordPress normal. Otras opciones incluyen «new» para una instalación nueva y modos adicionales en función de requisitos específicos.
- is_subdomain_multisite: Este parámetro booleano (verdadero/falso) especifica si el sitio WordPress debe configurarse como un multisitio utilizando subdominios.
- admin_email: Este parámetro espera la dirección de correo electrónico del administrador de WordPress. Se utiliza con fines administrativos y para recibir notificaciones importantes.
- admin_password: Este parámetro se utiliza para establecer la contraseña de la cuenta de usuario admin de WordPress. Elige una contraseña segura para proteger tu sitio.
- admin_user: Este parámetro establece el nombre de usuario para la cuenta de usuario admin de WordPress. Se utiliza para acceder al panel de control de WordPress y gestionar el sitio.
- is_multisite: Similar a
is_subdomain_multisite, este parámetro booleano determina si el sitio WordPress debe configurarse como multisitio. - site_title: Este parámetro representa el título de tu sitio WordPress. Aparece en la parte superior de todas las páginas del sitio. Siempre puedes cambiarlo más adelante.
- woocommerce: Este parámetro booleano indica si quieres instalar el plugin WooCommerce durante la creación del sitio de WordPress.
- wordpressseo: Este parámetro controla la instalación del plugin Yoast SEO durante la creación del sitio.
- wp_idioma: Este parámetro espera un valor de cadena que represente el idioma/localización de tu sitio de WordPress (descubre tu localización de WordPress aquí).
Ahora que entiendes cada parámetro. Este es un ejemplo del aspecto de la carga útil que envías a la API de Kinsta:
{
"company": "54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"display_name": "First site",
"region": "us-central1",
"install_mode": "new",
"is_subdomain_multisite": false,
"admin_email": "[email protected]",
"admin_password": "vJnFnN-~v)PxF[6k",
"admin_user": "admin",
"is_multisite": false,
"site_title": "My First Site",
"woocommerce": false,
"wordpressseo": false,
"wp_language": "en_US"
}Utilizando el modo que prefieras, puedes enviar una solicitud POST a la API de Kinsta. Para este ejemplo, vamos a utilizar la API JavaScript Fetch:
const createWPSite = async () => {
const resp = await fetch(
`https://api.kinsta.com/v2/sites`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer <YOUR_KEY_HERE>'
},
body: JSON.stringify({
company: '54fb80af-576c-4fdc-ba4f-b596c83f15a1',
display_name: 'First site',
region: 'us-central1',
install_mode: 'new',
is_subdomain_multisite: false,
admin_email: '[email protected]',
admin_password: 'vJnFnN-~v)PxF[6k',
admin_user: 'admin',
is_multisite: false,
site_title: 'My First Site',
woocommerce: false,
wordpressseo: false,
wp_language: 'en_US'
})
}
);
const data = await resp.json();
console.log(data);
}El código anterior utiliza la API JavaScript Fetch para enviar una solicitud POST a la API de Kinsta para crear un sitio WordPress. La función createWPSite se encarga del proceso. Dentro de la función, se realiza una solicitud Fetch a la API de Kinsta /sites endpoint with the necessary data.
La respuesta se analiza como JSON utilizando resp.json(), y el resultado se registra en la consola. Asegúrate de sustituir <YOUR_KEY_HERE> por tu clave API, ajusta los valores de la carga útil y llama a createWPSite() para crear un sitio WordPress utilizando la API de Kinsta.
Este es el aspecto de la respuesta
{
"operation_id": "sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"message": "Adding site in progress",
"status": 202
}Monitorización de Operaciones con la API de Kinsta
Una vez que inicias la creación de un sitio con la API de Kinsta, es importante hacer un seguimiento del progreso de la operación. Esto puede hacerse mediante programación, sin tener que consultar MyKinsta con el endpoint /operations de la API Kinsta.
Para realizar el seguimiento de las operaciones, utiliza el operation_id obtenido al iniciar una operación, como la creación de un sitio WordPress. Pasa el operation_id como parámetro al endpoint /operations.
const operationId = 'YOUR_operation_id_PARAMETER';
const resp = await fetch(
`https://api.kinsta.com/v2/operations/${operationId}`,
{
method: 'GET',
headers: {
Authorization: 'Bearer <YOUR_TOKEN_HERE>'
}
}
);
const data = await resp.json();
console.log(data);El código anterior recupera información sobre una operación enviando una solicitud GET al endpoint /operations con el operation_id apropiado. La solicitud incluye la clave API para la autenticación.
Cuando se reciben los datos de respuesta de la API, se registran en la consola. La respuesta proporciona información valiosa sobre el estado y el progreso de la operación. Por ejemplo, si la creación del sitio de WordPress aún está en curso, la respuesta tendrá el siguiente aspecto:
{
"status": 202,
"message": "Operation in progress",
"data": null
}Del mismo modo, una vez que la operación se ha completado con éxito, ésta es la respuesta
{
"message": "Successfully finished request",
"status": 200,
"data": null
}Llegados a este punto, puedes crear mediante programación un sitio de WordPress y comprobar su funcionamiento utilizando la API de Kinsta. Para mejorar esta funcionalidad, vayamos un paso más allá y desarrollemos una interfaz de usuario (IU) personalizada que pueda gestionar estas operaciones. De esta forma, incluso las personas sin conocimientos técnicos pueden aprovechar las capacidades de la API.
Crear una Aplicación React para Crear un Sitio de WordPress con la API Kinsta
Para empezar, configura una estructura de proyecto React e instala las dependencias necesarias. Integra la API Kinsta en tu aplicación React con la API Fetch u otras bibliotecas de peticiones HTTP, como Axios.
Requisitos Previos
Para seguir este proyecto, es aconsejable tener conocimientos básicos de HTML, CSS y JavaScript y cierta familiaridad con React. El objetivo principal de este proyecto es demostrar la utilización de la API de Kinsta, por lo que este artículo no profundiza en los detalles de la creación o el estilo de la interfaz de usuario.
Cómo Empezar
Para agilizar el proceso de configuración del proyecto, te hemos preparado un proyecto inicial. Siga estos pasos para empezar:
1. Crea un repositorio Git utilizando esta plantilla en GitHub. Selecciona Utilizar esta plantilla > Crear un nuevo repositorio para copiar el código de inicio en un nuevo repositorio dentro de tu cuenta de GitHub, y asegúrate de marcar la casilla para incluir todas las ramas.
2. Sube el repositorio a tu ordenador local y cambia a la carpeta archivos de inicio utilizando el siguiente comando:
git checkout starter-files3. Instala las dependencias necesarias ejecutando el comando npm install. Una vez completada la instalación, puedes iniciar el proyecto en tu ordenador local con npm run start. Esto abre el proyecto en http://localhost:3000/.
Comprender los Archivos del Proyecto
Dentro de la carpeta src de este proyecto hay dos subcarpetas principales: components y pages. La carpeta components contiene componentes reutilizables, como la cabecera y el pie de página, utilizados en las páginas Home y Details.
En este proyecto, su objetivo principal es implementar la lógica en las páginas Home y Details, ya que el estilo y el enrutamiento ya están hechos.
La página Home tiene un formulario que recoge varios campos de datos que se pasan a la API de Kinsta. La respuesta de esta página se almacena en el localStorage (puedes explorar métodos alternativos para almacenar el ID de la operación, que es crucial para comprobar el estado de la operación).
En la página Details, el ID de la operación se recupera de loaclStoage y se pasa al endpoint /operation de la API Kinsta como parámetro para comprobar el estado de la operación. En este proyecto, incluimos un botón que permite a los usuarios comprobar el estado de forma intermitente (puedes utilizar el método setInterval para automatizar este proceso).
Interactuar con la API de Kinsta en React
Con la interfaz de usuario (UI) ahora en su lugar, tu siguiente paso es gestionar el envío del formulario en la página Home y enviar una solicitud POST al endpoint /sites de la API Kinsta. Esta solicitud incluye los datos recogidos del formulario como payload, lo que nos permite crear un sitio WordPress.
Para interactuar con la API Kinsta, necesitas el ID de tu empresa y la clave API. Una vez que tengas estas credenciales, es mejor almacenarlas de forma segura como variables de entorno en tu aplicación React.
Para configurar las variables de entorno, crea un archivo .env en la carpeta root de tu proyecto. Dentro de este archivo, añade las siguientes líneas:
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Para acceder a estas variables de entorno dentro de tu proyecto, puedes utilizar la sintaxis process.env.THE_VARIABLE. Por ejemplo, para acceder a la REACT_APP_KINSTA_COMPANY_ID, utilizarías process.env.REACT_APP_KINSTA_COMPANY_ID.
Recuperar Datos del Formulario en React
En el archivo Home.jsx hay un formulario. Necesitas añadir lógica al formulario para obtener datos y validarlos cuando se envíen. Para recuperar los datos del formulario en tu aplicación React, utiliza el enfoque de componentes controlados de React junto con el hook useState. Este enfoque te permite crear un estado para cada campo del formulario y actualizarlo a medida que el usuario introduce los datos.
En primer lugar, importa el hook useState en la parte superior de tu archivo:
import React, { useState } from 'react';A continuación, configura una variable de estado para cada campo de formulario dentro de tu componente funcional. Por ejemplo, si tienes un campo de entrada para el «Título del sitio», puedes crear una variable de estado llamada siteTitle:
const [siteTitle, setSiteTitle] = useState('');Aquí, siteTitle es la variable de estado que contiene el valor del campo de entrada «Título del sitio», y setSiteTitle es la función actualizadora de estado correspondiente.
Para vincular los campos del formulario a sus respectivos valores de estado, añade los atributos value y onChange a cada elemento de entrada. Por ejemplo, el campo de entrada «Título del sitio»:
<input
type="text"
className="form-control"
value={siteTitle}
onChange={(event) => setSiteTitle(event.target.value)}
/>En este ejemplo, el atributo value se establece en la variable de estado siteTitle, lo que garantiza que el campo de entrada muestre el valor actual de siteTitle. El controlador de eventos onChange se establece en la función setSiteTitle, que actualiza el estado siteTitle con el nuevo valor cada vez que el usuario escribe en el campo de entrada.
Siguiendo este enfoque para cada campo de formulario, puedes crear las variables de estado necesarias y actualizarlas a medida que el usuario interactúa con el formulario. Esto te permite acceder fácilmente a los valores introducidos cuando se envía el formulario y realizar otras acciones o validaciones con los datos del formulario.
Cuando hagas esto para todos los campos del formulario, tu archivo Home.jsx tendrá el siguiente aspecto:
import Header from '../components/Header';
import Footer from '../components/Footer';
const Home = () => {
return (
<div className="app-container">
<Header />
<div className="container">
<div className="container-title">
<h1> className="title">Site Builder with Kinsta API</h1>
<p> className="description">
This is a React app that uses the Kinsta API to create WordPress sites, without needing to access MyKinsta dashboard.
</p>
</div>
<form>
<div className="form-container">
<div className="input-div">
<label>Display name</label>
<span>Helps you identify your site. Only used in MyKinsta and temporary domain</span>
<input type="text" className="form-control" />
<span> className='error-message'>Ensure this has more than 4 characters</span>
</div>
<div className="input-div">
<label> WordPress site title</label>
<span>Appears across the top of every page of the site. You can always change it later.</span>
<input type="text" className="form-control" />
<span> className='error-message'>Ensure this has more than 4 characters</span>
</div>
<div className="input-flex">
<div className="input-div">
<label>WordPress admin username</label>
<input type="text" className="form-control" />
</div>
<div className="input-div">
<label>WordPress admin email</label>
<input type="email" className="form-control" />
<span> className='error-message'>Ensure this is a valid email</span>
</div>
</div>
<div className="input-div">
<label>WordPress admin password</label>
<span>Ensure you remember this password as it is what you'll use to log into WP-admin</span>
<input type="text" className="form-control" />
</div>
<div className="input-div">
<label>Data center location</label>
<span>Allows you to place your website in a geographical location closest to your visitors.</span>
<select className="form-control">
<option> value=""></option>
{/* add options */}
</select>
</div>
<div className="checkbox-flex">
<div className="checkbox-input">
<input type="checkbox" />
<label>Install WooCommerce</label>
</div>
<div className="checkbox-input">
<input type="checkbox" />
<label>Install Yoast SEO</label>
</div>
</div>
<button> className='btn'>Create Site</button>
</div>
</form>
</div>
<Footer />
</div >
)
}
export default Home;Implementación de la Validación de Campos de Formulario con el Hook useRef
Para implementar la validación de campos de formulario en React, podemos seguir estos pasos. Vamos a centrarnos en implementar la validación de los campos «Nombre para mostrar» y «Correo electrónico del administrador de WordPress».
En primer lugar, tenemos que crear referencias utilizando el hook useRef para controlar la visualización de los mensajes de error. Importa el hook useRef y crea las referencias necesarias para cada campo:
import { useRef } from 'react';
const displayNameRef = useRef(null);
const wpEmailRef = useRef(null);A continuación, adjuntamos las refs a los elementos de mensaje de error correspondientes en los campos del formulario. Por ejemplo, para el campo «Mostrar nombre», añades el ref a la etiqueta span, que contiene el mensaje de error:
<div className="input-div">
<label>Display name</label>
<span>Helps you identify your site. Only used in MyKinsta and temporary domain</span>
<input type="text" className="form-control" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
<span className='error-message' ref={displayNameRef}>Ensure this has more than 4 characters</span>
</div>Del mismo modo, para el campo «Correo electrónico del administrador de WordPress»:
<div className="input-div">
<label>WordPress admin email</label>
<input
type="email"
className="form-control"
value={wpAdminEmail}
onChange={(e) => setWpAdminEmail(e.target.value)}
/>
<span> className='error-message' ref={wpEmailRef}>Ensure this is a valid email</span>
</div>Ahora, podemos crear las funciones de validación que comprueban los valores de entrada y deciden si mostrar los mensajes de error. Estas son las funciones para «Nombre para mostrar» y «Correo electrónico del administrador de WordPress»:
const checkDisplayName = () => {
if (displayName.length < 4) {
displayNameRef.current.style.display = 'block';
} else {
displayNameRef.current.style.display = 'none';
}
}
const checkWpAdminEmail = () => {
let regex = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if (!wpAdminEmail.match(regex)) {
wpEmailRef.current.style.display = 'block';
} else {
wpEmailRef.current.style.display = 'none';
}
}Estas funciones se llaman cada vez que se modifican los campos de entrada correspondientes. Comparan los valores de entrada con los criterios de validación y actualizan la visualización de los mensajes de error manipulando la propiedad style.display de los elementos del mensaje de error.
Siéntete libre de implementar validaciones adicionales o personalizar la lógica de validación según tus requisitos.
Manejo del Envío de Formularios en React
Al manejar el evento de envío del formulario para crear un sitio, necesitamos realizar varias tareas. En primer lugar, adjuntamos un controlador de eventos onSubmit al elemento <form>. Dentro de la función createSite, evitamos el comportamiento predeterminado de envío de formularios llamando a event.preventDefault(). Esto nos permite gestionar el envío mediante programación.
Para asegurarnos de que los datos del formulario son válidos antes de proceder al envío, invocamos los métodos de validación checkDisplayName y checkWpAdminEmail. Estos métodos verifican que los campos obligatorios cumplen los criterios especificados.
const createSite = (e) => {
e.preventDefault();
checkDisplayName();
checkWpAdminEmail();
// Additional logic
};Suponiendo que todas las validaciones pasan y que los campos requeridos contienen datos válidos, procede a borrar el localStorage para garantizar un estado limpio para almacenar la respuesta de la API y el nombre para mostrar.
A continuación, realiza una solicitud a la API de Kinsta utilizando la función fetch. La solicitud es un método POST al endpoint https://api.kinsta.com/v2/sites. Asegúrate de incluir las cabeceras necesarias y el payload como JSON.
const createSiteWithKinstaAPI = async () => {
const resp = await fetch(
`${KinstaAPIUrl}/sites`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
},
body: JSON.stringify({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
display_name: displayName,
region: centerLocation,
install_mode: 'new',
is_subdomain_multisite: false,
admin_email: wpAdminEmail,
admin_password: wpAdminPassword,
admin_user: wpAdminUsername,
is_multisite: false,
site_title: siteTitle,
woocommerce: false,
wordpressseo: false,
wp_language: 'en_US'
})
}
);
// Handle the response data
};El payload contiene varios campos de datos que requiere la API Kinsta, como el ID de la empresa, el nombre para mostrar, la región, el modo de instalación, el correo electrónico del administrador, la contraseña del administrador, etc. Estos valores se obtienen de las variables de estado correspondientes.
Tras realizar la solicitud a la API, esperamos la respuesta utilizando await resp.json() y extraemos los datos relevantes. Creamos un nuevo objeto newData, con el ID de la operación y el nombre para mostrar, que se almacena en el localStorage utilizando localStorage.setItem.
const createSiteWithKinstaAPI = async () => {
const resp = await fetch(
// Fetch request here
);
const data = await resp.json();
let newData = { operationId: data.operation_id, display_name: displayName };
localStorage.setItem('state', JSON.stringify(newData));
navigate('/details');
}Por último, invocamos la función createSiteWithKinstaAPI para que cuando un usuario rellene el formulario y haga clic en el botón, se cree un sitio WordPress utilizando la API de Kinsta. Además, en el código, se menciona que el usuario es redirigido a la página details.jsx para realizar un seguimiento de la operación con la API de Kinsta. Para activar la funcionalidad de navegación, importa useNavigate de react-router-dom e inícialo.
Recordatorio: Puedes encontrar el código completo de esta página en el repositorio de GitHub.
Implementar la Comprobación del Estado de la Operación con la API Kinsta
Para comprobar el estado de la operación con la API de Kinsta, utilizamos el ID de la operación que se almacenó en el localStorage. Este ID de operación se recupera del localStorage utilizando JSON.parse(localStorage.getItem('state')) y se asigna a una variable.
Para comprobar el estado de la operación, realiza otra solicitud a la API Kinsta enviando una solicitud GET al endpoint /operations/{operationId}. Esta solicitud incluye las cabeceras necesarias, como la cabecera de Autorización que contiene la clave de la API.
const [operationData, setOperationData] = useState({ message: "Operation in progress" });
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const stateData = JSON.parse(localStorage.getItem('state'));
const checkOperation = async () => {
const operationId = stateData.operationId;
const resp = await fetch(
`${KinstaAPIUrl}/operations/${operationId}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
const data = await resp.json();
setOperationData(data);
}Una vez recibida la respuesta, extraemos los datos relevantes de la misma utilizando await resp.json(). A continuación, los datos de la operación se actualizan en el estado utilizando setOperationData(data).
En la sentencia de retorno del componente, mostramos el mensaje de la operación utilizando operationData.message. También proporcionamos un botón que permite al usuario activar manualmente la comprobación del estado de la operación llamando al checkOperation.
Además, si el estado de la operación indica que ha finalizado con éxito, el usuario puede utilizar los enlaces añadidos para acceder al administrador de WordPress y al propio sitio. Los enlaces se construyen utilizando el stateData.display_name obtenido de localStorage.
<a href={`http://${stateData.display_name}.kinsta.cloud/wp-admin/`} target="_blank" rel="noreferrer" className='detail-link'>
<p>Open WordPress admin</p>
<FiExternalLink />
</a>
<a href={`http://${stateData.display_name}.kinsta.cloud/`} target="_blank" rel="noreferrer" className='detail-link'>
<p>Open URL</p>
<FiExternalLink />
</a>Al hacer clic en estos enlaces se abre el admin de WordPress y la URL del sitio respectivamente en una nueva pestaña, permitiendo al usuario acceder a ellos sin tener que navegar a MyKinsta.
Ahora puedes crear un sitio WordPress fácilmente a través de tu aplicación personalizada.
Cómo Desplegar tu Aplicación React con Kinsta
Para desplegar tu proyecto React en el alojamiento de aplicaciones de Kinsta, necesitas enviar el proyecto a tu proveedor Git preferido. Cuando tu proyecto esté alojado en GitHub, GitLab o Bitbucket, puedes proceder a desplegarlo en Kinsta.
Para desplegar tu repositorio en Kinsta, sigue estos pasos:
- Inicia sesión o crea tu cuenta Kinsta en el panel MyKinsta.
- En la barra lateral izquierda, haz clic en «Aplicaciones» y luego en «Añadir servicio».
- Selecciona «Aplicación» en el menú desplegable para desplegar una aplicación React en Kinsta.
- En el modal que aparece, elige el repositorio que quieres desplegar. Si tienes varias ramas, puedes seleccionar la rama deseada y dar un nombre a tu aplicación.
- Selecciona una de las 25 ubicaciones de centros de datos disponibles en la lista de opciones. Kinsta detecta automáticamente el comando de inicio de tu aplicación.
Por último, no es seguro enviar claves API a alojamientos públicos como tu proveedor de Git. Cuando alojes, puedes añadirlas como variables de entorno utilizando el mismo nombre de variable y valor especificados en el archivo .env.
Una vez que inicias el despliegue de tu aplicación, comienza el proceso y normalmente se completa en unos minutos. Un despliegue con éxito genera un enlace a tu aplicación, como https://site-builder-ndg9i.kinsta.app/.
Resumen
En este artículo, has aprendido a utilizar mediante programación la API de Kinsta para crear un sitio WordPress e integrar la API en una aplicación React. Recuerda siempre mantener segura tu clave API y siempre que creas que la has compartido públicamente, revócala y crea una nueva.
La API de Kinsta puede utilizarse no sólo para crear un sitio WordPress, sino también para recuperar información sobre tus sitios de WordPress, dominios y mucho más. También puede acceder a servicios de Kinsta como bases de datos y aplicaciones.
¿Qué endpoint te gustaría que se añadiera próximamente a la API Kinsta, y qué te gustaría que construyéramos a continuación con la API Kinsta? Háznoslo saber en los comentarios.
Deja una respuesta