Alojar y editar sitios web en Windows de forma gratuita utilizando XAMPP

Quieres construir un sitio web La sobrecarga puede ser costosa. ¿Qué pasa si solo quieres aprender desarrollo web, sin desorden? Permítanos mostrarle cómo alojar un sitio web local de forma gratuita.

Quieres construir un sitio web  La sobrecarga puede ser costosa.  ¿Qué pasa si solo quieres aprender desarrollo web, sin desorden?  Permítanos mostrarle cómo alojar un sitio web local de forma gratuita.
Anuncio

Desea construir un sitio web. 10 maneras de crear un sitio web pequeño y simple sin el exceso. 10 maneras de crear un sitio web pequeño y simple sin Overkill. WordPress puede ser una exageración. Como demuestran estos otros servicios excelentes, WordPress no es el único fin de la creación de sitios web. Si quieres soluciones más simples, hay una variedad para elegir. Lea más, pero no sabe por dónde empezar?

Parece que el campo de entrenamiento de desarrollo web típico también es el más caro: comprar un dominio, servidor de host, cuenta de WordPress, tema, etc. Pero, ¿qué sucede si no eres propietario de una pequeña empresa o estás tratando de construir una marca? ¿Qué pasa si solo estás tratando de aprender desarrollo web, sin desorden?

Siga leyendo para aprender cómo alojar su propio sitio web Cómo utilizar un blog de WordPress autónomo para la gestión de proyectos Cómo utilizar un blog de WordPress autónomo para la gestión de proyectos Lea más, que puede crear ya sea desde cero o con plantillas prefabricadas, en tu computadora, y de forma gratuita. ¡Eso también incluye alojar tu propia cuenta de WordPress!

XAMPP: una introducción

El XAMPP de Bitnami es "una distribución Apache que contiene PHP y Perl". Para nuestros propósitos, solo tenemos que entender que XAMPP es un programa gratuito y simple que permite a los usuarios alojar sitios web en sus PC.

Si bien configurar un servidor local utilizando XAMPP es algo técnico, el proceso también es bastante sencillo y directo. Una vez que todo ha sido configurado, encontrará que administrar y editar sitios web es muy fácil.

Luego está la cuestión del control rápido y completo. Usando XAMPP para crear y editar sitios web, podrá cambiar tanto o tan poco de un sitio web como desee. Dicho eso, con gran poder viene una gran responsabilidad. También es más susceptible a perder sus sitios, especialmente si no crea copias de seguridad. La mejor guía de copia de seguridad de Windows 10 La última guía de copia de seguridad de Windows 10 Hemos resumido todas las opciones de copia de seguridad, restauración, recuperación y reparación que pudimos encontrar en Windows 10. ¡Usa nuestros consejos simples y nunca desesperes por la pérdida de datos otra vez! Lee mas .

Sin embargo, si desea un proyecto de curso inicial genuino en desarrollo web, XAMPP es para usted. Eso incluye cualquier proyecto relacionado con HTML, CSS, Javascript y más.

Instalando XAMPP

Dirígete al sitio web de XAMPP y descarga el paquete. Sigue el proceso de configuración predeterminado. Una vez que haya descargado XAMPP, su panel de control XAMPP debería abrirse automáticamente. De lo contrario, puede ubicar el programa XAMPP como lo haría con cualquier otro (a través de la búsqueda en el menú Inicio).

En la ventana del panel de control de XAMPP, debería ver un diseño simple de los procesos XAMPP que se están ejecutando. Para nuestros propósitos, nos centraremos en las dos primeras opciones: Apache y MySQL.

Apache : la clave principal de XAMPP, la opción Apache crea un servidor Apache en tu PC. Esto es lo que le permitirá ejecutar y editar sitios web en su PC a través de navegadores web, de manera similar a como lo haría un sitio web. Excepto, por supuesto, este sitio web se ejecuta en su PC, a diferencia de un servidor conectado a Internet.

MySQL - SQL permite la comunicación entre bases de datos y sitios web, permitiendo a los usuarios probar y almacenar correos electrónicos, contraseñas y cualquier otra entrada de datos. Usaremos esto para su cuenta local de WordPress.

