Home / Blog / Criar um site pessoal ou portfólio com HTML, CSS e Python

Criar um site pessoal ou portfólio com HTML, CSS e Python

📅 22 Aug 2026 📖 6 min de leitura 🏷️ Criadores de Conteúdo ✍️ Marcus

Imagina ter um espaço na Web totalmente teu, livre de algoritmos e regras de redes sociais, onde podes apresentar o teu trabalho exatamente como queres. Para um criador de conteúdo, ter um portfólio profissional não é um luxo, é uma necessidade. E a boa notícia é que não precisas de pagar subscrições caras de construtores de sites para ter algo profissional, rápido e totalmente automatizado.

Neste guia prático, vais aprender a estruturar um site pessoal com HTML e CSS, e a utilizar o poder do Python e do Hermes Agent para automatizar a publicação e as atualizações diretamente para o GitHub Pages (totalmente gratuito). No final, terás um sistema onde basta escreveres o teu novo conteúdo e a IA encarrega-se do resto.

Porquê HTML, CSS e Python?

Muitos criadores recorrem a plataformas complexas como o WordPress ou o Squarespace. Embora úteis, estas ferramentas tornam-se pesadas, lentas e caras a longo prazo. Um site estático baseado em HTML e CSS oferece:

  • Velocidade extrema: Carrega instantaneamente em qualquer dispositivo, o que melhora o teu SEO.
  • Custo zero: Hospedado gratuitamente através do GitHub Pages.
  • Controlo total: O design e os teus dados pertencem-te a 100%.

Ao adicionarmos o Python e o Hermes Agent à equação, removemos a fricção técnica. Não precisas de saber programar linhas complexas de código todos os dias; criamos uma automatização inteligente (uma "skill") que faz o trabalho pesado por ti.

Passo 1: Estruturar o Portfólio (HTML e CSS)

O primeiro passo é criar a estrutura visual do teu portfólio. Cria uma pasta no teu computador chamada meu-portfolio e, dentro dela, cria um ficheiro chamado index.html com a estrutura básica do teu site.

