Landing Page in 10 Minutes with Astro and CodeStitch

Summary

En este video, Ryan de Cedar Studios Web Design nos guía a través del proceso de construcción rápida de una página de aterrizaje utilizando Astro, un marco web veloz y potente, junto con Code Stitch, una biblioteca de componentes de HTML y CSS. Comenzando con la creación de un nuevo proyecto en Astro, Ryan explica cómo instalar dependencias, configurar TypeScript y estructurar el sitio web usando componentes y estilos proporcionados por Code Stitch. El tutorial abarca desde la implementación de una barra de navegación y un componente hero hasta la adición de otros elementos esenciales de la página, demostrando lo sencillo y rápido que es construir una página de aterrizaje atractiva y funcional para pequeñas empresas.

Takeaways

• 🛠️ El script proporciona una guía detallada sobre cómo construir una página de aterrizaje utilizando Astro, un framework web rápido y potente, y Code Stitch, una biblioteca de componentes de HTML y CSS para pequeñas empresas.
• 🚀 Astro utiliza un enfoque basado en componentes, lo que facilita la creación de sitios web como bloques de Lego, copiando y pegando componentes de Code Stitch.
• 📁 Astro organiza las páginas web en la carpeta 'Pages', enrutando automáticamente cada archivo como una página individual.
• ⚙️ Los archivos .astro admiten 'front matter' para ejecutar código JavaScript antes de construir el sitio estático o realizar el renderizado del lado del servidor.
• 📄 Los estilos CSS se pueden incluir en etiquetas <style> dentro de los componentes, y se aplicarán de forma aislada a ese componente específico.
• 🔄 Astro permite importar componentes fácilmente usando la sintaxis de importación de ES6.
• 🌐 Los componentes de Code Stitch son responsivos y optimizados para dispositivos móviles de forma predeterminada.
• 💻 El script demuestra la creación rápida de una página de aterrizaje completa combinando componentes de Astro y Code Stitch.
• 📖 Se mencionan futuras lecciones sobre el uso de la sintaxis JSX dentro de los archivos Astro y la creación de layouts.
• ⏱️ El enfoque de Astro y Code Stitch permite construir sitios web de forma rápida y eficiente, especialmente para pequeñas empresas que buscan una solución sencilla y efectiva.

Q & A

¿Qué es Astro y por qué se recomienda utilizarlo?

Astro es un marco web rápido y potente. Se recomienda utilizarlo porque facilita la creación de sitios web de forma rápida y eficiente, especialmente sitios de aterrizaje (landing pages).

¿Qué es codeStitch y por qué se utiliza junto con Astro?

codeStitch es una biblioteca de componentes de HTML y CSS puros, diseñada específicamente para pequeñas empresas. Se utiliza junto con Astro porque ofrece componentes responsivos y atractivos que se pueden integrar fácilmente en los proyectos de Astro.

¿Cuál es el propósito de la carpeta 'páginas' en un proyecto de Astro?

La carpeta 'páginas' (pages) en un proyecto de Astro contiene cada una de las páginas web individuales que componen el sitio web. Astro enruta automáticamente estas páginas.

Explique la funcionalidad del 'front matter' en los archivos de Astro.

El 'front matter' es una sección YAML al inicio de los archivos de Astro que permite ejecutar código JavaScript antes de construir el sitio estático o renderizarlo en el servidor. Es útil para importar datos, componentes y realizar operaciones previas.

¿Qué ventajas ofrece el enfoque basado en componentes al desarrollar con Astro y codeStitch?

El enfoque basado en componentes facilita el desarrollo modular, reutilizando componentes y ensamblándolos como bloques de construcción. Esto agiliza el proceso de creación de sitios web, aprovechando los componentes prediseñados de codeStitch.

¿Cómo se pueden aplicar estilos CSS a los componentes en Astro?

En Astro, se pueden aplicar estilos CSS directamente en los componentes utilizando etiquetas <style>. Los estilos CSS incluidos en un componente estarán automáticamente limitados en su alcance a ese componente.

¿Qué papel juega el archivo 'index.astro' en un proyecto de Astro?

El archivo 'index.astro' es el punto de entrada principal de un proyecto de Astro. Representa la página de inicio del sitio web y es donde se ensamblan los componentes para construir la estructura completa del sitio.

¿Cómo se importan y utilizan componentes en los archivos de Astro?

Los componentes se importan en los archivos de Astro utilizando la sintaxis de importación de ES6. Una vez importados, se pueden utilizar como etiquetas personalizadas en el marcado HTML del archivo.

¿Qué son las 'core styles' en codeStitch y cómo se integran en un proyecto de Astro?

