Comandos básicos de terminal Linux para web

Curso de Configuración de Entorno de Desarrollo en Windows

Contenido del curso

Herramientas para la web

Editor de texto

Cómo usar Linux dentro de Windows

Git y Github

Trucos de Windows

17
Instalación y Uso de PowerToys en Windows
06:23 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:53

Comandos básicos de terminal Linux para web

Curso de Configuración de Entorno de Desarrollo en Windows

Clase 11 de 17

Clase 11 / 17

Recursos

Aprender a moverte en la terminal de Linux es una de las habilidades más valiosas para cualquier persona que quiera dedicarse al desarrollo web. Aquí descubrirás los comandos básicos de terminal Linux que necesitas para navegar entre directorios, crear archivos HTML y abrirlos en Visual Studio Code usando WSL.

Esta guía está pensada para quienes están dando sus primeros pasos en front-end y quieren dejar de depender del clic derecho para crear archivos.

¿Cómo saber en qué directorio estás dentro de la terminal?

El primer comando que vas a usar es pwd, que viene de print working directory. Te dice exactamente en qué carpeta estás parado dentro del sistema [00:12].

Es tu punto de partida. Antes de mover archivos, crear carpetas o ejecutar proyectos, conviene saber dónde estás.

¿Qué hace el comando pwd? Imprime la ruta del directorio en el que te encuentras actualmente. Útil para confirmar tu ubicación antes de ejecutar otros comandos.

¿Cómo cambiar de directorio con cd?

El comando cd significa change directory y te permite moverte entre carpetas. Tiene tres variantes que vale la pena memorizar:

cd . te mantiene en el mismo lugar.
cd .. te retrocede un directorio.
cd solo te lleva a tu directorio principal, ese que aparece con la virgulilla (~) [00:35].

Si sigues retrocediendo con cd .., vas a llegar al directorio raíz, representado con un simple /. Ese es el origen de todo el árbol de archivos en Linux [01:05].

¿Cómo limpiar y resetear la terminal cuando se pone lenta?

A veces la pantalla se llena de texto y se vuelve incómodo trabajar. Para eso existe clear, que limpia la vista y te deja la terminal como nueva [01:25].

Ojo: cls no funciona aquí, ese es de otra terminal.

Si además sientes que tu terminal está respondiendo lenta o rara, usa reset. Tarda un poco más porque hace un reseteo completo, pero soluciona muchos problemas de rendimiento [01:40].

¿Cuándo uso reset en lugar de clear? Usa clear cuando solo quieres limpiar la pantalla. Usa reset cuando la terminal responde lenta o muestra caracteres extraños.

Otro truco útil: puedes abrir varias terminales al mismo tiempo. En una trabajas con tu proyecto y en otra haces pruebas, sin interferencias.

¿Cómo creo un archivo HTML desde la terminal de Linux?

En Windows estás acostumbrado al clic derecho, crear archivo. En Linux el flujo cambia y se hace con un solo comando: touch [02:15].

La sintaxis es directa:

bash touch web.html

Después, si ejecutas ls, vas a ver tu archivo web.html listado en el directorio actual. Ese ls te muestra el contenido de la carpeta donde estás.

¿Cómo abrir el proyecto en Visual Studio Code desde la terminal?

Estando dentro de la carpeta de trabajo, escribe:

bash code .

El punto significa abre el directorio actual. Visual Studio Code se va a lanzar mostrando todos los archivos de esa carpeta [02:55]. La primera vez te va a preguntar si confías en los autores. Como el código lo escribiste tú, le das que sí.

¿Qué estructura HTML básica necesitas para tu primera web?

Dentro de web.html puedes empezar con la estructura mínima que todo sitio web necesita. La declaración DOCTYPE html le dice al navegador que estás usando HTML5.

Luego abres la etiqueta html y dentro colocas dos bloques principales:

El head para metadata como el title, que es lo que aparece en la pestaña del navegador.
El body, donde va el contenido visible de la página.

Dentro del body puedes usar un div para encapsular contenido y una etiqueta h1 para tu primer título visible. Algo tan simple como Hola, queridos estudiantes, bienvenidos a este gran proyecto ya cuenta como tu primer elemento HTML funcional [04:20].

¿Cómo conectar Visual Studio Code con WSL?

Para que tu Visual Studio Code trabaje directamente con el ambiente Linux, necesitas la extensión Windows Subsystem for Linux (WSL). Esa extensión integra ambos mundos: editas con la comodidad de VS Code y ejecutas con la potencia del entorno Linux [05:00].

