digital garden
v0.7.2
Mais capturas de tela aqui
Um modelo de blog de código aberto (jardinagem digital) para desenvolvedores usando o roteador de aplicativos Next.js, MDX, ContentLayer, Tailwind CSS, @shadcn/ui, ícones de Lucide e muito mais.
Se você gosta deste modelo e/ou usa -o, dê uma estrela no Github. Isso ajudará mais pessoas a descobrir isso, ajudará assim a melhorar o modelo.
Nota: Este projeto está sempre evoluindo e está longe de ser perfeito ou mesmo feito. Estou sempre aberto a sugestões e contribuições. Sinta -se à vontade para abrir um problema ou um PR se tiver alguma idéia ou sugestão. Você também pode ver o roteiro dos recursos planejados, se quiser contribuir.
Como desenvolvedor que cria conteúdo, quero ter um blog e jardim digital, onde posso compartilhar meus pensamentos e idéias com o mundo. Agora, não há realmente uma "solução perfeita" para isso atualmente. Com análises incluídas, SEO, assinaturas de email, ferramentas modernas, design simples, etc. Temos que criar um a partir do zero, usar um modelo de design e codificar os recursos ou usar uma ferramenta CMS/sem código.
Então eu decidi construir uma solução que eu usaria. Este é o resultado.
Se você quiser ver como eu configuro este modelo para o meu próprio jardim digital, pode conferir esse compromisso com todas as alterações.
pnpm installutils/metadata.ts com suas informações e configurações geraisutils/uses-data.ts com software e hardware que você usautils/projects-data.ts com seus projetosutils/navigation-links.ts com os links que você deseja na navegaçãocontent/pages/now com sua disponibilidadecontent/pages/about sua biografiapnpm devAbra http: // localhost: 3000 no seu navegador para ver o resultado.
Você pode escrever conteúdo em Markdown ou MDX. O conteúdo está localizado no content/ e está organizado em pastas. A pasta pages contém as páginas. A pasta de posts contém os posts do blog. A pasta projects contém os projetos.
As páginas da lista de edição são feitas na pasta lib .
/uses - lib/uses-data.ts/projects - lib/projects-data.ts/social - lib/social-data.ts O FrontMatter é usado para definir metadados para páginas e postagens. Está localizado na parte superior do arquivo e está escrito em YAML. Você pode definir os seguintes campos:
title - O título da página/postdescription - A descrição da página/postpublishedDate - a data da postagem (não usada nas páginas)lastUpdatedDate - a data da página/posttags - Lista de tags para a postagem. Você pode adicionar novas tags adicionando -as à lista tagOptions . (não usado nas páginas)series - A série do post. Uma série tem um título e um número de pedido para uma postagem. (não usado nas páginas)author - o autor do post. Um autor tem um nome e imagem. (não usado nas páginas)status - se a página/post é publicada ou rascunhoVocê pode implantar o projeto com a Vercel ou qualquer outro provedor de hospedagem. Se você deseja usar o Vercel, pode usar o botão na parte superior deste ReadMe.
package.json atualização.jsonNEXT_PUBLIC_BASE_URL no vercel para apontar para o URL raiz do seu site Este projeto usa o Inter como a fonte padrão. Você pode alterá -lo no app/layout.tsx usando o pacote next/fonts .
O projeto usa as cores do Tailwind e o @shadcn/ui config. Personalize as cores em globals.css .
Há um componente de assinatura a ser usado no rodapé. Você pode editar a assinatura em components/signature.tsx . Usei o figma para escrever a assinatura com a fonte Caveat e a exportei como SVG. Você pode fazer o mesmo e atualizar o SVG no componente.
Imagens e outros arquivos de mídia estão localizados em public/ diretório. Você pode usá -los em seu conteúdo usando o caminho /<filename>.<ext> .
Aqui está um rápido tutorial sobre como fazer um avatar semelhante no figma em menos de 2 minutos. https://youtu.be/ny-vaeehjkm
Você pode alterar os metadados e os detalhes dos autores em utils/metadata.ts . Isso será usado em torno do site para títulos, links sociais, alças sociais, SEO, etc.
Você pode editar links de navegação no lib/navigation-links.ts .
Você pode editar links sociais em lib/social-data.ts . Você também pode adicionar novos links sociais adicionando -os ao arquivo e usando o nome da plataforma como chave e o URL como o valor. O componente SocialButton adicionará automaticamente o ícone para a plataforma se for suportado em icons simples.
Para configurar, você precisa habilitá -lo no painel do Project Vercel selecionando seu projeto e clique na guia Analytics e clique em Ativar na caixa de diálogo.
A UMAMI é uma solução simples e fácil de usar, com opção de auto-hospedagem! Você pode ler mais sobre isso no site da Umami. (Dica: na Ferrovia, você pode auto-hospedeiro baixo ou até livre) .
Configurar: Definir NEXT_PUBLIC_UMAMI_SCRIPT_URL & NEXT_PUBLIC_UMAMI_WEBSITE_ID Variáveis de ambiente no seu arquivo .env.local e no painel de vercel.
Plausível é uma alternativa simples, leve e de código aberto ao Google Analytics. Você pode ler mais sobre isso no site plausível.
Configurar: Defina NEXT_PUBLIC_PLAUSIBLE_DOMAIN & NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL Ambiente Variáveis no seu arquivo .env.local e no painel de vercel. Se você estiver preocupado com os bloqueadores de anúncios, pode procurar o script plausível através de seu próprio domínio. Você pode ler mais sobre isso aqui.
O Google Analytics é um serviço de análise da Web oferecido pelo Google que rastreia e relata o tráfego do site, atualmente como uma plataforma dentro da marca da plataforma de marketing do Google. Você pode ler mais sobre isso no site do Google Analytics.
Configurar: Defina a variável de ambiente NEXT_PUBLIC_GOOGLE_ANALYTICS_ID no seu arquivo .env.local e no painel de vercel.
Apoiar outros provedores de análise em andamento. Sinta -se à vontade para abrir um problema se tiver alguma sugestão ou um PR, se quiser implementá -lo.
O MailerLite é uma ferramenta simples de marketing por e -mail para todos os tipos de empresas. Você pode ler mais sobre isso no site da MailerLite.
Configurar: defina EMAIL_API_BASE , EMAIL_API_KEY e EMAIL_GROUP_ID ambiente de ambiente no seu arquivo .env.local e no painel de vercel.
Apoiando outros provedores de boletins de boletim estão em andamento. Sinta -se à vontade para abrir um problema se tiver alguma sugestão ou um PR, se quiser implementá -lo.
Você pode escolher entre três variantes de heróis diferentes para usar no app/(site)/page.tsx alterando o componente Hero importado.
HeroSimple - Uma seção simples de herói centralizada com imagem, título e legenda.HeroVideo - Seção de herói de 2 colunas com videogamas incorporadas de um lado e título e legenda do outro.HeroImage - 2 HERO DE COLUNS Seção com imagem de um lado e título e legenda do outro.HeroMinimal - Nome da seção de heróis pequenos e cargo Eu recomendo otimizar as imagens rapidamente gratuitamente com o ImageOptim. Instale no seu Mac e abra a pasta public no Finder. Selecione todas as imagens, clique com o botão direito do mouse e escolha "Abrir com> ImageOptim". Isso otimizará todas as imagens na pasta.
Nota: Não exagere. Você pode facilmente fazer com que as imagens pareçam ruins com os algoritmos de compressão com perdas.
Crie um PR e adicione seu blog a esta lista se você estiver usando o modelo!
robots.txt & sitemap.xml Este projeto é de desenvolvedores para desenvolvedores. Todas as contribuições são bem -vindas! Por favor, sinta -se à vontade para:
develop .develop filial.Quaisquer contribuições que você fizer estarão sob a licença do software do MIT. Em resumo, quando você envia alterações no código, seus envios são entendidos como sob a mesma licença do MIT que cobre o projeto. O código de conduta pode ser encontrado aqui.
Se você gosta deste modelo e/ou usa -o, dê uma estrela no Github.
