Arquivos estáticos

Todo site precisa de assets: imagens, folhas de estilo, favicons etc. Nesses casos, você pode criar um diretório chamado static na raiz do seu projeto.

Cada arquivo que você colocar dentro esse diretório será copiado na raiz da pasta de compilação gerada com a hierarquia de diretório preservada. Ex. se você adicionar um arquivo chamado sun.jpg na pasta estática, ele será copiado para build/sun.jpg.

Isto significa que:

• para o site baseUrl: '/', a imagem /static/img/docusaurus.png será exibida em /img/docusaurus.png.
• para o site baseUrl: '/subpath/', a imagem /static/img/docusaurus.png será exibida em /subpath/img/docusaurus.png.

Referenciando seu arquivo estático

Você pode referenciar arquivos da pasta static no seu código usando caminhos absolutos, mas isso não é ideal porque alterar o site baseUrl irá quebrará esses links.

Você pode importar/require() o arquivo estático (recomendado) ou usar a função de utilitário useBaseUrl: ambos anexam o baseUrl nos caminhos para você.

Exemplo JSX

MyComponent.js

import DocusaurusImageUrl from '@site/static/img/docusaurus.png';
<img src={DocusaurusImageUrl} />;

MyComponent.js

<img src={require('@site/static/img/docusaurus.png').default} />

MyComponent.js

import useBaseUrl from '@docusaurus/useBaseUrl';
<img src={useBaseUrl('/img/docusaurus.png')} />;

Você também pode importar arquivos SVG: eles serão transformados em componentes React.

MyComponent.js

import DocusaurusLogoWithKeytar from '@site/static/img/docusaurus_keytar.svg';
<DocusaurusLogoWithKeytar title="Docusaurus Logo" className="logo" />;

Exemplo de Markdown

Links de Markdown e imagens referenciando arquivos da pasta estática serão convertidos em require("@site/static/assetName.png") e o site será prefixado automaticamente para você.

my-doc.md

![Docusaurus](/img/docusaurus.png)

Graças o MDX, você também pode usar a função de utilitário useBaseUrl em arquivos Markdown! No entanto, você teria que usar tags html como <img> ao invés da sintaxe da imagem Markdown. A sintaxe é exatamente a mesma que em JSX.

my-doc.mdx

---id: my-doctitle: My Doc---
// Add to the top of the file below the front matter.import useBaseUrl from '@docusaurus/useBaseUrl';
...
<img alt="Docusaurus with Keytar" src={useBaseUrl('/img/docusaurus_keytar.svg')} />

Ressalvas

Tenha em mente que:

• Por padrão, nenhum dos arquivos na pasta static será pós-processado, criado hash ou minificado.
• Os arquivos referenciados através de caminhos absolutos codificados não serão detectados no tempo de compilação e resultarão em um erro 404.
• Por padrão, o GitHub Pages executa arquivos publicados através do Jekyll. Uma vez que o Jekyll irá descartar quaisquer arquivos que comecem com _, é recomendável que você desative o Jekyll adicionando um arquivo vazio chamado .nojekyll para o seu diretório static se você estiver usando páginas do GitHub para hospedagem.