La instalas desde la pestaña de extensiones, le das clic en Install y listo. A partir de ahí, todo lo que abras desde la terminal de Ubuntu con code . corre integrado con WSL.

¿Cómo visualizar tu HTML en el navegador con Live Server?

Con la extensión Live Server instalada, vas a ver un botón que dice Go Live en la barra inferior de VS Code. Le das clic, permites el acceso y tu navegador abre automáticamente la web mostrando el título y el contenido del h1 [05:45].

Ese flujo (editar, guardar con Ctrl + S, ver cambios en vivo) es la base del desarrollo front-end moderno.

¿Qué hace Live Server? Levanta un servidor local que recarga tu navegador cada vez que guardas cambios en el código. Ideal para ver resultados al instante.

Dominar la terminal no es opcional si quieres competir como desarrollador front-end. Cuéntame en los comentarios qué comando se te hizo más útil y cuál te dio más curiosidad para profundizar.

Maria Gabriela Rodriguez Cuevas

Hace 3 años

🧮 Comandos Básicos de Ubuntu 🧮

Para abrir la terminal, presionar las teclas: 📌

Ctrl + Alt + t

Mostrar los archivos y documentos de la dirección actual: 📌

ls

Mostrar los archivos en forma de lista en la dirección actual: 📌

ls -l

Obtener un manual de uso de un comando: 📌

man <comando>

Al colocar en <comando> lo que se quiere examinar, sale una descripción y manual del mismo, por ejemplo intentar con:

man ls

Obtener ayuda de un comando en específico: 📌

<comando> --help

Para conocer mas información acerca de un comando, por ejemplo:

ls ---help

Mostrar el directorio actual: 📌

pwd

Símbolo de la virgulilla (~): 📌

Para hacer el símbolo de la virgulilla (~) se presionan las teclas: ALT+126

Para ir desde el home de Windows al home de Linux: 📌

cd ~

Ir a una carpeta en específico: 📌

cd <nombre_de_carpeta>

El comando cd te lleva a la carpeta que se indica. Por ejemplo:

cd Documentos/personal

Devolverse a una carpeta atrás en la jerarquía: 📌

cd ..

Devolverse a dos carpeta atrás en la jerarquía: 📌

cd ../..

Crear una carpeta: 📌

mkdir <nombre_de_carpeta>

Por ejemplo:

mkdir projects

Crear un archivo: 📌

touch <nombre_de_archivo>.<extensión>

Crea un archivo indicando el tipo con la extensión, por ejemplo:

touch test.txt

Crear una copia de un archivo: 📌

cp <nombre_del_archivo_a_copiar> <nombre_de_la_carpeta_destino/ruta/ruta>

Se puede copiar uno o más archivos. Por ejemplo:

cp test.txt Documentos/personal

Copiar una carpeta completa: 📌

cp -r <nombre_de_carpeta_a_copiar> <nombre_de_la_carpeta_destino/ruta/ruta>

Por ejemplo:

cp - r projects Documents/personal

Mover un archivo a otro directorio: 📌

mv <nombre_de_archivo_origen> <nombre_carpeta_destino/ruta/ruta>

Por ejemplo:

mv projects Documents/personal

Renombrar archivos: 📌

Para renombrar archivos debemos instalar primero el paquete de rename:

sudo apt install rename

Renombrar un archivo: 📌

rename 's/viejo_nombre/nuevo_nombre/' <nombre_archivo>.<extensión>

Por ejempo si se quiere renombrar el archivo test.txt a new_test.txt:

rename 's/test/new_test/' test.txt

Renombrar las extensiones de todos los archivos del directorio actual: 📌

rename 's/vieja_extensión/nueva_extensión/' *.<extensión>

Por ejempo si se quiere renombrar las extensiones de los archivos de texto .txt a .html:

rename 's/.txt/.html/' *.txt

Cambiar el nombre de todos los archivos del directorio actual a mayúsculas: 📌

rename 'y/a-z/A-Z/' *

Cambiar el nombre de todos los archivos del directorio actual a minúsculas: 📌

rename 'y/A-Z/a-z/' *

Llenar los espacios en blanco de todos los archivos del directorio actual a guiones bajos “_”: 📌

rename 'y/ /_/' *

Mostrar el contenido dentro de un archivo: 📌

cat <nombre_de_archivo>

Por ejemplo:

cat new_test.html

Editar un archivo de texto: 📌

nano <nombre_de_archivo>.txt

El archivo debe tener extensión .txt, por ejemplo:

nano test.txt

Buscar un archivo tomando en cuenta las mayúsculas y minúsculas: 📌

