Docs > Manage content online.

Overview

Hugo, the popular static website generator, utilizes a specific folder structure that helps organize content and design elements of your website. Here is an overview of the basic folder structure:

Basic Folder Structure of Hugo

  1. content/

    • Contains the content files of your website, usually Markdown files.
    • Each subfolder represents a separate section or category of your website, such as posts/, blog/, about/.

  2. static/

    • This is where static files like images, JavaScript, CSS, and other assets are stored.
    • Files in this folder are copied directly into the root directory of the built website.

  3. layouts/

    • Contains the HTML templates for your website.
    • Here you define how your content is presented, including the main template, partial templates, shortcodes, and special templates for specific sections.

  4. archetypes/

    • Defines templates for new content files.
    • When you create a new content file, the default settings from here are adopted.

  5. themes/

    • This is where you can store themes that define the design of your website.
    • Each theme has its own version of the folders mentioned above (layouts, static, etc.).

  6. data/

    • For storing configuration files in YAML, JSON, or TOML format.
    • Useful for data that is used in templates, such as configuration settings or content elements.

  7. resources/

    • Hugo stores files generated during processing here, such as files created during image processing.
    • This folder is often ignored in .gitignore for Git projects.

  8. config.toml/config.yaml/config.json

    • Main configuration file(s) for your website.
    • Defines global settings such as title, language, URLs, and other parameters.

  9. public/

    • This folder is generated by Hugo when building the website.
    • Contains the finished HTML files and other assets that are uploaded to the web server.

  10. assets/

    • Contains files that are processed by Hugo’s assets pipeline (e.g., Sass files, JavaScript).
    • Allows the use of preprocessing features like minification or compilation.

Additional Notes

  • The structure can vary depending on the needs and complexity of your website.
  • Some directories, such as data/, resources/, or assets/, are optional and only needed if you use the corresponding functionalities.
  • It’s important to consult Hugo’s documentation to understand how these directories are used and how to best utilize them for your website.

Working Modes

With elFinder, a web-based file manager is integrated into our WebCMS, offering three working modes tailored to different user competencies:

  • the simple mode
  • the normal mode
  • the admin mode

These modes are designed to optimize the user experience based on the level of knowledge.

1. Simple Mode (Beginner)

Target Group: This mode is intended for beginners with basic knowledge of file managers.

Features and View: Users have access to a simplified folder structure. Only relevant folders for accessing dynamic content of the website, images, CSS, and JavaScript are displayed.

Advantages: This mode prevents misoperations by inexperienced users and facilitates navigation and understanding of the CMS’s basic functions.

2. Normal Mode (Regular Users)

Target Group: For users with advanced knowledge and is designed for regular use of the file manager.

Features and View: This mode offers an advanced folder structure. Users can create and manage folders in the folder for static content as well.

Advantages: Provides a balance between functionality and usability, ideal for daily work with files and folders.

3. Admin Mode (Advanced Users)

Target Group: Designed for advanced users and administrators with comprehensive knowledge of the file system and WebCMS.

Features and View: Offers full access to the folder structure of WebCMS.

Advantages: Maximum control and flexibility for experienced users who need to perform complex tasks and management duties.

Managing Files and Folders

Here is a basic guide on how to create, rename, delete, and upload files and folders with elFinder:

Access HugoCMS: Open your web browser and log in to HugoCMS on your server or web hosting. This is usually done by accessing your domain with appended ‘/edit/’.

The following description refers to the toolbar and the context menu with options that can be opened with a right-click.

1. Create a New File or Folder

Navigate to the desired directory: Select the directory where you want to create the file/folder. Create a new file: Look for an option or a button, usually labeled as “New File” or “New Folder”. Click on it. Enter a name: A dialog box appears where you can enter the name of