+++
title = "Help"
+++

# SillaB Website

This website is rendered as static html with [hugo](https://gohugo.io). The SillaB hugo project is at https://caeis.etech.fh-augsburg.de/beckmanf/sillab.git. The website itself is hosted at

  * http://fredowski.duckdns.org

# Test the website

#### Install hugo and rsync via homebrew

You need the hugo software to render the website. The software is available via [homebrew](https://brew.sh). The rsync software is used to transfer the web data to the webserver.

```
brew install hugo rsync
```

#### Download or update the git repository

If you run this the first time, you need to download the git repository with the following command:

```
cd
git clone https://caeis.etech.fh-augsburg.de/beckmanf/sillab.git
```

If you have the repository already on your computer, just update to see if some changes are on the server that you have not.

```
git pull
```

#### Run the hugo test server

```
hugo serve
```

and open the [http://localhost:1313](http://localhost:1313) at port 1313 to view the website in test mode. You can quit the server with "CTRL-c".

# How to add or edit posts

Change the files in the "content" directory. The basic syntax is [markdown](https://docs.github.com/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) with some special parts like the frontmatter described at [hugos syntax](https://gohugo.io/content-management/formats/).

#### Frontmatter
Start the markdown file with a "toml" section limited by "+++" to configure some parameters. After the "toml" section the regular markdown starts.

```
+++
title = 'Getting started'
publishdate = 2024-03-17
eventdate = 2029-08-19
summary = "Paolo, Petja, Stefan und Tom haben in Doccione Tag und Nacht an den neuen Stücken gearbeitet"
image = "/img/doccione1.jpg"
caption = "Doccione in Italien"
bands = ['ShadesOfBlue']
+++

Here the markdown starts.
```

The parameters have the following meaning:

| Parameter | Meaning |
| :-------- | :------ |
| `title`     | The title of the page is shown in the link and as the first heading in the content |
| `publishdate` | The date when the article is published. The posts are sorted according to this date. When the date is in the future, the post will not be shown |
| `eventdate` | The date when this event will or did happen |
| `summary` | The summary is shown in the post preview list, e.g. on the homepage |
| `image` | The image is shown in the post preview as a thumbview and bigger if you look at the full post |
| `caption` | This caption is used for the image as a figure caption |
| `bands` | This should be "Hawaiians", "ShadesOfBlue" or "SnoopAndTheGang". The band is shown in the preview near the date |

#### Add an image
In the markdown file add the following code

```
![schiffe](/img/schiffe.jpg "Schiffe in Italien")
```

The first word "schiffe" is a textual description of the image. It will normally not be visible. The part "Schiffe in Italien" will be the caption of the image.

Copy the file "schiffe.jpg" to the [assets/img](https://caeis.etech.fh-augsburg.de/beckmanf/sillab.git/tree/assets/img) directory. The image file will the be resized by hugo and copied to the final "public/img" directory.

#### Add an audio file

To add an mpeg4 audio file use the following code in the markdown file:



```
{{</* audio 
    src="/audio/LandUnter.m4a" 
    caption="ShadesOfBlue, Land Unter"
*/>}}
```


in the markdown file. Copy the audio file to "static/audio" directory. It will be copied by hugo to the final "public/audio" directory.

#### Add a video file

Use the following code to add a mpeg4 video file to the markdown file:

```
{{</* video 
    src="/video/flug.mov"
    caption="Flugzeug"
*/>}}
```

Copy the video file to the "static/video" directory.

# How to upload website to the server

#### Build the website

The "hugo build" command will compile the static html files and copy them together with the media data to the "public" directory. That directory then has to be copied to the webserver.

```
hugo build
```

#### Upload the files to the webserver

Copy the files in the folder "public" via "rsync" to the webserver.

```
/opt/homebrew/bin/rsync -rphv --chmod=D775,F664 --groupmap=*:www --delete  public/ silke@fredowski.duckdns.org:/var/www
```

#### Upload your changes to the git repository

Assume you have added a post by creating a new markdown file "posts/shadesofblue/220631-lecoq.md" with a new image file "assets/img/silkepiano.jpg". You can see which files you have changed and which you have added with:

```
git status
```

which will tell you that there are these two new "untracked" files. You add the two new files to the next "commit" with

```
git add assets/img/silkepiano.jpg
git add posts/shadesofblue/220631-leqoq.md
```

You do the same when you just change files. Then you make a commit with

```
git commit
```

which opens an editor. You write a comment what this commit is about like "added show in Le Coq". When you exit the editor, the commit is added to the git database. See:

```
git log
```

Now you upload the changes to the git server with

```
git push
```

You can then see your commit on the server

https://caeis.etech.fh-augsburg.de/beckmanf/sillab.git/log/