Host a resume website from one HTML file

Aloja la web de tu currículum con un solo HTML

Hébergez un site CV avec un seul fichier HTML

Hospede um site de currículo com um único HTML

A résumé is a document with a job to do: it has to be readable on a phone at 11 inches from a face, printable on office paper, and openable by someone who does not trust attachments. One HTML file does all three, and a URL beats an attachment because the link you put on LinkedIn in March still shows the April version of you.

Un currículum es un documento con un trabajo que hacer: tiene que leerse en un móvil a un palmo de la cara, imprimirse en papel de oficina y abrirlo alguien que no confía en los adjuntos. Un fichero HTML hace las tres cosas, y una URL le gana al adjunto porque el enlace que pusiste en LinkedIn en marzo sigue mostrando la versión de abril.

Un CV est un document avec une tâche à remplir : il doit se lire sur un téléphone à vingt centimètres d’un visage, s’imprimer sur du papier de bureau, et s’ouvrir par quelqu’un qui ne fait pas confiance aux pièces jointes. Un seul fichier HTML fait les trois, et une URL vaut mieux qu’une pièce jointe, car le lien mis sur LinkedIn en mars montre encore la version d’avril.

Um currículo é um documento com uma tarefa a cumprir: precisa ser lido no celular a um palmo do rosto, impresso no papel do escritório e aberto por alguém que não confia em anexos. Um único arquivo HTML faz as três coisas, e uma URL ganha do anexo porque o link que você pôs no LinkedIn em março ainda mostra a versão de abril.

The file, and the two things people forget

Write it as one index.html with the styles inline. No framework, no build, no font from a CDN: a résumé that waits on a third-party stylesheet is a résumé that can fail to render. System fonts look fine here, and the whole page lands in the neighbourhood of 10 KB, which loads before a thumb stops moving.

The two things people forget are the same two: a <title> with your name in it, because the browser tab is what a recruiter sees when they have eleven tabs open; and a print stylesheet, because at some point someone will press Ctrl+P and hand a piece of paper to a colleague.

El fichero y las dos cosas que se olvidan

Escríbelo como un único index.html con los estilos dentro. Sin frameworks, sin compilación y sin fuentes de un CDN: un currículum que depende de una hoja de estilos de terceros es un currículum que puede no renderizar. Las fuentes del sistema quedan bien aquí, y la página entera cabe en unos 10 KB, que cargan antes de que el dedo deje de tocar la pantalla.

Las dos cosas que se olvidan son siempre las mismas: un <title> con tu nombre, porque la pestaña del navegador es lo que ve quien tiene once pestañas abiertas; y una hoja de estilos de impresión, porque en algún momento alguien pulsará Ctrl+P y le pasará un papel a un compañero.

Le fichier et les deux détails qu’on oublie

Écrivez-le comme un seul index.html avec les styles dedans. Aucun framework, aucune construction, aucune police venue d’un CDN : un CV qui dépend d’une feuille de style tierce est un CV qui peut ne pas s’afficher. Les polices système rendent très bien ici, et la page entière tient dans environ 10 KB, ce qui se charge avant que le pouce lâche l’écran.

Les deux détails qu’on oublie sont toujours les mêmes : un <title> avec votre nom, car c’est l’onglet que voit quelqu’un qui en a onze ouverts ; et une feuille de style d’impression, car quelqu’un, un jour, appuiera sur Ctrl+P et passera une feuille à un collègue.

O arquivo e as duas coisas que se esquecem

Escreva como um único index.html com os estilos dentro. Sem framework, sem build, sem fonte de CDN: um currículo que depende de uma folha de estilos de terceiros é um currículo que pode não aparecer. As fontes do sistema ficam bem aqui, e a página inteira cabe em uns 10 KB, que carregam antes de o dedo sair da tela.