Presione el botón Inicio en su panel de control XAMPP en Acciones para Apache y MySQL. Espere hasta que Apache y MySQL estén resaltados en verde en su sección de módulo. Una vez habilitado, puede usar XAMPP.

Panel de control xampp

Localhost y phpMyAdmin

Para asegurarse de que todo esté funcionando, abra un navegador web, ingrese http: // localhost / en la barra de direcciones y presione Enter . Debería redirigirse a http: // localhost / dashboard /, que es la página XAMPP predeterminada.

Página web predeterminada de xampp

A continuación, haga clic en el botón phpMyAdmin en el menú de navegación superior. Se lo dirigirá a su página predeterminada de phpMyAdmin.

phpmyadmin

Deje esto solo por ahora, pero si ambos están funcionando, ¡está listo para comenzar a crear sitios web!

Crear sitios web usando XAMPP

Ahora viene la parte divertida. Diríjase a la carpeta XAMPP ubicada en el directorio de la unidad raíz ( C: \ xampp de forma predeterminada). Luego, diríjase a htdocs . Este será el repositorio principal del sitio web que usará para ver sitios web.

Antes de crear y editar un sitio web, necesitará un editor de texto. Si bien puede usar un editor de texto predeterminado como el Bloc de notas, lo mejor es descargar un editor de terceros creado específicamente para códigos y etiquetas. Sublime Text Tips para productividad y un flujo de trabajo más rápido 11 Sublime Text Tips para productividad y un flujo de trabajo más rápido Sublime Text is un editor de texto versátil y un estándar de oro para muchos programadores. Nuestros consejos se centran en la codificación eficiente, pero los usuarios generales apreciarán los atajos de teclado. Lee mas . Sublime Text es uno de los mejores, así que dirígete a su sitio web y descarga el software para comenzar.

Ahora puede comenzar a descargar e instalar sitios web en XAMPP. Usaré la plantilla de Roadtrip, pero puedes usar cualquier plantilla que desees. Descargue el archivo zip del sitio web y guárdelo en un lugar que recuerde. A continuación, cree una carpeta dentro de la carpeta htdocs de XAMPP para su sitio web. He nombrado mi roadtrip : intenta mantener tu nombre simple. Luego, descomprima y extraiga el contenido de su archivo zip en esta carpeta htdocs.

extraer a roadtrip

Una vez que haya extraído los archivos, vaya al repositorio de su sitio web dentro de htdocs para asegurarse de que se extrajeron correctamente.

Finalmente, vaya a su página web en su navegador web. Los mejores navegadores web para Windows Los mejores navegadores web para Windows ¿Cuál es su navegador web predeterminado? A pesar de que tenemos muchas opciones, la mayoría de nosotros nos apegamos a los jugadores principales probados y comprobados. ¿Cuáles son las mejores alternativas para el uso, la velocidad y la seguridad de los recursos? Lee mas . Su sitio web, por así decirlo, será accesible utilizando el localhost mencionado anteriormente junto con el nombre de la carpeta que contiene los archivos de su página. Esto se debe a que los sitios web son esencialmente archivos contenidos en carpetas, todos bajo un solo dominio, o nombre de raíz. ¡Ya estás aprendiendo!

Nuestra carpeta creada anteriormente se denominó roadtrip, por lo que la dirección del sitio completo es http: // localhost / roadtrip .

plantilla roadtrip

¡Terminaste! Ahora puede comenzar a editar el sitio web localmente.

Edición de sitios web

Abre Sublime Text. Dirígete a Archivo y selecciona Abrir carpeta . Busque y seleccione su carpeta web dentro de la carpeta XAMPP. Ahora podrá editar varias páginas del mismo sitio web en su editor de Sublime Text.

texto sublime

Sublime Text también proporciona una excelente interfaz para que pueda ver todos los archivos y carpetas de su sitio web. Para crear cambios en su sitio web, edite el código de su sitio web, guárdelo (usando el comando de teclado Ctrl + S ) y actualice su sitio web dentro del navegador.

El proceso es simple y directo: edite la página web, luego verifique si su código funciona. A medida que avances en tu desarrollo web, intentarás incorporar funciones más complejas en tu página web. No importa el nivel de habilidad, sin embargo, el formato básico para editar páginas sigue siendo el mismo.

Use WordPress con XAMPP

