Hacktoberfest2022 - React18 Website and Nginx Docker image to show your visitors maintenance informations
Tags: docker, opensource, hacktober, hacktoberfest
Published: 2022-10-08 13:45:24

---
title: Hacktoberfest2022 - React18 Website and Nginx Docker image to show your visitors maintenance informations
published: true
description: A small website to show your visitors some informations while you are rolling and an update to the website.
tags: docker, opensource, hacktober, hacktoberfest
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr5nvp67vnyhov5tkeie.png
# Use a ratio of 100:42 for best results.
---

It's Hacktober 🎃 and the Hacktoberfest 🧑🏽‍💻 has started. I wanted do contribute with a small React maintenance website you can show to your visitors when you are doing some maintenance work to your services.

![Image of the maintenance website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr5nvp67vnyhov5tkeie.png)

For that i created a small [template repository](https://github.com/thematchless/website-maintenance-container/generate) which you can easily clone and make it your own personal maintenance website.

{% github https://github.com/thematchless/website-maintenance-container %}

If you only want to make basic adjustments, it is enough for you to adjust the texts strings inside the `info.json` file.

You can change the headline, the description and the favicon.

```json
{
  "headline": "Website maintenance",
  "description": "We are back in a couple of minutes.",
  "favicon_url": "https://oflisback.github.io/react-favicon/img/github.ico"
}
```

If you prefer to make some more adjustments you feel free to do it. It's a pretty basic React v18 Application with Prettier and ESLint. You can customize everything to your needs. 

If you are done with your changes you can use the included `Dockerfile` to build a production ready image.

```
docker build -t website-maintenance-container:latest .
```

To test your freshly created docker image use the following command:

```
docker run -p 8000:80 website-maintenance-container:latest
```

Now open your browser and navigate to `127.0.0.1:8000` to see the website.

## CI (Continues Integration)

This repository comes with a preconfigured GitHub action that checks your commit history for commits that conform to the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/). When the workflow detects a new commit, it automatically determines the next version number and creates a freshly built Docker image of your maintenance application. This image is then transferred to the GitHub Container Registry and the Git version tags are automatically assigned based on the newly determined version number. 🥳

If you want to use that GitHub action and the automatic push to the GitHub Container Repository you have to create a [token for your action](https://github.com/settings/tokens) for your account. Name it `PAT_TOKEN` or change it to your needs inside the `build.yml`.

## CD (Continues Deployment)
Now you have a nice little project with a working CI pipeline. You can easily extend the workflow with a CD statement inside the `build.yml`. For this I had built a small independent [GitHub action](https://dev.to/thematchless/github-actions-hackathon-2021-bump-docker-image-version-on-a-remote-host-279h) last year. 🎉

{% github https://github.com/thematchless/bump-image-version-action %}

I hope you enjoyed this little idea of my maintenance container 😎