# Discovering Docusaurus A series of 3 article(s), in reading order. # Getting the number of published posts > Learn the quick and easy way to display the total number of published blog posts on your Docusaurus site using custom components and theme API. --- ![Getting the number of published posts](/img/v2/docusaurus_tips.webp) **TL;DR** This article shows a quick trick to count published Docusaurus blog posts: open the auto-generated `/blog/archive/` page, open the browser's developer console, and run a `document.querySelectorAll` instruction against the list of post entries to get the total count. Docusaurus didn't provide an easy way to retrieve the number of blog posts but there is a trick. *If you need that count **inside** your site rather than once in a console, the helper built in [Displaying related posts below our Docusaurus article](/blog/docusaurus-relatedposts) already parses every post's front matter and can be reused for this.* There is an automatic page called `archive` like [/blog/archive/](/blog/archive/). On that page, all blog posts are displayed by year and months. With a `document.querySelectorAll` console instruction it's possible to make the count as suggested on ![The archive page](./images/archive.webp) Once the archive page has been displayed, press `F12` to start the **Developer console**. Click on the `Console` tab then, in the right bottom part, copy/paste the instruction below. ```js document.querySelectorAll("#__docusaurus_skipToContent_fallback > main > section > div > div > div > ul > li") ``` The first time, the console will notify you that you should allow pasting (in French *autoriser le collage*). Please type `allow paste` to confirm. Then copy/paste again. The `document.querySelectorAll` instruction will retrieve every bullet i.e. the list of posts. You'll immediately see the number, in my case, as illustrated below, `51`: ![Console](./images/console.webp) --- # 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` (). 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 :/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 . ## 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 and read the documentation. Also find inspiration in the *Docusaurus Site Showcase*: . The keyboard is yours! Don't delay, start writing your blog now! --- # Some tips and tricks when written articles for Docusaurus > Boost your Docusaurus articles with essential tips and tricks. Learn how to add Admonitions, apply inline styling, and highlight code lines easily. --- ![Some tips and tricks when written articles for Docusaurus](/img/v2/docusaurus_tips.webp) **TL;DR** This article is a reminder of essential Docusaurus authoring features: the `truncate` marker for blog post previews, admonitions for callout boxes, inline styling with ``, a custom `Highlight` component for colored text, and `// highlight-next-line` to draw attention to changed lines in code blocks. If you're writing for Docusaurus, there are a few tips to know. This article is by no means exhaustive, but for me, it's a reminder of the features that are really essential and must not be forgotten. *Two more authoring habits worth adopting early: keeping your [tags under control](/blog/docusaurus-tags) and [displaying related posts](/blog/docusaurus-relatedposts) below each article.* ## Read more [Official documentation](https://docusaurus.io/docs/blog#blog-list) In blog mode, your article is divided into two parts: the introduction with a *Read More* link, and then the main part of the article. To activate this feature, simply add the line `` (preceded and followed by an empty line) where you wish to distinguish between the introduction and the main part. If you go to my [blog](/blog) page, each article has an introduction followed by a `` line in my Markdown source. ## Admonitions [Official documentation](https://docusaurus.io/docs/markdown-features/admonitions) Used to highlight a paragraph in your document, f.i. a *Pay attention to...* or *Tip: Did you know that...* box. ```markdown Never give your bank card code to a stranger. ``` Will be displayed by Docusaurus like this: > **Pay attention to...:** > > Never give your bank card code to a stranger. ## Inline style Docusaurus supports inline style by the use of a ` ... ` notation. The notation `I'm written in blue` will give I'm written in blue. Used very occasionally, this is a very simple way of changing the style of content on your page. ### Highlight component If your ambition is to highlight some text, there is a better solution: the **Highlight component**. Please create the `src/components/Highlight/index.tsx` file: **src/components/Highlight/index.tsx** ```typescript /** * Highlight Component * * A simple React component used to emphasize inline content with a custom background color. * Typically used in blog posts or documentation pages within a Docusaurus site. * * Example usage: * Important note */ import type { JSX, ReactNode } from "react"; interface Props { children: ReactNode; color: string; } export default function Highlight({ children, color }: Props): JSX.Element { return ( {children} ); } ``` Then edit (or create) the `src/theme/MDXComponents.js` file. If the file already exists, just add the highlighted lines below. If not yet present, create the file with the content below: **src/theme/MDXComponents.js** ```javascript import React from "react"; import MDXComponents from "@theme-original/MDXComponents"; // [...] // highlight-next-line import Highlight from "@src/components/Highlight"; export default { // Reusing the default mapping ...MDXComponents, // [...] // highlight-next-line Highlight }; ``` **Docusaurus green** and **Facebook blue** are my favorite colors. Source: [MDX and React](https://docusaurus.io/docs/markdown-features/react#exporting-components) ## Highlight lines [Official documentation](https://docusaurus.io/docs/markdown-features/code-blocks#line-highlighting) The `// highlight-next-line` is **really** useful when you wish to put in evidence changes you've done to a give code block. *When the code lives in a real file rather than inline, I use my own [code snippets component](/blog/docusaurus-snippets), which reads the file at build time so the article can never fall out of sync with it.* Imagine you've already written something like *Dear reader, please create a file on your disk with this content...* and you provide a code block with that content. Later in your article, you ask 'Please edit the file and make this and *please edit the file and add this and that line, here and there*. With `// highlight-next-line`, it's really easy to highlight changes, for instance: **compose.yaml** ```yaml name: kingsbridge services: joomla: image: joomla restart: always ports: - 8080:80 environment: - JOOMLA_DB_HOST=joomladb - JOOMLA_DB_PASSWORD=example # highlight-next-line user: 1000:1000 # highlight-next-line volumes: # highlight-next-line - ./site_joomla:/var/www/html joomladb: image: mysql:8.0.13 restart: always environment: - MYSQL_ROOT_PASSWORD=example # highlight-next-line user: 1000:1000 # highlight-next-line volumes: # highlight-next-line - ./db:/var/lib/mysql ``` You can immediately see where I've made some changes in the file's content. ---