Hugo + Firebase: Como criar seu próprio site estático gratuitamente em minutos

Já pensou em ter seu próprio site para colocar seu portfólio de projetos ou currículo ou um blog para você. Até o final deste artigo, você poderá criar um.

Geralmente, para desenvolver um site você precisa conhecer HTML, CSS e um pouco de JavaScript (às vezes). Mas, para isso, você não precisa ter nenhuma habilidade de codificação. Você só precisa de habilidades básicas de informática.

Para colocar um site, você precisa ter um "espaço" (também conhecido como hospedagem), onde todos os seus arquivos serão carregados. Sempre que alguém digitar o seu site e os cliques entrar, estes são os arquivos que são atendidos / apresentados ao usuário no navegador.

Vamos começar com o que você precisa ter / saber:

Conta do Google

Eu acredito que você já pode ter uma conta do Gmail, o que é suficiente. Se não criar um.

Domínio

Isso é opcional. Existem vários provedores de nomes de domínio no mundo, além disso, você pode comprar um no Google . Você pode encontrar uma lista de provedores de nomes de domínio. É tão simples como fazer compras na Amazon .

Hugo

Hugo é uma ferramenta baseada em Go , que gera sites estáticos. Você pode usar vários modelos e criar diferentes tipos de sites como blogs, sites de portfólio etc.

Faça o download a partir daqui .

Firebase

A Firebase é uma plataforma de aplicativos para dispositivos móveis e web, adquirida pelo Google há alguns anos atrás. A Firebase oferece hospedagem como uma das suas características. No entanto, muitos desenvolvedores móveis usam isso para o Google Analytics, Notificações, Crash Reporting de aplicativos. Nós vamos usá-lo para hospedar nosso site.

Node.js

Node.js é um tempo de execução de JavaScript de código aberto criado no mecanismo de JavaScript V8 do Chrome . Para este tutorial, você precisa que ele seja instalado em sua máquina para que as ferramentas Firebase funcionem. Você pode fazer o download e instalá-lo a partir daqui .

Passo 1: instale o Hugo na sua máquina

Windows: você receberá um arquivo executável portátil simples. Você pode colocá-lo em qualquer lugar e executar via linha de comando. Você pode adicioná-lo à sua variável de caminho nas variáveis ??de ambiente do Windows para obtê-lo referenciado em qualquer lugar.

Mac: você pode instalá-lo usando Homebrew. Se você não possui brew instalado no seu mac, você pode baixar o tarball a partir daqui .

De qualquer forma, certifique-se de que você pode acessar o Hugo dando o comando abaixo.

Etapa 2: criar um site de modelo

Dirija-se ao local onde você decidiu criar seu site e digite o comando abaixo:

 $ hugo novo site <path_to_folder> 

No local dado, você pode ver uma estrutura de pastas como mostrado na imagem abaixo.

Imagem tirada no Windows 10

Essas pastas são apenas espaços reservados para o seu conteúdo. Todo o conteúdo de texto do seu site vai para a pasta de conteúdo .

Você pode executar comandos abaixo para adicionar novos arquivos.

 $ hugo new about.md 

Se você quiser adicionar uma postagem no blog, crie uma pasta chamada " blog" na pasta "conteúdo" e comece a adicionar seus arquivos. Esses arquivos possuem uma extensão de ".md" que são arquivos Markdown .

Markdown é uma linguagem de marcação de formatação de texto simples. É bonito e fácil. Há vários guias sobre como abordar o Markdown, aqui é um .

Passo 3: Defina um tema para o site

Hugo tem uma grande comunidade. Seu site de temas é enriquecido com diferentes categorias de temas do site. Dirija-se a ele e selecione um tema, que se adapte às suas exigências.

Escolhi o tema Introdução . Clicando no botão de download, redirecionará para o GitHub .

Cada tema terá sua própria maneira de configurar as coisas. Este tema específico não tem muitos passos. Basta clonar ou baixar o zip na pasta de temas. Copie o arquivo config.toml para a pasta raiz do seu site.

Etapa 4: configure suas preferências

Abra o arquivo config.toml e comece a editá-lo. Dê seu nome e outros detalhes que deseja exibir no site. Alguns temas suportam o Google Analytics para que você possa acompanhar a contagem de visitas do usuário, etc. Você pode fornecer seu ID GA para coletar dados.

Etapa 5: configurar um projeto de hospedagem Firebase

Como mencionei anteriormente, a Firebase é uma bela plataforma móvel com uma tonelada de recursos. Usei o Firebase hospedagem para hospedar meu site estático gerado via Hugo.

Para usar os serviços da Firebase, use sua Conta do Google e entre no site da Firebase .

Clique em "Ir ao console". Crie um projeto ao dar-lhe um nome. Você será exibido uma página de visão geral na qual você deve selecionar " começar no Hosting".

Etapa 6: configure ferramentas Firebase em sua máquina

Abra sua interface de linha de comando / terminal na sua máquina e digite o comando abaixo.

 $ npm install -g firebase-tools 

O comando acima instala o pacote Firebase-tools. Você precisa executar mais alguns comandos para poder implantar seu site diretamente.

 $ firebase login 

Esse comando conecta sua máquina ao projeto Firebase. Ele permite que você liste e selecione o projeto ao qual você deseja pressionar suas mudanças.

 lista de $ firebase 

Você pode executar o comando acima para ver o projeto que você criou. Um toque final para todo o fluxo de trabalho, precisamos inicializar a pasta raiz do seu site como raiz do projeto Firebase.

 $ firebase init 

Ele irá fazer-lhe algumas perguntas como

  • Quais recursos da CLI Firebase você deseja configurar? Resposta: Hospedagem.
  • Selecione um projeto Firebase padrão para este diretório Responda: Selecione o projeto Firebase que você criou na Etapa 5.
  • Você deseja usar como seu diretório público? Resposta: Sim.
  • Configurar como um aplicativo de uma única página? Resposta: Sim.

Para evitar confusão, eu tenho screenshots detalhadas tomadas em cada etapa para sua referência. Pode ser baixado aqui .

Finalmente! A inicialização da base de permissão está completa.

Passo 7: verifique seu site localmente

Execute o comando abaixo para verificar seu site localmente em sua máquina.

 servidor $ hugo -w 

O Hugo vem com um servidor web leve e de alto desempenho, onde você pode verificar todas as suas mudanças. Certifique-se de que todas as suas imagens são colocadas na pasta estática / img . Em um processo iterativo, mude seu config.toml e verifique no navegador. Abaixo está a porta na qual o servidor estará em execução.

 http: // localhost: 1313 

Passo 8: Implante seu site

Digite abaixo o comando para gerar seu site e empurre-o para o projeto Firebase correspondente que você configurou na Etapa 5 .

 $ hugo && firebase deploy 

Passo 9: Conecte-o ao seu domínio (opcional)

A Firebase fornece uma opção para conectar seu domínio ao aplicativo Firebase. Clique no domínio de conexão e dê seu domínio e adicione os registros TXT para verificar a propriedade do seu domínio.

Para isso, faça logon no seu portal de registradores de domínio.

Etapa 10: Criar uma postagem no blog

Criar uma postagem no blog é bastante simples. Hugo entende arquivos de markdown. Basta dirigir-se ao conteúdo-> pasta de blog (a localização da pasta depende do tema). Crie um arquivo markdown. Repita o Passo 8 para ver os resultados.

Se você tiver dúvidas ou dúvidas, você pode me enviar no twitter !

Sempre feliz por ajudar!