portfolio starter
1.0.0
Este es un iniciador de cartera liviano construido con un altura. Está orientado a diseñadores, ilustradores, arquitectos y cualquier otra persona que esté interesada en compartir su trabajo y actividad.
Es posible que el usuario previsto no sepa cómo codificar, pero está interesado en la tecnología detrás de su sitio web, está dispuesto a escribir en Markdown y se complace en seguir esta documentación.
Visite Portfolio-Starter.sb-ph.com para verlo. El contenido y el código en este repositorio impulsan el sitio de demostración.
"No Code" es un pequeño nombre inapropiado. Sus archivos de contenido están técnicamente escritos en código, pero es una sintaxis muy legible llamada Markdown (más sobre esto más adelante). Lo que queremos decir con "sin código" es que no tendrá que tocar la línea de comando, GIT o abrir un editor de código en su computadora.
GitHub es una plataforma que almacena el código. El código y el contenido de su sitio web vivirán en GitHub. Si ya tiene una cuenta, continúe e inicie sesión. Si no, regístrese para obtener una cuenta. La cuenta individual gratuita es suficiente.
Netlify y Zeit están alojando proveedores que ofrecen niveles generosos gratuitos para personas con sitios web estáticos como este. Netlify es quizás un poquito más sencillo para los siguientes pasos y parece ser utilizado por más de altavos usuarios, pero ambas son plataformas sólidas. Si ya tiene una cuenta con cualquiera de estas plataformas, inicie sesión. Si no lo hace, regístrese para una.
Al hacer clic en uno de los botones a continuación, clonará este repositorio (es decir, creará una versión duplicada que vive en su propia cuenta de GitHub) y luego implementará este nuevo sitio web en su alojamiento estático.
Antes de continuar, decida un nombre para su repositorio. Debe ser algo similar al nombre de su sitio, pero solo debe incluir letras, números y guiones minúsculas. Por ejemplo, el nombre de este repositorio es portfolio-starter .
Si tiene una cuenta de Netlify , haga clic en este botón y siga las instrucciones simples de Netlify para conectar Netlify y GitHub:
Si tiene una cuenta de Zeit , haga clic en el botón a continuación y luego siga las instrucciones de Zeit:
Las instrucciones de Zeit lo guiarán a través de cómo instalar Zeit ahora para GitHub para que pueda crear un repositorio para usted y pueda implementar sus cambios. Da permiso a todos los repositorios al instalar ZEIT ahora. Zeit debe detectar automáticamente que está utilizando altentamente con la configuración de la siguiente manera (no necesita preocuparse por el comando de desarrollo):
Comando de compilación: npx @11ty/eleventy Directorio de salida: _site
Cuando haya terminado de seguir las instrucciones anteriores para Netlify o ZEIT , será redirigido al tablero de su sitio web. Esto muestra su subdominio predeterminado y otra información importante sobre su sitio. También recibirá algunos correos electrónicos que le hacen saber que los servicios están conectados.
Zeit le permite seleccionar la visibilidad de su repositorio cuando lo configura. Netlify, por otro lado, crea automáticamente un repositorio público. Consulte la documentación de GitHub si desea ajustar la visibilidad de su repositorio.
Para editar o agregar contenido sin la línea de comando, debe usar la interfaz de GitHub para navegar sus archivos dentro de la carpeta /content en su repositorio. Consulte la referencia de contenido para obtener más información sobre la estructura de la carpeta /content y cada uno de los archivos dentro de ella, particularmente el archivo de datos global que incluye el título y la URL de su sitio web.
Para editar o eliminar un archivo existente, debe abrir el archivo relevante en GitHub y luego hacer clic en el botón Editar (el botón con el icono del lápiz) o el botón Eliminar (el botón con el contenedor) en la esquina superior derecha sobre el contenido de la página.
Si desea agregar una nueva página, debe navegar a la carpeta de posts , projects o pages dependiendo de lo que desee agregar y luego hacer clic en el botón "Crear archivo nuevo" cerca de la parte superior de la página. Esto abrirá una nueva página de editor donde puede agregar su nombre de archivo y contenido de archivo. Dado que todo el contenido de texto está escrito en Markdown, el nombre de archivo debe terminar en md (es decir, my-post-name.md ).
Si desea agregar medios, debe navegar a la carpeta media y luego hacer clic en el botón "Cargar archivos" cerca de la parte superior de la página. Esto le dará un área para cargar uno o más archivos. Consulte la guía de medios para obtener consejos sobre los tipos y tamaños de archivos.
Para guardar ediciones o adiciones realizadas en GitHub, debe confirmar sus cambios utilizando la interfaz de GitHub en la base de la página. Si conectó Netlify o Zeit en el paso anterior, una confirmación también le dirá a GitHub que implementa automáticamente sus cambios. Para obtener más información sobre lo que es un compromiso, vea el glosario de GitHub. Cuando comete una edición o una adición directamente en GitHub, puede usar el mensaje de confirmación predeterminado que está pre-relleno y debe comprometerse directamente con la rama master (la configuración predeterminada).
Las instrucciones de configuración de la línea de comandos suponen que tiene familiaridad con la línea de comandos, que tiene la versión 8 o más de Node.js instalado en su computadora y que tiene una cuenta GitHub.
Repositorio de clones localmente en una carpeta de proyecto nombrada ejecutando git clone https://github.com/sb-ph/portfolio-starter.git my-website y luego cambia a la nueva carpeta de proyecto ejecutando cd my-website . Ejecute npm install para instalar las dependencias, incluidas las elevadas.
Ejecute rm -rf .git para eliminar el historial GIT para un nuevo comienzo, y luego ejecute git init para inicializar un nuevo repositorio de Git. Comprometer todos sus archivos para crear una nueva rama master y luego agregue su proyecto a GitHub usando la línea de comandos.
Para construir el sitio web en el directorio Gitignored /_site , ejecute npx @11ty/eleventy . Para girar un servidor para el desarrollo local o la edición de contenido, ejecute npx @11ty/eleventy --serve . Esto hará que su sitio esté disponible en http: // localhost: 8080, y el sitio recargará automáticamente cuando realice cualquier cambio.
Si desea usar Netlify o ZEIT, siga su documentación para que su repositorio se conecte a su cuenta de alojamiento para la implementación continua. Si desea utilizar otro proveedor de alojamiento, puede encontrar sus archivos estáticos en el directorio /_site después de generar una compilación.
Para editar el contenido localmente, gire un servidor ejecutando npx @11ty/eleventy --serve y luego ajuste los archivos Markdown y JSON dentro del directorio /content . Si su sitio está conectado a la implementación continua, asegúrese de comprometer sus cambios en la rama correcta (probablemente master ) de lo contrario no se implementarán.
Netlify y Zeit le brindan un subdominio predeterminado automáticamente cuando implementa su sitio web, por lo que este es un paso opcional. Si desea usar su propio dominio, debe seguir sus instrucciones para configurar esto. Lea más sobre dominios personalizados en ZEIT o lea más sobre dominios personalizados en Netlify.
Ambas guías lo guiarán a través de cómo configurar el sistema de nombre de dominio de su dominio (DNS). Tenga en cuenta que DNS puede ser delicado. Los registros de DNS para su dominio le dicen a los navegadores dónde encontrar su sitio web y le dicen a los servidores de correo electrónico cómo dirigirle los correos electrónicos. Asegúrese de escribir cualquier registro DNS existente antes de cambiar cualquier cosa.
Si reúne a los servidores de nombres como parte del proceso de configuración de dominio personalizado y ya está utilizando su dominio para el correo electrónico, debe agregar sus registros MX y cualquier otro registro relacionado con el correo electrónico a su nuevo proveedor de alojamiento antes de reintinar los servidores de nombres. Si no lo hace, su correo electrónico puede disminuir.
Si está en una versión anterior de Portfolio Starter y desea actualizarla a una versión más nueva, recomendamos hacerlo manualmente reemplazando todas las carpetas y archivos, excepto la carpeta /content . Debe hacer una copia de seguridad de su sitio web antes de realizar actualizaciones o cambios importantes. Visite su página de inicio del repositorio y haga clic en el botón Verde "Clon o descargar" para descargar un archivo con cremallera de todo el repositorio, luego guárdelo en algún lugar seguro.
Todo el contenido vive en la carpeta /content . Por defecto, el arranque de la cartera se llena con el contenido en uso en el sitio de demostración.
El contenido incluye los datos globales, los archivos de Markdown para cada página y los medios. Es importante formatear y organizar cada uno de estos archivos de una manera particular para que su sitio se implementa sin errores y se ve como se esperaba.
Ciertos metadatos, como el título del sitio y la URL, se utilizan en todo el sitio web. Todos estos datos globales están contenidos en el archivo /content/_data/global.json .
Los detalles en este archivo deben establecerse cuando el sitio web se configure por primera vez y luego probablemente no se toque nuevamente a menos que el sitio web se mueva o el dominio cambie. Este es un ejemplo del archivo global.json :
{
"title" : " Tortor Parturient Ridiculus " ,
"lang" : " en " ,
"footer" : " (c) Jane Doe, 2020 " ,
"url" : " https://tpr.com " ,
"author" : {
"name" : " Jane Doe " ,
"email" : " [email protected] "
}
} Este es el único contenido que debe escribirse en JSON, un formato de texto que se utiliza para estructurar datos. La sintaxis JSON es muy estricta. Todas las claves (es decir, title ) y todas las cadenas (es decir, My website ) están adjuntas en cotizaciones dobles, y todas las propiedades (es decir "title": "My website" ) están separadas por comas, excepto la última propiedad. Todos los objetos JSON están encerrados en corchetes {} . La sintaxis incorrecta en este archivo dará como resultado un error, lo que significa que sus cambios no se implementarán.
Estas son las propiedades con más detalle.
| Llave | Formato | Por defecto | Descripción |
|---|---|---|---|
author | Objeto json | - | Un objeto JSON que incluye el nombre y la dirección de correo electrónico del autor del sitio web |
footer | Reducción | un corto crédito | El texto del pie de página escrito en Markdown |
lang * | texto | en | La etiqueta de idioma IANA que declara su idioma de sitio web |
title * | texto | - | El título de su sitio web |
url * | url | - | URL de su sitio web |
El pie de página incluye un corto crédito por defecto. Siéntase libre de reemplazarlo con cualquier texto que funcione mejor para usted. Esto puede incluir un aviso de derechos de autor, un colofón, datos de contacto u otra información sobresaliente. El pie de página no soporta los descansos de la línea.
Todas las páginas principales de contenido, incluidas las publicaciones, proyectos, páginas, página de inicio, página de error 404, blog y feed RSS se escriben en Markdown. Markdown le permite escribir utilizando un formato de texto plano fácil de leer y fácil de escribir que se puede convertir en HTML válido. Visite el sitio web de Markdown-It para obtener una lista completa de opciones de formato que incluyen listas, enlaces, encabezados y más. También puede echar un vistazo a la fuente de este archivo ReadMe; ¡También está escrito en Markdown!
Todos los archivos de Markdown terminan en la extensión .md , y este SRIVEKit usa el resto del nombre de archivo para generar la babosa de la página (la parte final de la URL de una página).
No se publicarán carpetas o archivos precedidos por un subrayador _ . Debido a eso, puede usar un bajo para crear borradores como /content/posts/_testing-a-draft.md . Sin embargo , es fundamental recordar que su borrador será visible para otros en GitHub si su repositorio es público.
Cada archivo de Markdown comienza con YAML Frontmatter. YAML es una sintaxis de texto plano que permite que el texto legible por humanos se formatee como datos estructurados. Frontmatter es el texto en la parte superior del archivo cercado por tres guiones a cada lado, como así:
---
layout : page
title : Contact
description : Get in touch with me via email or phone.
image : cloud-01.jpeg
---
La primera marina YAML incluye una serie de propiedades (teclas y valores separados por un colon, que definen metadatos específicos de la página. Las teclas siempre deben escribirse exactamente como se muestra en esta documentación. Escribir Layout en lugar del layout , por ejemplo, dará como resultado un error.
Estas son las propiedades básicas de YAML que deben usarse en la parte delantera de cada página.
| Llave | Formato | Por defecto | Descripción |
|---|---|---|---|
description | texto | - | Descripción breve del contenido de la página |
eleventyNavigation | Yaml | - | Un objeto Yaml, descrito a continuación |
image | texto | - | El nombre de archivo de la imagen que debe usarse para las tarjetas de redes sociales |
layout * | texto | - | El diseño de la página |
permalink | texto | varios | La página Permalink |
title * | texto | - | El título de la página |
El título y el diseño de la página son necesarios en cada archivo de Markdown. El diseño de la página determina cómo se muestra el contenido. Al crear nuevas páginas, debe usar los diseños project , post o page .
La propiedad description es muy recomendable para todas las páginas, ya que se usa para tarjetas de redes sociales y se muestra en los resultados del motor de búsqueda. Debe estar entre 50 y 160 caracteres, y nunca debe duplicarse en diferentes páginas.
Si usa una image para las redes sociales, consulte la documentación proporcionada por las plataformas de redes sociales para obtener orientación sobre un tamaño de imagen apropiado. Como regla general, un JPG de 1200px de ancho de formato paisajista debe ser apropiado en la mayoría de las plataformas.
La propiedad permalink le permite establecer la URL para una página o apagarla por completo. Los enlaces permanentes siempre se generan automáticamente, por lo que rara vez debe necesitar usar esta propiedad.
La propiedad eleventyNavigation es un poco más compleja. Le dice al Eletenty Navegation Plugin qué colocar en el menú. Este es un ejemplo de la propiedad en uso en la página /content/pages/about.md :
---
layout : default
title : About
eleventyNavigation :
key : About
order : 0
---
La subproperiedad key le dice a Elety que agregue esta página a la navegación con el texto "Acerca de". La subproperización order le dice a Eleenty que debería ser lo primero en la navegación.
También puede agregar enlaces externos a la navegación, por ejemplo, un enlace a su github. Consulte la página /content/pages/github.md para obtener un ejemplo con el siguiente primer marco:
Si desea agregar un enlace externo a la navegación, puede crear un nuevo archivo de Markdown (por ejemplo, /content/external.md ) con el futuro frontal:
---
eleventyNavigation :
key : GitHub ↗
order : 3
url : http://github.com/sb-ph/portfolio-starter
permalink : false
---
La subpropersidad key le dice a Eleenty que agregue esta página a la navegación con el texto "GitHub" ( ↗ es el código HTML para una flecha del noreste). La subpropersidad order se establece en 3 para que llegue al último en el menú, y la subprovety url se establece en la URL deseada. La propiedad permalink se establece en falso para que esto no publique una página correspondiente en nuestro sitio web.
Las páginas se encuentran en la carpeta /content/pages .
layout de una página debe establecerse en la page en la redamatter. Las páginas admiten solo las propiedades básicas enumeradas anteriormente.
Las publicaciones se encuentran en la carpeta /content/posts .
layout de una publicación debe estar configurada para post en la redamatter. Las publicaciones admiten las propiedades básicas, así como la propiedad date . Este es un ejemplo de la zatera de una publicación:
---
layout : post
title : Demo post
date : 2020-03-29 18:00:00
---
La propiedad date determina la fecha de publicación de la publicación y, por lo tanto, el pedido en el blog y RSS.
Puede usar el comentario html <!--more--> dentro de su contenido de Markdown para generar un extracto para sus publicaciones como así:
Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<!-- more -->
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Si usa more comentarios, solo el texto que precede al comentario se mostrará en el blog y se mostrará un enlace "Leer más" después de este extracto.
Los proyectos se encuentran en la carpeta /content/projects .
layout de un proyecto debe configurarse para project en la redonma. Los proyectos admiten las propiedades básicas, así como las propiedades de dateStart , dateEnd y media . Este es un ejemplo de la redonma para una página de proyecto.
---
layout : project
title : Your project title
dateStart : 1988-02-01
dateEnd : 2001-03-01
media :
- type : image
filename : cloud-01.jpeg
size : md
alt : A cloud
caption : A collaboration with [Piper Haywood](https://piperhaywood.com)
- type : video
filename : ria-pacquee.mp4
controls : false
caption : A piece by [Ria Pacquée](http://riapacquee.com/)
---
Y estas son las propiedades específicas del proyecto con más detalle:
| Llave | Formato | Por defecto | Descripción |
|---|---|---|---|
dateEnd * | YYYY-MM-DD | - | La fecha de finalización de su proyecto, utilizada para clasificar |
dateStart | YYYY-MM-DD | - | La fecha de inicio de su proyecto |
media | Yaml | - | Una lista de Yaml de bloques de medios, descrita a continuación |
La propiedad de los medios es una lista YAML estrictamente formatada que puede contener bloques de imagen y video. Las propiedades que se aplican tanto a las imágenes como a los videos se describen a continuación.
| Llave | Formato | Por defecto | Descripción |
|---|---|---|---|
caption | reducción | - | Un título que describe sus medios |
filename * | texto | - | El nombre de archivo de sus medios |
height | entero | - | La altura de sus medios en píxeles |
width | entero | - | El ancho de sus medios en píxeles |
size | texto | lg | El tamaño que se debe mostrar los medios; sm , md o lg |
type * | texto | - | image o video |
Los bloques de imagen admiten las siguientes propiedades adicionales:
| Llave | Formato | Por defecto | Descripción |
|---|---|---|---|
alt * | texto | - | El texto alternativo para tu imagen |
featured | booleano | FALSO | Si la imagen debe usarse o no para representar este proyecto |
La propiedad featured se utiliza para determinar qué imagen debe usarse para representar este proyecto en la página de inicio. Si varias imágenes se marcan como se presentan, se utilizará las primeras.
Los bloques de video permiten las siguientes propiedades adicionales. Tenga en cuenta que el video automático solo es compatible con ciertos navegadores y dispositivos.
| Llave | Formato | Por defecto | Descripción |
|---|---|---|---|
controls | booleano | FALSO | Si se deben mostrar o no los controles de video |
loop | booleano | FALSO | Si el video debe o no bucle |
autoplay | booleano | FALSO | Si el video debe reproducirse automáticamente o no |
muted | booleano | FALSO | Si el video debe ser silenciado o no |
La página de inicio es el archivo /content/index.md .
El layout de la página de inicio debe establecerse en home en la redamatter. La página de inicio admite la mayoría de las propiedades básicas, sin embargo, la propiedad permalink no debe usarse.
La propiedad entries adicionales le permite especificar exactamente qué proyectos desea aparecer en la página de inicio. Si la propiedad entries no se completa, la página de inicio mostrará automáticamente todos los proyectos en orden con el primero más reciente.
Este es un ejemplo de la propiedad entries en uso:
---
layout : home
entries :
- portfolio-starter
- sample-project-muybridge
- sample-project-optics
- sample-project-eames
- sample-project-letters
- sample-project-traffic-signs
---
Se muestra la primera imagen featured para cada proyecto. Si no se featured imágenes, se mostrará la primera imagen.
La página del blog es el archivo /content/posts.md .
El layout de la página de blog debe establecerse en posts en la redonma. La página del blog admite las propiedades básicas. Markdown escrito debajo de la marina frontal no se muestra.
La página de error 404 es el archivo /content/404.md .
El layout de la página de error 404 debe establecerse en error en la zonda frontal. La página de error admite solo el layout y title de propiedades básicas. La propiedad permalink no debe usarse.
La página RSS es el archivo /content/rss.md .
El layout de la página RSS debe estar configurado para feed en la zonda delantera. La página RSS admite solo el layout y title de propiedades básicas. La propiedad permalink no debe usarse.
El feed RSS se publica automáticamente a /feed.xml , por lo que, por ejemplo, https://yoursite.com/feed.xml . Si desea agregar un enlace RSS en su navegación, consulte la guía de propiedades básicas para agregar un enlace externo.
Todos los medios se almacenan en la carpeta /content/media .
Los archivos multimedia deben ser lo más pequeños posible para ahorrar espacio en su repositorio de GitHub y su alojamiento. Lea más sobre los límites del repositorio de GitHub. Los archivos multimedia más pequeños también se cargarán más rápido para sus lectores.
Las imágenes pequeñas deben tener alrededor de 800 px de ancho, las imágenes medianas deben tener alrededor de 1400 px de ancho y las imágenes grandes deben tener alrededor de 3000 px de ancho. Las imágenes con grandes áreas de color plano pueden funcionar mejor como PNG. Las imágenes con más detalles, como la fotografía, deben guardarse como JPG.
Cuantas más imágenes agregue a una página, más tiempo llevará que se cargue esa página. Sea juicioso sobre cuántas imágenes agregas a cualquier página.
Como se mencionó anteriormente, esta es una base de código deliberadamente básica que acoge con beneplácito.
Las personalizaciones más pequeñas, como la alteración del CSS, se pueden hacer sin la línea de comando editando el archivo CSS directamente en GitHub. Las personalizaciones más extensas se realizan mejor desarrollando localmente con la línea de comandos. Consulte la elevada documentación si está interesado en alterar los diseños o fragmentos de Nunjucks en /_includes .
Estas son algunas sugerencias para alterar y extender este sitio:
/_includes/layouts/base.njk para crear un pie de página más complejoclient o categoryimgix para que sus medios no vivan en GitHubSi está interesado en nuestra ayuda haciendo algunas modificaciones, ¡póngase en contacto y lo discutiremos!