Si no quiere editar el código en bruto, o prefiere usar un sistema de administración de contenido (CMS) más familiar, ¡WordPress también ofrece su fantástico recurso de diseño web en un archivo ZIP fácil de usar! Para instalar WordPress en XAMPP, vaya al sitio web de WordPress y descargue la aplicación oficial.

Utilice el mismo formato para crear un sitio web como lo hizo anteriormente, con la carpeta extraída de WordPress presente en el directorio htdoc dentro de la carpeta wordpress . Mantenga el nombre de la carpeta en aras de la claridad.

Usando phpMyAdmin

Como WordPress requiere que usted cree la información de inicio de sesión, deberá crear una entrada en su directorio PHP para la página web. Dirígete a tu página phpMyAdmin Configura tu blog con Wordpress: la guía definitiva Configura tu blog con Wordpress: la guía definitiva ¿Quieres comenzar tu propio blog, pero no sabes por dónde empezar? Deberías mirar Wordpress, la plataforma de blogs más simple y poderosa disponible en la actualidad. Lea más - http: // localhost / phpmyadmin / de forma predeterminada - para comenzar.

Desde esta página, haga clic en Bases de datos . Debajo del parámetro Crear base de datos, ingrese wordpress y luego presione Crear . Debería ver una ventana emergente que le dice que se creó la base de datos. A continuación, cierre esta ventana del navegador e ingrese su carpeta de WordPress dentro del directorio de htdocs de XAMPP. Esta carpeta debe poseer los contenidos de sus archivos descomprimidos de WordPress.

Configuración de inicio de sesión

Necesitamos configurar el sitio web real de WordPress para que pueda iniciar sesión y usar el sitio. Esto se hace a través del archivo de configuración PHP principal de WordPress. Dentro de su carpeta de WordPress, busque el archivo etiquetado como wp-config-sample.php, haga clic con el botón derecho en el archivo, seleccione Editar (o Abra con para un editor de texto independiente). El bloc de notas debería funcionar bien.

Aquí está el código en el que nos centraremos:

// ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('DB_NAME', ' database_name_here '); /** MySQL database username */ define('DB_USER', ' username_here '); /** MySQL database password */ define('DB_PASSWORD', ' password_here '); 

Deberá realizar tres cambios al código anterior dentro de las comillas.

database_name_here - Cambia este parámetro a wordpress . El sitio web usará la base de datos creada previamente en phpMyAdmin etiquetada como tal.

username_here - Cambie esto a la raíz . El nombre de usuario raíz posee los privilegios de administrador adecuados de forma predeterminada, por lo que se permitirá a través de phpMyAdmin. Otros nombres de usuario no funcionarán a menos que se otorguen los permisos apropiados.

password_here - Cambie esto a una contraseña fácilmente identificable. Si prefiere no usar una contraseña, elimine el parámetro.

Guarde este archivo como wp-config.php, en lugar de wp-config-sample.php anterior, y salga. Luego diríjase a la siguiente dirección de host local: http: // localhost / wordpress .

Continúe con la instalación, incluida la creación de su nombre de usuario y contraseña de WordPress. Puede ingresar los valores que prefiera. Una vez que haya terminado de ingresar sus valores, haga clic en el botón Instalar WordPress para finalizar el proceso. Una vez hecho esto, inicie sesión en su WordPress local utilizando el nombre de usuario y la contraseña proporcionados en la página anterior.

localhost wordpress

¡Terminaste! Ahora puede pasar la edición, la modificación y la creación de contenido de su corazón desde cero y mediante WordPress, fuera de línea y de forma gratuita. Los mejores complementos de WordPress Los mejores complementos de WordPress ¡Lea más!

El desarrollo web comienza con una sola página

Antes, recién comenzaba su viaje de desarrollo web. Ahora, ha creado un servidor local en su PC a través del cual puede crear, modificar y adaptar páginas web por capricho. Lo mejor de todo es que tienes el control absoluto. Lo único que queda es comenzar tu experimentación, ¡así que ponte en marcha!

¿Qué software usas para el desarrollo web? ¿Tiene algún consejo para los futuros desarrolladores? Háganos saber en los comentarios a continuación!

Créditos de las imágenes: Dmitry Tishchenko / Shutterstock

In this article