ComboStrap UI - Getting Started

Install Docker

Download the Docker binary or install a package as explained on this article.

On Windows?

On Windows, you need to install WSL by following this instructions. Why? Because Php is still a Linux and C technology that is really slow on Windows. This is architectural as explained on this issue

Create a data directory

• Create a directory to store the DokuWiki Data

mkdir -p ~/site-combo-starter

• And go into it to change the current directory

cd site-combo-starter

Start DokuWiki in Docker

Start a DokuWiki Docker Instance with the following command.

docker run \
  --name site-combo-starter \
  --rm \
  -p 8080:80 \
  --user 1000:1000 \
  -e DOKU_DOCKER_ACL_POLICY='public' \
  -e DOKU_DOCKER_ADMIN_NAME='admin' \
  -e DOKU_DOCKER_ADMIN_PASSWORD='welcome' \
  -v $PWD:/var/www/html \
  ghcr.io/combostrap/dokuwiki:php8.3-latest

where:

• DOKU_DOCKER_ACL_POLICY='public' will configure a wiki that can only be seen by the public. You need to login to modify it.
• DOKU_DOCKER_ADMIN_NAME='admin' create a user named admin with the admin permission.
• DOKU_DOCKER_ADMIN_PASSWORD='welcome' is the password of the admin user
• -v $PWD:/var/www/html mount your current directory PWD into the image at the HTML server root /var/www/html
• –user 1000:1000 will create file as if it were you creating them. The user 1000 is the UID of your Desktop user (in Windows WSL at least)

Check that the instance has started

The command above will:

• start php,
• install DokuWiki,
• install the starter site
• and is ready when you see this lines:

INFO success: caddy entered RUNNING state, process has stayed up for > than 1 seconds (startsecs)
INFO success: php_error_log entered RUNNING state, process has stayed up for > than 1 seconds (startsecs)
INFO success: php_fpm entered RUNNING state, process has stayed up for > than 1 seconds (startsecs)

• You can then access DokuWiki at http://localhost:8080

docker stop site-combo-starter

Login

Go to the login page: http://localhost:8080/?do=login

And enter the credentials:

• user: admin
• password: welcome

Choosing a icon logo

You can design your own logo but you can also be inspired by collection of logo

In our case we have chosen an icon directly from https://materialdesignicons.com/

• Choose an icon

• Download the Svg file and rename it to logo.svg

• Go back in the Advanced Export and create a PNG with the biggest size

Generate the favicons

• Go to the realfavicongenerator generator
• Upload your PNG image
• Answer the forms, follows the steps and download the package icon

Upload the favicons

• Then upload the below icon files with the Media Manager ¹⁾ to the root location (ie DOKUWIKI_HOME/data/media/)
• Click on this link http://localhost:8080/start?ns=&tab_files=files&do=media and upload the following files
  • favicon.ico
  • favicon-32×32.png
  • favicon-16×16.png
  • apple-touch-icon.png
  • android-chrome-192×192.png (used in the manifest)
  • logo.svg

Example:

To see where and how you can use your logo, see the logo page.

Create the facebook default

facebook has a dimension constraint on the image illustration. The image should be at minimum 200px by 200px.

We recommend then that:

• you create an image with your photo editor:
  • with the dimension of a facebook card 524×274
  • where you copy your logo
  • and named logo-facebook.png (the default value)

• and upload it at the root of your media manager (next to the other logos)

The facebook page will tell your more about the specific of a facebook card.

Verify

• Refresh and delete the Browser cache by hitting the key combination
  • Ctrl + Shift + R - Chrome
  • or Ctrl + F5 - Firefox
• Check that you see your favicon

Next Step

Create a top navigation menu

OpenSearch Favicon

In the open search, unfortunately, the icon is the icon of the template and is hardcoded, there is nothing we can do to change it at this place.

We advertise it via sitelinks to search engines.

Most of the search engine, support it this ways, if you really really want it, you need to put it manually at $DOKUWIKI_HOME/lib/tpl/dokuwiki/images/favicon.ico.

Create a remote Git Repository

We will be using GitHub as example, but you can use any Git Repository Provider such as Gogs, GitLab or Gitea.

For GitHub, follow this article to create your new repository.

Create a local Git Repository

In the directory that was used with the docker command, initialize a Git repository

cd /tmp/site-combo-starter
# Init (ie create ) a local repo
git init

• Rename the master branch to main

git branch -M main

Add the Git remote

• Add the URL of your repository as origin

git remote add origin https://github.com/ComboStrap/site-starter.git

Check the untracked files

git status

On branch main

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
       .gitattributes
       .gitignore
       README.md
       conf/
       data/
       docs/
       lib/
       robots.txt

nothing added to commit but untracked files present (use "git add" to track)

Add the combo site files

Add them all

git add .

Create your first commit

• Create a commit

git commit -m "First commit"

Push them to your remote repository

• Push

git push -u origin main
# enter your credentials 
# or use SSH Keys (https://docs.github.com/en/authentication/connecting-to-github-with-ssh)

Enumerating objects: 45, done.
Counting objects: 100% (45/45), done.
Delta compression using up to 16 threads
Compressing objects: 100% (36/36), done.
Writing objects: 100% (45/45), 50.71 KiB | 10.14 MiB/s, done.
Total 45 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), done.
To github.com:ComboStrap/site-starter.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.