Las 'core styles' en codeStitch son estilos CSS globales que definen colores, fuentes y otros estilos base para toda la aplicación. Se pueden integrar en un proyecto de Astro incluyéndolos en un archivo de estilos global o directamente en el archivo 'index.astro'.

¿Qué otros temas se mencionan que se cubrirán en un video futuro relacionado con Astro?

Se mencionan los siguientes temas que se cubrirán en un video futuro: usar la sintaxis JSX dentro de los archivos de Astro, trabajar con diseños (layouts) en Astro y construir múltiples páginas.

Outlines

00:00

🏗️ Creando un proyecto Astro desde cero

El párrafo describe cómo crear un nuevo proyecto Astro desde la terminal utilizando el comando 'npm create astro@latest'. Explica el proceso de instalación, configuración y lanzamiento del servidor de desarrollo. También menciona que se utilizará Typescript para el desarrollo y se proporcionará un breve resumen de cómo Astro maneja el enrutamiento de páginas a través de la carpeta 'pages'. Además, introduce el concepto de 'front matter' en los archivos Astro, que permite ejecutar JavaScript antes de la construcción del sitio.

05:00

🚀 Integrando componentes CodeStitch en Astro

Este párrafo explica cómo integrar componentes de CodeStitch en un proyecto Astro. Comienza copiando el HTML, CSS y JavaScript de un componente de navegación desde CodeStitch. Luego, crea un nuevo componente 'Navbar' en Astro y pega el código copiado. A continuación, importa y renderiza el componente 'Navbar' en la página principal. Después, repite el proceso para un componente de 'Hero' y otros componentes adicionales. Finalmente, muestra el resultado final de una página de destino completa creada rápidamente utilizando Astro y CodeStitch.

Keywords

💡Astro

Astro es un marco de trabajo web mencionado en el guión. Se describe como una herramienta rápida y poderosa para crear sitios web. Astro se utiliza en este video para construir una página de aterrizaje de manera rápida y eficiente, combinándolo con la biblioteca de componentes CodeStitch. Por ejemplo, se muestra cómo crear un nuevo proyecto de Astro y comenzar a agregar componentes HTML y CSS rápidamente.

💡CodeStitch

CodeStitch es una biblioteca de componentes de HTML y CSS mencionada en el guión. Se describe como una colección de componentes web responsivos y específicamente diseñados para pequeñas empresas. En el video, se utiliza CodeStitch para obtener los códigos HTML, CSS y JavaScript necesarios para construir componentes como la barra de navegación, el héroe y otros elementos de la página de aterrizaje, acelerando así el proceso de desarrollo.

💡Componentes

Los componentes son elementos reutilizables de una interfaz de usuario que se pueden combinar para construir una aplicación o sitio web. En el contexto del video, se hace referencia a los componentes como bloques de construcción para ensamblar rápidamente una página de aterrizaje. Se muestran ejemplos de cómo crear archivos separados para componentes como la barra de navegación, el héroe, las secciones de precios y comentarios, y el pie de página, importándolos luego al archivo principal de Astro.

💡HTML

HTML (Lenguaje de Marcado de Hipertexto) es el lenguaje estándar para crear y estructurar el contenido de las páginas web. En el video, se muestra cómo copiar y pegar el código HTML de los componentes de CodeStitch directamente en los archivos de componentes de Astro, lo que facilita la creación rápida de la estructura básica de la página de aterrizaje.

💡CSS

CSS (Hojas de Estilo en Cascada) es un lenguaje de diseño utilizado para controlar la presentación y el estilo visual de los elementos en una página web. En el video, se destaca cómo Astro permite incluir el CSS dentro de las etiquetas de estilo en los archivos de componentes, lo que mantiene el estilo encapsulado y específico para cada componente. Además, se muestra cómo importar estilos globales de CodeStitch para mantener una apariencia coherente en todo el sitio.

💡JavaScript

JavaScript es un lenguaje de programación utilizado principalmente para agregar interactividad y comportamiento dinámico a las páginas web. En el video, se muestra cómo Astro permite incrustar JavaScript dentro de las etiquetas de script en los archivos de componentes. Esto se ilustra al agregar la funcionalidad del menú desplegable para la barra de navegación en dispositivos móviles, copiando el código JavaScript proporcionado por CodeStitch.

💡Front Matter

Front Matter se refiere a la sección inicial en los archivos de Astro, delimitada por tres guiones, donde se puede ejecutar código JavaScript antes de procesar el contenido del archivo. En el video, se muestra cómo utilizar el Front Matter para importar componentes y variables que se utilizarán en la página. Por ejemplo, se importa el componente de la barra de navegación y se declara una variable de suma para demostrar cómo se puede ejecutar código JavaScript en esta sección.