grep <nombre_de_archivo>

Por ejemplo:

grep new_test.html

Buscar un archivo sin tomar en cuenta las mayúsculas y minúsculas: 📌

grep -i <nombre_de_archivo>

Por ejemplo:

grep -i new_test.html

Eliminar carpetas permanentemente (poco recomendado): 📌

rm -r

Eliminar una carpeta y preguntar por confirmación: 📌

rm -i

Eliminar un archivo en específico: 📌

rm -r <nombe_de_archivo>

Por ejemplo:

rm -r new_test.html

Comando para preguntarle al repositorio de dependencias si hay actualizaciones: 📌

sudo apt-get uptade

Aplicar las actualizaciones: 📌

Se recomienda hacerlo habitualmente:

sudo apt-get upgrade

Instalar nodejs: 📌

nodejs es un ambiente de ejecución para JS:

sudo apt install nodejs

Instalar un manejador de paquetes: 📌

Un manejador de paquetes es como una store que está en constante actualización (npm instala paquetes de forma permanente):

sudo apt install npm

Ver versión de nodejs instalado: 📌

node -v

Abrir VS Code en el directorio actual: 📌

code .

Hacer ping a una página web: 📌

Si se quiere ver el estado de conectividad de un sitio web: ping <dirección_web> o <dirección_ip>
Por ejemplo:

ping google.com

Para matar un proceso en ejecución presionar las teclas: 📌

Ctrl + c

Mostrar los procesos en ejecución: 📌

ps

Eliminar el historial de comandos de la terminal: 📌

clear

Para mover la vista de la terminal, ocultando la vista actual, presionar las teclas: 📌

Ctrl + Alt + l

Reiniciar la terminal sin necesidad de cerrarla o abrirla: 📌

reset

Se puede salir de la terminal presionando las teclas: 📌

Ctrl + d

Salir de la terminal: 📌

exit

Camilo Andrés Pedroza Mesa

Hace 3 años

Uff te saltaste la barda, gracias por compartir.

Marcos Monteverde

Hace 3 años

tremendo!

Comentarios (256)256 comentarios

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

Hace 4 años

Samuel Soto Hoyos

Eduardo Monzón

Sebastian Calderon

Marian Parra

Gustavo Antonio Vega Padron

Daniel Jiménez Prestan

Patricia Velazquez

JOSE DAVID OROZCO CASTAÑEDA

Bauti Sosa

Ian Herrera Suarez

Alejandro Zepeda

STIVE GONZALEZ

Luis Enrique Salazar Ramos

Airam Rojas Álvarez

Edgar Ruben Godoy Liseras

David Antonio Morales Barrera

steven Lerma

Gabriel Chamorro

Camilo Andrés Hurtado Erasso

Lucas Aragón

Julian Sanchez

Hace 2 años

Daniel Hidelbrando Filgueira Moreno

Diego Jacome

Cristhian Alexis Vera Sandoval

Felipe Silva Gonzalez

Javier Mauricio Rodriguez Villamil

Juan Diego Bolaños Peña

ROMMEL DUAREZ SAENZ

Luis Castro

Alexander Caceres Zegarra

Cesar Vera

Santiago Betancur Bautista

Carlota Manrique Ruiz

John Fredy Riascos

Ediel Flores Vera

Herramientas para la web

Configuración de Entorno de Desarrollo en Windows

Instalación y uso de Google Chrome para desarrollo web

Herramientas para Desarrolladores en Google Chrome

Editor de texto

Uso de Visual Studio Code para Desarrollo Web Básico

Extensiones esenciales para personalizar Visual Studio Code

Cómo usar Linux dentro de Windows

Instalación y configuración de Windows Subsystem for Linux 2

Activar WSL2 y resolver errores comunes

Configuración y Uso de Windows Subsystem for Linux (WSL) con Ubuntu

Instala Ubuntu en VirtualBox sin WSL

Instala Visual Studio Code en Ubuntu con VirtualBox

Comandos básicos de terminal Linux para web

Instalar Node.js y NPM en Ubuntu

Instalación y Ejecución Básica de Python en Linux

Git y Github

Registro y configuración inicial de GitHub en WSL

Configura tu llave SSH en GitHub

Sube tu primer repositorio a GitHub

Trucos de Windows

Instalación y Uso de PowerToys en Windows

Comandos básicos de terminal Linux para web

Progreso del curso

Herramientas para la web

Editor de texto

Cómo usar Linux dentro de Windows

Git y Github

Trucos de Windows

Recursos

Recursos