Portada cPanel Cómo Instalar Bootstrap en cPanel y Ejemplo Práctico
Bootstrap es un framework CSS que utilizan un gran número de desarrolladores web para crear su proyectos web.
Se trata de una opción muy popular gracias a su flexibilidad, facilidad de uso y cantidad de opciones disponibles, ya que se pueden hacer muchas más cosas que con CSS.
Se combina con JavaScript, lo que le da todas esa consistencia y capacidad que a la hoja de estilos CSS le falta.
Su principal razón de ser es adaptar el diseño a todo tipo de dispositivos, pensando especialmente en los teléfonos móviles. Es decir, crear un diseño totalmente responsive.
Para poder trabajar con Bootstrap, es necesario descargar los archivos descargar los archivos del framework, pero si tienes contratado un hosting con Hostinet, puedes instalar Bootstrap de forma sencilla y automática.
Cuando contratas un hosting en Hostinet, te damos acceso a un panel de control llamado cPanel (excepto en hosting Windows).
En cPanel cuantas con un instalador de aplicaciones automático con el que puedes instalar una gran cantidad de aplicaciones, como WordPress, PrestaShop y lo que hoy nos interesa, Bootstrap.
Para instalar Bootstrap en tu hosting debes acceder a cPanel y en apartado de Software busca el icono de la herramienta Softaculous Apps Installer.
Softaculous es el instalador de aplicaciones automático y como puedes ver, encontrarás un montón de software que puedes instalar.
Para encontrar Bootstrap puedes buscar en el menú izquierdo la opción de Frameworks, en cuanto lo habrás, verás la opción de Bootstrap, aunque también puedes usar el buscador que encontrarás en la parte superior.
Selecciona la opción y después pulsa en Instalar para configurar dónde quieres instalar Bootstrap.
Dependiendo del tipo de hosting que tengas, podrás seleccionar el dominio donde quieres instalarlo y si quieres, crearlo en un directorio. Si dejas el campo de directorio vacío, se instalará en la raíz del dominio, pero cuidado si ya tienes instalado algo ahí.
Si quieres instalarlo en un subdominio también puedes hacerlo, pero deberás crear el subdominio antes.
En un momento Softaculous terminará la instalación y así te lo indicara. También te mostrará la URL en la que lo has instalado.
Si accedes a la URL donde has instalado Bootstrap verás que así te lo indica, pero que no hay ningún archivo index para que pueda mostrar nada, aunque Bootstrap ya esté instalado.
Ahora vamos a probar si realmente Bootstrap funciona en nuestro hosting subiendo un proyecto creado en Bootstrap.
La mejor forma de comprobar que Bootstrap está funcionando en el hosting es subir un proyecto creado en Bootstrap.
En lugar de crear un proyecto nuevo de cero, hay que saber cómo funciona Bootstrap antes, vamos a usar un proyecto ya creado y para eso vamos a usar GitHub para buscarlo.
GitHub es un repositorio de software open source que los desarrolladores usar para tener un control de las versiones de su software. También para almacenarlo y al ser de código abierto, podemos usarlo sin necesidad de pagar ninguna licencia de uso.
Puedes usar el buscador de GitHub para encontrar algún proyecto creado en BootStrap. Nosotros hemos buscado: Bootstrap Hello World.
«Hello World» es la aplicación típica para comprobar que un lenguaje de programación está funcionando, como si fuera un punto de partida para comprobar que funciona.
Busca cualquier proyecto que veas que te puede servir y descárgalo desde GitHub.
Después tienes que subir los archivos al hosting. Esto puedes hacerlo desde el Administrador de Archivos de cPanel.
Sólo tienes que acceder a la carpeta donde has instalado Bootstrap, donde ya verás que tienes una carpeta css y otra js con los archivos que Bootstrap ha instalado, que es la estructura básicas de Bootstrap.
Nosotros hemos subido un proyecto en el que ya tenía las carpetas y los archivos creados, así que lo hemos sustituidos. También le he hemos cambiado el nombre al archivo HTML, como index.html, par no tener que determinar toda la URL.
Puedes subir el archivo comprimido que has descargado, ya que el Administrador de Archivos no te permite subir las carpetas.
Sólo accede a la carpeta que corresponda y pulsa en el menú Cargar., selecciona el archivo comprimido y súbelo.
Una vez este en el hosting, pulsa con el botón derecho encima del .zip y verás que tienes la opción de Extract.
Es posible que tengas que mover algún archivo para dejarlo en la carpeta raíz del Bootstrap. Esto dependerá de cómo lo ha organizado el desarrollador.
Al final debería quedarte algo parecido a esto, aunque puede variar, repetimos, dependiendo del proyecto que hayas descargado.
Ahora sólo tienes que acceder a la URL desde cualquier navegador web para ver si funciona. Si todo va bien sólo verás un Hello, world! o lo que sea que hayan puesto en el proyecto.
Esto puede parecer muy simplón, pero es lo que necesitamos ver para comprobar que Bootstrap está funcionando en nuestro hosting.
Te puede parecer que han puesto en HTML el proyecto, pero si abres el archivo con un editor de texto, verás como está haciendo las llamadas a CSS y JavaScript, que es lo que necesita Bootstrap para funcionar.
En nuestro caso, el archivo index tenía un código parecido a esto:
<!doctype html> <html lang="pt-br"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.css"> <title>Primeros Pasos</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="js/jquery-3.2.1.slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Ahora que ya sabes que puedes trabajar con Bootstrap en tu hosting contratado con en Hostinet. Ya puedes empezar a crear tu web en Bootstrap.
Como hemos comentado en el artículo, desde el panel de control cPanel puedes encontrar la herramienta Softaculous y desde ahí, instalar Bootstrap donde quieras.
El instalador automático está disponible en todos los planes de alojamiento, incluso en los hosting más baratos.