Manual of the shared folder

1. How to mount the shared folder

The shared folder can be mounted on you operating system from one of those protocols:

SMB / CIFS / Samba
SFTP, an extension of SSH

Mount with SMB / CIFS / Samba

On Windows

Open the File Explorer
In the left pane, right-click on “This PC”
In the context-menu, select “Add a network location”
Click Next in the Welcome window.
Click on the only option, “Choose a custom network location”
Enter the address of the remote shared folder in the form of //SERVER/SHARE

Where:

SERVER is the domain name of your server (e.g. mywebsite.com) or the IP adress of your server.

SHARE is the name of the remote SMB served folder to mount. It will be communicated by your administrator.

Choose a name for the network location, that is displayed in your File Explorer. A default name is suggested.
Click Finish and you should be able to use the shared folder.

More graphical explanations

Mount with SSH / SFTP

This section is in three parts:

We introduce your ssh details and your rights on the server.
We explain how to log on your server using an ssh client.
Then we explain how to mount the shared folder.

SSH credentials and your rights on the server

You can access your web server through an ssh connection with next credentials

key	sample value
login (remote user name)	client
host (domain name of your server)	yourwebsite.com
password	YOURPASSWORD
remote mount point (a folder on the server)	/pambda

Your administrator will send you these details.

Your rights on the server

folder	permission
yourwebsite-input	read/write
yourwebsite-input-edited	read

Log in through ssh

Ssh client on Windows

You should have an ssh client by default. Otherwise : Start > Parameters > Applications > optional applications > Add an app > OpenSSH client.

Ssh client on Linux and MacOS

The ssh client should be installed by default, otherwise install the openssh client.

Use the ssh client

Open a terminal. To open a terminal: Start > cmd.
Execute the command ssh client@yourwebsite.com
The first time you try to connect, you will be asked a yes/no question. Type yes to continue connecting and add yourwebsite.com to the list of known hosts.
When asked, enter your ssh password.
Your prompt (the beginning of the line) should become something like client@machine:~. This means that you are logged on the server !
On the server, check the permissions with ls -l /pambda

You should see something like

drwxrwxr-x  8 admin admin        4096 Dec 20 16:52  yourwebsite-input-edited
drwxrwxr-x  8 client client      4096 Dec 20 16:52  yourwebsite-input-prod
drwxrwxr-x  8 pambda pambda      4096 Dec 20 16:52  yourwebsite-output

This means that your user has proper permissions.

Disconnect from the server by closing the windows of the command line.

Mount your remote folder as a local folder

From Windows

Install SSHFS-Win utilities

Download and install next programs. After each download, execute the *.exe or *.msi file that fit the specifications of your system.

WinFsp: allows the creation of user mode file systems. (The equivalent of Linux’s FUSE on Windows)
SSHFS-Win: allows to mount a remote file system using SFTP. (equivalent of Linux’s SSHFS)
SSHFS-Win-Manager: a handy graphical manager for SSHFS-Win.

Mount the folder

Start SSHFS-Win-Manager
Add a connection and fill all the fields with your ssh credentials. (Here we take the previous sample values.)
1. We recommend to use
```
client@yourwebsite.com:22 /pambda
```
  as the “NAME”.
2. “IP/HOST” will be yourwebsite.com
3. “USER” will be client
4. for “AUTHENTICATION METHOD”, choose “PASSWORD”
5. “PASSWORD” will be YOURPASSWORD
6. “PATH” will be /pambda
7. Keep the “DRIVE LETTER” suggested by SSHFS-Win-Manager
8. Save
Click on the connection icon
Click on the folder icon

You should see the content of the shared folder. You can now read and modify the content of your folder as a local folder !

From Linux

On most distributions

Add this line to the file /etc/fstab

client@yourwebsite.com:/pambda /yourwebsite.com/pambda fuse.sshfs allow_other,_netdev,noauto,x-systemd.automount,x-systemd.idle-timeout=0,comment=systemd.automount,transform_symlinks,follow_symlinks 0 2

Then

systemctl daemon-reload
systemctl restart yourwebsite.com-pambda.automount

(Depending on the name of the mount in fstab, your service might have a different name. You can list all services for automounts with systemctl list-unit-files --type automount)

After this, the shared folder should be mounted on your system, at /yourwebsite.com/pambda.

2. Shared Folder Organization

Initial files

We list here some files at the root of the shared folder.

index.ext: This file defines the home webpage of your website. When someone goes to the URL https://yourwebsite.com, he will see this webpage first. (Replace the extension “ext” with the extension of your chosen file format.)

The name of this file, “index”, is an old convention in web development

favicon.ico: It is a small image that is displayed in web browser tabs. Most of the time it’s the logo of your website.

You can use a generator of favicon online.

.fonts.ttf: A file with character fonts that can be used on your website.

You can preview and download many fonts at fontsquirrel.com.

config-client.json: A configuration file in the json format. See the Configuration File section for more details about this file.
.COMPONENT.ext: Depending on the theme chosen in the configuration file, you will have to define the components of your theme.

At the root of the shared folder, the files and the folders — that define the theme and the components — start with a dot.

Some examples of components:

.header.ext (usually header.html) defines the header (above the navigation bar)
.navbar.ext defines your navigation bar (below the header). It is roughly a bulleted list that defines the links in the navigation bar.
.footer.ext defines the footer, at the bottom of your site
.sidebar.ext is needed if you have chosen the “sidebar” theme. It defines the content of the sidebar: a panel on the left side of your webpage, that will be shown on all your webpages.

Component files

Components of your website like the navigation bar, the footer, the sidebar (if any), etc. are defined from your files too.

file example	corresponding webpage component
html file for the header	this webpage header, above the navigation bar
markdown file for the navigation bar	this navigation bar, below the header

Theme configuration

The configuration file is mostly a list of “key”: “value”

{
    "theme": "default",
    "colorNavBar": "#060654",
    "colorNavBarHover": "#ec6f1d",
    "colorNavBarText": "#ffffff",
    "colorFooter": "#060654",
    "colorHamburgerMenu": "#ec6f1d",
    "gapBetweenPara": "1em",
    "fontSize": "1rem",
    "navBarFontSize": "1.2rem",
    "lineHeight": "1.5",
    "allHeadersInclude": "",
    "displayFigCaption": false,
    "fontFamily": "arial, sans-serif"
}

Available themes:

default: same theme as pambda.com.
sidebar: with a left panel (the sidebar), that you can define using the .sidebar.ext component file.
custom: use your own theme !

With the custom theme, the other options of the configuration file have no meaning anymore.

Colors are defined with one of the CSS syntaxes.

Lengths too are defined with one of the CSS syntaxes and thus allow different units of measurement.

Some values are booleans and allow either true or false.

All keys have default values. If you omit them, the default values will be used.

The custom theme

The custom theme use the special folder at the root of the shared folder, named .templates. In it, the user has a total control of the html files, css files and javascript files that determinate the framework the website. More information on this soon. The example of shared folder below, use a custom theme.

Example of shared folder

Take inspiration from the input folder of pambda.com.