En este capítulo instalarás herramientas que hacen falta para crear una página web y subirla a internet. Está explicado para Ubuntu, la distribución de Linux. Para Mac tiene que ser muy parecido, y para Windows buscad y seguid pasos similares.
Herramientas y configuración común
Estos son los que se suelen usar para crear páginas web, independientemente del tipo de página. Las usaremos para crear nuestra página sencilla para los primeros capítulos.
Crear proyecto
Creamos una carpeta con el nombre de nuestro proyecto donde pondremos todos los archivos. Para este curso usaremos el nombre Web para referirnos a la carpeta.
Dentro de la carpeta crearemos tres archivos, index.html, style.css y javascript.js. HTML es un lenguaje de estructura y contenido. En el va el contenido de la web en sí. A diferencia de este, CSS es un lenguaje de estilo. El mismo le da colores y formas al HTML. Por último, javascript es un lenguaje de interacción. La mayoría de cosas que cambian en una página web suceden con el mismo.
Instalar Atom
Instalamos un editor de código en condiciones. A pesar de que se podría editar con el notepad, vamos a usar un editor moderno llamado Atom:
Una vez esté instalado lo abrimos y añadimos la carpeta Web a Atom como proyecto. Desde Atom, Archivo > Añadir proyecto y elegimos la carpeta. Vemos que se añade a la izquierda sin problema.
Git y Github
Git es una herramienta de terminal para manejar versiones de código, poder colaborar y subir las páginas web. Github es la plataforma online que usa Git más usada, y también permite publicar páginas web.
Primero nos registramos en Github. Después instalamos git:
sudo apt install git
Y por último configuramos nuestro ordenador para que Github lo reconozca. Para eso, instalamos nuestra clave de SSH en Github siguiendo estos pasos.
Ver la web
Una vez tenemos los archivos creados ya podemos ver la web (que estará en blanco) si abrimos el archivo index.html desde el navegador. Para ello, desde la carpeta (fuera de Atom) click derecho en el archivo > abrir con > Firefox/Chrome. Probad a escribir desde Atom un sencillo "Hello world" en index.html y repetir los pasos.
Una vez vayamos modificando el archivo, en lugar de reabrirlo podemos refrescar la página web con F5 y se verán los cambios.
1. Hacer cambios en index.html o en style.css (explicados más adelante).
2. Guardar dichos cambios
3. Abrir el archivo con nuestro navegador o apretar F5 con la ventana abierta
4. Profit! GOTO 1.
Instalar el servidor
Lo que hemos hecho anteriormente nos sirve para crear y subir páginas estáticas. Estas sólo tienen html, css y javascript, lo cual suele bastar para las páginas más sencillas: un portfolio, una página informativa, etc.
Sin embargo, cuando queremos que el usuario pueda registrarse o modificar cosas necesitaremos hacer un back-end ejecutándose en un servidor. Para este curso usaremos Node.js, que es un servidor escrito en el lenguaje Javascript (por lo que nos resultará familiar). Hay muchos otros lenguajes para escribirlos, incluyendo PHP, Python, Ruby on Rails, etc.
Instalar Node con Node Version Manager
NVM es la herramienta recomendada para instalar y manejar Node, así que lo instalaremos con este comando:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.2/install.sh | bash
Después tendremos que cerrar y abrir la terminal para que nos funcione correctamente.
Usaremos NVM para instalar la versión más moderna de Node. Para ello, entramos en la web de Node.js y usamos los números de donde pone Current:
nvm install 6.3.1
nvm use 6.3.1
Comprobamos que está instalada la versión que toca haciendo esto, lo cual nos tiene que mostrar el mismo número:
node --version
Heroku
Github sólo sirve para subir páginas estáticas, así que usaremos Heroku en la versión gratuita para subir nuestra web dinámica. El proceso es similar a Git y Github.
Nos registramos en Heroku e instalamos el Heroku Toolbelt:
wget -O- https://toolbelt.heroku.com/install-ubuntu.sh | sh
Hacemos Login a través de la terminal a Heroku:
heroku login
Instalar MongoDB
MongoDB es la base de datos que usaremos. Si no consigues instalarlo, podrás seguir los pasos pero no podrás almacenar nada en la base de datos. Lo instalamos con:
sudo apt install mongodb
Y probamos que funciona haciendo:
mongod --version