My notes about Hextra Theme

Useful links and references I have used:

• Hextra. Getting Started
• Hextra theme for hugo
• Markdown tutorial ES
• CommonMark Spec
• Markdown Tables Generator>

Organizing files

By default, Hugo searches for Markdown files in the content directory and the structure of this directory determines the final output structure. Here is my proposal.

Images

I have decided to organise all the images corresponding to each week in a separate folder.
For many Hugo themes, including Hextra, static files like images are placed in the static/ folder
If I place an image in static/images/About_01.jpg the accesible URL in the browser is /images/About01.jpg

Video

All videos will be placed in a folder corresponding to each week.
<video src="../../assignments/week-02/video-02/basicbench.mp4" width="320" height="240" type="video/mp4"></video>

Another optional atributes:
controls width=100% loop muted autoplay

Layouts

Three layouts for diferent content types:
docs content/docs Structured information
blog content/assigments and content/FinalDiary for publish the work done each week. With listing and detailed article views
default All other directories single-page article view without sidebar

Inline Code

.content code:not(.code-block code) {
  color: #c97c2e;
}
 # `One line 'code`
 #```  multiples lines of code ```

Chroma Style Gallery

CSS

To add custom CSS I need to create a file assets/custom.css

table {
    background-color: transparent; /* transparent background */
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 3px solid #ddd;
    padding: 8px;
}

th {
    background-color: #607c98af; /*  #607c98af my personal blue for headers */
}

Configuration

Top right menu under is define under the menu.main section in the config file: hugo.yaml

Footer

I must create a file called i18n/en.yaml

copyright: "© [Pepe Vázquez Fab Academy 2025](https://fabacademy.org/) 
- Creative Commons Atribution Non Comercial 
- Powered by [Hextra](https://github.com/imfing/hextra)"

Favicon

I have placed icon files under the static folder to override the default favicons from the theme. Favicon created with favicon.io from png file.

Tips

Markdown color text

<span style="color:#00FF00">*more</span>\
<span style="color:#FF0000">remotes/origin/HEAD -> origin/main\
remotes/origin/main</span>

*more
remotes/origin/HEAD -> origin/main
remotes/origin/main

Alerts

> [!NOTE]
> Useful information that users should know, even when skimming content.
> [!TIP]
> Helpful advice for doing things better or more easily.
> [!IMPORTANT]
> Key information users need to know to achieve their goal.
> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.
> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.
> Text for Callouts.

Callout Shortcode