Uma foto minha vestido com o uniforme da Grifinória do Harry Potter

Willian JustenSoftware Engineer

Instrutor na Udemy, escrevo sobre o mundo front end, viagens, vida pessoal e mais.

← Voltar na listagem

Varrendo seu site atrás de links quebrados

Não perca a credibilidade do seu site com imagens ou links quebrados.

Introdução

Mais um post da série sobre Performance Web, esse hoje nem foi um post muito planejado, por isso vai ser bem rapidinho, mas é extremamente importante!

Enquanto vou escrevendo esse post, vou ouvindo a banda A love like pi que mistura um pouco de rock com eletrônico, tem músicas muito calmas e fofas como Jack and the Giant.

Todos sabemos que a pior coisa do mundo é o usuário abrir o nosso site e encontrar um bug, certo? E links/imagens quebrados são bugs sim e dos piores!

No meu blog eu costumo referenciar vários links, tanto internos como externos, atualmente já são mais de 1500 links! E como saber se os links estão sempre funcionando? Hoje mesmo alguns alunos comentaram de uma página com imagens quebradas e eu fiquei tão triste...

Foi aí que lembrei do que fiz com a Awesome SVG e a Awesome Audio Visualization, que são duas listas de links que tenho no Github. Lá eu uso o awesome bot, que pega todas as urls da lista e vai testando uma a uma. E aí resolvi fazer uma solução para o meu blog também.

Htmlproofer

O Html Proofer é o cara responsável por rodar todo o meu site em busca dos links/imagens quebrados, mas não só isso, ele faz várias outras verificações como checar se o site tem favicon, se scripts externos estão carregando corretamente. E tudo isso de forma bem fácil e customizável, vai lá no github do projeto e veja como é simples.

Aqui abaixo fica o script simples que eu fiz com ele:

#!/usr/bin/env bash
set -e # halt script on error

echo 'Testing links...'
bundle exec jekyll build
bundle exec htmlproofer ./_site --http-status-ignore "0,999"

Eu precisei usar o --http-status-ignore "0,999", pois alguns sites com latência mais alta (mas que estão funcionando) acabavam retornando 0 ou 999, então só para evitar mostrar erros falsos, usei essa opção.

Travis CI

O segundo carinha que utilizei foi o Travis CI. Ele é um CI simples e que funciona muito bem com projetos open source, basta criar um arquivinho e tudo passa a funcionar.

Eu criei um arquivo .travis.yml no meu repositório com o seguinte:

language: ruby
rvm:
  - 2.3.1

before_script:
  - chmod +x testlinks.sh

script: ./testlinks.sh

branches:
  - master
  - drafts

env:
  global:
    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer

O HtmlProofer e o Jekyll são em Ruby, então por isso eu defini o ambiente como de ruby. O before_script serve para rodar coisas que são necessárias antes do meu teste principal. No caso eu mudo a permissão para execução do testlinks.sh, assim a máquina consegue rodar sem problemas.

Depois eu mando executar o script, que basicamente gera os arquivos do Jekyll e depois roda o HtmlProofer para verificar tudo. Eu também defino os branches master e drafts, que são os que utilizo no meu blog. Também defino uma variável global, só para a instalação do Htmlproofer ser mais rápida.

Nightli.es

Por último, mas não menos importante, eu utilizo o Nighli.es para criar builds noturnas todos os dias. Assim toda noite o Travis roda os testes e me reporta se algum link tiver quebrado. Isso vai me garantir que o meu blog sempre está funcionando direitinho e bonito, sem links/imagens quebradas!

Outras ferramentas

Vocês podem falar:

Ahhh, mas eu num uso Ruby. Ruby é lento, Ruby é aquilo, Ruby num sei o que...

Então tudo bem, existem várias ferramentas do gênero em várias linguagens e até mesmo para quem não sabe programar:

Conclusão

É isso aí pessoal, mais um post simples, mas importante para termos sites funcionais e performáticos, afinal de contas, se a imagem não estiver quebrada, não vamos ter demora na resposta da requisição. Além disso, ninguém quer clicar num link que leva para 404 né?

E ah, se você tem alguma dúvida ou sugestão de post, faça nos comentários daqui do blog, estou sempre atento!