RealDroidES

Monta tu propio servidor web en casa con Raspberry Pi, y ten tu página personal

Mucho ha pasado (demasiado) desde el último artículo en el blog; pedimos disculpas por ello, pero el tiempo requiere ser invertido en varias cosas, y hay que priorizar. Aún así, después de pasar las semanas tan ocupadas continuamos con la serie de artículos dedicados a la Raspberry Pi para intentar que después de ellos, podáis tener este pequeño “gadget” a pleno rendimiento y sacándole el mayor provecho. Hoy llega el momento de instalar nuestro propio servidor web, y poder tener nuestra página personal.

Cierto que usando WordPress, Blogger o algún servicio similar podemos hacerlo, pero normalmente están pensados para blogs, y para tener nuestra web personal nos sobrarán más de la mitad de las cosas. Y además, tenemos una Raspi, vamos a aprovecharla.

Aunque os suene muy complicado, nada de eso: no son más que unos cuantos comandos que nos llevará poco más de unos minutos. Lo que os puede llevar luego más trabajo es preparar vuestra web, pero eso depende de lo mucho o poco que queráis dedicarle, y podemos encontrar plantillas por Internet con las que tan solo deberemos cambiar el texto y poco más.

Intentaremos hacerlo paso a paso para que entendáis qué estáis haciendo, aunque que con una simple linea de comandos podríamos hacerlo todo. Sin más, empecemos.

Instalar Apache, nuestro servidor web

Después de haber hecho los primeros pasos, asignarle una ip estática y configurar el servicio noip donde tuvimos que abrir el puerto 22 de nuestro router para poder dar acceso desde el exterior a las conexiones ssh, es momento de repetir ese paso pero con el puerto 80, que es el que por defecto se encarga de las conexiones web, así que para no volver a explicar los pasos, os invito que reviséis ese artículo si no os acordáis de como se hace.

Nota: Recordad que este paso es para que nos podamos conectar desde fuera de casa, ya que de poco nos va a servir montar el servidor si luego no se puede acceder desde Internet.

Una vez preparado el router, nos conectamos a nuestra Raspi por ssh mediante terminal de Linux/Mac o usando PuTTY en Windows, y procedemos a actualizar los repositorios tecleando el siguiente comando (puede hacerse desde la terminal de la Raspi si la tenemos conectada a una pantalla con teclado y ratón):

sudo apt-get update

Nota: Esto es necesario siempre que queramos instalar cualquier cosa si ha transcurrido cierto tiempo desde la última vez.

Luego instalamos Apache:

sudo apt-get install apache2 -y

Esto instalará el servidor en pocos minutos y, una vez haya terminado, abrimos el navegador y tecleamos la dirección IP de nuestra Raspi (192.168.1.14 en mi caso).

Y ya está, ya tenéis vuestro servidor en marcha. No ha sido tan difícil, ¿verdad?. Pero claro, de poco nos sirve si lo que vemos al acceder es esta página. No os preocupéis, que al final solucionaremos ese pequeño inconveniente, pero antes acabemos de instalar algunas cosas más.

Instalar PHP

PHP es un lenguaje de programación amado y odiado (el porcentaje de cada uno puede variar dependiendo de a quien le preguntes), pero necesario para ciertas cosas. Aunque no tengamos ni idea de cómo se programa, nos puede venir bien tenerlo instalado ya que algunas plantillas web hacen uso de él. Se instala con el siguiente comando.

sudo apt-get install php5 libapache2-mod-php5 -y

Una vez terminado, tecleamos lo siguiente

sudo nano /var/www/html/info.php

Y copiamos lo siguiente

<?php

        phpinfo();

?>

Guardamos y salimos con CTRL+X, Y, enter.

Ahora volvemos al navegador y tecleamos nuestra ip, seguido de /info.php. Debería mostrar lo siguiente

Ya tenemos php instalado, y en este punto podríamos empezar a crear nuestra página, pero ya que estamos, podemos instalar algunas cosas más.

MySQL, nuestra base de datos (OPCIONAL)

MySQL nos permitirá tener una base de datos que nos servirá, como su nombre indica, para guardar ciertos datos, aunque no es estrictamente necesario para el caso que nos atañe en este artículo. Aún así, os explicamos como instalarla junto a phpmyadmin para que tengáis todo a punto por si os interesa ir un poco más allá en un futuro.

La forma de instalación es como hasta ahora

sudo apt-get install mysql-server php5-mysql -y

Durante la instalación nos va a pedir que introduzcamos una contraseña para poder administrar MySQL, le ponemos la que más nos guste, y continuamos con la instalación

Y con esto ya tenemos un servidor de bases de datos listo para usar.

phpMyAdmin (OPCIONAL)

Y ya por último, nos serviremos de phpmyadmin para gestionar las bases de datos de una forma más cómoda. Tecleamos

sudo apt-get install phpmyadmin -y

Durante la instalación nos preguntará varias cosas:

Si queremos configurar algún servidor. Marcaremos Apache PULSANDO ESPACIO, y luego enter.

Nos preguntará también si queremos crear una base de datos para phpmyadmin, y diremos que sí.