<!DOCTYPE html>
<html lang="pt-PT">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>O Meu Portfólio Profissional</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; margin: 0; padding: 0; color: #333; }
        header { background: #1a1a1a; color: #fff; padding: 2rem; text-align: center; }
        .container { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
        .project-card { border: 1px solid #ddd; padding: 1.5rem; margin-bottom: 1rem; border-radius: 8px; }
        footer { text-align: center; padding: 2rem; background: #f4f4f4; margin-top: 2rem; }
    </style>
</head>
<body>
    <header>
        <h1>Olá, o meu nome é [Teu Nome]</h1>
        <p>Criador de Conteúdo & Especialista Digital</p>
    </header>
    <div class="container">
        <h2>Os Meus Projetos</h2>
        <div id="projects-list">
            <!-- O script Python vai injetar os projetos aqui -->
        </div>
    </div>
    <footer>
        <p>&copy; 2026 - Atualizado automaticamente com IA</p>
    </footer>
</body>
</html>

Este ficheiro HTML define o visual básico e limpo do teu site. A secção com o ID projects-list será o local onde o nosso script Python irá inserir dinamicamente os teus novos projetos ou artigos.

Passo 2: O Script Python de Atualização Dinâmica

Para não teres de editar o código HTML manualmente sempre que quiseres adicionar um novo projeto, vamos usar um script Python simples (build.py). Este script lê um ficheiro de dados em formato JSON e gera o HTML final atualizado.

import json

def build_portfolio():
    # 1. Carregar os dados dos projetos
    with open('projects.json', 'r', encoding='utf-8') as f:
        projects = json.load(f)
    
    # 2. Gerar o HTML para cada projeto
    projects_html = ""
    for p in projects:
        projects_html += f"""
        <div class="project-card">
            <h3>{p['title']}</h3>
            <p>{p['description']}</p>
            <a href="{p['link']}" target="_blank">Ver Projeto &rarr;</a>
        </div>
        """
    
    # 3. Ler o template index.html e substituir o marcador de posição
    with open('index.html', 'r', encoding='utf-8') as f:
        html_content = f.read()
    
    # Substitui o comentário HTML pelo conteúdo gerado
    updated_html = html_content.replace(
        '<!-- O script Python vai injetar os projetos aqui -->',
        projects_html
    )
    
    # 4. Gravar o ficheiro final pronto para publicação
    with open('index.html', 'w', encoding='utf-8') as f:
        f.write(updated_html)
    print("Portfólio atualizado com sucesso!")

if __name__ == "__main__":
    build_portfolio()

Cria também um ficheiro simples chamado projects.json para testares o funcionamento local do script:

[
    {
        "title": "O Meu Último Vídeo no YouTube",
        "description": "Um guia completo sobre produtividade digital e ferramentas de IA.",
        "link": "https://youtube.com"
    }
]

Passo 3: Criar uma Skill no Hermes Agent para Publicação Automática

O Hermes Agent é um assistente de IA focado em automação que corre localmente ou no teu servidor. Se ainda não o tens instalado, podes fazê-lo facilmente através do terminal:

# Em macOS ou Linux
curl -fsSL https://hermes-agent.nousresearch.com/install.sh | bash

# Em Windows (PowerShell como Administrador)
iex (irm https://hermes-agent.nousresearch.com/install.ps1)

Agora, vamos criar uma Skill personalizada do Hermes para automatizar todo o fluxo: rodar o script Python, validar o resultado e enviar as alterações para o teu repositório do GitHub. Cria o ficheiro SKILL.md na pasta de configurações do teu agente (normalmente em ~/.hermes/skills/publish-portfolio.md):

---
name: publish-portfolio
description: Automatiza a geração e publicação do portfólio pessoal usando Python e Git.
author: MarcTechJA
version: "1.0"
platforms:
  - macos
  - linux
  - windows
metadata:
  hermes:
    tags: [automation, webdev, python]
---

# publish-portfolio
Esta skill automatiza a atualização de ficheiros HTML locais, executa o script Python de validação e envia as alterações para o GitHub Pages.

## When to Use
Usa esta skill sempre que adicionares novos projetos ao ficheiro JSON e pretenderes compilar e publicar o site de forma automática.

## Instruções
1. Executa o comando local `python build.py` para atualizar o ficheiro `index.html`.
2. Verifica se existem alterações pendentes usando `git status`.
3. Adiciona as alterações ao Git com `git add .`.
4. Realiza o commit das alterações com uma mensagem informativa clara.
5. Faz push das alterações para o ramo principal (main) para iniciar o deploy no GitHub Pages.

## Critérios de conclusão
- O script `build.py` correu sem erros e gerou o HTML atualizado.
- O Git registou e enviou as alterações para o repositório remoto com sucesso.

Com esta skill configurada, podes listar as tuas ferramentas disponíveis no terminal com o comando:

hermes skills list

E, para executar toda a tarefa de publicação sem teres de te preocupar com comandos Git ou Python manuais, basta conversares com o teu agente:

hermes chat -s publish-portfolio

O Hermes Agent lerá a skill, executará o script Python, detetará as alterações no teu código e fará o upload direto para o GitHub de forma totalmente segura.

Passo 4: Publicação Gratuita no GitHub Pages

Para colocar o teu site online de forma gratuita e perpétua:

  1. Cria uma conta gratuita no GitHub.
  2. Cria um novo repositório público com o nome teu-utilizador.github.io (substitui pelo teu nome de utilizador real).
  3. Envia os teus ficheiros locais para este repositório.

Assim que o Hermes Agent fizer o push das tuas alterações para o GitHub, o teu site ficará imediatamente visível para todo o mundo no endereço https://teu-utilizador.github.io. Sem servidores para gerir, sem bases de dados lentas e sem dores de cabeça.

Conclusão

Parabéns! Criaste um fluxo de trabalho profissional, onde o teu site é gerado de forma estática e ultra-rápida, e a publicação é gerida de forma inteligente pela IA através do Hermes Agent. Agora, sempre que tiveres um novo projeto, basta atualizar o ficheiro JSON e pedir ao teu assistente para publicar.

Se queres dominar por completo o ecossistema de agentes autónomos, aprender a configurar múltiplos providers de IA e criar automações ainda mais robustas para o teu dia a dia como criador de conteúdo ou programador, vale a pena espreitar o Guia Completo do Hermes Agent, um recurso prático e detalhado que te vai ajudar a levar estas automações ao próximo nível.

Comentários