E ai pessoal, tudo tranquilo? nesse post irei ensinar como realizar um deploy automatizado do Hugo ( que é a plataforma que eu utilizo aqui ) utilizando o CircleCI.

O Hugo é um gerenciador e criador de site estático, ele cria páginas e posts como esse a partir de temas que vocẽ define e conteudos criados com a linguagem Markdown que é muito simples e muito intuitiva.

Como o Hugo cria a parte estática, irei utilizar o S3 da Amazon Web Services para armazenar e disponibilzar o site para a internet. O S3 ele tem um custo muito baixo para sites estáticos, comparado a um EC2 com um nginx ou um apache entregando o site, por isso a escolha ( o dolar não tá barato kkkkk )

O CircleCI é uma ferramenta que possibilita a criação de pipelines de CI/CD de forma rápida e sem muita burocracia, ele permite que você conecte a sua conta do Github ou Bitbucket para que ele visualize o seu repositório e realize o deploy a cada commit realizado, de forma totalmente automática.

Há outras ferramentas de CI/CD, até mesmo da própria AWS, mas nesse tutorial irei utilizar o CircleCI para mostrar de forma rápida e simples de criar um pipeline gastando muito pouco ou quase nada, pois o CircleCI na maneira que utilizaremos, não cobrará, somente o S3 poderá cobrar pelos acessos que o seu site receber e pelo armazenamento, que será um valor pifio. No dia da publicação deste post, o meu cobra 0,01 centavos de DOLAR! que nem consegue ser descontado do meu cartão de crédito pois o valor é muito baixo.

Iniciando o deploy

Se você já criou o seu site hugo conforme a Documentação deles, e já tem um repositório publico ou privado no BitBucket ou no Github com os arquivos do seu site Hugo, já está pronto para publicar, iniciaremos a configuração do deploy!

Primeiramente, crie a sua conta no CircleCI https://circleci.com/signup/ com a sua conta do bitbucket ou do github.

Depois que finalizar a criação da conta, ele irá te mostrar todos os seus repositórios na sua conta, fique nessa tela por enquanto, pois vamos iniciar a configuração do pipeline!

No seu repositório, crie uma pasta .circleci e dentro dela crie o arquivo config.yml com o conteudo abaixo (calma que eu explicarei abaixo):

version: 2.1
orbs:
  aws-s3: circleci/[email protected]

jobs:
  build:
    docker:
      - image: 'klakegg/hugo:alpine'
    working_directory: /tmp/hugo
    steps:
      - checkout
      - run: hugo
      - persist_to_workspace:
          root: /tmp/hugo
          paths:
            - public
  deploy:
    docker:
      - image: 'cimg/python:3.6'
    working_directory: /tmp/hugo
    steps:
      - attach_workspace:
          at: /tmp/hugo
      - aws-s3/sync:
          arguments: |
            --acl public-read \
            --cache-control "max-age=600"
          from: public/
          to: 's3://<insira-o-seu-s3-aqui>/'

workflows:
  version: 2
  deploy_hugo_on_s3:
    jobs:
      - build
      - deploy:
          requires:
            - build

Esse é toda a configuração que necessita, agora irei explicar parte por parte.

Nesta primeira parte, ele determina a versão de configuração do circleci e qual orbs ele irá usar.

O Orbs no circleci é como se fosse um módulo já condensando configurações e execuções, saiba mais em https://circleci.com/orbs/

Aqui estamos utilizando o orbs aws-s3

version: 2.1
orbs:
  aws-s3: circleci/[email protected]

Aqui iniciamos os Jobs, que são as “etapas” que o circleci irá executar

e aqui crio a parte de build da parte estática do hugo, que utilizaremos o docker com esse container aqui

E no final eu pego o diretório public e persisto ele no workspace para que a outra etapa pegue estes arquivos e faça o deploy

jobs:
  build:
    docker:
      - image: 'klakegg/hugo:alpine'
    working_directory: /tmp/hugo
    steps:
      - checkout
      - run: hugo
      - run: ls -l ; pwd
      - persist_to_workspace:
          root: /tmp/hugo
          paths:
            - public

E na proxima etapa eu crio a parte de deploy para o s3 dos arquivos estáticos, e defino os metadados para o cache, com o cabecalho de cache-control para que posteriormente o cache interprete isto e crie o cache da sua página

deploy:
  docker:
    - image: 'cimg/python:3.6'
  working_directory: /tmp/hugo
  steps:
    - attach_workspace:
        at: /tmp/hugo
    - aws-s3/sync:
        arguments: |
          --acl public-read \
          --cache-control "max-age=600"
        from: public/
        to: 's3://<insira-o-seu-s3-aqui>/'

E aqui, finalmente eu coloco como o workspace vai executar, e se ele necessita que uma etapa depende de outra para executar, aqui defino que a etapa deploy, dependa da etapa do build, pois se falhar o build não necessita rodar o deploy.

workflows:
  version: 2
  deploy_hugo_on_s3:
    jobs:
      - build
      - deploy:
          requires:
            - build

E pode salvar e subir as suas alterações para o seu repositório remoto, e ai pode entrar na sua console do CircleCI e ir em projetos e ver o projeto do Hugo e clicar em Set Up Project

Após isto, irá abrir a página informando se você quer colocar uma configuração default ou carregar uma configuração existente, como já criamos anteriormente, pode clicar em Use Existing Config

E assim ele irá carregar o pipeline e já executar, mas irá dar erro pois precisamos configurar o s3 e as chaves aws, mas para não ficar muito longo, vou deixar para o proximo post!

Acesse ai abaixo e se vemos no próximo post!!

Parte 2