Tutorial 👉 Como publicar hospedar seu site no Dropbox

(19 de outubro de 2020)

Este tutorial é para exportar do Sketch2React como HTML e publicá-lo em seu próprio Dropbox! E não vai te custar um centavo para hospedar 🤖 💪

Isso te interessou, certo? 😺Quem não faria? O caso de uso para este fluxo de trabalho poderia ser:

  1. Você derramou sua alma e criou um protótipo ou site bonito e totalmente responsivo com nossa ferramenta para Sketch
  2. Você diz a si mesmo:
    ”E agora ?! Eu realmente preciso pagar para hospedar isso? Eu preciso mesmo me preocupar em aprender os meandros de como gerenciar um serviço de publicação FTP / nuvem?
  3. Eu digo: Não, meu amigo, você não precisa!

Se você já tem o Dropbox, há uma solução interessante para você chamada DropPages . É gratuito até 50 MB de armazenamento do site, por isso é perfeito para apenas exibir seus projetos. Gostei muito rápido 🚀

Além disso, como todo o seu site está no Dropbox, editar e atualizar os arquivos é apenas uma questão de substituir os antigos , espere o Dropbox sincronizar e pronto – atualizado!

Acontece que o Dropbox está extremamente rápido . Todo mundo que já teve a experiência de hospedar arquivos para download no serviço já sabe disso, mas eu não tinha ideia de que hospedar HTML, CSS e Javascript também seria muito rápido.

O DropPages requer uma pequena configuração, ambos antes, dentro do Sketch e também depois de exportar seu site para HTML de Sketch2React .

Não se preocupe, é super fácil e eu estou com você o tempo todo. 🤖 💪

Requisitos do tutorial

Site de demonstração simples

100\% feito com Sketch usando Sketch2React 100\% de componentes estilizáveis ​​

Para o propósito deste tutorial, criei este site de demonstração 100\% feito dentro do Sketch usando Sketch2React que está hospedado em meu Dropbox. Legal eh?

Você pode baixar meu arquivo de esboço aqui para fins de estudo 💎

👨‍🍳 Se você ainda está comigo, vamos cozinhar, vamos?

Etapa 1 – primeiros passos

Esta pasta é adicionada ao seu Dropbox
  1. aqui , entre no Dropbox e permita que o DropPages tenha acesso à sua conta. DropPages cria uma pasta separada para você chamada My.DropPages na pasta chamada Apps. Não se preocupe, tudo está perfeitamente separado de todas as suas outras coisas.
DropPages – Pressione o botão azul à esquerda
  1. Pressione o botão azul Criar um novo site e dê a ele um nome onde inclua as palavras droppages.com ou não funcionará dentro dos limites da conta gratuita do DropPages.

    yourname.droppages.com

    🤖 💪 ProTip! Se você deseja ter um domínio personalizado + mais armazenamento, basta se inscrever para uma assinatura paga . Este tutorial presume que você deseja apenas experimentar 100\% de graça, como eu. 😆

  2. Vejamos o que o DropPages criou para nós. Temos três pastas:

Conteúdo e Público são os que estamos cobrindo neste tutorial
  1. Acesse Conteúdo e Público e exclua o que o DropPages instalou para você (index.txt e main.css) – nós não preciso disso. Não se preocupe, estaremos substituindo esses arquivos pelos nossos próprios e incríveis arquivos HTML Sketch2React. Modelos que você pode ignorar totalmente.

Etapa 2 – vamos para o Sketch! 💎

Eu preparei um pouco site de demonstração no Sketch usando apenas nossa marcação simples. Já que é apenas uma demonstração, por que se preocupar em fazer mais de duas páginas? Sim, exatamente .

Usei componentes de nossa biblioteca Sketch2React Components gratuita e fiz alterações personalizadas neles (claro, sou um designer, o que mais eu faria o dia todo? 😆)

Apenas adicionando a classe Bootstrap btn-block um pouco botão fica com largura total em nosso aplicativo de código – yummi!

Algumas coisas legais que fiz foram:

  • Reestilizado um de nossos componentes de placa com um belo fundo azul
  • Reestilizei nosso botão para largura total usando uma classe Bootstrap chamada
    btn-block
  • Usei incríveis ilustrações gratuitas de um dos meus provedores absolutamente favoritos de coisas boas, Icons8 .
O quê ?! Não gosto desse estilo, sou um designer godamnit 😆
  • Como você pode ver 👆 acima ao usar certas classes de Bootstrap que manipula a aparência dos componentes, você herda automaticamente alguns comportamentos padrão que não são substituídos pelo Sketch2React. Para corrigir isso, criei um CSS personalizado :
Eu mesmo escrevi este código? Não, eu pesquisei. 😆

Isso alcançou o que eu procurava, livrando-me daquela coisa feia sublinhada no meu lindo botão! 👨🏻‍💻O resultado do uso de um CSS personalizado 👇

Aaaa sem sublinhados feios aqui!

Se você acha que o código é realmente assustador, não se preocupe, Sketch2React funciona perfeitamente bem sem todas essas coisas extras que adicionei, o CSS personalizado. Lembre-se, tenho usado isso desde antes de lançarmos o primeiro alfa público, no início de 2018. 😺 💪