💡Responsivo

Responsivo, o diseño web responsivo, se refiere a la capacidad de un sitio web para adaptarse y verse bien en diferentes tamaños de pantalla y dispositivos, como computadoras de escritorio, tabletas y teléfonos móviles. En el video, se enfatiza que los componentes de CodeStitch son responsivos de forma predeterminada, lo que facilita la creación de una página de aterrizaje que se vea bien en dispositivos de diferentes tamaños sin esfuerzo adicional.

💡Barra de navegación

Una barra de navegación es un elemento común en los sitios web que proporciona enlaces a diferentes secciones o páginas del sitio. En el video, se muestra cómo construir una barra de navegación responsiva utilizando un componente de CodeStitch, que incluye un menú desplegable para dispositivos móviles. Se enfatiza la facilidad de copiar y pegar el código HTML, CSS y JavaScript necesario para este componente en el archivo de componente de Astro correspondiente.

💡Héroe

Un héroe, o sección de héroe, es un elemento común en las páginas de aterrizaje que ocupa una gran parte de la pantalla y generalmente contiene un encabezado atractivo, una breve descripción y posiblemente un botón de llamada a la acción. En el video, se demuestra cómo agregar un componente de héroe desde CodeStitch a la página de aterrizaje, copiando y pegando el código HTML y CSS correspondiente en el archivo de componente de Astro.

Highlights

Astro is a web framework that's very fast and powerful, and codeStitch is a component library with pure HTML and CSS components that are responsive and designed for small businesses.

Creating a new Astro project with the latest version using 'npm create astro@latest'.

Astro files have a YAML-style front matter where you can execute JavaScript code before building the static site or server-side rendering.

Demonstrating how to import and use a navigation bar component from codeStitch, including HTML, CSS, and JavaScript.

Showing how Astro styles are scoped by default to the component file, and how to include global styles.

Importing and using a hero component from codeStitch, including HTML and CSS.

Building multiple components by copying and pasting from codeStitch, including side-by-side sections, team section, pricing, reviews, call-to-action, and footer.

Mentioning future plans to demonstrate using JSX syntax within Astro files for fetching data from a CMS, and discussing layouts and building more pages.

Demonstrating the ease and speed of building a landing page using Astro and codeStitch.

Transcripts

hi this is Ryan with cedar Studios web

design today we're going to build a

landing page very quickly using Astro

which is one of our favorite tools it's

a web framework that's very fast and

very powerful and code Stitch which is a

component library with pure HTML and CSS

components that're very nice they're

responsive and they're specifically

designed for small businesses so the

first thing we're going to do is build a

new project I'll copy this here head

into my developer

folder paste that and PM create Astro at

latest that will create an astro project

of the latest version it's going to

launch this installer it's going to ask

for Nam so we'll call it Astro dcode

Stitch we'll just build an empty project

for now and we'll hit install

dependencies this will take a minute to

run while it does I just want to explain

that this is not going to be a very

in-depth Astro or code Stitch tutorial

there's some good videos for that I'll

link a couple below this but I'm just

going to show you a proof of concept of

how fast you can build a site using

these

tools so once this gets done running

it's going to ask us if we want to use

typescript in our project any second now

there it goes I'll say yes we're not

going to use any today but that's

primarily what I use for development and

then I'm going to skip adding a git

repository so this is all created now

I'm going

to go into this project and then I'm

going to

launch so this has built a project for

us it's pretty Bare Bones right now with

a few files in here but the most

important that we're going to be paying

attention to today is the source folder

which has all the code we need to build

a website and then there's this special

folder inside called Pages which is

going to contain each individual web

page that we're using and Astro is going

to Route these Pages automatically it's

already built for us an index page it

looks like this you can see some HTML

boiler plate there's just an H1 here

that says Astro so this should be pretty

Bare Bones so we'll just do npm start

which will launch a Dev server for

us go to this URL and yep you can see

the H1 right here another feature of

Astro files which are basically just

HTML files with a little extra is that

they have this yaml style front matter

in which you can execute JavaScript code

as that's run before you build a static

site or that's run on the server if you

have serers side rendering so for

instance I could create a variable

called sum it'll just equal 1 plus

two and then down here I could open up

an H2 Tag and Call sum and here you go

we have three so again this isn't client

side JavaScript that's going to run on

the website if we wanted that we could

just add a script tag right here and add

some

JavaScript but this is going to be run

uh as you build a website so this is

great great for pulling in data pulling

