<!--
  canonical-url: https://www.avonture.be/blog/docusaurus-docker-own-blog
  published:     2024-02-07
  This is a static plain-Markdown mirror generated at build time.
  Visit the canonical URL above for the fully rendered page, with images and interactive components.
-->

# Running your own blog with Docusaurus and Docker

> Take full control of your self-hosted Docusaurus blog running in a Docker container. A step-by-step guide to site customization, volume mounting, and managing content.

---
![Running your own blog with Docusaurus and Docker](/img/v2/docusaurus_docker.webp)

**TL;DR**

This follow-up article shows how to customize a Dockerized Docusaurus blog by copying key files (`docusaurus.config.js`, `src`, `static`) out of the running container with `docker compose cp` and mounting them as volumes in `compose.yaml`, so edits on the host are reflected live — covering site title, favicon, navbar branding, custom pages, and static assets.

This article continues where [Running Docusaurus with Docker](/blog/docusaurus-docker/) left off. Make sure to read it first and create the required files.

So you've created your own blog using Docker and Docusaurus. By following steps explained in the [Running Docusaurus with Docker](/blog/docusaurus-docker/) article, now, you've a blog with the list of articles stored on your machine; in a `blog` folder.

Let's go further.

*And when your blog is ready to leave your machine, [Encapsulate an entire Docusaurus site in a Docker image](/blog/docker-docusaurus-prod) packages it for production, while [GitHub - Use Actions to deploy this blog](/blog/github-action) publishes it automatically on every push. Once it is online, [How to self-host Matomo](/blog/matomo-install) tells you who reads it.*

In the previous article, we've created a folder on your disk; we'll reuse it.

Please run `cd /tmp/docusaurus` to jump in it, then open the folder using your editor (I'll run `code .` on my side).

In Visual Studio Code, you should see this (if not, read and run commands from the first article):

![Starting point in vscode](./images/vscode_starting_point.webp)

And by running `docker compose up --detach --build` to start the blog, you'll get this screen:

> Screenshot — http\://localhost:3000
>
> ![Starting point blog](./images/blog_starting_point.webp)

## Customize the name, title, icons and URL of your site

Right now, we can see *My Site* in the top left of the screen.

There is a very important file in Docusaurus, i.e. `docusaurus.config.js` (<https://docusaurus.io/docs/api/docusaurus-config>).

We need to adjust the file to meet our wishes.

> **We need the file on our computer:**
>
> Ok, now, a very important concept: we need to keep a copy of everything we've to update on our computer.
>
> To copy a file from our container on our disk, the command to use is `docker compose cp <service-name>:/file/path/within/container /host/path/to/copy/file/to`

So, to copy the `docusaurus.config.js` file on your disk, you've to run `docker compose cp blog:/app/docusaurus.config.js /tmp/docusaurus/docusaurus.config.js` (replace `/tmp/docusaurus` with the folder name where you've created your blog, on your hard disk).

Once the copy has been done, you can retrieve the file in your editor:

![Docusaurus.config.js on local disk](./images/docusaurus.config.js.webp)

And the second thing we need to do to allow us to update the file and reflect changes in our Docker container is to mount the file.

Please edit your `compose.yaml` file and add the line below highlighted:

```yaml
name: my_docusaurus_blog

services:
  blog:
    build: .
    ports:
      - 3000:3000
    user: 1000:1000
    volumes:
      - ./blog:/app/blog
      //highlight-next-line
      - ./docusaurus.config.js:/app/docusaurus.config.js
```

We're almost done, we need to recreate our container so we'll run `docker compose up --detach` again.

By refreshing the web page, we'll not see any change but ... please update the `docusaurus.config.js` file now.

So, open `docusaurus.config.js` and search for `themeConfig` then, there, for the `navbar` node.

You'll find something like this:

![The navbar in config.js](./images/navbar_default.webp)

Change the text to what you wish, f.i.

```js
navbar: {
  title: 'Welcome world!',
  logo: {
    alt: 'It\'s a photo of me ... or not',
    src: 'https://i.pravatar.cc/300',
  },
}
```

Just save and refresh your browser and you'll get:

> Screenshot — http\://localhost:3000
>
> ![My own navbar](./images/navbar_me.webp)

> **You've learned a very important concept!:**
>
> When you wish to be able to update a file present in a container; you need to get the file on your disk (1) and, then, synchronize the file between your computer and the container (2).
>
> For the first thing, the command to use is `docker compose cp` followed by the name of the container (just look at your `compose.yaml` file, it's the name of the service) then you need to say where the file is stored in the container and where to copy it on your disk. That's why we've used `docker compose cp blog:/app/docusaurus.config.js docusaurus.config.js` to do this.
>
> The second thing is to allow changes done in that copied file to be reflected between your host and the container and this is why we've updated the list of `volumes` in the `compose.yaml` file. So, now, changes done on your disk or done by the container will be synchronized both sides.

Next step, still in file `docusaurus.config.js`, look for the `title`, `favicon` and `url`, then initialize them to your own values; f.i.

```js
const config = {
  title: 'MyBlog',
  favicon: 'https://www.iconarchive.com/download/i75799/martz90/circle/android.ico',
  url: 'https://yoursite.com',

  // ...
};
```

> Screenshot — http\://localhost:3002/blog
>
> ![Favicon](./images/favicon.webp)

> **Just refresh:**
>
> You don't need to restart the `docker up` command this time, just press `F5` to see your changes directly in your browser.

> **Read the official documentation:**
>
> You can do a lot more when updating the `docusaurus.config.js` file; please refer to the official documentation <https://docusaurus.io/docs/api/docusaurus-config>.

## The src/pages folder

The `src/pages` folder contains files like `index.md` that will be translated to `index.html` (your homepage thus). You can also create a file called `tutorial.md` (which will be `tutorial.html`) and create a menu entry in your navigation bar with `/tutorial.html` for the target.

You have to copy the folder from the container to your host, as you've already seen. Please run the command below to copy the folder on your host:

```bash
$ docker compose cp blog:/app/src src
```

You need to update your `compose.yaml` file and add the line below highlighted:

```yaml
name: my_docusaurus_blog

services:
  blog:
    build: .
    ports:
      - 3000:3000
    user: 1000:1000
    volumes:
      - ./blog:/app/blog
      - ./docusaurus.config.js:/app/docusaurus.config.js
      //highlight-next-line
      - ./src:/app/src
```

## The static folder

That folder contains files that will be copied to your root directory when you deploy your blog. So this is the perfect place to put, f.i. a `.htaccess` or a `robots.txt` file.

> **Real use case:**
>
> On my side, I use that the static folder to store my common images (the ones I use multiple times). So I've created a folder `static/img` on my own blog. That folder will thus be copied to the `/img` (directly under the root) on my server. Accessing images in my articles will then be easy, the source will be something like `/img/image_name.ext`.

Please run the command below to copy the folder on your host:

```bash
$ docker compose cp blog:/app/static static
```

And update your `compose.yaml` file like this:

```yaml
name: my_docusaurus_blog

services:
  blog:
    build: .
    ports:
      - 3000:3000
    user: 1000:1000
    volumes:
      - ./blog:/app/blog
      - ./docusaurus.config.js:/app/docusaurus.config.js
      - ./src:/app/src
      //highlight-next-line
      - ./static:/app/static
```

## You now have the basics

Just continue your journey, surf to <https://docusaurus.io/docs> and read the documentation.

Also find inspiration in the *Docusaurus Site Showcase*: <https://docusaurus.io/showcase>.

The keyboard is yours! Don't delay, start writing your blog now!
