nextjs blog theme
1.0.0
Um iniciador de blog personalizável usando:
Dê uma olhada na demo.
Clique aqui para assistir ao passo a passo do modelo!
Você pode começar com este projeto de duas maneiras: localmente ou usando o assistente de configuração.
Se você estiver fazendo isso localmente, comece clicando no botão Usar este modelo no GitHub. Isso criará um novo repositório com os arquivos deste modelo na sua conta do GitHub. Uma vez feito, clone seu novo repositório e navegue até ele no seu terminal.
A partir daí, você pode instalar as dependências do projeto em execução:
yarn installFinalmente, você pode executar seu projeto localmente com:
yarn run devAbra seu navegador e visite http: // localhost: 3000, seu projeto deve estar em execução!
Por meio do assistente de configuração, você pode criar seu blog em alguns cliques e implantar para netlify.
A configuração é baseada em variáveis de ambiente para facilitar a integração de qualquer plataforma Jamstack, como o Netlify.
Aqui estão as variáveis que você pode editar:
| Variável | Descrição | Opções |
|---|---|---|
BLOG_NAME | O nome do seu blog, exibido abaixo do avatar | |
BLOG_TITLE | O cabeçalho principal ( h1 ) na página inicial | |
BLOG_FOOTER_TEXT | o texto no rodapé | |
BLOG_THEME | o tema para passar para o Tailwind | padrão |
BLOG_FONT_HEADINGS | a família de fontes para todos os títulos HTML, de h1 a h6 | Sans-serif (padrão), serif, monoespácia |
BLOG_FONT_PARAGRAPHS | a família de fontes para todos os outros elementos HTML | Sans-serif (padrão), serif, monoespácia |
Todas as variáveis ENV podem ser configuradas através do assistente ou da definição das variáveis de ambiente do projeto. Você pode fazer isso no seu Netlify DashABoard (Configurações do Site/Build & Implement/Environment/Environment Variables).
[ALT: Passo a passo de edição da edição ENV VARS]
Se definir uma variável de ambiente não for a sua xícara de chá, os padrões poderão ser alterados no utils/global-data.js . Você também pode remover as variáveis e as informações do blog de código duro, onde essas variáveis são usadas na base de código.
BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS são usados em tailwind-preset.jsBLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT são usados em pages/index.js & pages/posts/[slug].js através do objeto globalData . Todas as postagens são armazenadas no diretório /posts . Para fazer uma nova postagem, crie um novo arquivo com a extensão .mdx .
Como as postagens são escritas no formato MDX , você pode passar por adereços e componentes. Isso significa que você pode usar os componentes do React dentro de suas postagens para torná -los mais interativos. Saiba mais sobre como fazê -lo nos documentos MDX sobre conteúdo.
[ALT: Passo a passo em vídeo de adicionar uma nova postagem no blog]
Este modelo está configurado para trabalhar com edição visual e fonte de conteúdo Git.
O processo de desenvolvimento típico é começar funcionando localmente. Clone este repositório e execute npm install em seu diretório raiz.
Execute o Next.js Development Server:
cd nextjs-blog-theme
npm run devInstale a CLI do editor visual do Netlify. Em seguida, abra uma nova janela de terminal no mesmo diretório do projeto e execute o Netlify Visual Editor Dev Server:
npm install -g @stackbit/cli
stackbit devIsso gera seu próprio URL do editor visual do Netlify. Abra isso, registre -se ou faça login e você será direcionado ao editor visual do Netlify para o seu novo projeto.
Aqui estão algumas sugestões sobre o que fazer a seguir, se você é novo no Netlify Visual Editor:
Incluímos algumas ferramentas que nos ajudam a manter esses modelos. Este modelo usa atualmente:
Se sua equipe não estiver interessada nessa ferramenta, você poderá removê -las com facilidade!
Para manter nosso projeto atualizado com dependências, usamos uma ferramenta chamada Renovate. Se você não estiver interessado nessa ferramenta, exclua o arquivo renovate.json e cometê -lo em sua filial principal.
Se você ficar preso ao longo do caminho, obtenha ajuda em nossos fóruns de suporte.
