mkdocs Docker Production Setup

Halo, kalau kamu merasa tulisan saya ngebantu kamu, kamu bisa ucapkan terima kasih lewat saweria.

If you feel this website help you, you can donate at saweria.

Yang Sudah Harus Kamu Install

1. Docker

2. mkdocs-material, bisa pull [image mkdocs-material](docker pull squidfunk/mkdocs-material)

3. Untuk cara penggunaan mkdocs, silakan kunjungi mkdocs documentation

How To

1. Setup mkdocs.yml

   site_name: Docs
   site_url: https://docs-kamu.com/
   theme:
     pallete:
       scheme: slate
     name: material
     language: id
     #you can put logo and favicon in folder docs/assets
     #logo: assets/logo.png
     #favicon: assets/logo.ico
     features:
       - content.code.copy
       - content.code.annotate 
   nav:
       - Home: index.md
       - Collection: collection.md 
       - About: about.md
   plugins:
     - search
   markdown_extensions:
     - pymdownx.highlight:
         anchor_linenums: true
     - pymdownx.inlinehilite
     - pymdownx.snippets
     - pymdownx.superfences
   

2. Buat Dockerfile. Kita akan pake multi-stage build.

   Pertama, pull mkdocs-material dari squidfunk untuk build folder docs

   Kedua, pull nginx:latest untuk serve folder build yang dihasilkan sama mkdocs-material

   FROM squidfunk/mkdocs-material:latest as docs
   
   # Build-time flags
   ARG WITH_PLUGINS=true
   
   # Environment variables
   ENV PACKAGES=/usr/local/lib/python3.11/site-packages
   ENV PYTHONDONTWRITEBYTECODE=1
   
   WORKDIR /app
   
   COPY . /app
   
   RUN ["mkdocs", "build"]
   
   FROM nginx:latest as webserver
   LABEL "website.name"="docs-kamu.com"
   LABEL "desc"="Documentation"
   LABEL "maintainer"="ipang777"
   EXPOSE 80
   
   COPY --from=docs /app/site /usr/share/nginx/html
   

3. Build dengan docker build -t docs-image . --no-cache

4. Jalankan dengan docker run -p 81:80 docs-image

Push Image ke GHCR (Github Container Registry) dengan Github Actions

1. Buat file di .github/workflows/create-image.yaml

   name: doc create images
   on:
       push:
           branches: master
   
   env:
       REGISTRY: ghcr.io
       IMAGE_NAME: ${{ github.repository }}
   
   jobs:
   
     #start update to server actions
     build-image-at-ghcr:
       runs-on: ubuntu-latest
   
       steps:
         - name: checkout repo
           uses: actions/checkout@v2
   
         - name: log in container registry
           uses: docker/login-action@v1
           with:
               registry: ${{ env.REGISTRY }}
               username: ${{ github.actor }}
               password: ${{ secrets.GITHUB_TOKEN }}
   
         - name: extract metadata (tags, labels) for docker
           id: meta
           uses: docker/metadata-action@v3
           with:
               images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
   
   
         - name: build and push docker image
           uses: docker/build-push-action@v2
           with:
               context: .
               file: Dockerfile
               push: true
               tags: ${{ steps.meta.outputs.tags }}
               labels: ${{ steps.meta.outpus.labels }}
   

   

   

2. Buat file docker-compose.yml

   version: '3.3'
   
   services:
     docs:
   
       image: ghcr.io/ipang777/mkdocs-docker-production:master
       container_name: docs-tr
       restart: always
       ports:
         - "81:80"
       networks:
         - docs-net
   
   networks:
     docs-net:
   

3. Jalankan docker-compose up -d, buka localhost:81 di browser

4. Semua file di tutorial ini ada di github.com/ipang777/mkdocs-docker-production