As duas coisas que se esquecem são sempre as mesmas: um <title> com o seu nome, porque a aba do navegador é o que vê quem tem onze abas abertas; e uma folha de estilos de impressão, porque em algum momento alguém vai apertar Ctrl+P e passar um papel para um colega.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Ana López — Front-end developer</title>
<meta name="description" content="Curriculum of Ana Lopez, front-end developer. One page, printable.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body { font: 16px/1.55 system-ui, sans-serif; max-width: 44rem; margin: 3rem auto; padding: 0 1.2rem; color: #1c1f24 }
  h1 { font-size: 1.7rem; margin: 0 }
  .contact a { color: #1e40af }
  section { margin-top: 1.8rem }
  h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: #4b5563 }
  @media print {
    body { margin: 0; max-width: none; font-size: 11pt }
    .contact a { color: inherit; text-decoration: none }
    section { break-inside: avoid }
    @page { margin: 14mm }
  }
</style>
<h1>Ana López</h1>
<p>Front-end developer — 6 years, TypeScript and CSS that survives a print run.</p>
<p class="contact">
  <a href="mailto:ana@example.com">ana@example.com</a> ·
  <a href="cv.pdf">PDF</a> ·
  <a href="https://github.com/example">github</a>
</p>
<section><h2>Experience</h2> … </section>

Publishing it

Put index.html — and the PDF if you have one — in a folder. Open the panel, create a project with the name you want in the address, drag the folder onto it and press publish. The address you get is yourname.deployloft.com over HTTPS, and there is nothing between the two: no configuration file, no DNS, no certificate request, no command line.

We measured that path against this production service with a one-file résumé on a brand new account: under six seconds from an empty account to a page a stranger can open, including the sign-up and the upload. Larger folders take longer, and the free plan asks for no card.

Publicarlo

Mete index.html — y el PDF si lo tienes — en una carpeta. Abre el panel, crea un proyecto con el nombre que quieres que salga en la dirección, arrastra la carpeta encima y pulsa publicar. La dirección que sale es nombre.deployloft.com sobre HTTPS y no hay nada en medio: ni fichero de configuración, ni DNS, ni solicitud de certificado, ni línea de comandos.

Medimos ese camino contra este servicio en producción con un currículum de un fichero y una cuenta recién creada: menos de seis segundos desde una cuenta vacía hasta una página que un desconocido puede abrir, contando el alta y la subida. Las carpetas más grandes tardan más y el plan gratuito no pide tarjeta.

Le publier

Placez index.html — et le PDF si vous en avez un — dans un dossier. Ouvrez le tableau de bord, créez un projet avec le nom que vous voulez dans l’adresse, déposez le dossier dessus et publiez. L’adresse obtenue est nom.deployloft.com en HTTPS, et rien ne se trouve entre les deux : pas de fichier de configuration, pas de DNS, pas de demande de certificat, pas de ligne de commande.

Nous avons mesuré ce parcours sur ce service en production avec un CV d’un seul fichier sur un compte tout neuf : moins de six secondes entre un compte vide et une page qu’un inconnu peut ouvrir, inscription et envoi compris. Les dossiers plus grands prennent plus de temps, et l’offre gratuite ne demande aucune carte.

Publicar

Coloque index.html — e o PDF, se tiver — em uma pasta. Abra o painel, crie um projeto com o nome que você quer no endereço, arraste a pasta para cima e publique. O endereço que sai é nome.deployloft.com em HTTPS, e não há nada no meio: nem arquivo de configuração, nem DNS, nem pedido de certificado, nem linha de comando.

Medimos esse caminho neste serviço em produção com um currículo de um arquivo e uma conta recém-criada: menos de seis segundos de uma conta vazia até uma página que um desconhecido consegue abrir, contando o cadastro e o upload. Pastas maiores demoram mais, e o plano gratuito não pede cartão.

Keep the PDF, but link it

Some applicant systems and some people at the other end of a mail still want a file they can attach and forward. PDF is an accepted type here, up to 5 MB per file, so keep both in the same folder: the page at the root and the document linked as cv.pdf. Export the PDF from the same HTML you publish — your browser's print dialog will do it, and the print stylesheet above is what makes the result usable — so the two versions of you cannot drift apart.

Put the link near the top of the page rather than at the bottom. A recruiter who wants the file is looking for it in the first two seconds, not the last.

Guarda el PDF, pero enlázalo

Algunos sistemas de selección y algunas personas al otro lado del correo siguen queriendo un fichero que adjuntar y reenviar. El PDF es un tipo aceptado aquí, hasta 5 MB por fichero, así que guarda los dos en la misma carpeta: la página en la raíz y el documento enlazado como cv.pdf. Exporta el PDF desde el mismo HTML que publicas — el diálogo de impresión del navegador lo hace, y la hoja de estilos de impresión de arriba es lo que hace que el resultado sirva — para que las dos versiones de ti no puedan separarse.

Pon el enlace cerca de arriba del todo, no al final. Quien quiere el fichero lo busca en los dos primeros segundos.

Gardez le PDF, mais faites-en un lien

Certains systèmes de candidature et certaines personnes en face d’un e-mail veulent encore un fichier à joindre et à transférer. Le PDF est un type accepté ici, jusqu’à 5 MB par fichier, donc gardez les deux dans le même dossier : la page à la racine et le document lié comme cv.pdf. Exportez le PDF depuis le même HTML que vous publiez — la boîte d’impression de votre navigateur le fait, et la feuille de style d’impression ci-dessus est ce qui rend le résultat utilisable — ainsi les deux versions de vous ne peuvent pas diverger.

Placez le lien près du haut de la page plutôt qu’en bas. Celui qui veut le fichier le cherche dans les deux premières secondes.

Mantenha o PDF, mas linke ele

Alguns sistemas de candidatura e algumas pessoas do outro lado do e-mail ainda querem um arquivo para anexar e encaminhar. PDF é um tipo aceito aqui, até 5 MB por arquivo, então guarde os dois na mesma pasta: a página na raiz e o documento linkado como cv.pdf. Exporte o PDF do mesmo HTML que você publica — o diálogo de impressão do navegador faz isso, e a folha de estilos de impressão acima é o que torna o resultado utilizável — assim as duas versões de você não podem se separar.

Coloque o link perto do topo da página, não no fim. Quem quer o arquivo procura nos dois primeiros segundos.

Does it fit the free plan?

By a wide margin. The free account carries three sites and 50 MB in total, one upload may hold 80 files of at most 5 MB each and 25 MB together. A résumé page with a photo, a PDF and an SVG favicon sits near 300 KB — one sixth of one percent of what you are given. The same account can hold the résumé, a portfolio page and a project write-up without buying anything.

What stays true when you grow: each new upload is a deployment, so publishing the version with your new job does not delete the one a recruiter may still be reading, and one click in the panel moves the address back if you upload the wrong folder.

¿Cabe en el plan gratuito?

De sobra. La cuenta gratuita lleva 3 sitios y 50 MB entre todos, y una subida puede contener 80 ficheros de 5 MB como mucho cada uno y 25 MB juntos. Una página de currículum con foto, PDF y un favicon SVG ronda los 300 KB: una sexta parte del uno por ciento de lo que te dan. La misma cuenta aguanta el currículum, una portada de portafolio y el write-up de un proyecto sin comprar nada.

Lo que sigue igual cuando creces: cada subida nueva es un despliegue, así que publicar la versión con tu empleo nuevo no borra la que quizá está leyendo alguien de recursos humanos, y un clic en el panel devuelve la dirección atrás si subiste la carpeta equivocada.

Est-ce que ça tient dans l’offre gratuite ?

Large. Le compte gratuit porte trois sites et 50 MB au total, un envoi peut contenir 80 fichiers de 5 MB au plus chacun et 25 MB ensemble. Une page de CV avec photo, PDF et un favicon SVG tourne autour de 300 KB — un sixième de un pour cent de ce qui vous est donné. Le même compte tient le CV, une page portfolio et le retour d’un projet sans rien acheter.

Ce qui reste vrai quand vous grandissez : chaque nouvel envoi est un déploiement, donc publier la version avec votre nouveau poste n’efface pas celle qu’un recruteur lit peut-être encore, et un clic dans le tableau de bord remet l’adresse en arrière si vous avez envoyé le mauvais dossier.

Cabe no plano gratuito?

De sobra. A conta gratuita leva três sites e 50 MB somando todos, e um upload pode conter 80 arquivos de no máximo 5 MB cada e 25 MB juntos. Uma página de currículo com foto, PDF e um favicon SVG fica perto de 300 KB — um sexto de um por cento do que você recebe. A mesma conta segura o currículo, uma página de portfólio e o relato de um projeto sem comprar nada.

O que continua igual quando você cresce: cada novo upload é uma implantação, então publicar a versão com seu emprego novo não apaga a que um recrutador talvez ainda esteja lendo, e um clique no painel faz o endereço voltar se você enviou a pasta errada.

Three things the page cannot do

  • It cannot store anything on the visitor. Hosted pages are served with Content-Security-Policy: sandbox and no allow-same-origin, so localStorage, sessionStorage and IndexedDB are unavailable inside them. A résumé page never needed them; a script that does — a dark-mode toggle that remembers, a comment widget — will not work. Why the host does that is on its own page, and it also explains the per-project switch that hands allow-same-origin back when a site really needs one.
  • It cannot take an application. There is no form backend: a form that posts here has nothing on the other end. Use a mailto: link, or a PDF, or the address of whatever service you already use for that.
  • It cannot be ana.com. The address is name.deployloft.com. If the domain is the point of the project, this host is not the one.

Tres cosas que la página no puede hacer

  • No puede guardar nada en el visitante. Las páginas alojadas se sirven con Content-Security-Policy: sandbox y sin allow-same-origin, así que localStorage, sessionStorage e IndexedDB no existen dentro de ellas. Una página de currículum nunca las necesitó; un script que sí — un interruptor de modo oscuro que recuerda, un widget de comentarios — no va a funcionar. Por qué el alojamiento hace eso está en su propia página, que también explica el interruptor por proyecto que devuelve allow-same-origin cuando un sitio de verdad lo necesita.
  • No puede recibir una solicitud. No hay backend de formularios: un formulario que publique aquí no tiene nadie al otro lado. Usa un enlace mailto:, un PDF, o la dirección del servicio que ya uses para eso.
  • No puede ser ana.com. La dirección es nombre.deployloft.com. Si el dominio es el sentido del proyecto, este no es el alojamiento.

Trois choses que la page ne peut pas faire

  • Elle ne peut rien stocker chez le visiteur. Les pages hébergées sont diffusées avec Content-Security-Policy: sandbox et sans allow-same-origin : localStorage, sessionStorage et IndexedDB n'existent pas dedans. Une page de CV n'en a jamais eu besoin ; un script qui en dépend — un basculement de thème sombre qui se souvient, un widget de commentaires — ne fonctionnera pas. Pourquoi l'hébergeur fait cela est sur sa propre page, qui explique aussi le commutateur par projet rendant allow-same-origin quand un site en a vraiment besoin.
  • Elle ne peut pas recevoir une candidature. Aucun formulaire côté serveur : un formulaire publié ici n'a personne au bout du fil. Utilisez un lien mailto:, un PDF, ou l'adresse du service que vous employez déjà pour cela.
  • Elle ne peut pas être ana.com. L'adresse est nom.deployloft.com. Si le domaine est l'objet du projet, cet hébergeur n'est pas le bon.

Três coisas que a página não pode fazer

  • Não pode guardar nada no visitante. As páginas hospedadas são servidas com Content-Security-Policy: sandbox e sem allow-same-origin, então localStorage, sessionStorage e IndexedDB não existem dentro delas. Uma página de currículo nunca precisou disso; um script que precisa — um botão de modo escuro que lembra, um widget de comentários — não vai funcionar. Por que a hospedagem faz isso está em uma página própria, que também explica o interruptor por projeto que devolve allow-same-origin quando um site realmente precisa dele.
  • Não pode receber uma candidatura. Não há backend de formulário: um formulário que publique aqui não tem ninguém do outro lado. Use um link mailto:, um PDF, ou o endereço do serviço que você já usa para isso.
  • Não pode ser ana.com. O endereço é nome.deployloft.com. Se o domínio é o sentido do projeto, esta não é a hospedagem.

Before you send the link

  • Open it in a phone browser, not a desktop window at phone width.
  • Press Ctrl+P and read the preview: no page break through a job entry, no black background eating toner.
  • Check the tab title and the description meta — that pair is what shows in the chat preview when you send the link.
  • Make sure every contact route works: the mail address, the phone, the repository, and the PDF link.
  • If a photo is yours by licence and not by ownership, say so or take it out.

Then drop the folder again when anything changes. The old version stays one click away, and the link you already printed keeps working.

Antes de mandar el enlace

  • Ábrelo en el navegador de un teléfono, no en una ventana de escritorio con el ancho de un teléfono.
  • Pulsa Ctrl+P y lee la vista previa: que un salto de página no parta una experiencia por la mitad y que un fondo negro no se coma el tóner.
  • Revisa el título de la pestaña y la meta descripción: esa pareja es lo que sale en la vista previa del chat cuando mandas el enlace.
  • Comprueba que cada vía de contacto funciona: el correo, el teléfono, el repositorio y el enlace al PDF.
  • Si una foto es tuya por licencia y no por propiedad, dilo o quítala.

Y vuelve a soltar la carpeta cuando cambie algo. La versión anterior queda a un clic y el enlace que ya repartiste sigue funcionando.

Avant d’envoyer le lien

  • Ouvrez-le dans le navigateur d’un téléphone, pas dans une fenêtre d’ordinateur à la largeur d’un téléphone.
  • Appuyez sur Ctrl+P et lisez l’aperçu : qu’un saut de page ne coupe pas une expérience en deux, et qu’un fond noir ne mange pas le toner.
  • Vérifiez le titre de l’onglet et la meta description : c’est ce couple qui apparaît dans l’aperçu du chat quand vous envoyez le lien.
  • Assurez-vous que chaque chemin de contact fonctionne : l’adresse e-mail, le téléphone, le dépôt et le lien vers le PDF.
  • Si une photo est à vous par licence et non par propriété, dites-le ou retirez-la.

Puis déposez à nouveau le dossier dès que quelque chose change. La version précédente reste à un clic, et le lien que vous avez déjà diffusé continue de fonctionner.

Antes de enviar o link

  • Abra no navegador do celular, não numa janela de desktop com a largura de um celular.
  • Aperte Ctrl+P e leia a pré-visualização: que uma quebra de página não corte uma experiência ao meio e que um fundo preto não coma o toner.
  • Confira o título da aba e a meta descrição: esse par é o que aparece na pré-visualização do chat quando você manda o link.
  • Verifique se cada caminho de contato funciona: o e-mail, o telefone, o repositório e o link do PDF.
  • Se uma foto é sua por licença e não por propriedade, diga isso ou tire-a.

E solte a pasta de novo quando algo mudar. A versão anterior fica a um clique, e o link que você já imprimiu continua funcionando.