Iniciante twinepublicaçãogithub-pagesitch.iodeploy

Twine: Publicando sua História Online

Aprenda a exportar sua história Twine e publicá-la gratuitamente no GitHub Pages, itch.io, Netlify e outras plataformas.

📅 01 de junho de 2026 ⏱ 4 min de leitura 🛠 Twine 2.9 + Git + GitHub Pages

Do Editor ao Mundo

Uma história Twine é, no fundo, um arquivo HTML — isso significa que ela pode ser hospedada em qualquer servidor web, incluindo opções gratuitas. Neste tutorial, cobriremos as principais plataformas.

Exportando do Twine

Passo 1: Publicar para arquivo

  1. No editor de story, clique no nome da história (barra inferior)
  2. Selecione “Publish to File” (ou “Publicar como Arquivo”)
  3. Salve o arquivo .html no seu computador

Verificação local

Antes de publicar, abra o arquivo no navegador (duplo clique) e teste toda a história. Certifique-se de que:

  • Todos os links funcionam
  • As imagens aparecem corretamente
  • O CSS está sendo aplicado
  • JavaScript (se houver) executa sem erros no Console

Console do Navegador

Para ver erros JavaScript, pressione F12 → aba Console. Erros aparecem em vermelho.

Opção 1: GitHub Pages (Recomendado)

GitHub Pages é gratuito, tem suporte a domínio customizado e integração com Git.

Requisitos

  • Conta no GitHub (gratuita em github.com)
  • Git instalado: git --version

Passo a passo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

# 1. Criar um repositório no GitHub
# Acesse github.com → New repository → nome: "minha-historia"
# Marque "Add a README file"

# 2. Clonar o repositório
git clone https://github.com/SEU_USUARIO/minha-historia.git
cd minha-historia

# 3. Copiar o arquivo da história
cp /caminho/para/sua-historia.html ./index.html

# 4. Adicionar e commitar
git add index.html
git commit -m "Publicar história Twine"

# 5. Enviar para o GitHub
git push origin main

Habilitar GitHub Pages

  1. No repositório GitHub, vá em Settings → Pages
  2. Em “Source”, selecione “Deploy from a branch”
  3. Escolha a branch main e a pasta / (root)
  4. Clique em Save

Após 1-2 minutos, sua história estará disponível em:

https://SEU_USUARIO.github.io/minha-historia/

Opção 2: itch.io (Para Games e Ficção Interativa)

O itch.io é a plataforma preferida da comunidade de ficção interativa independente.

Publicando no itch.io

  1. Crie uma conta em itch.io
  2. Clique em “Dashboard” → “Create new project”
  3. Configurações recomendadas:
Campo Valor sugerido
Kind of project HTML
Uploads Faça upload do arquivo .html como index.html dentro de um .zip
Embed options Click to launch in fullscreen
Tags twine, interactive fiction, text game
Genre Interactive Fiction
  1. Marque o arquivo .zip como “This file will be played in the browser”
  2. Clique em “Save & View page”

Compactando para itch.io

O itch.io exige um arquivo .zip. No Linux/macOS: zip historia.zip index.html. Se tiver imagens externas, inclua-as na pasta e referencie com caminhos relativos.

Opção 3: Netlify (Deploy Automático)

Netlify oferece deploy automático pelo GitHub e HTTPS gratuito.

1
2
3
4
5
6
7

# 1. Crie um repositório GitHub com seu index.html

# 2. Acesse netlify.com → "Add new site" → "Import an existing project"
# 3. Conecte ao GitHub e escolha o repositório
# 4. Build settings: deixe em branco (sem comando de build)
# 5. Publish directory: / (raiz)
# 6. Deploy!

Sempre que você fizer git push, o Netlify faz o deploy automaticamente.

Opção 4: Hospedagem Estática Simples

Para compartilhamento rápido sem conta, use:

  • Surge.sh: npm install -g surge && surge
  • Vercel: npx vercel deploy
  • Cloudflare Pages: similar ao Netlify

Adicionando Metadados para SEO

Antes de publicar, é boa prática adicionar metadados no <head> do arquivo exportado:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- Abra o .html exportado em um editor de texto e adicione dentro de <head>: -->
<meta name="description" content="Uma história interativa de mistério criada com Twine.">
<meta name="author" content="Seu Nome">
<meta property="og:title" content="Nome da História">
<meta property="og:description" content="Sinopse da história...">
<meta property="og:type" content="website">

<!-- Para Twitter/X -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Nome da História">

Licenciando seu Trabalho

Considere adicionar uma licença ao seu trabalho. Para ficção interativa, comuns são:

Licença Uso
Creative Commons BY 4.0 Permite uso com atribuição
CC BY-SA 4.0 Permite uso, exige mesma licença
CC BY-NC 4.0 Permite uso não-comercial
Domínio Público (CC0) Nenhuma restrição

Checklist de Publicação

Antes de compartilhar publicamente, verifique:

  • Testou no Chrome, Firefox e em dispositivo móvel
  • Todos os links internos funcionam
  • Imagens carregam corretamente
  • Não há chaves de API expostas no código
  • A história tem um título e créditos de autoria
  • Metadados OG/Twitter configurados
  • Licença escolhida e indicada

Sua história está no ar!

Parabéns por completar os 5 tutoriais da série Twine do FiloQuest! Agora você sabe criar, estilizar, integrar IA e publicar ficção interativa. Compartilhe seu trabalho no fórum do projeto e envie o link para filoquest@universidade.edu.br!

Para Além do Twine

Explore outras ferramentas de ficção interativa:

Ferramenta Linguagem Ideal para
Ink/Inky Ink script Narrativas lineares com ramificações profundas
Inform 7 Inglês natural Parser fiction clássico
Ren’Py Python Visual novels com imagens e sons
Bitsy Gráfico Experiências curtas e poéticas
Choicescript Markup simples Livros-jogo estilo Choice of Games

Série Completa