Desenvolvimento

Criando projeto com Eleventy e Tailwind Css.

RodrigoC
29 de janeiro de 2023 · 6 min

Como o Speak foi construído?

Ele foi construído utilizando Tailwind Css e Eleventy. Duas ferramentas incríveis na criação de sites. Escolhi o Tailwind e não o Bootstrap, que eu já utilizava em todos os meus projetos, pela flexibilidade que tem. O Bootstrap te da vários componentes pre criados para você utilizar, porém, caso você precise de algo mais específico como uma cor com tonalidade diferente, um componente de tamanho em px ou algo parecido, você terá que criar novas classes no arquivo de Css fazendo isso.

Já no Tailwind, você pode escolher entre alguns componentes que eles oferecem gratuitamente, também existe a opção de fazer o pagamento de uma assinatura vitalícia com vários componentes disponíveis e temas para você escolher. Caso não queira pagar, como eu, tudo bem! O conceito usado pelo Tailwind de "Utility first" é simplesmente sensacional, imagine que você queira fazer um quadrado vermelho com bordas de 12px em cada lado.

Em vez de criar uma classe nova você pode utilizar a seguinte rounded-[12px] pronto, não gosta de utilizar px? tudo bem, dentro dos [] você pode aplicar qualquer medida como Rem, Em, Vw... Obviamente que em todas as classes existem valores prontos para você não precisar se preocupar em declará-los.

Por que Eleventy?

Primeiramente por já utilizar em projetos anteriores e conhecer bastante. Comparado a outros geradores de sites estáticos, o Eleventy tem a melhor performance de longe, talvez por sua leveza. No momento, a versão 2.0 ainda está em Beta, mas nela o Eleventy será ainda mais rápido que atualmente, o que é muito animador. Apesar de ser um gerador mais novo que outros no mercado, está cada vez mais sendo usado inclusive por grandes empresas como Google, Netlify e outros.

Iniciando o projeto...

1. Crie o diretório

Abra o editor de sua preferência, no meu caso Vs Code. No terminal, utilize o comando:

mkdir new-project

2. Instale as dependencias do 11ty/eleventy

Para isso você precisa ter uma versão do Node JS acima da versão 12.

npm install @11ty/eleventy --save-dev

3. Inicie o Eleventy

Para ter certeza que tudo está ok, vamos rodar o seguinte comando:

npx @11ty/eleventy

Se o resultado foi algo como Wrote 0 files in 0.03 seconds (v1.0.1) então está tudo certo e podemos continuar.

4. Configurando o arquivo 11ty

Na raiz do projeto, crie um arquivo chamado .eleventy.js (não esqueça o ponto no inicio do arquivo) e adicione o seguinte codigo no arquivo:

module.exports = function(eleventyConfig) {
    // Copy Folders to _site
    eleventyConfig.addPassthroughCopy("src/assets");
    eleventyConfig.addPassthroughCopy("src/fonts");
    eleventyConfig.addPassthroughCopy("src/css");
    eleventyConfig.addPassthroughCopy("src/js");
    
    // Local server
    eleventyConfig.setServerOptions({
        liveReload: true,
        domDiff: true,
        port: 8080,
        watch: ["_site/"],
        showAllHosts: false,
        encoding: "utf-8",
      });

    // Input Directory : src Output directory: _site
	return {
        dir: { input: 'src', output: '_site' }
    };
};

5. Instalando o Tailwind Css

Abra novamente o terminal do editor e rode os comandos nessa ordem:

npm install -D tailwindcss
npx tailwindcss init

Ao rodar o segundo comando, será criado um arquivo na raiz do projeto chamado tailwind.config.js.

6. Configure o Tailwind

Abra o arquivo tailwind.config.js e cole o código:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./_site/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

7. Adicionando o Tailwind ao seu Css

Na raiz do projeto, crie uma pasta com nome src e dentro dela, cria outra pasta com nome css. Dentro da pasta css crie um arquivo chamado tailwind.css e cole o seguinte código:

@tailwind base;
@tailwind components;
@tailwind utilities;

Dentro da pasta src crie um arquivo index.html e cole o seguinte código:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/css/style.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl text-green-800 font-bold underline">
    Hello world!
  </h1>
</body>
</html>

8. Inicie o processo de build do Tailwind

Rode o seguinte comando no terminal:

tailwindcss -i ./src/css/tailwind.css -o ./_site/css/style.css --watch

9. Combine o processo de build do Eleventy e Tailwind

Na raiz do projeto, crie um arquivo chamado package.json e dentro cole:

{
  "scripts": {
    "build": "eleventy --serve & tailwindcss -i ./src/css/tailwind.css -o ./_site/css/style.css --watch",
    "build:prod": "eleventy & tailwindcss -i ./src/css/tailwind.css -o ./_site/css/style.css --minify"
  },
  "devDependencies": {
    "@11ty/eleventy": "^1.0.1",
    "tailwindcss": "^3.1.6"
  }
}

Se a versão for diferente, basta alterar.

10. Fim

Para executar a compilação localmente, você pode executar o comando npm run build e, para executá-lo para preparar a produção, agora pode executar o comando npm run build:prod.

Ao rodar esses comandos notará duas coisas.

[11ty] Watching…

Rebuilding...
[Browsersync] Access URLs:
 -----------------------------------
    Local: http://localhost:8080
 External: http://192.168.0.106:8080
 -----------------------------------
[Browsersync] Serving files from: _site

Done in 1322ms.

Como pode ver, os links de rede local e externa são mostrados, e ele anuncia que você está está usando a pasta _site que ele mesmo cria e atualiza sempre que você salva.