portfolio starter
1.0.0
Este é um portfólio leve Starterkit construído com eleve. É voltado para designers, ilustradores, arquitetos e quaisquer outras pessoas interessadas em compartilhar seu trabalho e atividade.
O usuário pretendido pode não saber como codificar, mas está interessado na tecnologia por trás do site, está disposto a escrever no Markdown e está feliz em acompanhar esta documentação.
Visite portfolio-starter.sb-ph.com para conferir. O conteúdo e o código neste repositório conduzem o site de demonstração.
"Sem código" é um pouco impróprio. Seus arquivos de conteúdo são tecnicamente escritos no código, mas é uma sintaxe muito legível chamada Markdown (mais sobre isso mais tarde). O que queremos dizer com "sem código" é que você não precisará tocar na linha de comando, git ou abrir um editor de código no seu computador.
O GitHub é uma plataforma que armazena código. O código e o conteúdo do seu site vão morar no Github. Se você já possui uma conta, vá em frente e faça login. Caso contrário, inscreva -se em uma conta. A conta individual gratuita é suficiente.
Netlify e Zeit estão hospedando provedores que oferecem generosos níveis gratuitos para pessoas com sites estáticos como esse. O Netlify talvez seja um pouco mais direto para as etapas a seguir e parece ser usado por mais usuários, mas ambos são plataformas sólidas. Se você já possui uma conta com uma dessas plataformas, faça o login. Se não tiver, inscreva -se em uma.
Ao clicar em um dos botões abaixo, você clonará este repositório (ou seja, criará uma versão duplicada que vive em sua própria conta do GitHub) e depois implante este novo site na sua hospedagem estática.
Antes de prosseguir, decida um nome para o seu repositório. Deve ser algo semelhante ao nome do seu site, mas deve incluir apenas letras minúsculas, números e traços. Por exemplo, o nome deste repositório é portfolio-starter .
Se você tiver uma conta Netlify , clique neste botão e siga as instruções simples do Netlify para conectar o Netlify e o Github:
Se você tiver uma conta Zeit , clique no botão abaixo e siga as instruções do Zeit:
As instruções do Zeit o levarão a como instalar o Zeit agora para o GitHub para que ele possa criar um repositório para você e poder implantar suas alterações. Dê permissão a todos os repositórios ao instalar o Zeit agora. O Zeit deve detectar automaticamente que você está usando elente com as configurações da seguinte maneira (você não precisa se preocupar com o comando de desenvolvimento):
Comando de compilação: npx @11ty/eleventy saída diretório: _site
Quando você terminar de seguir as instruções acima para Netlify ou Zeit , você será redirecionado para o painel do seu site. Isso exibe seu subdomínio padrão e outras informações importantes sobre o seu site. Você também receberá alguns e -mails, informando que os serviços estão conectados.
O ZEIT permite selecionar a visibilidade do seu repositório quando você o configura. O Netlify, por outro lado, cria automaticamente um repositório público. Consulte a documentação do GitHub se você deseja ajustar a visibilidade do seu repositório.
Para editar ou adicionar conteúdo sem a linha de comando, você precisa usar a interface do GitHub para navegar nos seus arquivos dentro da pasta /content no seu repositório. Consulte a referência de conteúdo para saber mais sobre a estrutura da pasta /content e cada um dos arquivos nela, particularmente o arquivo de dados global que inclui o título do seu site e a URL.
Para editar ou excluir um arquivo existente, você deve abrir o arquivo relevante no GitHub e clicar no botão Editar (o botão com o ícone de lápis) ou o botão Excluir (o botão com a lixeira) no canto superior direito acima do conteúdo da página.
Se você deseja adicionar uma nova página, você deve navegar para as posts , projects ou pages da pasta, dependendo do que deseja adicionar e clique no botão "Criar novo arquivo" próximo à parte superior da página. Isso abrirá uma nova página do editor, onde você pode adicionar seu nome de arquivo e arquivo. Como todo o conteúdo de texto está escrito no Markdown, o nome do arquivo deve terminar em md (ou seja, my-post-name.md ).
Se você deseja adicionar mídia, você deve navegar para a pasta de media e clicar no botão "Faça o upload de arquivos" próximo à parte superior da página. Isso lhe dará uma área para fazer upload de um ou mais arquivos. Consulte a orientação da mídia para obter dicas sobre tipos e tamanhos de arquivo.
Para salvar edições ou adições feitas no Github, você deve cometer suas alterações usando a interface do Github na base da página. Se você conectar o Netlify ou o Zeit na etapa anterior, um compromisso também informará ao GitHub para implantar automaticamente suas alterações. Para saber mais sobre o que é um compromisso, consulte o Glossário do Github. Quando você compromete uma edição ou uma adição diretamente no GitHub, você pode usar a mensagem de confirmação padrão pré-cheia e deve se comprometer diretamente com a filial master (a configuração padrão).
As instruções de configuração da linha de comando assumem que você tem familiaridade com a linha de comando, que possui a versão 8 ou superior do Node.js instalado no seu computador e que você tem uma conta GitHub.
Repositório de clone localmente em uma pasta de projeto nomeada executando git clone https://github.com/sb-ph/portfolio-starter.git my-website e depois mude para a nova pasta do projeto executando cd my-website . Execute npm install para instalar as dependências, incluindo Eleventy.
Execute rm -rf .git para remover o histórico do Git para um novo começo e, em seguida, execute git init para inicializar um novo repo Git. Compreenda todos os seus arquivos para criar uma nova ramificação master e adicione seu projeto ao GitHub usando a linha de comando.
Para construir o site no diretório Gitignored /_site , execute npx @11ty/eleventy . Para aumentar um servidor para desenvolvimento local ou edição de conteúdo, execute npx @11ty/eleventy --serve . Isso disponibilizará seu site em http: // localhost: 8080, e o site recarregará automaticamente quando você fizer alterações.
Se você deseja usar o Netlify ou o Zeit, siga a documentação deles para conectar seu repositório à sua conta de hospedagem para implantação contínua. Se você deseja usar outro provedor de hospedagem, pode encontrar seus arquivos estáticos no diretório /_site depois de gerar uma compilação.
Para editar o conteúdo localmente, gire um servidor executando npx @11ty/eleventy --serve e ajuste os arquivos Markdown e JSON no diretório /content . Se o seu site estiver conectado à implantação contínua, certifique -se de comprometer suas alterações na ramificação certa (provavelmente master ), caso contrário, elas não serão implantadas.
Netlify e Zeit fornecem um subdomínio padrão automaticamente quando você implanta seu site, portanto, esta é uma etapa opcional. Se você deseja usar seu próprio domínio, siga as instruções deles para configurar isso. Leia mais sobre os domínios personalizados no Zeit ou leia mais sobre domínios personalizados no Netlify.
Ambos os guias o levarão a como configurar o sistema de nome de domínio do seu domínio (DNS). Observe que o DNS pode ser delicado. Os registros do DNS para o seu domínio dizem aos navegadores onde encontrar seu site e informar aos servidores de email como direcionar e -mails para você. Certifique -se de anotar quaisquer registros DNS existentes antes de alterar qualquer coisa.
Se você apoiar os servidores de nomes como parte do processo de configuração de domínio personalizado e já estiver usando seu domínio para email, você deverá adicionar seus registros MX e quaisquer outros registros relacionados ao email ao seu novo provedor de hospedagem antes de apoiar os servidores de nomes. Se não o fizer, seu e -mail pode cair.
Se você estiver em uma versão mais antiga do portfolio Starter e deseja atualizá -lo para uma versão mais recente, recomendamos fazer isso manualmente, substituindo todas as pastas e arquivos, exceto a pasta /content . Você deve fazer backup do seu site antes de fazer atualizações ou grandes alterações. Visite sua página inicial do repositório e clique no botão Green "Clone ou Download" para baixar um arquivo zipleado de todo o repositório e guarde -o em algum lugar seguro.
Todo o conteúdo vive na pasta /content . Por padrão, o portfólio inicial é preenchido com o conteúdo em uso no site de demonstração.
O conteúdo inclui os dados globais, os arquivos de marcação para cada página e a mídia. É importante formatar e organizar cada um desses arquivos de uma maneira específica, para que seu site se implante sem erros e pareça o esperado.
Certos metadados, como o título do site e o URL, são usados em todo o site. Todos esses dados globais estão contidos no arquivo /content/_data/global.json .
Os detalhes deste arquivo devem ser definidos quando o site for configurado pela primeira vez e provavelmente não será tocado novamente, a menos que o site seja movido ou o domínio mude. Este é um exemplo do arquivo 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 é o único conteúdo que deve ser escrito no JSON, um formato de texto usado para estruturar dados. A sintaxe JSON é muito rigorosa. Todas as chaves (ou seja, title ) e todas as cordas (ou seja, My website ) estão fechadas em citações duplas e todas as propriedades (ou seja, "title": "My website" ) são separadas por vírgulas, exceto a última propriedade. Todos os objetos JSON são fechados entre colchetes encaracolados {} . A sintaxe incorreta neste arquivo resultará em um erro, o que significa que suas alterações não serão implantadas.
Estas são as propriedades com mais detalhes.
| Chave | Formatar | Padrão | Descrição |
|---|---|---|---|
author | Objeto json | - | Um objeto JSON que inclui o nome e o endereço de e -mail do autor do site |
footer | Markdown | um curto crédito | O texto do rodapé escrito em Markdown |
lang * | texto | en | A tag de idioma da IANA que declara o idioma do seu site |
title * | texto | - | O título do seu site |
url * | url | - | URL do seu site |
O rodapé inclui um curto crédito por padrão. Sinta -se à vontade para substituí -lo por qualquer texto que funcione melhor para você. Isso pode incluir um aviso de direitos autorais, um colofão, detalhes de contato ou outras informações importantes. O rodapé não suporta quebras de linha.
Todas as principais páginas de conteúdo, incluindo postagens, projetos, páginas, página inicial, página de erro 404, blog e feed RSS, estão escritos em Markdown. O Markdown permite que você escreva usando um formato de texto simples fácil de ler e fácil de escrever que possa ser convertido em HTML válido. Visite o site do Markdown-IT para obter uma lista completa de opções de formatação, incluindo listas, links, títulos e muito mais. Você também pode dar uma olhada na fonte deste arquivo ReadMe; Está escrito em Markdown também!
Todos os arquivos de marcação terminam na extensão .md , e este starterkit usa o restante do nome do arquivo para gerar a lesma da página (a parte final do URL de uma página).
Quaisquer pastas ou arquivos que sejam precedidos por um sublinhado _ não serão publicados. Por esse motivo, você pode usar um sublinhado para criar rascunhos como /content/posts/_testing-a-draft.md . No entanto , é fundamental lembrar que seu rascunho será visível para outras pessoas no GitHub se o seu repositório for público.
Cada arquivo de marcação começa com o YAML FrontMatter. A YAML é uma sintaxe de texto simples que permite que o texto legível pelo homem seja formatado como dados estruturados. FrontMatter é o texto na parte superior do arquivo que é cercado por três traços de ambos os lados, assim:
---
layout : page
title : Contact
description : Get in touch with me via email or phone.
image : cloud-01.jpeg
---
O Frontmatter Yaml inclui uma série de propriedades-contras e valores separados por um cólon-que definem metadados específicos da página. As chaves devem sempre ser escritas exatamente como mostrado nesta documentação. Escrever Layout em vez de layout , por exemplo, resultará em um erro.
Essas são as propriedades básicas da YAML que devem ser usadas na frente em todas as páginas.
| Chave | Formatar | Padrão | Descrição |
|---|---|---|---|
description | texto | - | Breve descrição do conteúdo da página |
eleventyNavigation | Yaml | - | Um objeto YAML, descrito abaixo |
image | texto | - | O nome do arquivo da imagem que deve ser usado para cartões de mídia social |
layout * | texto | - | O layout da página |
permalink | texto | Vários | A página permalink |
title * | texto | - | O título da página |
O título da página e o layout são necessários em todos os arquivos de marcação. O layout da página determina como o conteúdo é exibido. Ao criar novas páginas, você deve usar os layouts do project , post ou page .
A propriedade description é altamente recomendada para todas as páginas, pois é usada para cartões de mídia social e exibida nos resultados dos mecanismos de pesquisa. Deve ter entre 50 e 160 caracteres e nunca deve ser duplicado em diferentes páginas.
Se estiver usando uma image para as mídias sociais, consulte a documentação fornecida pelas plataformas de mídia social para obter orientações sobre um tamanho de imagem apropriado. Como regra geral, um JPG de 1200px de largura de paisagem deve ser apropriado na maioria das plataformas.
A propriedade permalink permite definir o URL para uma página ou desativá -la completamente. Os links permals são sempre gerados automaticamente; portanto, você raramente precisa usar essa propriedade.
A propriedade eleventyNavigation é um pouco mais complexa. Ele diz ao plug -in de navegação elevado o que colocar no menu. Este é um exemplo da propriedade em uso na página /content/pages/about.md :
---
layout : default
title : About
eleventyNavigation :
key : About
order : 0
---
A subproperty key diz a Eleving para adicionar esta página à navegação com o texto "Sobre". A subproperção order diz a Eleventy que deve vir em primeiro lugar na navegação.
Você também pode adicionar links externos à navegação, por exemplo, um link para o seu github. Consulte a página /content/pages/github.md para um exemplo com o seguinte FrontMatter:
Se você deseja adicionar um link externo à navegação, poderá criar um novo arquivo de marcação (por exemplo, /content/external.md ) com o FrontMatter abaixo:
---
eleventyNavigation :
key : GitHub ↗
order : 3
url : http://github.com/sb-ph/portfolio-starter
permalink : false
---
A subproperty key diz a Eleving para adicionar esta página à navegação com o texto "github" ( ↗ é o código HTML para uma seta do nordeste). A subproperta order é definida como 3 para que venha no último no menu e a subproperty url seja definida para o URL desejado. A propriedade permalink está definida como falsa para que isso não publique uma página correspondente em nosso site.
As páginas são encontradas na pasta /content/pages .
layout de uma página deve ser definido como page no frontMatter. As páginas suportam apenas as propriedades básicas listadas acima.
As postagens são encontradas na pasta /content/posts .
layout de uma postagem deve ser definido para post no frontMatter. As postagens suportam as propriedades básicas e a propriedade date . Este é um exemplo do frontMatter de um post:
---
layout : post
title : Demo post
date : 2020-03-29 18:00:00
---
A propriedade date determina a data de publicação da postagem e, portanto, o pedido no blog e RSS.
Você pode usar o comentário html <!--more--> dentro do seu conteúdo de marcação para gerar um trecho para suas postagens como assim:
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. Se você usar more comentários, apenas o texto que precede o comentário será exibido no blog e um link "Leia mais" será exibido após este trecho.
Os projetos são encontrados na pasta /content/projects .
layout de um projeto deve ser definido para project no frontMatter. Os projetos suportam as propriedades básicas, bem como as propriedades dateStart , dateEnd e media . Este é um exemplo do frontMatter para uma página de projeto.
---
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/)
---
E essas são as propriedades específicas do projeto com mais detalhes:
| Chave | Formatar | Padrão | Descrição |
|---|---|---|---|
dateEnd * | YYYY-MM-DD | - | A data final do seu projeto, usada para fins de classificação |
dateStart | YYYY-MM-DD | - | A data de início do seu projeto |
media | Yaml | - | Uma lista YAML de blocos de mídia, descritos abaixo |
A propriedade de mídia é uma lista YAML estritamente formatada que pode conter blocos de imagem e vídeo. As propriedades que se aplicam a imagens e vídeos são descritas abaixo.
| Chave | Formatar | Padrão | Descrição |
|---|---|---|---|
caption | Markdown | - | Uma legenda descrevendo sua mídia |
filename * | texto | - | O nome do arquivo da sua mídia |
height | Inteiro | - | A altura da sua mídia em pixels |
width | Inteiro | - | A largura da sua mídia em pixels |
size | texto | lg | O tamanho que a mídia deve ser exibida; sm , md ou lg |
type * | texto | - | image ou video |
Os blocos de imagem suportam as seguintes propriedades adicionais:
| Chave | Formatar | Padrão | Descrição |
|---|---|---|---|
alt * | texto | - | O texto alt para sua imagem |
featured | booleano | falso | Se a imagem deve ou não ser usada para representar este projeto |
A propriedade featured é usada para determinar qual imagem deve ser usada para representar este projeto na página inicial. Se várias imagens forem marcadas como destaque, a primeira será usada.
Os blocos de vídeo permitem as seguintes propriedades adicionais. Observe que o AutoPlay de vídeo é suportado apenas em determinados navegadores e dispositivos.
| Chave | Formatar | Padrão | Descrição |
|---|---|---|---|
controls | booleano | falso | Se os controles de vídeo devem ou não ser exibidos |
loop | booleano | falso | Se o vídeo deve ou não fazer um loop |
autoplay | booleano | falso | Se o vídeo deve ou não reproduzir automaticamente |
muted | booleano | falso | Se o vídeo deve ou não ser silenciado |
A página inicial é o arquivo /content/index.md .
O layout da página inicial deve ser definido para home no frontmatter. A página inicial suporta a maioria das propriedades básicas, no entanto, a propriedade permalink não deve ser usada.
A propriedade entries adicionais permite especificar exatamente quais projetos você deseja aparecer na página inicial. Se a propriedade entries não for preenchida, a página inicial exibirá automaticamente todos os projetos em ordem com o primeiro mais recente.
Este é um exemplo da propriedade entries em uso:
---
layout : home
entries :
- portfolio-starter
- sample-project-muybridge
- sample-project-optics
- sample-project-eames
- sample-project-letters
- sample-project-traffic-signs
---
A primeira imagem featured para cada projeto é mostrada. Se nenhuma imagem for featured , a primeira imagem será mostrada.
A página do blog é o arquivo /content/posts.md .
O layout da página do blog deve ser definido como posts no FrontMatter. A página do blog suporta as propriedades básicas. Markdown escrito abaixo do frontMatter não é exibido.
A página de erro 404 é o arquivo /content/404.md .
O layout da página de erro 404 deve ser definido como error no FrontMatter. A página de erro suporta apenas as propriedades básicas layout e title . A propriedade permalink não deve ser usada.
A página RSS é o arquivo /content/rss.md .
O layout da página RSS deve ser definido para feed no frontMatter. A página RSS suporta apenas as propriedades básicas layout e title . A propriedade permalink não deve ser usada.
O feed RSS é publicado automaticamente para /feed.xml , por exemplo, https://yoursite.com/feed.xml . Se você deseja adicionar um link RSS em sua navegação, consulte as orientações básicas das propriedades para adicionar um link externo.
Toda a mídia é armazenada na pasta /content/media .
Os arquivos de mídia devem ser o menor possível para economizar espaço no seu repositório do GitHub e na sua hospedagem. Leia mais sobre os limites do repositório do Github. Arquivos de mídia menores também serão carregados mais rapidamente para seus leitores.
As imagens pequenas devem ter cerca de 800px de largura, as imagens médias devem ter cerca de 1400px de largura e as imagens grandes devem ter cerca de 3000px de largura. Imagens com grandes áreas de cor plana podem funcionar melhor como PNGs. Imagens com mais detalhes, como a fotografia, devem ser salvas como JPGs.
Quanto mais imagens você adicionar a uma página, mais tempo levará para que essa página seja carregada. Seja criterioso sobre quantas imagens você adiciona a qualquer página.
Como mencionado acima, esta é uma base de código deliberadamente básica que acolhe a ajuste.
Customiações menores, como alterar o CSS, podem ser feitas sem a linha de comando editando o arquivo CSS diretamente no GitHub. As personalizações mais extensas são melhor realizadas, desenvolvendo localmente com a linha de comando. Consulte a documentação da elevente se estiver interessado em alterar os layouts ou snippets de Nunjucks em /_includes .
Estas são algumas sugestões para alterar e estender este site:
/_includes/layouts/base.njk para criar um rodapé mais complexoclient ou categoryimgix para que sua mídia não viva no githubSe você estiver interessado em nossa ajuda para fazer algumas modificações, entre em contato e discutiremos!