Luego nos pide la contraseña que hemos introducido antes de MySQL, y posteriormente una nueva contraseña para la base de datos, que para facilitarnos las cosas, podemos usar la misma, eso ya como veáis.

Y ya está. Ya tenemos todo preparado. Por si acaso, reiniciamos el servidor

sudo /etc/init.d/apache2 restart

Y accedemos a nuestra ip seguido de /phpmyadmin

Si vemos la imagen anterior, todo ha salido según lo previsto. El usuario es root, y la contraseña es la que le hemos indicado anteriormente. El panel de administrador de phpmyadmin es el siguiente, pero no explicaremos aquí como se usa, ya que no lo necesitamos para este caso.

Y ahora sí que sí, tenemos todo lo necesario para que nuestro servidor funcione correctamente, aunque como hemos comentado antes, sería interesante mostrar otra página más personalizada, ¿no? Para ello veamos primero cómo funciona de forma muy sencilla un servidor web.

La estructura de los archivos en nuestro servidor

Todos los archivos necesarios para poder mostrar nuestra página web se encuentran en la carpeta /var/www/html, y debe haber un fichero llamado index.html (o index.php o cualquier otra extensión válida, pero en nuestro caso será index.html). La palabra index es una palabra clave que usa el servidor para saber qué pagina mostrar cuando se accede a el. Por lo tanto, ese archivo debe estar “suelto” dentro de esa carpeta /var/www/html.

Luego, para acceder a los diferentes archivos o carpetas, simplemente hay que añadir / seguido del nombre del archivo o carpeta. Siguiendo el mismo razonamiento anterior, si accedemos a una carpeta, dentro de ésta debe haber también un index.html que será el que se mostrará. De lo contrario, nos mostraría una página donde veríamos un listado con los archivos que contiene la carpeta.

Para intentar ilustrar un poco esto, he buscado alguna imagen:

Como vemos, cada carpeta contiene su index.html, y las que no lo tienen es porque no hay nada que mostrar, sino que son archivos a los que se accede desde la barra de navegación (como los .jpg o .pdf). De esta forma, para acceder a la carpeta WebsterWanda (I), seria www.server.com/nightclass/WebsterWanda, y para el archivo graphic.jpg (W), www.server.com/nightclass/WebsterWanda/homework/graphic.jpg.

Cuando vamos a tener nuestra propia web, es importante mantener un orden dentro del servidor, ya que nos facilita las cosas. Así, si vamos a añadir imágenes, crearemos la carpeta “imagenes” (importante no usar acentos ni caracteres especiales para los nombres), si vamos a añadir archivos, la carpeta “archivos”, etc.

W3Schools es tu amigo

En cuanto a la web, lo más complicado es hacer una página bonita, pero para solventar ese problema, en Internet hay gente muy maja que pone a disposición de todos plantillas muy curradas, las cuales tan solo debemos modificar a nuestro gusto, aunque he de reconocer que para ello se requiere un mínimo de conocimiento de HTML, y sobretodo CSS y/o Bootstrap, dos “lenguajes” que nos permiten crear cosas realmente interesantes. Lo mejor es buscar una plantilla que nos guste, bajarla y empezar a jugar con ella. Es relativamente fácil de cambiar el texto que viene por defecto por el nuestro, y es un buen punto de partida.

Estas plantillas normalmente vienen preparadas para copiar directamente en la carpeta raíz de nuestro servidor, así que simplemente copiamos TODO el contenido dentro de /var/www/html y listo.

Nota: Si no domináis del todo el uso de la terminal y la forma de pasar archivos entre la Raspi y nuestro ordenador mediante comandos, os recomiendo que la conectéis a una pantalla y trabajéis en vuestra web desde la propia Raspi, ya que os será más cómodo.

Y para que podáis entender un poco más como funciona HTML (para los que no lo habéis tocado nunca), os recomiendo W3Schools, donde encontraréis cientos de ejemplos que podréis probar y modificar, por lo que es muy útil para aprender como funciona cada cosa.

Buscad por Internet que seguro que encontráis alguna plantilla, pero para que podáis comenzar os dejo esta, que aún teniendo algo de CSS, es relativamente sencilla para empezar a toquetear. Simplemente tenéis que abrir el archivo index.html con un editor de texto -“enriquecido” a poder ser- como Kate o Gedit si estáis en la Raspi, o Atom si estáis en PC/Mac y jugar con él.

Nota: Para asegurarte de no tener problemas para acceder a tu web, recomiendo ejecutar un último comando cuando lo tengas todo listo, que lo que hace es ajustar los permisos de los archivos, y esta es la forma más sencilla:

sudo chmod -R 775 /var/www

Cuando tengas tu página lista, ya podrás darle la dirección que registraste en noip a tus amigos para que puedan verla, y si el uso que le quieres dar es más “profesional”, como por ejemplo que te sirva de CV (como es mi caso), es una buena carta de presentación. Aunque para mejorar la “imagen”, seria interesante contratar un dominio propio, tema del que hablaremos en otro artículo.

Espero que este tutorial os sirva y, por qué no, os anime a montaros vuestro propio servidor en casa, ya que es muy sencillo y siempre mola más hacerte las cosas tu mismo. Al final se valoran mucho más.