docusaurus/website/docs/static-assets.md
Yangshun Tay c021367a18
docs(v2): proofread docs for alpha.20 (#1658)
* docs(v2): proofread docs for alpha.20

* docs(v2): update creating pages doc

* docs(v2): further updates to creating pages doc

* chore(v2): update CHANGELOG
2019-07-13 19:21:39 -07:00

1.3 KiB
Raw Blame History

id title
static-assets Static Assets

In general, every website needs assets: images, stylesheets, favicons and etc. In such cases, you can create a directory named static at the root of your project. Every file you put into that directory will be copied into the the root of the generated build folder with the directory hierarchy preserved. E.g. if you add a file named sun.jpg to the static folder, itll be copied to build/sun.jpg.

This means that if the site's baseUrl is /, an image in /static/img/docusaurus_keytar.svg is available at <baseUrl>/docusaurus_keytar.svg.

Referencing your static asset

You can reference assets from the static folder in your code with absolute path, i.e. starting with a slash /.

Markdown example

<!-- reference static/img/docusaurus.png -->

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

Result:

Docusaurus logo

JSX example

// reference static/img/slash-birth.png
<img src="/img/slash-birth.png" alt="docusaurus mascot" />

Result:

docusaurus mascot

Keep in mind that:

  • None of the files in static folder will be post-processed or minified.
  • Missing files will not be called at compilation time, and will result in a 404 error.