Regras devem ser quebradas (às vezes)

Isso levou um um pouco de trilha e erro para entender. Acontece que uma regra de DropPages muito importante vai totalmente contra uma das regras de vinculação mais importantes do Sketch2React 😆

Normalmente ao projetar para Sketch2React, você vincula assim:

Comportamento regular de vinculação Sketch2React
  1. Selecione um componente que tenha uma propriedade vinculável
  2. Use o W atalho dentro do Sketch para vincular esse componente a outra página
  3. Adicione ./artboardname.html ao painel {attribute.url} dentro desse componente, como abaixo:

./artboardname.html

  1. Também todos os links voltando ao início precisa ser nomeado:

./index.html

Você entendeu 🤖 💪 Isso garante que tudo esteja limpo e bom em nossa maravilhosa exportação de código. Isso também significa que você pode simplesmente arrastar e soltar toda a pasta exportada (HTML) em um servidor FTP e todos os links funcionarão.

Para nossa exportação React é um pouco diferente, pois você precisa mergulhar no exportado código para fazer a vinculação funcionar, mas isso não é para este tutorial. Na verdade, temos um para isso, é claro 👨‍💻

O Btw React nem mesmo é suportado pelo DropPages, então vamos … ehm esquecer isso.

O que acontece?

O problema é que, se você seguir isso e ao mesmo tempo quiser ter um bom fluxo de trabalho para publicar páginas no Dropbox através do DropPages, precisamos quebrar essa regra. Às vezes, as regras devem ser quebradas 😬 👍

Do contrário, essa mensagem de erro irá atingi-lo como um tijolo quando você tentar clicar em qualquer elemento vinculado a outras páginas depois de publicar seu site (ou protótipo) no DropPages :

O URL está correto? As páginas de conteúdo não devem ter uma extensão.

E não queremos isso para acontecer, certo? Esta é a solução que descobri que funciona perfeitamente.

A correção 🤖 💪

Basta remover a extensão .html usual e ela funcionará. Mas não de todos os links que remetem ao Início! ⚠️

Regras específicas de DropPages para links Sketch2React

  1. Selecione um componente que tenha uma propriedade vinculável
  2. Use o atalho W dentro do Sketch para vincular esse componente a outra página
  3. Adicionar ./artboardname ao {atributo.url} painel dentro desse componente, como abaixo:

./artboardname

  1. Além disso, todos os links voltando ao início ainda precisam para serem nomeados:

./index.html

Preste atenção especial à última regra, nr 4 .

Como você configura um fluxo de trabalho que funciona tanto para exportações normais quanto para as específicas do DropPages? Na verdade, uma vez que são apenas os links que precisam de um pouco de ajuste, eu primeiro iria projetar e construir com o fluxo de trabalho normal e, em seguida, apenas duplicar o mesmo arquivo Sketch, chamá-lo de algo como myfilename-droppages e continuar com minha vida.

Somos designers, então o trabalho manual não nos assusta, certo? 😆 👍

Finalmente, estamos prontos para exportar godamnit!

Ok, então se você ainda não dormiu ou teve um colapso mental, saúdo-o como melhor amigo! Agora vem a parte divertida deste tutorial, a exportação real de coisas fora do Sketch2React, para HTML e publicando em seu Dropbox!

Exportando de Sketch2React para HTML

  1. Certifique-se de visitar cada página que você projetou uma vez – é adicionado ao nosso pacote de exportação dessa forma
  2. Pressione o botão Download 👉 HTML e salve no disco
  3. Descompacte seu zip
  4. Voila, acabou! Agora vamos enviar isso para o Dropbox!

Como fazer upload para o Dropbox.com

O que descobri ser a maneira mais eficaz de enviar isso é realmente fazer isso diretamente de seu navegador . A sincronização é mais rápida, especialmente quando você começa a reenviar os mesmos arquivos repetidamente, o que provavelmente fará, já que sempre se atualiza / corrige as coisas assim que as vê ao vivo.

Mas antes de fazer isso certifique-se de compactar seus recursos de imagem , eu uso o excelente TinyPNG serviço para isso. Que, em contraste com seu nome, também suporta JPGS.

Solte esses arquivos em Conteúdo

Todas as suas páginas HTML vão para a pasta Conteúdo em seu site recém-criado, a minha se parece com isto:

Solte seus arquivos HTML Sketch2React exportados na pasta chamada Conteúdo

Solte esses arquivos em Público

Público contém todos os seus recursos CSS, Javascript e Imagem. O meu se parece com este:

Solte suas pastas Sketch2React CSS, JS e Image aqui

Agora volte para sua conta DropPages e clique em Publicar agora e pronto! Às vezes, pode levar alguns minutos para que tudo seja sincronizado e carregado. Seja paciente, vai funcionar.

Se você tiver problemas de sincronização, clique no botão vermelho Redefinir sincronização, publique novamente e, eventualmente, funcionará.

Este é meu upload btw 👇

http://articledemo.droppages.com/index.html

😺 👍 É isso aí pessoal, espero que tenham gostado deste tutorial e que seja útil para o seu fluxo de trabalho de design para código.