mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-08 14:47:12 +02:00
c021367a18
* 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
42 lines
1.3 KiB
Markdown
42 lines
1.3 KiB
Markdown
---
|
||
id: static-assets
|
||
title: 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, it’ll 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`.
|
||
|
||
<!-- TODO: Yangshun: This is inaccurate for sites with a non '/' baseUrl -->
|
||
|
||
## 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
|
||
|
||
```markdown
|
||
<!-- reference static/img/docusaurus.png -->
|
||
|
||
|
||
```
|
||
|
||
Result:
|
||
|
||
|
||
|
||
### JSX example
|
||
|
||
```jsx
|
||
// reference static/img/slash-birth.png
|
||
<img src="/img/slash-birth.png" alt="docusaurus mascot" />
|
||
```
|
||
|
||
Result:
|
||
|
||
<img src="/img/slash-birth.png" alt="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.
|