Based on Next.js and supports static export, with build results hostable on any static server
blog-c3 — Next.js Blog Template
By craft-code-club
Craft & Code Club's community blog template, based on Next.js and Markdown content, supporting posts, events, and static export.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
What stands out
A quick read of the recorded project description.
Posts and events are written in Markdown, with metadata defined via frontmatter
Built-in light/dark theme toggle (next-themes) and Tailwind CSS design system
Provides example documents for posts and events as well as slug naming conventions, facilitating content indexing and SEO
The repository includes AI agent skills for PR review follow-up and visual verification of page rendering
Template Details
This is an open-source template for technical communities or personal blogs, maintained by Craft & Code Club, used to publish technical articles on topics such as algorithms, data structures, system design, and software engineering. Content is stored as Markdown files in the `_content/` directory, with posts in `_content/posts/` and events in `_content/events/`, and metadata such as title, date, description, topic tags, and author information defined via frontmatter. The template uses Next.js's static export capability, with build output to the `out` directory, deployable to any static server. Site metadata is configured in `src/app/layout.tsx`, themes and colors are adjusted in `tailwind.config.js`, and components and pages are located in `src/components/` and `src/app/`. The repository also includes event configuration documentation and example files, along with skill instructions for AI agents (such as PR review and visual verification). The README is written in Portuguese, primarily aimed at developers who want to set up a community blog or migrate a personal blog.
Is it right for your project?
Use Cases
- Technical communities setting up a public blog to publish articles on algorithms, system design, and other topics
- Individual developers forking it and adapting it into their own technical blog
- Maintaining event information in Markdown and displaying it on the site
- Blog deployments that require static hosting and do not depend on a server runtime
Suitable For
- Developers familiar with Next.js and Markdown workflows
- Technical communities looking to get started quickly with an open-source template
- Blog projects that need light/dark themes and static export
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Install dependencies: npm install; local development: npm run dev, default address http://localhost:3000
- 2
Static build: npm run build, output located in the out directory
- 3
Create content with Markdown under _content/posts/ and _content/events/, and follow the slug naming conventions in the repository
- 4
Site metadata is configured in src/app/layout.tsx, theme colors are adjusted in tailwind.config.js
- 5
Third-party assets such as demo images, fonts, and icons must be checked separately under their respective licenses
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version of the public repository under the MIT license; the free scope is the code of this version and does not mean that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Joining the community Discord requires going through that link; it is an external service and not required to run the template.
- Roadmap DSA is an externally hosted resource, with links pointing to the craftcodeclub.io site, not content of this repository.
- When submitting a PR to this repository, the pr-watch skill process must be used; this is a contribution process requirement and does not affect template usage.
- Demo images, fonts, icons, and other third-party assets must be checked under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Link para participar no Discord: \ https://craftcodeclub.io/join
Original README
Atualmente, temos o **Roadmap de Algoritmos e Estruturas de Dados**, hospedado em [dsa.craftcodeclub.io](https://dsa.craftcodeclub.io/).
Original README
https://github.com/craft-code-club/blog-c3/blob/main/LICENSEhttps://github.com/craft-code-club/blog-c3/blob/main/README.md**Ao abrir um PR, a `pr-watch` é obrigatória.**
Original README
Compiled by DeepSeek based on repository license and README ·2026-09-30. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 87 / 100
- Technologies
- Next.js · React
- Website type
- Blog
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-09-29
- Screenshot last checked
- 2026-09-30
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Next.js as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: e6899e96976f1bc29aef7b995a080833c6a83f467de0a90c187e50721cab569e
2026-09-30T07:58:30.186Z
Source file / repository# Craft & Code Club Blog
Este é o repositório do blog da comunidade Craft & Code Club, uma comunidade dedicada ao artesanato de software, onde compartilhamos conhecimento sobre Algoritmos, Estruturas de Dados, System Design, Engenharia de Software Moderna, Domain-Driven Design, Clean Architecture e outros tópicos avançados de desenvolvimento de software.
## 🌟 Sobre a Comunidade
O Craft & Code Club é uma comunidade de desenvolvedores apaixonados por qualidade de código e boas práticas de desenvolvimento. Nosso objetivo é compartilhar conhecimento e experiências através de:
- 📝 Artigos técnicos no blog
- 🎥 Conteúdo no YouTube
- 💬 Discussões no Discord
- 🤝 Eventos e encontros
- 📖 Clube do Livro
## :rocket: Faça parte da Comunidade
Link para participar no Discord: \
https://craftcodeclub.io/join
## 📋 Usando este Template
Este blog foi desenvolvido como um template open source, e você está convidado a usá-lo! Se você tem uma comunidade de tecnologia ou quer criar seu blog pessoal, sinta-se à vontade para fazer um fork e adaptar às suas necessidades.
### Como Usar
1. Faça um fork deste repositório
2. Personalize como quiser
3. Os posts eventos são escritos em Markdown e ficam na pasta `_content/`
## 🛠 Tecnologias Utilizadas
- **Next.js 15** - Framework React com suporte a SSG
- **TypeScript** - Tipagem estática
- **Tailwind CSS** - Estilização e design system
- **next-themes** - Suporte a tema claro/escuro
- **remark** - Renderização de Markdown
- **gray-matter** - Parsing de frontmatter dos posts
## 🚀 Como Executar
### Desenvolvimento Local
```bash
# Instalar dependências
npm install
# Executar em modo de desenvolvimento
npm run dev
```
O site estará disponível em `http://localhost:3000`
### Build Estático
Este blog usa exportação estática do Next.js, permitindo hospedagem em qualquer servidor estático:
```bash
# Gerar build estático
npm run build
# Os arquivos estáticos estarão na pasta 'out'
```
### Configuração
1. Crie seus posts em Markdown na pasta `_content/posts/`
2. Crie seus eventos em Markdown na pasta `_content/events/`
3. Configure os metadados do site em `src/app/layout.tsx`
4. Ajuste as cores e tema em `tailwind.config.js`
5. Personalize os componentes e páginas em `src/components/` e `src/app/`
## 📝 Criando conteúdo
Para a ajudar na indexação e SEO, os posts e eventos devem seguir um formato específico dos slugs. O slug é a parte da URL que identifica o post ou evento.
O slug deve ser escrito em letras minúsculas, com palavras separadas por hífens.
Para manter a consistência, vamos também seguir um padrão de nomenclatura para os arquivos Markdown. A seguir, mostraremos cada um dos padrões de slug tanto para posts quanto para eventos.
### Posts
Os posts devem ser criados na pasta `_content/posts/` seguindo o formato:
```markdown
---
title: 'Título do Post'
date: '2024-03-20'
description: 'Descrição do post que aparecerá na listagem'
topics: ['tag1', 'tag2', 'tag3']
authors:
- name: 'Nome do Autor'
link: 'https://github.com/nomedautor'
---
Conteúdo do post em Markdown...
```
[Mais exemplos de posts](docs/examples/post-example.md)
#### Slug
```
<context>-<titulo-do-post>
## Exemplo:
`dsa-dijkstra.md`
```
- Algoritmos e Estruturas de Dados
- `ds-<titulo>.md`
- System Design
- `sd-<titulo>.md`
- `sd-<titulo>-<parte>.md`
- Outros
- `<titulo>.md`
### Eventos
Documentação completa de configuração de eventos:
- [docs/events.md](docs/events.md)
- [Mais exemplos de eventos](docs/examples/event-example.md)
### Roadmaps
Os roadmaps são recursos de aprendizado estruturados que ajudam a comunidade a navegar por tópicos complexos de forma organizada. Atualmente, temos o **Roadmap de Algoritmos e Estruturas de Dados**, hospedado em [dsa.craftcodeclub.io](https://dsa.craftcodeclub.io/).
#### 📍 Acessando o Roadmap
- **URL**: [https://dsa.craftcodeclub.io/](https://dsa.craftcodeclub.io/)
- **Navegação**: Clique em "Roadmap DSA" no menu principal (abre em uma nova aba)
## 🤝 Contribuindo
Contribuições são bem-vindas! Se você encontrou um bug ou tem uma sugestão de melhoria:
1. Abra uma issue descrevendo o problema/sugestão
2. Fork o repositório
3. Crie uma branch para sua feature (`git checkout -b feature/MinhaFeature`)
4. Commit suas mudanças (`git commit -m 'Adiciona nova feature'`)
5. Push para a branch (`git push origin feature/MinhaFeature`)
6. Abra um Pull Request
7. Acompanhe o PR até fechar: responda os comentários de review, resolva as threads e deixe os checks verdes
## 🤖 Trabalhando com agentes de IA
Este repositório traz skills em `.agents/skills/`, que agentes como o Claude Code carregam sozinhos quando a tarefa se encaixa.
| Skill | Quando roda |
|---|---|
| [`pr-watch`](.agents/skills/pr-watch/SKILL.md) | **Sempre que um PR é aberto**, e quando pedirem para checar ou fechar comentários de PR |
| [`validacao-visual`](.agents/skills/validacao-visual/SKILL.md) | Quando precisa *ver* uma página renderizada: layout, quebra de texto, contraste, tema, mobile |
**Ao abrir um PR, a `pr-watch` é obrigatória.** Ela cobre o ciclo até o fim: conferir comentários de review e checks de CI, verificar cada alegação antes de agir (bot erra), responder com evidência, resolver as threads e reportar. Alguns pontos que ela fixa:
- todo comentário postado no PR começa com `(Claude Code)`, para quem lê a thread saber que quem respondeu foi um agente;
- comentar na thread antes de resolver, e depois citar o commit que endereçou o ponto, nunca resolver em silêncio;
- comentário de bot pode ser fechado na hora; comentário de humano só depois de a pessoa concordar;
- comentário que questiona o desenho da mudança, e não a implementação, volta para quem abriu o PR decidir.
## 📄 Licença
Este projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
---
Desenvolvido com 💙 pela comunidade Craft & Code Club
Explore similar templates
Compare previews and descriptions within the same stack and category.

tailwind-nextjs-starter-blog
A Next.js and Tailwind CSS blog starter template using Contentlayer for Markdown/MDX, with built-in SEO, code highlighting, and tags. It targets personal technical blogs and migration from Jekyll/Hugo to React, and supports one-click Vercel deployment.
Next.js · Blog

Nextjs-tailwindcss-blog-template
A personal blog template built with Next.js and Tailwind CSS, using Velite to process Markdown content. It includes home, about, contact and article pages, with a demo site and a companion YouTube tutorial.
Next.js · Blog

Next-js-Blog-Boilerplate
A blog starter built on Next.js 12 and Tailwind CSS 3, integrating TypeScript, ESLint, Prettier, and PostCSS.
Next.js · Blog

nextjs-blog-theme
A Next.js 15 and Tailwind CSS 4.x blog starter by Netlify, designed by Bejamas, with MDX support, dark/light theme switching, and environment-variable configuration. It includes a visual setup wizard for deploying to Netlify and manages content via local .mdx files.
Next.js · Blog

blog
A personal blog forked from Timlrx's tailwind-nextjs-starter-blog, built with Next.js, React, and Tailwind CSS. Content is stored as Markdown/MDX under data/, with site, author, navigation, and project data in separate files.
Next.js · Blog

tailnext
Tailnext is a free, open-source template built on the Next.js 14 App Router and Tailwind CSS, created by the onWidget team.
Next.js · Blog
