Como implantar sites estáticos gratuitamente com Surge.sh

Surge. sh é um host de site estático gratuito com o qual você interage a partir de sua linha de comando. Isso torna rápido e fácil colocar novos sites e aplicativos online, manualmente ou como parte do seu processo de construção de CI. Veja como começar a usar o serviço.

Primeira execução

Presumiremos que você já possui um diretório de arquivos que deseja implantar na web. Se você não o fez, crie uma nova pasta, adicione um index. html e algum conteúdo inicial simples.

O binário do Surge é um aplicativo JavaScript distribuído via npm. Certifique-se de ter o Node. js instalado em seu sistema antes de continuar. Comece usando o npm para instalar o Surge:

 instalação npm - aumento global 

Instalar o Surge globalmente significa que você pode usar o comando surge em qualquer lugar, mesmo se seu diretório de trabalho não tiver um arquivo package. json. A omissão do sinalizador --global adicionará o pacote como uma dependência do projeto, permitindo que você bloqueie a versão Surge usada para sites individuais.

Agora mude o diretório para o repositório do seu site. Execute o comando surge para iniciar o processo de implantação. Uma série de prompts interativos serão exibidos, começando com seu endereço de e-mail para configurar uma conta Surge.

Publicidade

A seguir, confirme o caminho do sistema de arquivos para o seu projeto. O padrão é o seu diretório de trabalho, então você geralmente pode pressionar Return para continuar.

O seguinte prompt pede um nome de domínio. Um subdomínio . surge. sh aleatório é selecionado automaticamente. Você pode escolher um subdomínio diferente ou um de seus próprios domínios inserindo-o aqui. Se você estiver usando seu próprio domínio, as seções a seguir explicam como terminar de configurá-lo.

Depois de fornecer um nome de domínio, pressione Enter para iniciar a implantação. O progresso será exibido em seu terminal conforme o Surge CLI carrega seus arquivos e os disponibiliza na web. Visite seu domínio em seu navegador para ver seu conteúdo ao vivo!

As atualizações do site são aplicadas executando o comando surge novamente. O conteúdo do diretório do seu projeto será sincronizado com o seu site ativo.

Tudo em sua pasta é carregado por padrão. Você pode excluir caminhos específicos criando um arquivo . surgeignore. Tem a mesma sintaxe de . gitignore. Arquivos e pastas normalmente criados por outras ferramentas de desenvolvedor, como Git e npm, são omitidos automaticamente.

Usando seu próprio nome de domínio

Surge oferece suporte de domínio personalizado por meio de registros CNAME. Isso não tem nenhum custo extra em relação ao serviço padrão. Adicione um registro CNAME no painel de controle do seu provedor de domínio. Aponte os nomes de host @ e www para na-west1. surge. sh. Forneça seu nome de domínio ao executar o surge para implantar seu site.

Publicidade

Você será solicitado a informar o seu domínio sempre que executar o comando surge. Você pode evitar isso adicionando o sinalizador --domain aos comandos de pico. Como alternativa, crie um arquivo CNAME no diretório do projeto. Escreva o seu nome de domínio neste arquivo.

 surge - domínio example. com echo "example. com" > CNAME 

Gerenciando redirecionamentos HTTPS

Surge tem suporte HTTPS automático, mas não lida com redirecionamentos HTTP para HTTPS por padrão. Implante explicitamente na variante https do seu domínio para forçar todos os visitantes a usar uma conexão segura. Habilitar redirecionamentos é aconselhável para todos os sites de acesso público.

 surge - domínio https://example. com 

Você precisará fornecer um certificado SSL se estiver usando seu próprio domínio. Este recurso está disponível apenas como parte do plano pago Surge Plus.

O Surge também oferece controle de redirecionamentos de domínio simples para www. O comportamento padrão vê www. example. com redirecionar para example. com. Você pode reverter isso incluindo explicitamente a parte www em seu domínio de implantação.

 surge - domínio https://www. example. com 

Configurando seu site

Surge oferece várias funções de conveniência integradas que o ajudam a se destacar em relação a outras plataformas semelhantes. Você pode adicionar uma página 404, proteção por senha e suporte CORS, todos usando arquivos especiais em seu projeto.

A página 404 é ativada com a criação de um arquivo 404. html. Isso é tudo que há para fazer – Surge servirá o arquivo quando não houver correspondência direta para o URI solicitado.

Publicidade

A proteção por senha é ativada por um arquivo AUTH. Isso aceita uma lista simples de nomes de usuário e senhas.

 cloudsavvy: howtogeek 

Você será solicitado a inserir um nome de usuário e uma senha usando a autenticação básica HTTP sempre que acessar o seu site. Este recurso está disponível apenas no plano Surge Plus pago.

Outro recurso Surge Plus são as regras de roteamento manual. Você pode criar um arquivo ROUTER para definir redirecionamentos personalizados, seja dentro do seu site ou externamente.

 301 / página movida / novo link 

Surge suporta códigos de status 301 (movido permanentemente) e 307 (movido temporariamente) para a primeira coluna. A última coluna pode ser um link relativo em seu site ou um link absoluto para outro domínio (https://www. google. com).

Um arquivo de configuração final é o CORS. Isso permite que você permita o acesso de origem cruzada ao seu site. Adicione um * ao arquivo para aceitar solicitações de origem cruzada de qualquer origem. Você pode escrever domínios individuais em vez de limitar as origens permitidas.

Automatização de implantações de surto

O surto é totalmente controlado por arquivos de texto e comandos de terminal. É fácil de integrar em pipelines de CI para implantar sites automaticamente em cada commit.

Publicidade

Automatizar Surge requer o uso de tokens API. Isso permite que você evite os prompts de login interativos. Primeiro, faça login no Surge em sua máquina de desenvolvimento. Execute o token de surto para obter seu token de API.

No pipeline de CI, defina as variáveis ​​de ambiente SURGE_LOGIN e SURGE_TOKEN. O primeiro deve ser seu endereço de e-mail, enquanto o último leva seu token de API. Agora você pode implantar de forma não interativa usando os sinalizadores --project e --domain:

 surge --projeto $ PWD - exemplo de domínio. com 

Resumo

O Surge simplifica a ativação de sites estáticos na web. O serviço básico é gratuito. Atualizar para o plano Plus oferece autenticação, redirecionamentos e HTTPS mais configurável.

Ao contrário de outros concorrentes, Surge é totalmente controlado por terminal. Isso o torna ideal para sites rápidos centrados no desenvolvedor gerenciados por meio de repositórios Git e pipelines de CI. Ele corta a configuração do servidor para que você possa se concentrar na construção do conteúdo do seu site.

Para casos de uso mais avançados, o Surge permite até mesmo adicionar vários colaboradores. Execute surge --add user@example. com para dar a amigos, convidados e colegas acesso ao seu site. Eles serão capazes de implantar executando o pico e fornecendo o mesmo nome de domínio que você está usando.