Es Bonito, muy Liviano y Efectivo.
Para ello previamente necesitamos tener instalado un Servidor Web como NGINX:
CLICK PARA VER EL TUTORIAL
Ahora vamos a descargar el archivo Autoindex donde descomprimimos la carpeta,
para ello con este comando (cd) iremos a la carpeta donde tenemos nuestro servidor NGINX configurado,ejemplo por defecto:
Código: Seleccionar todo
cd /var/wwwCódigo: Seleccionar todo
wget https://www.fororaspberry.es/archivos/autoindex_fororaspberry.es.tarCódigo: Seleccionar todo
tar -xvf autoindex_fororaspberry.es.tarAhora vamos a modificar la configuración de NGINX ,añadiendo 4 parámetros.
Suponiendo que la configuracion por Defecto de Nginx para nuestra Web es: /etc/nginx/sites-available/default
Código: Seleccionar todo
sudo nano /etc/nginx/sites-available/defaultCódigo: Seleccionar todo
autoindex on;
autoindex_exact_size off;
add_before_body /.nginx/superior.html;
add_after_body /.nginx/inferior.html;- index3.png (7.43 KiB)
autoindex on; = Activa el módulo autoindex integrado en NGINX ( listado de archivos y carpetas )
autoindex_exact_size off; = Muestra el tamaño de los archivos en escala aproximada ( 1MB / 10GB , etc )
add_before_body = Ordenamos que en el <header> se incruste nuestro archivo configurado
add_after_body = Ordenamos que en el <footer> se incruste nuestro archivo configurado
Guardamos los cambios pulsando estas teclas, en este caso (putty ssh)
Control + X
tecleamos Y
ENTER
Una vez solo nos queda recargar los datos de Nginx con:
Código: Seleccionar todo
sudo nginx -s reloadPara poner Usuario y Contraseña, para poder restringir el acceso a nuestros archivos, debemos crear un .HTPASSWD , para crearlo necesitaremos la utilidad APACHE-UTILS
Procedemos a instalarla poniendo este comando en el terminal SSH:
Código: Seleccionar todo
sudo apt-get install apache2-utilsCódigo: Seleccionar todo
htpasswd -c /var/.htpasswd kike- index5.png (2.19 KiB)
- index6.png (4.2 KiB)
Solo nos queda de nuevo modificar la configuración de NGINX ,añadiendo unas lineas.
Suponiendo que la configuracion por Defecto de Nginx para nuestra Web es: /etc/nginx/sites-available/default
Código: Seleccionar todo
sudo nano /etc/nginx/sites-available/defaultCódigo: Seleccionar todo
location / {Código: Seleccionar todo
auth_basic "Hola, esta es mi Web";
auth_basic_user_file /var/.htpasswd;- index7.png (6.15 KiB)
Y en auth_basic_user_file hemos especificado la ruta del .HTPASSWD creado anteriormente
Tambien podemos proteger los archivos de la carpeta .nginx añadiendo lo siguiente:
Código: Seleccionar todo
location = /.nginx {
deny all;
access_log off;
}Control + X
tecleamos Y
ENTER
Una vez guardado, solo nos queda reiniciar y guardar configuración de NGINX con:
Código: Seleccionar todo
sudo nginx -s reload- index8.png (9.77 KiB)
Nota: Si queremos añadir mas cuentas de acceso, debemos hacer lo mismo que el proceso de crear HTACCESS pero eliminando el -C
Código: Seleccionar todo
htpasswd /var/.htpasswd JuanjoEditando el diseño de nuestra Web Autoindex:
Cambiando unas cosas facilmente, podemos dar nuestro toque personal.
Todo lo que debemos editar, esta ubicado en la carpeta .NGINX
Cambiar o Borrar Logo: llamado logo.png , substituir por el nuestro o si deseamos borrarlo, debemos editar el archivo superior.html y borrar o editar esta linea:
Código: Seleccionar todo
<img src="/.nginx/logo.png">Buscamos la entrada background-color:#0088cc dentro del parámetro body { y debemos cambiarlo por el código de color marcado en Rojo que deseamos
Click AQUI para ver los códigos de colores
- edit1.png (3.03 KiB)
Debemos editar el archivo estilo.css (Recomiendo usar NotePad++
Buscamos la entrada background-color:#fff dentro del parámetro page { y debemos cambiarlo por el código de color marcado en Rojo que deseamos
Click AQUI para ver los códigos de colores
- edit2.png (2.96 KiB)
Debemos editar el archivo estilo.css (Recomiendo usar NotePad++
Buscamos la entrada color:#1C6094 dentro del parámetro a { y debemos cambiarlo por el código de color marcado en Rojo que deseamos
Click AQUI para ver los códigos de colores
- edit3.png (2.66 KiB)
Editar el archivo "inferior.html" y cambiamos la linea
Código: Seleccionar todo
<A href="https://www.fororaspberry.es/">ForoRaspberry.es</A>
- edit4.png (2.12 KiB)
Si os ha gustado y si os ha servido, por favor comentarme! :roll:
