tailwind nextjs starter blog

Blog inicial do Tailwind NextJS

Este é um modelo de partida de blog CSS Next.JS, Tailwind CSS. A versão 2 é baseada no diretório do próximo aplicativo com o componente do React Server e usa o ContentLayer para gerenciar o conteúdo de marcação.

Provavelmente, o modelo de blog mais rico em rico em recursos. Facilmente configurável e personalizável. Perfeito como um substituto para os blogs individuais de Jekyll e Hugo existentes.

Confira a documentação abaixo para começar.

Enfrentando problemas? Verifique a página de perguntas frequentes e faça uma pesquisa em questões anteriores. Sinta -se à vontade para abrir um novo problema se nenhum foi publicado anteriormente.

Solicitação de recurso? Verifique as discussões anteriores para ver se foi criado anteriormente. Caso contrário, fique à vontade para iniciar um novo tópico de discussão. Todas as idéias são bem -vindas!

Variações

Nota : Estes são garfos contribuídos pela comunidade usando estruturas diferentes ou com alterações significativas na base de código - não oficialmente suportadas.

Astro Alternative - Tailwind Astro Modelo.

Alternativo Remix-Run Remix-Modelo de blog para iniciantes de Remix Remix.

Suporte à Internacionalização - modelo com I18N e código -fonte.

Exemplos v2

• Demo Blog - este repo
• Meu blog pessoal - modificado para postagens de blog de generalidade automática com datas
• Blog de Karhdo - Blog de Karhdo - Aventura de codificação de Karhdo (código -fonte)
• blog ben.codes - blog pessoal de Benoit sobre desenvolvimento de software (código -fonte)
• TSIX Blog - Um engenheiro de front -end é usado para gravar alguns pontos de conhecimento no trabalho e estudar中文
• Blog de Soto - Um site pessoal mais personalizado atualizado a partir de V1 (código -fonte)
• Blog de Prabhu - o site pessoal de Prabhu com o blog (código -fonte)
• Blog de Rabby Hasan - o blog pessoal de Rabby Hasan sobre o desenvolvimento completo da pilha com a nuvem (código -fonte)
• secrib.Dev - Blog pessoal da Sescribe; Shenanigans de segurança cibernética, frontend webdev, etc. (código -fonte)
• DALELARRODER.COM - O site pessoal de Dale Larroder atualizado a partir de V1 (código -fonte)
• Thetalhatahir.com - Blog pessoal de Talha Tahir. Adicionado artigo miniaturas, cartão LinkedIn, belo conteúdo de heróis, emoticons tecnológicos.
• Homing.so - O blog pessoal de Homing sobre as coisas que ele está aprendendo (código -fonte)
• Blog do ZS1M - o blog pessoal do ZS1M para gravar e compartilhar conteúdo técnico de aprendizado diário (código -fonte)
• dariuszwozniak.net - Blog de desenvolvimento de software (código fonte)
• Dreams.Plus - Site do blog para obter alguns pensamentos e registros para a vida e a tecnologia.
• Francisaguilar.co Blog - O blog pessoal de Francis Aguilar que fala sobre tecnologia, fitness e desenvolvimento pessoal.
• Min71 Dev Blog - Blog pessoal sobre blockchain, desenvolvimento e etc. (código -fonte)
• O blog de Bryce Yu - o blog pessoal de Bryce Yu sobre sistema distribuído, banco de dados e desenvolvimento da Web. (código -fonte)
• Site Startup Remoto Site Senpai Anime Series - Página de destino para a série Remote Startup Senpai.
• Base Secreta - o blog pessoal de Jac Hsu.alks sobre tecnologia, pensamento e vida em geral.
• ZSEBINFORMATIKUS - O blog de guia da Supere Highway Information.
• O blog de Anton Morgunov - falando sobre ciências sem simplificações excessivas ou por que a química teórica e computacional é legal.
• Blog de Hans - Blog pessoal de Hans, tecnologia de front -end, galeria e diário de viagem 中文. (código -fonte)
• Portfólio de Cub3y0nd - Estudo de Segurança Cibernética de Cub3y0nd
• London Tech Talk - Um podcast explorando tendências tecnológicas e experiências de vida expatriadas. - 日本語
• Crud Flow Blog - um blog técnico sobre IA, engenharia em nuvem, ciência de dados e desenvolvimento pessoal
• O blog de Trillium - modificado para renderizar a página de retomar PDF /resume . (código -fonte)
• Blog de tecnologia de Frank - Blog pessoal de Frank sobre desenvolvimento e tecnologia de software. (código -fonte)
• Blog de Wujie: 旅行者计划 - Garden Digital Personal de Wujie (código -fonte)
• O blog de Xiaodong - o blog pessoal da Xiaodong sobre tecnologia de front -end e vida. 「中文」 (código -fonte)
• Azurtelier.com - O site pessoal de Amos para tecnologia, música, ilustrações da IA etc. [inglês/中文] (código -fonte)
• Joshhaines.com - Site pessoal para Josh Haines. (código -fonte)
• • Blog de Jigu - o blog pessoal de Jigu sobre tecnologia, criptografia, Golang e vida. 「中文」
• ANDREWSAM.XYZ - O site pessoal de Andrew usando Shadcn, Prisma, MongoDB, auth.js, página de currículo, linha do tempo da experiência personalizada e componentes de tecnologias. (código -fonte)
• O portfólio de Rulli Damara Putra - blog e portfólio pessoal do RELY.
• blog.taoluyuan.com 套路猿 - Um blog de tecnologia pessoal que suporta a comutação multidem dos temas. 「中英」
• LyricsDecode.com - Um site de letras de músicas que oferece letra original, romanização e traduções em inglês com opções de visualização personalizáveis.
• BMACHARIA.COM - O blog técnico de Benson Macharia sobre segurança cibernética e gerenciamento de riscos de TI.
• Armujahid.me - O blog pessoal de Abdul Rauf sobre tecnologia e coisas aleatórias.
• Leohuynh.dev - ?? O Blog de Dev Leo - Histórias, Insights e Ideias. Adicione /snippets , /books , adicione ProfileCard , CareerTimeline Components e muito mais.
• Blog OpenSats - Um 501 (c) (3) Charity Public que visa financiar de forma sustentável projetos gratuitos e de código aberto. (código -fonte)
• Blog de agendas - dicas de agendamento de mídia social, estratégias e atualizações de produtos para criadores de conteúdo. (Link do projeto)
• Blog do Yawdev - Desenvolvimento de IT -Agência / Software. Blog sobre tecnologia e negócios (link do projeto)
• Notas de engenharia - Jonas Vetterle Site e blog pessoal. Estou escrevendo artigos sobre engenharia de software que me interessa, incluindo IA e computação quântica
• Screenager.dev - Site pessoal como portfólio e blog. Documentando minha jornada de aprendizado e alguns guias.
• O blog de Kezhenxu94 - blogs sobre Dev, Dicas e truques, tutoriais e muito mais.

Usando o modelo? Sinta -se à vontade para criar um PR e adicione seu blog a esta lista.

Exemplos v1

v1-blogs-showcase.webm

Graças à comunidade de usuários e colaboradores do modelo! Não estamos mais aceitando novas listagens de blog aqui. Se você atualizou da versão 1 à versão 2, fique à vontade para remover seu blog desta lista e adicione -o ao acima.

• O livro de receitas de Aloisdg - com fotos e receitas!
• A demonstração de Gautierarcin com a próxima tradução - inclui a tradução de postagens MDX, código -fonte
• Garden Digital de David Levai - Design personalizado e assinaturas de e -mail adicionais
• thvu.dev - Adicionado mdx-embed , contagem de visualizações, minutos de leitura e muito mais.
• IRVIN.DEV - O site pessoal de Irvin Lin. Adicionado incorporação do YouTube.
• Kirillso.com - Blog e site pessoal.
• LIGHTYSHARPE.COM - Blog da empresa principal de Tincre
• blog.b00st.com - blog de promoção musical do b00st.com
• Astrossaurus.me - Blog pessoal de Ephraim Atta -Duncan
• DHANRAJSP.ME - Site e blog pessoal de Dhanraj.
• blog.r00ks.io - O blog pessoal de Austin Rooks (código fonte).
• Honghong.me - Site pessoal de Tszhong (código -fonte)
• MarcelOformentAo.Dev - Site pessoal de Marcelo Formentão (código -fonte).
• Abiraja.com - Com um componente Runnable JS Code Snippet!
• bpiggin.com - blog pessoal de Ben Piggin
• Maqib.cn - Um blog de desenvolvedores chineses de front -end 狂奔小马的博客 (源码 源码)
• Ambilena.com - Blog de música eletrônica e impressão para os próximos músicos.
• 0xchai.io - Blog pessoal de Chai
• Techipedia - Aplicativo da web progressivo de blogs simples com botão de instalação personalizado e barra de progresso superior
• reinence.com - Jardim digital de Reuben Rapes
• Axolo.co/blog - Notícias de gerenciamento de engenharia e atualizações de Axolo.co (com a visualização de imagem para o artigo na página inicial)
• Musing.Vercel.App - Blog pessoal de Parth Desai (código -fonte)
• ONYOURMENTAL.COM - Site de Curtis Warcup para o podcast ON Your Mental (código -fonte)
• CWARCUP.COM - O site e blog pessoal de Curtis Warcup (código -fonte).
• ONDIEK -ELIJAH.ME - Site e blog de Ondiek Elijah (código -fonte).
• Jmalvarez.dev - Blog pessoal de José Miguel Álvarez (código -fonte)
• Justingosses.com - Site e blog pessoal de Justin Gosses (código -fonte)
• https://bitoflearning-9a57.fly.dev/ - O blog pessoal de Sangeet Agarwal, replicado para remix usando a pilha indie (código -fonte)
• Raphaelchelly.com - Site e blog pessoal de Raphaël Chelly (código -fonte)
• KAVEH.PAGE - O blog pessoal de Kaveh Tehrani. Diretório de tags adicionado, cartão de perfil, tempo de leitura no diretório de postagens, etc.
• DRAKEROSSMAN.COM - O blog de Drake Rossman sobre Nixos, Rust, Arquitetura de Software e Gerenciamento de Engenharia, além de reflexões em geral.
• meamenu.com - Página de destino e blog de produtos a partir deste modelo. Ele também usa o Motion Framer para animações, modelos de layout personalizados, Waline para comentários do blog e formulários iniciais [ITA]
• Giovanni.orciuolo.it - Site pessoal, blog e tudo o que é nerd.

Motivação

Eu queria portar meu blog existente para o NextJS e o Tailwind CSS, mas não havia modelo fácil de usar, então decidi criar um. O design é adaptado do blog TailWindlabs.

Eu queria que fosse quase tão rico em recursos quanto modelos populares de blogs como Bonge-Jekyll e Hugo Academic, mas com o melhor do ecossistema do React e as melhores práticas do atual desenvolvimento da Web.

Características

• Next.js com o TypeScript
• ContentLayer para gerenciar a lógica de conteúdo
• Fácil personalização de estilo com o atributo de cor do Tailwind 3.0 e a cor primária
• MDX - Escreva JSX em documentos de Markdown!
• Perfect Perfect Lighthouse Score - Lighthouse Relatório
• Lightweight, 85kb Primeira carga JS
• Vista para dispositivos móveis
• Tema claro e sombrio
• Otimização de fonte com a próxima/fonte
• Integração com Plínio que fornece:
  • Múltiplas opções de análise, incluindo Umami, Plausível, Analytics Simples, Posthog e Google Analytics
  • Comentários via giscus, enunciados ou disqu
  • API e componente do boletim informativo com suporte para MailChimp, Buttondown, Convertkit, Klaviyo, Revue, Emailoctopus e Beehiiv
  • Pesquisa de paleta de comando com kbar ou algolia
• Sintaxe do lado do servidor Destaques com números de linha e destaque de linha via rehype-prisma-plus
• Exibição de matemática suportada via Katex
• Citação e apoio à bibliografia via reprodução
• Alertas do github via comentário-github-blockquote-alert
• Otimização automática de imagem via Próxima/Imagem
• Suporte para tags - cada tag exclusiva será sua própria página
• Suporte para vários autores
• 3 layouts de blog diferentes
• 2 layouts de listagem de blogs diferentes
• Suporte para roteamento aninhado de postagens no blog
• Página de projetos
• Cabeçalhos de segurança pré -configurados
• SEO amigável com feed RSS, sitemaps e muito mais!

Postagens de amostra

• Um guia de marcação
• Saiba mais sobre imagens em Next.js
• Um tour pela matemática
• Grade simples de imagem mdx
• Exemplo de prosa longa
• Exemplo de postagem de rota aninhada

Guia de início rápido

1. Clone o repo

npx degit ' timlrx/tailwind-nextjs-starter-blog '

2. Personalize siteMetadata.js (Informações relacionadas ao site)
3. Modifique a Política de Segurança de Conteúdo em next.config.js se você deseja usar outro provedor de análise ou uma solução de comentários que não seja o GISCUS.
4. Personalize authors/default.md (Autor Principal)
5. Modificar projectsData.ts
6. Modifique headerNavLinks.ts para personalizar links de navegação
7. Adicione posts do blog
8. Implantar no vercel

Instalação

yarn

Observe que, se você estiver usando o Windows, pode ser necessário executar:

 $env :PWD = $( Get-Location ) .Path

Desenvolvimento

Primeiro, execute o servidor de desenvolvimento:

yarn dev

Abra http: // localhost: 3000 com seu navegador para ver o resultado.

Edite o layout no app ou conteúdo em data . Com recarregamento ao vivo, as páginas atualizam automaticamente enquanto você as edita.

Estender / personalizar

data/siteMetadata.js - Contém a maioria das informações relacionadas ao site que devem ser modificadas para a necessidade de um usuário.

data/authors/default.md - Informações do autor padrão (exigidas). Autores adicionais podem ser adicionados como arquivos em data/authors .

data/projectsData.js - Dados usados para gerar cartão com estilo na página Projetos.

data/headerNavLinks.js - links de navegação.

data/logo.svg - substitua pelo seu próprio logotipo.

data/blog - substitua por suas próprias postagens no blog.

public/static - Ativos de loja, como imagens e favicons.

tailwind.config.js e css/tailwind.css - Configuração e folhetos de Styleswind, que podem ser modificados para alterar a aparência geral do site.

css/prism.css - Controla os estilos associados aos blocos de código. Sinta -se à vontade para personalizá -lo e usar seus temas de tema prismjs preferidos, por exemplo, temas do Prism.

contentlayer.config.ts - Configuração do ContentLayer, incluindo definição de fontes de conteúdo e plugins MDX usados. Consulte a Documentação do ContentLayer para obter mais informações.

components/MDXComponents.js - passe seu próprio código JSX ou componente reagir especificando -o aqui. Você pode usá -los diretamente no arquivo .mdx ou .md . Por padrão, um link personalizado, o componente next/image , o componente de teor de teatro e o formulário de boletim informativo são transmitidos. Observe que os componentes devem ser exportados padrão para evitar problemas existentes com o Next.JS.

layouts - Modelos principais usados nas páginas:

• Atualmente, existem 3 pós -layouts disponíveis: PostLayout , PostSimple e PostBanner . PostLayout é o layout de coluna 2 padrão 2 com informações de meta e autor. PostSimple é uma versão simplificada do PostLayout , enquanto PostBanner apresenta uma imagem de banner.
• Existem 2 layouts de listagem de blogs: ListLayout , o layout usado na versão 1 do modelo com uma barra de pesquisa e ListLayoutWithTags , atualmente usados na versão 2, que omite a barra de pesquisa, mas inclui uma barra lateral com informações sobre as tags.

app - Páginas para rotear. Leia a documentação Next.js para obter mais informações.

next.config.js - Configuração relacionada a Next.JS. Você precisa adaptar a política de segurança de conteúdo se deseja carregar scripts, imagens etc. de outros domínios.

Publicar

O conteúdo é modelado usando o ContentLayer, que permite definir seu próprio esquema de conteúdo e usá -lo para gerar objetos de conteúdo digitado. Consulte a Documentação do ContentLayer para obter mais informações.

Frontmatter

Frontmatter segue os padrões de Hugo.

Consulte o contentlayer.config.ts para obter uma lista atualizada de campos suportados. Os seguintes campos são suportados:

 title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

Aqui está um exemplo do frontMatter de um post:

 ---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---

Implantar

Páginas do Github

Um fluxo de trabalho pages.yml já está fornecido. Basta selecionar "Ações do Github" em: Settings > Pages > Build and deployment > Source .

Vercel

A maneira mais fácil de implantar o modelo é implantar no Vercel. Confira a documentação do Next.JS de implantação para obter mais detalhes.

Netlify

As configurações do Netlify Next.js Runtime Confils Ativa a funcionalidade do Next.js Key em seu site sem a necessidade de configurações adicionais. O netlify gera funções sem servidor que lidam com as funcionalidades do Next.Js, como páginas renderizadas do lado do servidor (SSR), regeneração estática incremental (ISR), next/images , etc.

Consulte Next.js no netlify para obter valores de configuração sugeridos e mais detalhes.

Serviços de hospedagem estática (páginas do github / S3 / FireBase etc.)

Correr:

$ EXPORT=1 UNOPTIMIZED=1 yarn build

Em seguida, implante a pasta out ou execute npx serve out -o localmente.

Importante

Se estiver implantando com um caminho de base de URL, como https://example.org/myblog, você precisa de um shell- BASE_PATH extra para o comando de construção:

$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build

=> Em seu código, ${process.env.BASE_PATH || ''}/robots.txt imprimirá "/myblog/robots.txt" na construção out (ou somente /robots.txt se yarn dev , ou seja: no local: 3000)

Dica

Como alternativa a UNOPTIMIZED=1 , para continuar usando next/image , você pode usar um provedor alternativo de otimização de imagens, como imgix, Cloudinary ou Akamai. Consulte a documentação da otimização de imagem para obter mais detalhes.

Considere remover os seguintes recursos que não podem ser usados em uma construção estática:

1. Comente headers() de next.config.js .
2. Remova a pasta e os componentes api que chamam a função do lado do servidor, como o componente do boletim informativo. Não é tecnicamente necessário e o site será construído com sucesso, mas as APIs não podem ser usadas, pois são funções do lado do servidor.

Perguntas frequentes

• Como posso adicionar um componente MDX personalizado?
• Como posso personalizar a pesquisa kbar ?
• Implantar com o Docker

Apoiar

Usando o modelo? Apoie esse esforço dando uma estrela no Github, compartilhando seu próprio blog e dando um grito no Twitter ou se tornando um patrocinador do projeto.

Licença

MIT © Timothy Lin