in components um anything you

need so the first thing we want to do is

let's go ahead and strip this stuff out

we just have blank website now well

we're going to want to go to code Stitch

and first find a nav bar I'm just on a

free account today so you can see what's

available to you before you sign up so

these are locked but we have a couple

options right here there one with a

drop- down and then there's just kind of

like a standard one so let's go to this

we'll hit get

code and we'll see all the files I need

to build a really nice nav bar that's

responsive and mobile friendly so we

have HTML and that's going to place all

of the uh components on or all the

elements on the website we've got CSS

which is going to style those elements

we have one called core Styles I should

put this somewhere in my project and

it'll just give me access to things like

colors like primary colors that's going

to apply throughout the entire website

and then for this particular component

there's going to be some JavaScript

because it's going to make a little

hamburger button on the mobile menu that

you click to open and close it so I'm

going to go ahead and copy this HTML and

come in here to my index. asro file now

I could just start pasting it here in

the body or we could take a more

component-based approach to developing

this in which I would add a new folder

in Source called

components and a new file I'll call it

navb bar. asro and in here I'll paste

that

HTML if I come back here I can again use

this front matter to run JavaScript so

I'm going to

import the

navbar

from components folder navb bar.

Astro and that's going to import this

thing at build time so it's not going to

slow down my website at all to import

this and these Astro files even though

it's just HTML it's going to export

itself as a component for me to use like

this automatically

so here in the body I can open a new tag

and close it off just like a jsx react

kind of component and hit save and now

if I come in here I see my whole nav bar

it's not styled yet CU we haven't added

that in but you can tell that just by

building out components in their own

files copy pasting them from code Stitch

that was super easy I can start just

building these things like Lego blocks I

could have a hero comp comp next

Etc so let's go ahead and finish this

one out and then we'll start with a hero

component so we need the Styles next I'm

going to close these out for

now and go to our CSS I'll copy and now

what I could do is I could add a new

file that's index.css and split it up

like that or I can go into my nav bar I

can open up a style tag and put it all

there and what's great about Astro is

that these styles are going to be scoped

by default to Navar this folder or this

file

rather and so in here I'm going to go

ahead and comment this out for now if I

hit save I have a styled Navar some

things are going to be a little off

right there's this contact us button

that seems to be invisible the reason

that is is because I haven't copied

these core Styles yet that's a code

Stitch thing so I'm going to go ahead

and copy this and again it says put it

in a global style sheet

I could make a global style sheet in

here or I could just go into my index

file and do the same thing just do a

style tag put it in there and save it

come back here and look now everything's

styled it has this nice orange color

that's going to apply throughout the

website the fonts a little off it's the

Sarah fonts and I don't think that's set

in here so I'm just going to go ahead

and do just a very simple font family

system that'll give me this nice sansera

font okay so it was that easy to build a

Navar component and style it and bring

it into my website now you will notice

this looks great on desktop or mobile

but this hamburger button isn't working

and that's cuz I haven't just copied

this jss anymore or yet so I can go back

to my nabar and I can just simply do a

script tag paste it in there types

script's going to yell at me a little

bit because I have that configured for

the project but I come in here and now

it's

working this script tag is also going to

be scoped to the Navar

file so let's go

ahead and let's

start in here I'll collapse this let's

start building this hero right same

thing again we're going to add a new

file we're going to call it hero. Astro

I already picked one out from code

Stitch that I like it's going to be this

one going to hit get code there's going

to be the HTML which I'm going to copy

in now I'll go ahead and do that copy it

here paste it save and then there's

going to be some CSS so I'll copy that

put that in the style

tag

oops paste it save it and then there's

some core styles again I don't need to

recopy this because I already have this

saved right here so now my heroes about

ready to go I'll do command period

little VSS code trick to add the import

and hit save

and there we go now I have a hero that's

taking its orange color from my root uh

Styles right here and everything's

looking great so far so I'm going to

skip ahead and add a few more components

just copy and pasting from code Stitch

and I'll see back here in a second and

just show you the full

website okay so now you can see in

components I've built a lot more

components I have pulled them in here in

the front matter and then I've put them

down here so if I I scroll I see I have

a nice side by side a little meet the

team section some pricing some reviews a

call to action and a footer and that is

how easy it is to build a landing page

with Astro and code Stitch and in my

next video I'll show you some extra fun

things like using jsx syntax

within the Astro files down here which

is great for if you want to pull in data

from a cm m s or something like that

I'll talk about uh layouts in Astro and

build more pages with you but for now I

just wanted to show you a little bit

about how fast you can build a landing

page with Astro and code

Stitch