Site novo no ar

Como refiz meu site pessoal com IA e como está funcionando agora.

Eu fui front-end muitos anos da minha vida, anos demais. Então hoje em dia eu tenho um cansaço imenso de fazer um html. Eu já tinha feito um site novo no Gamma, mas precisaria pagar para publicar e usar esse domínio. E eu não tô investindo tanto nisso não.

Outro problema é que eu gostaria de fazer um site bilingue, e para isso funcionar no Gamma, eu teria de duplicar as páginas — o que é o dobro de trabalho para qualquer manutenção.

Depois de meses apareceu entre os e-mails que assino a ferramenta Bolt. É mais uma ferramenta de vibe coding, que é codar usando IA. Em vez de usar a linguagem de programação, você usa linguagem natural e essas ferramentas criam o site pra você.

Algumas ferramentas de vibe-coding:

• Bolt
• Lovable
• Wonderish
• Replit

Minhas dicas para vibe-coding:

• Faça o seu pedido para a ferramenta. Meu prompt inicial foi:
  "Quero criar uma landing page em portugues e ingles para ser meu portfolio como product ops. Um layout clean e moderno. o nome é Marta Preuss. use tecnologias front-end. preciso de uma área para curriculo e portfolio; uma área para palestras e tutoriais; uma area para links de ferramentas que eu criei; e uma de hobbies com link para meu blog, livros que li e coisas que imprimi em 3d. Não esqueça das redes sociais: linkedin, bluesky e instagram. crie também uma área para contato com email e embed do calendly."
  
• Peça modificações no que já existe. Não gostei do layout que ele fez então pedi outro:
  "I don't like the layout. It's too simple. Make something more modern. try a pastel color palette. use serif fonts."
  Veja que eu fiz o prompt inicial em português e esse em inglês. Não faz diferença. Às vezes eu sinto que ele me entende melhor em inglês; mas sempre consegui resultados em ambas as línguas.
  
• Peça para ele criar um readme.md, um arquivo que explica como o código funciona. Ajuda muito a fazer mais pedidos, trocar de ferramenta ou dar manutenção.
  "faça o arquivo readme.md do projeto explicando as pastas, o que cada coisa faz, onde editar o texto e como executar e publicar o projeto."
  
• Cole os erros que acontecerem. Ele mesmo resolve.

Logo, sem saber mais como mexer com isso mas com uma base de programação, consegui lidar com o código que ele fez. Foram alguns dias de iterações já que meus créditos acabavam, mas ficou como eu queria, mais ou menos.

Uma coisa boa do Bolt é que você pode baixar o código que ele fez e continuar trabalhando, então eu mandei pro Visual Studio Code onde eu tenho o Copilot. O Copilot é uma ferramenta de IA que ajuda a programar do mesmo jeito: conversando com ela. Então até eu entender o que tava acontecendo e fazer umas mudanças, foi uma mão na roda.

Quando fiquei satisfeita e chegou a hora de publicar, resolvi criar uma action do Github para facilitar minha vida: quando eu faço o push na main do projeto, ele roda o npm install e o npm build, que cria os arquivos que serão publicados. Com essa pasta pronta, ele mesmo conecta no FTP e atualiza os arquivos. Para fazer essa action, também usei o Copilot e ficou assim:

name: Deploy to FTP

on:
  push:
    branches:
      - main  # Ou sua branch de produção
  workflow_dispatch:  # Permite execução manual via botão no GitHub

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Upload to FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.0  # Versão fixa recomendada
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/
          server-dir: /public_html/  # Ajuste para o seu caminho remoto
          # Opcionais:
          port: 21                   # Se sua porta FTP não for a padrão (21)
          secure: false              # Use 'true' para FTPS (SSL explícito)
          clean: true               # Remove arquivos antigos no servidor

Ficou ótimo, com menos riscos de erros humanos: eu faço o código, publico e pronto, tá no ar.

Eu só tive um problema porque as rotas não estavam funcionando em produção, mas pedi ajuda ao DeepSeek e alterei meu .htaccess para que isso funcionasse.

Também adicionei o Google Analytics, Tag Manager e o Microsoft Clarity (que se integrou com o Tag Manager e fez tudo sozinho, achei mágico). O site ficou bilingue com uma estrutura bacana, tem os componentes com o conteúdo separado e é fácil de dar manutenção. Também é fácil adicionar artigos para o portfolio.

Visita lá: http://martinha.online.

Tô bem satisfeita. Eu não sou programadora, mas desenvolvedora: eu desenvolvo, mas não sou fluente em linguagens de programação. Acho que com os modelos de linguagem uma barreira interessante cai para pessoas que, como eu, sabem falar com computadores, mas não escrever a língua deles. Para esses projetos pessoais e mesmo do trabalho, funciona legal. Precisa ter uma base; mas o grosso do trabalho é feito pelo próprio computador.

Claro que sigo com N críticas à IA, e os posts aqui do blog são todos escritos por mim (com exceção de um que fiz quando ainda era novidade e não tinha pensado muito nisso), porque eu gosto de escrever. Diferente de programar, que eu não gosto. Tenho tentado dar mais prioridade para as coisas que gosto de fazer na vida. As que eu não gosto têm ficado mais toleráveis assim.