Running your own blog with Docusaurus and Docker

This article continues where Running Docusaurus with 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 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 packages it for production, while GitHub - Use Actions to deploy this blog publishes it automatically on every push. Once it is online, How to self-host Matomo 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):

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

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.

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:

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:

name: my_docusaurus_blog

services:
  blog:
    build: .
    ports:
      - 3000:3000
    user: 1000:1000
    volumes:
      - ./blog:/app/blog
      - ./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:

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

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:

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

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

  // ...
};

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:

$ docker compose cp blog:/app/src src▋

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

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

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.

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

$ docker compose cp blog:/app/static static▋

And update your compose.yaml file like this:

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
      - ./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!