https://github.com/guibranco/blog
✈️🛠️ Blog sobre tecnologia, infraestrutura e automação para quem viaja e constrói — artigos em Markdown, publicados via Jekyll no GitHub Pages.
https://github.com/guibranco/blog
blog blogging giscus jekyll personal personal-blog technologies technology travel
Last synced: 3 months ago
JSON representation
✈️🛠️ Blog sobre tecnologia, infraestrutura e automação para quem viaja e constrói — artigos em Markdown, publicados via Jekyll no GitHub Pages.
- Host: GitHub
- URL: https://github.com/guibranco/blog
- Owner: guibranco
- License: mit
- Created: 2026-03-20T12:18:57.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-01T17:02:14.000Z (3 months ago)
- Last Synced: 2026-04-04T10:57:33.474Z (3 months ago)
- Topics: blog, blogging, giscus, jekyll, personal, personal-blog, technologies, technology, travel
- Language: HTML
- Homepage: https://guilherme.stracini.com.br/blog/
- Size: 1.9 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ✈️🛠️ Tecnologia & Viagens
**Blog sobre tecnologia, infraestrutura e automação para quem viaja e constrói.**
Publicado via [Jekyll](https://jekyllrb.com/) · Hospedado no [GitHub Pages](https://pages.github.com/) · Zero custo de servidor
[](https://github.com/guibranco/blog/actions)
[](https://jekyllrb.com/)
[](LICENSE)
---
[🌐 Ver o blog](https://guibranco.github.io/blog) · [📡 RSS](https://guibranco.github.io/blog/feed.xml) · [🗺️ Sitemap](https://guibranco.github.io/blog/sitemap.xml)
---
## 📋 Sobre
Blog pessoal construído com Jekyll e publicado gratuitamente via GitHub Pages. Cada artigo é um arquivo Markdown em `_posts/` — um `git push` para a branch `main` dispara o build e publica automaticamente em ~1 minuto.
O design é totalmente customizado — sem temas de terceiros — com tipografia editorial (Playfair Display + Source Serif 4 + JetBrains Mono), sidebar fixa com avatar, ícones sociais e navegação por categorias.
---
## 🗂️ Estrutura do projeto
```
blog/ # nome do repositório
│
├── _posts/ # Artigos em Markdown
│ └── 2026-03-20-envio-sms-internet.md
│
├── _layouts/
│ ├── post.html # Template de artigo
│ └── category.html # Template de página de categoria
│
├── _data/
│ └── quotes.yml # Lista de quotes da sidebar
│
├── categorias/ # Uma página .md por categoria
│ ├── infraestrutura.md
│ └── telecomunicacoes.md
│
├── assets/
│ ├── css/
│ │ └── main.css # Estilos compartilhados
│ └── img/
│ ├── cover.jpg # Imagem de fundo da sidebar
│ └── avatar.jpg # Foto de perfil circular
│
├── index.html # Página inicial
├── _config.yml # Configurações do Jekyll
├── Gemfile # Dependências Ruby
└── README.md
```
---
## 🗃️ Gerenciando categorias
O Jekyll não gera páginas de categoria automaticamente. Para cada nova categoria usada nos posts, é preciso criar um arquivo `.md` correspondente em `categorias/`.
**Criando uma nova categoria:**
```bash
cat > categorias/devops.md << 'FRONTMATTER'
---
layout: category
category: DevOps
permalink: /categorias/devops/
---
FRONTMATTER
```
A categoria declarada no campo `category:` deve ser idêntica à usada no front matter dos posts (incluindo acentos e capitalização). O `permalink` usa a versão slugificada, sem acentos.
**Categorias existentes:**
| Categoria | Arquivo | URL |
|---|---|---|
| Infraestrutura | `categorias/infraestrutura.md` | `/categorias/infraestrutura/` |
| Telecomunicações | `categorias/telecomunicacoes.md` | `/categorias/telecomunicacoes/` |
| Career | `categorias/career.md` | `/categorias/career/` |
| Coding | `categorias/coding.md` | `/categorias/coding/` |
| DevOps | `categorias/devops.md` | `/categorias/devops/` |
| Hobbies | `categorias/hobbies.md` | `/categorias/hobbies/` |
| Investments | `categorias/investments.md` | `/categorias/investments/` |
| Testing | `categorias/testing.md` | `/categorias/testing/` |
> Ao publicar um post com uma categoria nova, lembre-se sempre de criar o arquivo correspondente em `categorias/` — caso contrário o link na sidebar retornará 404.
---
## ✍️ Publicando um novo artigo
**1.** Crie o arquivo em `_posts/` seguindo o padrão `AAAA-MM-DD-slug.md`:
```bash
touch _posts/2026-04-10-meu-novo-artigo.md
```
**2.** Adicione o front matter no topo do arquivo:
```yaml
---
layout: post
title: "Título do artigo"
description: "Resumo em uma linha para SEO e cards."
date: 2026-04-10
categories: [Infraestrutura]
tags: [docker, linux, automação]
reading_time: 8
image: /assets/img/posts/meu-artigo-cover.jpg # opcional
---
```
**3.** Escreva o conteúdo em Markdown. Componentes visuais customizados como callouts, blocos de código com syntax highlighting e cards podem ser usados diretamente com HTML inline.
**4.** Publique:
```bash
git add .
git commit -m "feat: novo artigo sobre X"
git push origin main
```
O GitHub Pages detecta o push, roda o build do Jekyll e publica em ~60 segundos.
---
## ⚙️ Configuração (`_config.yml`)
```yaml
# Identidade
title: "Tecnologia & Viagens"
description: "Blog sobre tecnologia, infraestrutura e automação para quem viaja e constrói."
author: "Guilherme Branco Stracini"
author_bio: "Software engineer. PHP, C#, JS, Rust. Integrações, APIs, seguros & logística."
author_avatar: /assets/img/avatar.jpg # foto circular na sidebar
author_cover: /assets/img/cover.jpg # imagem de fundo da sidebar
# URLs
url: "https://guibranco.github.io"
baseurl: "/blog"
# Redes sociais (todos opcionais)
social:
github: https://github.com/guibranco
linkedin: https://www.linkedin.com/in/guilhermestracini/
instagram: https://instagram.com/gui.stracini
facebook: https://www.facebook.com/guilherme.stracini/
youtube: https://www.youtube.com/@GuilhermeBrancoStracini
stackoverflow: https://stackoverflow.com/users/1890220/guilherme-branco-stracini
pinterest: https://www.pinterest.com/guibranco/
whatsapp: https://api.whatsapp.com/send/?phone=353871471762
website: http://guilherme.stracini.com.br
website_image: assets/img/avatar.png
strava: https://www.strava.com/athletes/171612487
soundcloud: https://open.spotify.com/user/22x2qmq6hbuqyjy2emg6k4xiq
spotify: https://soundcloud.com/guilherme-stracini
reddit: https://www.reddit.com/user/SilverSport8845/
medium: https://medium.com/@guilhermebrancostracini
```
---
## 💬 Quotes da sidebar
As quotes são selecionadas dinamicamente a cada build a partir do arquivo `_data/quotes.yml`. O Jekyll usa os segundos do horário do build como seed — então cada `git push` exibe uma quote diferente.
**Formato do arquivo:**
```yaml
- text: "The best way to predict the future is to invent it."
author: "Alan Kay"
- text: "Not all those who wander are lost."
author: "J.R.R. Tolkien"
```
Para adicionar uma nova quote, basta incluir um novo item no final do arquivo. Não há limite de quantidade — quanto mais quotes, mais variação entre builds.
---
## 🖼️ Imagens da sidebar
A sidebar suporta dois campos distintos:
| Campo | Uso | Fallback |
|---|---|---|
| `author_cover` | Imagem de fundo (square/landscape) com `object-fit: cover` e opacidade reduzida | Padrão geométrico diagonal |
| `author_avatar` | Foto circular em primeiro plano | Inicial do nome do autor |
---
## 🏷️ Front matter — referência completa
| Campo | Tipo | Obrigatório | Descrição |
|---|---|---|---|
| `layout` | string | ✅ | Sempre `post` |
| `title` | string | ✅ | Título do artigo |
| `date` | date | ✅ | Data de publicação (`AAAA-MM-DD`) |
| `description` | string | — | Subtítulo e meta description para SEO |
| `categories` | list | — | Categorias (aparecem como pills e na nav) |
| `tags` | list | — | Tags (aparecem no rodapé do artigo e na nuvem da home) |
| `reading_time` | number | — | Tempo estimado de leitura em minutos |
| `image` | path | — | Caminho da imagem de capa do artigo |
---
## 🧩 Componentes disponíveis nos artigos
Os componentes abaixo são usados como HTML inline dentro do Markdown.
### Callout
```html
Dica
Texto do callout aqui.
Atenção
Texto de aviso aqui.
```
### Bloco de código customizado
```html
PHP 8.2+
// seu código aqui
```
### Parágrafo de destaque (lead)
```html
Texto de abertura em destaque, levemente maior e em itálico.
```
### Divisor de seção
```html
· · ·
```
---
## 💻 Desenvolvimento local
```bash
# Pré-requisitos: Ruby 3.x + Bundler
gem install bundler
# Instalar dependências
bundle install
# Iniciar servidor local com live reload
bundle exec jekyll serve
# Acesse em: http://localhost:4000
```
### Plugins utilizados
| Plugin | Função |
|---|---|
| `jekyll-feed` | Gera `/feed.xml` automaticamente |
| `jekyll-seo-tag` | Meta tags Open Graph e Twitter Card |
| `jekyll-sitemap` | Gera `/sitemap.xml` automaticamente |
---
## 🎨 Design system
| Elemento | Valor |
|---|---|
| Fonte de display | Playfair Display (700 / italic) |
| Fonte de corpo | Source Serif 4 (300 / 400 / 600) |
| Fonte mono | JetBrains Mono (400 / 500) |
| Cor principal | `#1a1714` (ink) |
| Cor de acento | `#2d6a4f` (verde) |
| Cor de acento quente | `#b85c00` (âmbar) |
| Destaque verde | `#93c97a` |
| Superfície | `#faf9f6` |
Todos os tokens estão em `assets/css/main.css` como variáveis CSS em `:root`.
---
## 📄 Licença
MIT © [Guilherme Branco Stracini](https://github.com/guibranco)