---
id: site-config
title: siteConfig.js
---

A large part of site configuration is done by editing the `siteConfig.js` file.

## User Showcase

The `users` array is used to store objects for each project/user that you want to show on your site. Currently this field is used by example the `pages/en/index.js` and `pages/en/users.js` files provided. Each user object should have `caption`, `image`, `infoLink`, and `pinned` fields. The `caption` is the text showed when someone hovers over the `image` of that user, and the `infoLink` is where clicking the image will bring someon. The `pinned` field determines whether or not it shows up on the `index` page.

Currently this `users` array is used only by the `index.js` and `users.js` example files. If you do not wish to have a users page or show users on the `index` page, you may remove this section.

## siteConfig Fields

The `siteConfig` object contains the bulk of the configuration settings for your website.

### Mandatory Fields

`title` - Title for your website.

`tagline` - Tagline for your website.  

`url` - url for your site.

`baseUrl` - baseUrl for your site.

`projectName` - Project name. This must match your GitHub repo project name (case sensitive).

`noIndex` - Boolean. If true, Docusaurus will politely ask crawlers and search engines to avoid indexing your site. This is done with a header tag and so only applies to docs and pages. Will not attempt to hide static resources. This is a best effort request. Malicious crawlers can and will still index your site.

`headerLinks` - Links that will be used in the header navigation bar. The `label` field of each object will be the link text and will also be translated for each language.

Example Usage:
```js
headerLinks: [
  // Links to document with id doc1 for current language/version
  { doc: "doc1", label: "Getting Started" },
  // Link to page found at pages/en/help.js or if that does not exist, pages/help.js, for current language
  { page: "help", label: "Help" },
  // Links to href destination
  { href: "https://github.com/", label: "GitHub" },
  // Links to blog generated by Docusaurus (${baseUrl}blog)
  { blog: true, label: "Blog" },
  // Determines search bar position among links
  { search: true },
  // Determines language drop down position among links
  { languages: true }
],
```
`headerIcon` - url for icon used in header navigation bar.

`favicon` - url for site favicon.

`colors` - Color configurations for the site.

  - `primaryColor` is the color used the header navigation bar and sidebars.
  - `secondaryColor` is the color seen in the second row of the header navigation bar when the site window is narrow (including on mobile).
  - Custom color configurations can also be added. For example, if user styles are added with colors specified as `$myColor`, then adding a `myColor` field to `colors` will allow you to easily configure this color.

`copyright` - The copyright string at footer of site and within feed

### Optional Fields

`customDocsPath` - By default, Docusaurus expects your documentation to be in a directory called `docs`. This directory is at the same level as the `website` directory (i.e., not inside the `website` directory). You can specify a custom path to your documentation with this field. **Note that all of your documentation *.md files must still reside in a flat hierarchy. You cannot have your documents in nested directories**.

```js
customDocsPath: "docs/site"
```

```js
customDocsPath: "website-docs"
```

`organizationName` - GitHub username of the organization or user hosting this project. This is used by the publishing script to determine where your GitHub pages website will be hosted.

`editUrl` - url for editing docs, usage example: `editUrl + 'en/doc1.md'`. If this field is omitted, there will be no "Edit this Doc" button for each document.

`users` - The `users` array mentioned earlier.

`disableHeaderTitle` - An option to disable showing the title in the header next to the header icon. Exclude this field to keep the header as normal, otherwise set to `true`.

`disableTitleTagline` - An option to disable showing the tagline in the title of main pages. Exclude this field to keep page titles as `Title • Tagline`. Set to `true` to make page titles just `Title`.

`separateCss` - Folders inside which any `css` files will not be processed and concatenated to Docusaurus's styles. This is to support static `html` pages that may be separate from Docusaurus with completely separate styles.

`footerIcon` - url for a footer icon. Currently used in the `core/Footer.js` file provided as an example, but it can be removed from that file.

`translationRecruitingLink` - url for the `Help Translate` tab of language selection when languages besides English are enabled. This can be included you are using translations but does not have to be.

`algolia` - Information for Algolia search integration. If this field is excluded, the search bar will not appear in the header.

`gaTrackingId` - Google Analytics tracking ID to track page views.

`highlight` - [Syntax highlighting](api-doc-markdown.md) options:

 - `theme` is the name of the theme used by Highlight.js when highlighting code.
 - `version` specifies a particular version of Highlight.js to be used.
 - `hljs` provides an escape valve by passing an instance of Highlight.js to the function specified here, allowing additional languages to be registered for syntax highlighting.

`markdownPlugins` - An array of plugins to be loaded by Remarkable, the markdown parser and renderer used by Docusaurus. The plugin will receive a reference to the Remarkable instance, allowing custom parsing and rendering rules to be defined.

`scripts` - Array of JavaScript sources to load. The script tag will be inserted in the HTML head.

`stylesheets` - Array of CSS sources to load. The link tag will be inserted in the HTML head.

`cname` - The CNAME for your website. It will go into a `CNAME` file when your site it built.

Users can also add their own custom fields if they wish to provide some data across different files.

## Example siteConfig.js with all fields

```
const users = [
  {
    caption: "User1",
    image: "/test-site/img/docusaurus.svg",
    infoLink: "https://www.example.com",
    pinned: true
  }
];

const siteConfig = {
  title: "Docusaurus",
  tagline: "Generate websites!",
  url: "https://docusaurus.io",
  baseUrl: "/",
// For github.io type URLS, you would combine the url and baseUrl like:
// url: "https://reasonml.github.io",
// url: "/reason-react/",
  organizationName: "facebook",
  projectName: "docusaurus",
  noIndex: false,
  headerLinks: [
    { doc: "doc1", label: "Docs" },
    { page: "help", label: "Help" },
    { search: true },
    { blog: true }
  ],
// For no header links in the top nav bar -> headerLinks: [],
  headerIcon: "img/docusaurus.svg",
  favicon: "img/favicon.png",
  colors: {
    primaryColor: "#2E8555",
    secondaryColor: "#205C3B"
  },
  editUrl: "https://github.com/facebook/docusaurus/edit/master/docs/",
  users,
  disableHeaderTitle: true,
  disableTitleTagline: true,
  separateCss: ["static/css/non-docusaurus", "static/assets/separate-css"],
  footerIcon: "img/docusaurus.svg",
  translationRecruitingLink:
    "https://crowdin.com/project/docusaurus",
  algolia: {
    apiKey:
      "0f9f28b9ab9efae89810921a351753b5",
    indexName: "github"
  },
  gaTrackingId: "U-A2352",
  highlight: {
    theme: 'default'
  },
  markdownPlugins: [
    function foo(md) {
      md.renderer.rules.fence_custom.foo = function(tokens, idx, options, env, instance) {
        return '<div class="foo">bar</div>';
      }
    }
  ],
  scripts: [ "https://docusaurus.io/slash.js" ],
  stylesheets: [ "https://docusaurus.io/style.css" ]

};

module.exports = siteConfig;
```