{"id":263,"date":"2025-06-23T09:45:33","date_gmt":"2025-06-23T12:45:33","guid":{"rendered":"https:\/\/martinha.online\/neuroses-cotidianas\/?p=263"},"modified":"2025-06-23T09:45:33","modified_gmt":"2025-06-23T12:45:33","slug":"site-novo-no-ar","status":"publish","type":"post","link":"https:\/\/martinha.online\/neuroses-cotidianas\/2025\/06\/23\/site-novo-no-ar\/","title":{"rendered":"Site novo no ar"},"content":{"rendered":"\n<p>Como refiz meu site pessoal com IA e como est\u00e1 funcionando agora.<\/p>\n\n\n\n<p>Eu fui front-end muitos anos da minha vida, anos demais. Ent\u00e3o hoje em dia eu tenho um cansa\u00e7o imenso de fazer um html. Eu j\u00e1 tinha feito um site novo no <a href=\"https:\/\/gamma.app\/pt-br?gad_campaignid=22650306607&amp;gbraid=0AAAAAqWjqPQd0EPGow7RKfTnxGWYByvYX\">Gamma<\/a>, mas precisaria pagar para publicar e usar esse dom\u00ednio. E eu n\u00e3o t\u00f4 investindo tanto nisso n\u00e3o.<\/p>\n\n\n\n<p>Outro problema \u00e9 que eu gostaria de fazer um site bilingue, e para isso funcionar no Gamma, eu teria de duplicar as p\u00e1ginas &#8212; o que \u00e9 o dobro de trabalho para qualquer manuten\u00e7\u00e3o.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"467\" src=\"https:\/\/martinha.online\/neuroses-cotidianas\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-23-at-09.32.15-1024x467.png\" alt=\"\" class=\"wp-image-264\" srcset=\"https:\/\/martinha.online\/neuroses-cotidianas\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-23-at-09.32.15-1024x467.png 1024w, https:\/\/martinha.online\/neuroses-cotidianas\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-23-at-09.32.15-300x137.png 300w, https:\/\/martinha.online\/neuroses-cotidianas\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-23-at-09.32.15-768x350.png 768w, https:\/\/martinha.online\/neuroses-cotidianas\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-23-at-09.32.15-1536x700.png 1536w, https:\/\/martinha.online\/neuroses-cotidianas\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-23-at-09.32.15-1320x602.png 1320w, https:\/\/martinha.online\/neuroses-cotidianas\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-23-at-09.32.15.png 1893w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Depois de meses apareceu entre os e-mails que assino a ferramenta Bolt. \u00c9 mais uma ferramenta de <em>vibe coding<\/em>, que \u00e9 codar usando IA. Em vez de usar a linguagem de programa\u00e7\u00e3o, voc\u00ea usa linguagem natural e essas ferramentas criam o site pra voc\u00ea.<\/p>\n\n\n\n<p>Algumas ferramentas de vibe-coding:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/bolt.new\/\">Bolt<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/lovable.dev\/\">Lovable<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/wonderish.ai\/\">Wonderish<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/replit.com\/\">Replit<\/a><\/li>\n<\/ul>\n\n\n\n<p>Minhas dicas para vibe-coding:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fa\u00e7a o seu pedido para a ferramenta<\/strong>. Meu prompt inicial foi: <br><kbd>\"Quero criar uma landing page em portugues e ingles para ser meu portfolio como product ops. Um layout clean e moderno. o nome \u00e9 Marta Preuss. use tecnologias front-end. preciso de uma \u00e1rea para curriculo e portfolio; uma \u00e1rea 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\u00e3o esque\u00e7a das redes sociais: linkedin, bluesky e instagram. crie tamb\u00e9m uma \u00e1rea para contato com email e embed do calendly.\"<\/kbd><br><\/li>\n\n\n\n<li><strong>Pe\u00e7a modifica\u00e7\u00f5es no que j\u00e1 existe.<\/strong> N\u00e3o gostei do layout que ele fez ent\u00e3o pedi outro:<br><kbd>\"I don't like the layout. It's too simple. Make something more modern. try a pastel color palette. use serif fonts.\"<\/kbd><br>Veja que eu fiz o prompt inicial em portugu\u00eas e esse em ingl\u00eas. N\u00e3o faz diferen\u00e7a. \u00c0s vezes eu <em>sinto<\/em> que ele me entende melhor em ingl\u00eas; mas sempre consegui resultados em ambas as l\u00ednguas.<br><\/li>\n\n\n\n<li><strong>Pe\u00e7a para ele criar um <code>readme.md<\/code>,<\/strong> um arquivo que explica como o c\u00f3digo funciona. Ajuda muito a fazer mais pedidos, trocar de ferramenta ou dar manuten\u00e7\u00e3o.<br><kbd>\"fa\u00e7a 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.\"<\/kbd><br><\/li>\n\n\n\n<li>Cole os erros que acontecerem. Ele mesmo resolve.<\/li>\n<\/ul>\n\n\n\n<p>Logo, sem saber mais como mexer com isso mas com uma base de programa\u00e7\u00e3o, consegui lidar com o c\u00f3digo que ele fez. Foram alguns dias de itera\u00e7\u00f5es j\u00e1 que meus cr\u00e9ditos acabavam, mas ficou como eu queria, mais ou menos.<\/p>\n\n\n\n<p>Uma coisa boa do Bolt \u00e9 que voc\u00ea pode baixar o c\u00f3digo que ele fez e continuar trabalhando, ent\u00e3o eu mandei pro Visual Studio Code onde eu tenho o Copilot. O Copilot \u00e9 uma ferramenta de IA que ajuda a programar do mesmo jeito: conversando com ela. Ent\u00e3o at\u00e9 eu entender o que tava acontecendo e fazer umas mudan\u00e7as, foi uma m\u00e3o na roda.<\/p>\n\n\n\n<p>Quando fiquei satisfeita e chegou a hora de publicar, resolvi criar uma action do Github para facilitar minha vida: quando eu fa\u00e7o o push na main do projeto, ele roda o <code>npm install<\/code> e o <code>npm build<\/code>, que cria os arquivos que ser\u00e3o publicados. Com essa pasta pronta, ele mesmo conecta no FTP e atualiza os arquivos. Para fazer essa action, tamb\u00e9m usei o Copilot e ficou assim: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>name: Deploy to FTP\n\non:\n  push:\n    branches:\n      - main  # Ou sua branch de produ\u00e7\u00e3o\n  workflow_dispatch:  # Permite execu\u00e7\u00e3o manual via bot\u00e3o no GitHub\n\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Checkout repository\n        uses: actions\/checkout@v4\n\n      - name: Set up Node.js\n        uses: actions\/setup-node@v4\n        with:\n          node-version: '20'\n\n      - name: Install dependencies\n        run: npm install\n\n      - name: Build project\n        run: npm run build\n\n      - name: Upload to FTP\n        uses: SamKirkland\/FTP-Deploy-Action@v4.3.0  # Vers\u00e3o fixa recomendada\n        with:\n          server: ${{ secrets.FTP_SERVER }}\n          username: ${{ secrets.FTP_USERNAME }}\n          password: ${{ secrets.FTP_PASSWORD }}\n          local-dir: .\/dist\/\n          server-dir: \/public_html\/  # Ajuste para o seu caminho remoto\n          # Opcionais:\n          port: 21                   # Se sua porta FTP n\u00e3o for a padr\u00e3o (21)\n          secure: false              # Use 'true' para FTPS (SSL expl\u00edcito)\n          clean: true               # Remove arquivos antigos no servidor<\/code><\/pre>\n\n\n\n<p>Ficou \u00f3timo, com menos riscos de erros humanos: eu fa\u00e7o o c\u00f3digo, publico e pronto, t\u00e1 no ar.<\/p>\n\n\n\n<p>Eu s\u00f3 tive um problema porque as rotas n\u00e3o estavam funcionando em produ\u00e7\u00e3o, mas pedi ajuda ao DeepSeek e alterei meu <code>.htaccess<\/code> para que isso funcionasse. <\/p>\n\n\n\n<p>Tamb\u00e9m adicionei o Google Analytics, Tag Manager e o <a href=\"https:\/\/clarity.microsoft.com\/projects\/view\/s3nqzh7ra6\/dashboard?date=Last%203%20days\">Microsoft Clarity<\/a> (que se integrou com o Tag Manager e fez tudo sozinho, achei m\u00e1gico). O site ficou bilingue com uma estrutura bacana, tem os componentes com o conte\u00fado separado e \u00e9 f\u00e1cil de dar manuten\u00e7\u00e3o. Tamb\u00e9m \u00e9 f\u00e1cil adicionar artigos para o portfolio. <\/p>\n\n\n\n<p>Visita l\u00e1: <a href=\"http:\/\/martinha.online\">http:\/\/martinha.online<\/a>. <\/p>\n\n\n\n<p>T\u00f4 bem satisfeita. Eu n\u00e3o sou programadora, mas desenvolvedora: eu desenvolvo, mas n\u00e3o sou fluente em linguagens de programa\u00e7\u00e3o. Acho que com os modelos de linguagem uma barreira interessante cai para pessoas que, como eu, sabem falar com computadores, mas n\u00e3o escrever a l\u00edngua deles. Para esses projetos pessoais e mesmo do trabalho, funciona legal. Precisa ter uma base; mas o grosso do trabalho \u00e9 feito pelo pr\u00f3prio computador.<\/p>\n\n\n\n<p>Claro que sigo com N cr\u00edticas \u00e0 IA, e os posts aqui do blog s\u00e3o todos escritos por mim (com exce\u00e7\u00e3o de <a href=\"https:\/\/martinha.online\/neuroses-cotidianas\/2023\/08\/29\/a-vila-das-crencas\/\">um<\/a> que fiz quando ainda era novidade e n\u00e3o tinha pensado muito nisso), porque eu <strong>gosto<\/strong> de escrever. Diferente de programar, que eu n\u00e3o gosto. Tenho tentado dar mais prioridade para as coisas que gosto de fazer na vida. As que eu n\u00e3o gosto t\u00eam ficado mais toler\u00e1veis assim.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Como refiz meu site pessoal com IA e como est\u00e1 funcionando agora. Eu fui front-end muitos anos da minha vida, anos demais. Ent\u00e3o hoje em dia eu tenho um cansa\u00e7o imenso de fazer um html. Eu j\u00e1 tinha feito um site novo no Gamma, mas precisaria pagar para publicar e usar esse dom\u00ednio. E eu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":264,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[3],"tags":[],"class_list":["post-263","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produtos-digitais"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-23-at-09.32.15.png","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-json\/wp\/v2\/posts\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-json\/wp\/v2\/comments?post=263"}],"version-history":[{"count":1,"href":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-json\/wp\/v2\/posts\/263\/revisions"}],"predecessor-version":[{"id":265,"href":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-json\/wp\/v2\/posts\/263\/revisions\/265"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-json\/wp\/v2\/media\/264"}],"wp:attachment":[{"href":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-json\/wp\/v2\/media?parent=263"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-json\/wp\/v2\/categories?post=263"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martinha.online\/neuroses-cotidianas\/wp-json\/wp\/v2\/tags?post=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}