Home |

Getting Started

Sat, 17 Feb 2024 00:00:00 +0000

Quick Start from Template

Create a site

Configure your new site

Add your content

Publish your site

Your site will automatically publish ~1-5 minutes after you commit (save) changes to files in your GitHub repository.

Let’s customize your new site:

Project Structure Configuration Create content

Customizing Hugo

Mon, 01 Jan 0001 00:00:00 +0000

View the full docs at

Project Structure

Mon, 01 Jan 0001 00:00:00 +0000

Folder Structure

There are 4 main folders for Hugo-based sites:

content/ for your Markdown-formatted content files (homepage, etc.)
- _index.md the homepage (Hugo requires that the homepage and archive pages have an underscore prefix)
assets/
- media/ for your media files (images, videos)
  - icons/custom/ upload any custom SVG icons you want to use
config/_default/ for your site configuration files
- hugo.yaml to configure Hugo (site title, URL, Hugo options, setup per-folder page features)
- module.yaml to install or uninstall Hugo themes and plugins
- params.yaml to configure Hugo Blox options (SEO, analytics, site features)
- menus.yaml to configure your menu links (if the menu is enabled in params.yaml)
- languages.yaml to configure your site’s language or to set language-specific options in a multilingual site
static/uploads/ for any files you want visitors to download, such as a PDF
go.mod sets the version of Hugo themes/plugins which your site uses

Hugo File Naming Convention

Hugo gives us two options to name standard page files: as TITLE/index.md or TITLE.md where TITLE is your page name.

The page name should be lowercase and using hyphens (-) instead of spaces.

Both approaches result in the same output, so you can choose your preferred approach to naming and organizing files. A benefit to the folder-based approach is that all your page’s files (such as images) are self-contained within the page’s folder, so it’s more portable if you wish to share the original Markdown page with someone.

The homepage is a special case as Hugo requires the homepage and listing pages to be named _index.md.

The docs navigation is automatically generated based on the content in the docs/ folder and is sorted alphabetically.

The order of pages can be changed by adding the weight parameter in the front matter of your Markdown files.

In the example below, the example.md page will appear before the test.md page as it has a lower weight:

Page example.md:

---
title: My Example
weight: 1
---

Page test.md:

---
title: My Test
weight: 2
---

Configuration

Mon, 01 Jan 0001 00:00:00 +0000

The configuration of your site can be found in config/_default/.

Full Documentation

See

Links are automatically generated from the structure of your content directory. Simply add a folder to nest a page.

Extra Links

Additional links can be added under the sidebar section of your config/_default/menus.yaml:

menu:
 sidebar:
 - name: "Need help?"
 params:
 type: separator
 weight: 1
 - name: "A page"
 pageRef: "/page-filename-here"
 weight: 2
 - name: "An external link ↗"
 url: "https://hugoblox.com"
 weight: 3

A table of contents is automatically generated from the headings your Markdown file.

It can optionally be disabled by setting toc: false in the front matter of a page:

---
title: My Page
toc: false
---

참여 학생

Wed, 22 Apr 2026 00:00:00 +0000

⚡️ Turn Jupyter Notebooks into Blog Posts

Mon, 15 Jul 2024 00:00:00 +0000

As a researcher or data scientist, your work often lives in Jupyter Notebooks. But sharing those insights effectively usually means taking screenshots, messy copy-pasting, or exporting to PDF.

Hugo Blox changes that. With the {{< notebook >}} shortcode, you can render your actual .ipynb files directly as beautiful, interactive blog posts or project pages. Keep your code, outputs, and narrative in one place.

Table of Contents

Why publish notebooks?

Tip

Reproducible Research: By publishing the actual notebook, you allow others to download and run your code, verifying your results and building upon your work.

No more screenshots – Render crisp code and vector plots directly from your source.
Theme consistent – Notebooks automatically adapt to your site’s theme (including dark mode).
Flexible sourcing – Display notebooks from your assets/ folder, page bundles, or even directly from a remote GitHub URL.
Interactive – Users can copy code blocks or download the full notebook to run locally.

Example: Data Science Workflow

Below is a live example of a notebook rendered right here in this post. Notice how the markdown, code, and outputs (text, HTML, and JSON) are all preserved and styled.

Launch Readiness Analysis

Python · Kernel: Python 3 · nbformat 4.5 · 6 cells

Download notebook

Language: Python
Version: 3.11
Kernel: Python 3 python3
nbformat: 4.5
Authors: Ownable CMS

Markdown

Ship Notebook Stories in Minutes

Hugo Blox Notebook renderer turns your .ipynb experiments into beautiful long-form posts. Use this sample to see how markdown, code, and outputs flow together.

Markdown

Drop notebooks inside assets/notebooks/ (or import them as page resources).
Reference them with {{</* notebook src="your.ipynb" */>}}.
Control code, outputs, metadata badges, and download links via shortcode params.

In [1]

demo quickstart

1
2
3
4
5
6


import math
accuracy = 0.982
print("Collecting data...")
print("Training notebook-ready block...")
print("Done!")
accuracy

Collecting data...
Training notebook-ready block...
Done!

0.982

In [2]

1
2


from IPython.display import HTML
HTML("<div style='font-family:Inter,ui-sans-serif;'><strong>Launch Readiness:</strong> <span style='color:#22c55e;'>98.2% confidence</span><br><em>Notebook blocks are theme-aware and dark-mode friendly.</em></div>")

Launch Readiness: 98.2% confidence
Notebook blocks are theme-aware and dark-mode friendly.

In [3]

metrics

1
2
3
4
5
6
7
8


metrics = {
 'metrics': {
 'engagement_rate': 0.73,
 'read_time_minutes': 4.6,
 'subscribers': 1280
 }
}
metrics

{
"metrics": {
"engagement_rate": 0.73,
"read_time_minutes": 4.6,
"subscribers": 1280
}
}

Markdown

Tip: Pair this block with Call-to-Action cards or the Embed shortcode to link to GitHub repos, datasets, or ARXIV preprints.

How to add a notebook

Save your notebook. Place your .ipynb file in assets/notebooks/ (for global access) or inside a page bundle (like content/blog/my-post/analysis.ipynb).
Add the shortcode. In any Markdown page, simply use: {{< notebook src="analysis.ipynb" >}}
Customize. You can hide code cells for non-technical audiences (show_code=false) or just show the output (show_outputs=true).

Important

Hugo Blox respects your privacy. Notebook rendering happens statically at build time—no third-party services required.

Next steps

Try it out: Drop one of your existing notebooks into this site and see how it looks.
Link your papers: Use the Embed shortcode to link your notebook to your latest arXiv preprint or GitHub repository.
Get help: Join the community on or check the .

Happy researching! 🚀

Example Talk: Recent Work

Mon, 01 Jan 2024 00:00:00 +0000

Example Talk

Dr. Alex Johnson · Meta AI

Research Overview

Multimodal LLMs
Efficient training
Responsible AI

Code & Math

def score(x: int) -> int:
 return x * x

$$ E = mc^2 $$

Dual Column Layout

Left Column

Point A
Point B
Point C

Right Column

Detail 1
Detail 2
Detail 3

Main Content (2/3 width)

This column takes up twice the space of the right column.

def example():
 return "code works too"

Note
Key points in smaller column

Image + Text Layout

Results

95% accuracy
10x faster inference
Lower memory usage

Breakthrough!

Speaker Notes

Press S to open presenter view with notes!

This slide has hidden speaker notes below.

Note:

This is a speaker note (only visible in presenter view)
Press S key to open presenter console
Perfect for remembering key talking points
Can include reminders, timing, references
Supports Markdown formatting too!

Progressive Reveals

Content appears step-by-step:

First point appears Then the second point Finally the conclusion This one can be highlighted!

Note: Use fragments to control pacing and maintain audience attention. Each fragment appears on click.

Diagrams with Mermaid

graph LR A[Research Question] --> B{Hypothesis} B -->|Valid| C[Experiment] B -->|Invalid| D[Revise] C --> E[Analyze Data] E --> F{Significant?} F -->|Yes| G[Publish] F -->|No| D

Perfect for: Workflows, architectures, processes

Note: Mermaid diagrams are created from simple text. They’re version-controllable and edit anywhere!

Research Results

Model	Accuracy	Speed	Memory
Baseline	87.3%	1.0x	2GB
Ours (v1)	92.1%	1.5x	1.8GB
Ours (v2)	95.8%	2.3x	1.2GB

Key Finding: 8.5% improvement over baseline with 40% memory reduction

Note: Tables are perfect for comparative results. Markdown tables are simple and version-control friendly.

Custom Backgrounds

This slide has a blue background!

You can customize:

Background colors
Background images
Gradients
Videos (yes, really!)

Use {{< slide background-color="#hex" >}}

There’s more content below! ⬇️

Press the Down Arrow to see substeps.

Note: This demonstrates Reveal.js’s vertical slide feature. Great for optional details or deep dives.

Substep 1: Details

This is additional content in a vertical stack.

Navigate down for more, or right to skip to next topic →

Substep 2: More Details

Even more detailed information.

Press Up Arrow to go back, or Right Arrow to continue.

Citations & Quotes

“The best way to predict the future is to invent it.”

— Alan Kay

Or reference research:

Recent work by Smith et al. (2024) demonstrates that Markdown-based slides improve reproducibility by 78% compared to proprietary formats¹.

Media: YouTube Videos

Note: Embed YouTube videos with just the video ID. Perfect for demos, tutorials, or interviews.

Media: All Options

Embed various media types with simple shortcodes:

YouTube: {{< youtube VIDEO_ID >}}
Bilibili: {{< bilibili id="BV1..." >}}
Local videos: {{< video src="file.mp4" controls="yes" >}}
Audio: {{< audio src="file.mp3" >}}

Perfect for demos, interviews, tutorials, or podcasts!

Note: All media types work seamlessly in slides. Just use the appropriate shortcode.

Interactive Elements

Try these keyboard shortcuts:

→ ← : Navigate slides
↓ ↑ : Vertical navigation
S : Speaker notes
F : Fullscreen
O : Overview mode
/ : Search
ESC : Exit modes

Hidden Slide Demo (Inline Comment)

This slide is hidden using the  comment method.

Perfect for:

Speaker-only content
Backup slides
Work-in-progress content

Note: This slide won’t appear in the presentation but remains in source for reference.

Thanks

Questions?

🌐 Website:
🐦 X/Twitter:
💬 Discord:
⭐ GitHub:

All slides created with Markdown • No vendor lock-in • Edit anywhere

Note: Thank you for your attention! Feel free to reach out with questions or contributions.

🎨 Branding Your Slides

Add your identity to every slide with simple configuration!

What you can add:

Element	Position Options
Logo	top-left, top-right, bottom-left, bottom-right
Title	Same as above
Author	Same as above
Footer Text	Same + bottom-center

Edit the branding: section in your slide’s front matter (top of file).

📁 Adding Your Logo

Place your logo in assets/media/ folder
Use SVG format for best results (auto-adapts to any theme!)
Add to front matter:

branding:
 logo:
 filename: "your-logo.svg" # Must be in assets/media/
 position: "top-right"
 width: "60px"

Tip: SVGs with fill="currentColor" automatically match theme colors!

📝 Title & Author Overlays

Show presentation title and/or author on every slide:

branding:
 title:
 show: true
 position: "bottom-left"
 text: "Short Title" # Optional: override long page title

 author:
 show: true
 position: "bottom-right"

Author is auto-detected from page front matter (author: or authors:).

📄 Footer Text

Add copyright, conference name, or any persistent text:

branding:
 footer:
 text: "© 2024 Your Name · ICML 2024"
 position: "bottom-center"

Tip: Supports Markdown! Use [Link](url) for clickable links.

🔇 Hiding Branding Per-Slide

Sometimes you want a clean slide (title slides, full-screen images).

Add this comment at the start of your slide content:

<!-- no-branding -->
## My Clean Slide

Content here...

☝️ This slide uses  — notice no logo or overlays!

🔇 Selective Hiding

Hide just the header (logo + title):

<!-- no-header -->

Or just the footer (author + footer text):

<!-- no-footer -->

☝️ This slide uses  — footer still visible below!

✅ Quick Reference

Comment	Hides
`<!-- no-branding -->`	Everything (logo, title, author, footer)
`<!-- no-header -->`	Logo + Title overlay
`<!-- no-footer -->`	Author + Footer text

☝️ This slide uses  — logo still visible above!

🚀 Get Started

Copy this example’s front matter as a starting point
Replace logo with yours in assets/media/
Customize positions and text
Use  for special slides

Pro tip: Set site-wide defaults in config/_default/params.yaml under slides.branding!

Smith, J. et al. (2024). Open Science Presentations. Nature Methods. ↩︎

🎉 Easily create your own simple yet highly customizable blog

Fri, 27 Oct 2023 00:00:00 +0000

Welcome 👋

Table of Contents

Overview

The Hugo Blox website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site
The template can be modified and customised to suit your needs. It’s a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a no-code solution (write in Markdown and customize with YAML parameters) and having flexibility to later add even deeper personalization with HTML and CSS
You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more

Get Started

Quick Start Guide

New to Hugo Blox? Follow these steps to get your site up and running in minutes!

👉
📚
💬 or
🐦 Twitter: #MadeWithHugoBlox
💡
⬆️ Updating Hugo Blox? View the and

Important

Remember to backup your site before making major updates!

Crowd-funded open-source software

To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.

As a token of appreciation for sponsoring, you can unlock awesome rewards and extra features 🦄✨

Ecosystem

: Automatically import publications from BibTeX

Inspiration

are building with this template.

Features

Enhanced Markdown Support

Hugo Blox now supports GitHub and Obsidian-style callouts! Use standard Markdown alert syntax like > [!NOTE] for better portability.

Page builder - Create anything with no-code and
Edit any type of content - Blog posts, publications, talks, slides, projects, and more!
Create content in , , or
Plugin System - Fully customizable
Display Code and Math - Code syntax highlighting and LaTeX math supported
Integrations - , , Maps, Contact Forms, and more!
Beautiful Site - Simple and refreshing one-page design
Industry-Leading SEO - Help get your website found on search engines and social media
Media Galleries - Display your images and videos with captions in a customizable gallery
Mobile Friendly - Look amazing on every screen with a mobile friendly version of your site
Multi-language - 35+ language packs including English, 中文, and Português
Multi-user - Each author gets their own profile page
Privacy Pack - Assists with GDPR
Stand Out - Bring your site to life with animation, parallax backgrounds, and scroll effects
One-Click Deployment - No servers. No databases. Only files.

Version Requirements

The new Markdown alert syntax requires Hugo v0.132.0 or later. Make sure you’re using a compatible version!

Themes

Hugo Blox and its templates come with automatic day (light) and night (dark) mode built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.

for your site. Themes are fully customizable.

License

Released under the license.

Pandas

Thu, 26 Oct 2023 00:00:00 +0000

Flexible and powerful data analysis / manipulation library for Python, providing labeled data structures.

PyTorch

Thu, 26 Oct 2023 00:00:00 +0000

PyTorch is a Python package that provides tensor computation (like NumPy) with strong GPU acceleration.

scikit-learn

Thu, 26 Oct 2023 00:00:00 +0000

scikit-learn is a Python module for machine learning built on top of SciPy and is distributed under the 3-Clause BSD license.

🧠 Sharpen your thinking with a second brain

Thu, 26 Oct 2023 00:00:00 +0000

Create a personal knowledge base and share your knowledge with your peers.

Hugo Blox web framework empowers you with one of the most flexible note-taking capabilities out there.

Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.

Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.

Mindmaps

Hugo Blox supports a Markdown extension for mindmaps.

With this open format, can even edit your mindmaps in other popular tools such as Obsidian.

Simply insert a Markdown code block labelled as markmap and optionally set the height of the mindmap as shown in the example below.

Mindmaps can be created by simply writing the items as a Markdown list within the markmap code block, indenting each item to create as many sub-levels as you need:


```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- netlify
- netlify-cms
- slides
```

renders as

- Hugo Modules
- Hugo Blox
- netlify
- netlify-cms
- slides

Anh here’s a more advanced mindmap with formatting, code blocks, and math:


```markmap
- Mindmaps
- Links
- [Hugo Blox Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/kit)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```

renders as

- Mindmaps
- Links
- [Hugo Blox Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/kit)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

Highlighting

Highlight important text with mark:

<mark>Highlighted text</mark>

Callouts

Use (aka asides, hints, or alerts) to draw attention to notes, tips, and warnings.

Use the > [!NOTE] syntax to create a callout.

> [!NOTE]
> A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

renders as

Note

A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

Or use the warning callout type so your readers don’t miss critical details:

Warning

A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

📈 Communicate your results effectively with the best data visualizations

Wed, 25 Oct 2023 00:00:00 +0000

Hugo Blox is designed to give technical content creators a seamless experience. You can focus on the content and Hugo Blox handles the rest.

Use popular tools such as Plotly, Mermaid, and data frames.

Embed Rich Content

HuggingFace Model

google/embeddinggemma-300m

sentence-similarity

1.029325M

1.613k

HuggingFace Dataset

fka/prompts.chat

dataset

a.k.a. Awesome ChatGPT Prompts This is a Dataset Repository mirror of prompts.chat — a social platform for AI prompts. 📢 Notice This Hugging Face dataset is a mirror. For the …

41.056k

9.679k

GitHub Repository

kit

by HugoBlox • HTML

🧱 Describe your site, AI builds it, you own it as Markdown. Snap together Tailwind blocks like Lego — landing pages, blogs, portfolios, docs & more. No AI slop. Free to deploy anywhere 👇

2.936k

9.396k

academic blog documentation-tool +17

Custom embed with manual data

My Custom Resource

example.com

A great resource for learning

Custom Images

Embed beautiful images from any source with Hugo image processing (Unsplash, custom URLs, etc.):

Data Visualization Guide

example.com

Beautiful data visualization workspace

You can also add images to any platform embed:

plotly.py

by plotly • Python

The interactive graphing library for Python ✨

2.803k

762

18.47k

d3 dashboard declarative +11

Charts

Hugo Blox supports the popular format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!

Save your Plotly JSON in your page folder, for example line-chart.json, and then add the {{< chart data="line-chart" >}} shortcode where you would like the chart to appear.

Demo:

You might also find the useful.

Diagrams

Hugo Blox supports the Mermaid Markdown extension for diagrams.

An example flowchart:

```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

renders as

graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]

An example sequence diagram:

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```

renders as

sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

An example class diagram:

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```

renders as

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

An example state diagram:

```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

renders as

stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

Data Frames

Save your spreadsheet as a CSV file in your page’s folder and then render it by adding the Table shortcode to your page:

{{< table path="results.csv" header="true" caption="Table 1: My results" >}}

renders as

Table 1: My results
customer_id	score
1	0
2	0.5
3	1

Interactive Buttons

Add engaging call-to-action buttons to your data visualization posts:

Basic Buttons

Learn Plotly

{{< button url="/" >}}Contact Us{{< /button >}}

{{< button url="https://plotly.com/python/" new_tab="true" style="secondary" >}}Learn Plotly{{< /button >}}

Styled Buttons for Data Actions

View Dashboard

Download Data

View Source Code

{{< button url="#" style="primary" size="lg" align="center" icon="chart-bar" >}}View Dashboard{{< /button >}}

{{< button url="/data/results.csv" style="outline" icon="document-arrow-down" >}}Download Data{{< /button >}}

{{< button url="https://github.com/HugoBlox" new_tab="true" style="ghost" icon="arrow-top-right-on-square" icon_position="right" >}}View Source Code{{< /button >}}

Multiple Aligned Buttons

Try Jupyter

Open in Colab

{{< button url="https://jupyter.org/" new_tab="true" style="secondary" rounded="full" align="center" >}}Try Jupyter{{< /button >}}

{{< button url="https://colab.research.google.com/" new_tab="true" style="primary" rounded="full" align="center" icon="rocket-launch" >}}Open in Colab{{< /button >}}

👩🏼‍🏫 Teach academic courses

Tue, 24 Oct 2023 00:00:00 +0000

is designed to give technical content creators a seamless experience. You can focus on the content and the HugoBlox Kit which this template is built upon handles the rest.

Embed videos, podcasts, code, LaTeX math, and even test students!

On this page, you’ll find some examples of the types of technical content that can be rendered with Hugo Blox.

Citation

Here’s an example of citing a publication using the cite shortcode:

Dr. Alex Johnson (2019). An example preprint / working paper.

Preprint Code Slides Dataset Poster Source Document Video Custom Link Preprint

You can also use the default view by omitting the view parameter:

Dr. Alex Johnson

Equal contribution

, Robert Ford

Equal contribution

(2013). An example conference paper. In ICW.

PDF Code Dataset Slides Source Document Video PDF DOI

Video

Teach your course by sharing videos with your students. Choose from one of the following approaches:

Youtube:

{{< youtube D2vj0WcvH5c >}}

Bilibili:

{{< bilibili BV1WV4y1r7DF >}}

Video file

Videos may be added to a page by either placing them in your assets/media/ media library or in your , and then embedding them with the video shortcode:

{{< video src="my_video.mp4" controls="yes" >}}

Podcast

You can add a podcast or music to a page by placing the MP3 file in the page’s folder or the media library folder and then embedding the audio on your page with the audio shortcode:

{{< audio src="ambient-piano.mp3" >}}

Try it out:

Test students

Provide a simple yet fun self-assessment by revealing the solutions to challenges with the spoiler shortcode:

{{< spoiler text="👉 Click to view the solution" >}}
You found me!
{{< /spoiler >}}

renders as

👉 Click to view the solution

You found me 🎉

Math

HugoBlox Kit supports a Markdown extension for $\LaTeX$ math. Enable math by setting the math: true option in your page’s front matter, or enable math for your entire site by toggling math in your config/_default/params.yaml file:

features:
 math:
 enable: true

To render inline or block math, wrap your LaTeX math with $...$ or $$...$$, respectively.

Example math block:

$$
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
$$

renders as

$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left |\nabla F(\mathbf{x}{n}) - \nabla F(\mathbf{x}{n-1}) \right |^2}$$

Example inline math $\nabla F(\mathbf{x}_{n})$ renders as $\nabla F(\mathbf{x}_{n})$.

Example multi-line math using the math linebreak (\\):

$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$

renders as

$$ f(k;p_{0}^{}) = \begin{cases}p_{0}^{} & \text{if }k=1, \ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$

Code

HugoBlox Kit utilises Hugo’s Markdown extension for highlighting code syntax. The code theme can be selected in the config/_default/params.yaml file.

```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```

renders as

import pandas as pd
data = pd.read_csv("data.csv")
data.head()

Inline Images

{{< icon name="python" >}} Python

renders as

Python

Embed Media

Tue, 24 Oct 2023 00:00:00 +0000

is designed to give technical content creators a seamless experience. You can focus on the content and the HugoBlox Kit which this template is built upon handles the rest.

Embed videos, podcasts, code, LaTeX math, and even test students!

On this page, you’ll find some examples of the types of technical content that can be rendered with Hugo Blox.

Video

Teach your course by sharing videos with your students. Choose from one of the following approaches:

Youtube:

{{< youtube w7Ft2ymGmfc >}}

Bilibili:

{{< bilibili id="BV1WV4y1r7DF" >}}

Video file

Videos may be added to a page by either placing them in your assets/media/ media library or in your , and then embedding them with the video shortcode:

{{< video src="my_video.mp4" controls="yes" >}}

Podcast

You can add a podcast or music to a page by placing the MP3 file in the page’s folder or the media library folder and then embedding the audio on your page with the audio shortcode:

{{< audio src="ambient-piano.mp3" >}}

Try it out:

Test students

Provide a simple yet fun self-assessment by revealing the solutions to challenges with the spoiler shortcode:

{{< spoiler text="👉 Click to view the solution" >}}
You found me!
{{< /spoiler >}}

renders as

👉 Click to view the solution

You found me 🎉

Math

HugoBlox Kit supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the math option in your config/_default/params.yaml file.

To render inline or block math, wrap your LaTeX math with {{< math >}}$...${{< /math >}} or {{< math >}}$$...$${{< /math >}}, respectively.

Note

We wrap the LaTeX math in the Hugo Blox math shortcode to prevent Hugo rendering our math as Markdown. This callout now uses the standard Markdown alert syntax!

Example math block:

{{< math >}}
$$
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
$$
{{< /math >}}

renders as

$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$

Example inline math {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}} renders as $\nabla F(\mathbf{x}_{n})$ .

Example multi-line math using the math linebreak (\\):

{{< math >}}
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
{{< /math >}}

renders as

$$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$

Code

HugoBlox Kit utilises Hugo’s Markdown extension for highlighting code syntax. The code theme can be selected in the config/_default/params.yaml file.

```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```

renders as

import pandas as pd
data = pd.read_csv("data.csv")
data.head()

Inline Images

{{< icon name="python" >}} Python

renders as

Python

Experience

Tue, 24 Oct 2023 00:00:00 +0000

✅ Manage your projects

Mon, 23 Oct 2023 00:00:00 +0000

Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!

Ideation

Hugo Blox supports a Markdown extension for mindmaps.

Simply insert a Markdown code block labelled as markmap and optionally set the height of the mindmap as shown in the example below.

Mindmaps can be created by simply writing the items as a Markdown list within the markmap code block, indenting each item to create as many sub-levels as you need:


```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- netlify
- netlify-cms
- slides
```

renders as

- Hugo Modules
- Hugo Blox
- netlify
- netlify-cms
- slides

Diagrams

Hugo Blox supports the Mermaid Markdown extension for diagrams.

An example Gantt diagram:

```mermaid
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```

renders as

gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d

Todo lists

You can even write your todo lists in Markdown too:

- [x] Write math example
 - [x] Write diagram example
- [ ] Do something else

renders as

Write math example
- Write diagram example
Do something else

An example preprint / working paper

Sun, 07 Apr 2019 00:00:00 +0000

This work is driven by the results in my on LLMs.

Note

Create your slides in Markdown - click the Slides button to check out the example.

Add the publication’s full text or supplementary notes here. You can use rich formatting such as including .

Create Beautiful Presentations with Markdown

Sun, 01 Jan 2017 00:00:00 +0000

🎯 Why Markdown Slides?

True Presentation Freedom

Unlike PowerPoint or Keynote, your presentations are future-proof, portable, and completely under your control. No proprietary formats, no vendor lock-in, no subscription fees.

The Problem with Traditional Slides

PowerPoint & Keynote:

💸 Expensive licenses or subscriptions
🔒 Proprietary file formats (.pptx, .key)
💻 Platform-specific (Windows/Mac only)
📦 Large binary files
🚫 Difficult to version control
😰 Lost formatting when sharing

Google Slides:

☁️ Requires internet connection
🔐 Data stored on Google’s servers
📱 Limited offline editing
🎨 Formatting breaks when exporting
🔗 Dependency on Google’s platform

The Hugo Blox Solution

Markdown Changes Everything

Write your presentations in simple, human-readable Markdown. Edit anywhere, present anywhere, own forever.

✨ What You Get

🎨 Professional Design, Zero Effort

15+ Built-in Themes — Black, white, sky, league, and more
Syntax Highlighting — Beautiful code blocks with 50+ languages
Math Support — LaTeX equations render perfectly: $E = mc^2$
Responsive — Looks great on any screen size

📝 Write in Plain Text

## My Slide Title

- Point one
- Point two
- Point three

```python
def hello():
 return "World!"
```

---

That’s it! No complex UI, no formatting headaches.

🔄 Edit Anywhere, Anytime

Zero Lock-In

Your slides are just Markdown files. Edit them in:

Ownable CMS — Visual editing with live preview
VS Code — With Markdown extensions
Obsidian — Note-taking app that speaks Markdown
Typora — Minimal distraction writing
Any text editor — Even Notepad works!

Try Ownable CMS

🎯 Advanced Features

Dual Column Layouts:

<div style="display: flex; gap: 2rem;">
 <div style="flex: 1;">Column 1</div>
 <div style="flex: 1;">Column 2</div>
</div>

Fragment Animations:

{{< fragment >}}Appear on click!{{< /fragment >}}

Speaker Notes:

Note: Your private notes here
(visible in presenter view only)

Vertical Slide Stacks: Navigate down for sub-topics!

🚀 Getting Started is Easy

Create Your First Slide Deck in 3 Steps

Step 1: Create Your Slides

Create content/slides/my-talk/index.md:

---
title: "My Amazing Talk"
type: slides
slides:
 theme: black
---

# My Amazing Talk
### Your Name

---

## Main Points

- Point 1
- Point 2
- Point 3

---

## Thank You!

Step 2: Link to Your Event

In your event page (content/events/my-event/index.md):

---
title: "My Conference Presentation"
slides: "my-talk" # References the slides folder name
---

Step 3: Present!

Your slides are automatically:

✅ Embedded on the event page
✅ Available in fullscreen mode (click arrows-expand button)
✅ Accessible at a direct URL
✅ Keyboard-navigatable (→ ← keys)

Read Full Documentation

💎 Why Academics & Researchers Love It

Quote

“I can finally version control my presentations with Git, collaborate using GitHub, and never worry about formatting breaking again. Game changer for reproducible research!” — Dr. Xin Liu, MIT

Perfect for Research

Version Control — Track every change with Git
Collaboration — Use GitHub pull requests for slide reviews
Reproducibility — Slides are plain text, commit them with your code
Open Science — Share presentations on GitHub, no barriers
Citations — Include BibTeX references easily
Jupyter Integration — Embed notebooks and visualizations

Perfect for Teaching

Reusable Content — Mix and match slides across courses
Student Contributions — Students can submit slide PRs
Live Coding — Syntax highlighting for all languages
Interactive Examples — Embed interactive visualizations
Accessible — Keyboard navigation, screen reader friendly

🎬 See It In Action

Note

Try it now! The slides embedded above demonstrate all these features:

Code highlighting with Python
Mathematical equations with LaTeX
Dual column layouts (slides 4-6)
Fragment animations
Multiple themes

Click the arrows-expand fullscreen button (top right) to experience presentation mode!

Live Features to Try

Navigate: Use arrow keys (→ ←) or click controls
Fullscreen: Click the expand button to go fullscreen
Speaker Notes: Press S to open presenter view (try it!)
Overview: Press ESC to see all slides at once
Search: Press / to search slide content
Zoom: Alt+Click to zoom into details

external-link Open Slides in New Tab

🆚 Comparison

Feature	PowerPoint	Google Slides	Hugo Blox
Cost	$159.99/year	Free*	Free Forever
Format	Binary (`.pptx`)	Proprietary	Plain Markdown
Version Control	❌ Difficult	❌ Limited	✅ Git Native
Offline Editing	✅ Yes	⚠️ Limited	✅ Fully Offline
Platform Lock-in	⚠️ Microsoft	⚠️ Google	✅ None
Code Highlighting	⚠️ Basic	⚠️ Limited	✅ 50+ Languages
Math Equations	⚠️ Clunky	⚠️ Basic	✅ Full LaTeX
Portability	❌ Poor	❌ Requires Google	✅ Works Anywhere
Future-Proof	❌ Format changes	⚠️ API changes	✅ Plain Text Forever
Open Source	❌ No	❌ No	✅ Yes

Success

Hugo Blox wins on freedom, portability, and long-term sustainability.

🛠️ Advanced Capabilities

Code Blocks with Syntax Highlighting

import torch
import torch.nn as nn

class Transformer(nn.Module):
 def __init__(self, d_model=512, nhead=8):
 super().__init__()
 self.attention = nn.MultiheadAttention(d_model, nhead)

 def forward(self, x):
 return self.attention(x, x, x)[0]

Mathematical Equations

Display equations with LaTeX:

$$
\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t}
$$

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Dual Column Layouts

Perfect for before/after comparisons, code + explanation, or image + text:

<div style="display: flex; gap: 2rem;">
 <div style="flex: 1;">Left content</div>
 <div style="flex: 1;">Right content</div>
</div>

See slides 4-6 in the embedded presentation above for live examples!

🎓 For Educators: Teach the Future

Empower Your Students

Teaching with Hugo Blox means teaching modern, transferable skills:

Markdown (used everywhere: GitHub, Notion, Obsidian)
Version control (essential for careers)
Web technologies (HTML, CSS)
Reproducible science practices

Course Integration

courses/
├── ml-101/
│ ├── lecture-1/
│ │ ├── index.md (slides)
│ │ └── notes.md
│ ├── lecture-2/
│ │ └── index.md
│ └── _index.md

Each lecture gets its own slide deck, all version controlled, all editable by students as PRs.

🌍 Join the Community

Built by Academics, for Academics

Hugo Blox is used by researchers at:

🎓 Stanford, MIT, Harvard, Oxford, Cambridge
🏢 Google Research, Meta AI, OpenAI
🔬 CERN, NASA, NIH
🌐 Thousands of universities worldwide

Star on GitHub

Get Help & Connect

📚
💬
🐛
🐦

🚀 Ready to Create?

Start Building Beautiful Presentations Today

No installation required. No account needed. Just Markdown and your creativity.

Get Started Now

Try Ownable CMS

📖 Additional Resources

Templates & Examples

Tips & Tricks

Pro Tips for Better Presentations

Keep slides simple — one idea per slide
Use dual columns for comparisons
Add speaker notes with Note: prefix
Test presenter view before your talk
Use fragments to control pacing
Version control your slides with Git
Share source files for reproducibility

Have questions? Check out the or !

Want to contribute? Hugo Blox is open source! .

An example journal article

Tue, 01 Sep 2015 00:00:00 +0000

Note

Click the Cite button above to demo the feature to enable visitors to import publication metadata into their reference management software.

Note

Create your slides in Markdown - click the Slides button to check out the example.

Add the publication’s full text or supplementary notes here. You can use rich formatting such as including .

An example conference paper

Mon, 01 Jul 2013 00:00:00 +0000

Note

Click the Cite button above to demo the feature to enable visitors to import publication metadata into their reference management software.

Note

Create your slides in Markdown - click the Slides button to check out the example.

Add the publication’s full text or supplementary notes here. You can use rich formatting such as including .

Buttons

Mon, 01 Jan 0001 00:00:00 +0000

A modern, customizable button shortcode with gradient styling, icons, and smart link handling.

Basic Usage

Visit External Site

The above buttons are created with:

{{< button url="/contact" >}}Contact Us{{< /button >}}

{{< button url="https://example.com" new_tab="true" style="secondary" >}}Visit External Site{{< /button >}}

Style Variants

Primary (Default)

Primary Button

{{< button url="#" style="primary" >}}Primary Button{{< /button >}}

Secondary

Secondary Button

{{< button url="#" style="secondary" >}}Secondary Button{{< /button >}}

Outline

Outline Button

{{< button url="#" style="outline" >}}Outline Button{{< /button >}}

Ghost

Ghost Button

{{< button url="#" style="ghost" >}}Ghost Button{{< /button >}}

Sizes

Extra Large

{{< button url="#" size="sm" >}}Small Button{{< /button >}}
{{< button url="#" size="md" >}}Medium Button{{< /button >}}
{{< button url="#" size="lg" >}}Large Button{{< /button >}}
{{< button url="#" size="xl" >}}Extra Large{{< /button >}}

Alignment

Left (Default)

Left Aligned

Center

Center Aligned

Right

Right Aligned

{{< button url="#" align="left" >}}Left Aligned{{< /button >}}
{{< button url="#" align="center" >}}Center Aligned{{< /button >}}
{{< button url="#" align="right" >}}Right Aligned{{< /button >}}

With Icons

Icon Before Text

Download

Icon After Text

Continue

{{< button url="#" icon="arrow-down-tray" >}}Download{{< /button >}}
{{< button url="#" icon="arrow-right" icon_position="right" >}}Continue{{< /button >}}

Rounded Corners

Small Radius

Medium Radius (Default)

Medium Radius

Large Radius

Pill Shape

Pill Button

{{< button url="#" rounded="sm" >}}Small Radius{{< /button >}}
{{< button url="#" rounded="md" >}}Medium Radius{{< /button >}}
{{< button url="#" rounded="lg" >}}Large Radius{{< /button >}}
{{< button url="#" rounded="full" >}}Pill Button{{< /button >}}

Advanced Examples

Call-to-Action Button

Get Started Today

{{< button url="/signup" style="primary" size="lg" align="center" icon="rocket-launch" >}}Get Started Today{{< /button >}}

External Link with New Tab

View on GitHub

{{< button url="https://github.com/hugo-blox/kit" new_tab="true" style="outline" icon="arrow-top-right-on-square" icon_position="right" >}}View on GitHub{{< /button >}}

Download Button

Download PDF

{{< button url="/files/document.pdf" style="secondary" icon="document-arrow-down" rounded="full" >}}Download PDF{{< /button >}}

Parameters

Parameter	Type	Default	Description
`url`	string	`#`	Required. Button destination URL (internal or external)
`text`	string	Inner content	Button text (overrides shortcode content)
`new_tab`	boolean	`false`	Whether to open link in new tab
`style`	string	`primary`	Button style: `primary`, `secondary`, `outline`, `ghost`
`size`	string	`md`	Button size: `sm`, `md`, `lg`, `xl`
`align`	string	`left`	Button alignment: `left`, `center`, `right`
`icon`	string	-	Icon name from
`icon_position`	string	`left`	Icon position: `left`, `right`
`rounded`	string	`md`	Border radius: `sm`, `md`, `lg`, `xl`, `full`
`disabled`	boolean	`false`	Whether button should be disabled

Security Features

The button shortcode automatically handles security for external links:

External links get rel="noreferrer" attribute
External links opening in new tab get rel="noopener noreferrer"
Internal links opening in new tab get rel="noopener"

This ensures safe navigation while maintaining functionality.

Accessibility

The button shortcode includes built-in accessibility features:

Proper role="button" attribute
aria-label support
Keyboard focus indicators
High contrast focus rings
Disabled state handling

Callouts

Mon, 01 Jan 0001 00:00:00 +0000

Hugo Blox supports GitHub and Obsidian-style Markdown callouts for maximum compatibility and content portability.

Callouts are a useful feature to draw attention to important or related content such as notes, hints, or warnings in your articles.

Usage

Basic Callout Types

Hugo Blox supports all 15+ callout types from :

Information & Notes:

> [!NOTE]
> This is a note callout with important information that users should know.

Note

This is a note callout with important information that users should know.

> [!INFO]
> Alternative info callout - same styling as NOTE.

Info

Alternative info callout - same styling as NOTE.

> [!ABSTRACT]
> Use for abstracts, summaries, or TL;DR sections.

Abstract

Use for abstracts, summaries, or TL;DR sections.

Actions & Tasks:

> [!TODO]
> This is something that needs to be done.

Todo

This is something that needs to be done.

> [!TIP]
> Here's a helpful tip to make your workflow more efficient!

Tip

Here’s a helpful tip to make your workflow more efficient!

> [!SUCCESS]
> Great job! This operation completed successfully.

Success

Great job! This operation completed successfully.

Questions & Interactive:

> [!QUESTION]
> What do you think about this approach? Let us know!

Question

What do you think about this approach? Let us know!

> [!EXAMPLE]
> Here's a practical example of how to implement this feature.

Example

Here’s a practical example of how to implement this feature.

> [!QUOTE]
> "The best way to predict the future is to invent it." - Alan Kay

Quote

“The best way to predict the future is to invent it.” - Alan Kay

Warnings & Errors:

> [!WARNING]
> Be careful! This action might have unexpected consequences.

Warning

Be careful! This action might have unexpected consequences.

> [!CAUTION]
> Danger! This operation is irreversible and could cause data loss.

Caution

Danger! This operation is irreversible and could cause data loss.

> [!IMPORTANT]
> This is critical information that users must understand to proceed.

Important

This is critical information that users must understand to proceed.

> [!DANGER]
> This is extremely dangerous - proceed with extreme caution!

Danger

This is extremely dangerous - proceed with extreme caution!

> [!FAILURE]
> This operation failed. Check your configuration and try again.

Failure

This operation failed. Check your configuration and try again.

> [!BUG]
> Known issue: This feature doesn't work properly in Safari < 14.

Bug

Known issue: This feature doesn’t work properly in Safari < 14.

Custom Titles

You can customize the title of any callout:

> [!WARNING]+ Custom Warning Title
> This warning has a custom title instead of just "Warning".

Custom Warning Title

This warning has a custom title instead of just “Warning”.

Legacy Syntax (Deprecated)

The old shortcode syntax still works but shows a deprecation warning:

{{< callout note >}}
This still works but is deprecated. Use the Markdown syntax above!
{{< /callout >}}

CSS Customization

Hugo Blox generates callouts with semantic CSS classes and data attributes, making customization easy. Each callout has:

Base class: .callout
Type-specific data attribute: data-callout="note"
Component classes: .callout-icon, .callout-title, .callout-content, .callout-body

Custom CSS Example (add to your assets/css/custom.css):

/* Customize NOTE callouts */
.callout[data-callout="note"] {
 border-left-width: 8px;
 box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Make SUCCESS callouts pulse */
.callout[data-callout="success"] {
 animation: pulse 2s infinite;
}

/* Custom icon styling */
.callout-icon svg {
 transition: transform 0.2s;
}

.callout:hover .callout-icon svg {
 transform: scale(1.1);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
 .callout[data-callout="warning"] {
 background-color: rgb(92 25 2);
 border-color: rgb(245 158 11);
 }
}

This approach matches , ensuring your styles work across platforms.

Benefits of the New Syntax

Portable: Works with GitHub, Obsidian, and other Markdown editors
Standard: Uses widely-adopted Markdown callout syntax
Clean: No Hugo-specific shortcodes needed
Future-proof: Supported by the latest Hugo versions (0.132.0+)
Customizable: Semantic CSS classes and data attributes for easy styling
Complete: All 15+ Obsidian callout types supported
Multilingual: Callout titles are automatically translated based on your site’s language (and can be customized in the language packs)

Cards

Mon, 01 Jan 0001 00:00:00 +0000

A Hugo extension to create cards. Cards can be shown as links or as plain text.

Usage

Learn Shortcodes A card without an icon or link

is rendered by:

{{< cards >}}
{{< card url="../callout" title="Callout" icon="academic-cap" >}}
{{< card url="" title="A card without an icon" >}}
{{< /cards >}}

Options

Parameter	Description
`icon`	Name of the icon. Defaults to
`title`	Title heading for the card.
`subtitle`	Subtitle heading (supports Markdown).
`url`	URL

Internationalization (i18n)

Mon, 01 Jan 0001 00:00:00 +0000

Hugo Blox enables you to easily edit the interface text as well as translating your site into multiple languages using Hugo’s feature.

View the full docs at

Spoilers

Mon, 01 Jan 0001 00:00:00 +0000

A Hugo shortcode to toggle collapsible content.

Example

Click to view the spoiler

You found me!

Markdown is supported.

Usage

{{< spoiler text="Click to view the spoiler" >}}
This is the content of the details.
Markdown is **supported**.
{{< /spoiler >}}

Steps

Mon, 01 Jan 0001 00:00:00 +0000

Display a series of steps, such as for a tutorial.

Example

Step 1

The first step here…

Step 2

The second step here…

Step 3

The third step here…

Usage

Use the Markdown level-3 headings to represent step titles within the steps shortcode:

{{% steps %}}
### Step 1
The first step here...
### Step 2
The second step here...
### Step 3
The third step here...
{{% /steps %}}

소프트웨어

Mon, 01 Jan 0001 00:00:00 +0000

지진방재 연구에 활용되는 해석 소프트웨어의 종류와 용도에 대한 설명입니다.

Software

Perform 3D

▪ 사용용도: 구조물 비선형 해석 및 내진 성능 평가
▪ 제작회사: Computers & Structures
Used primarily in structural and earthquake engineering, PERFORM-3D is an advanced software dedicated to nonlinear analysis and Performance-Based Design (PBD). It is not a general-purpose design tool; instead, it focuses on simulating how complex structures behave under severe earthquake loading. Engineers use it to evaluate whether a building will meet specific safety criteria, such as collapse prevention, by accurately modeling the post-yield, inelastic behaviors of structural components.

ETABS

▪ 사용용도: 건축 구조물 통합 해석 및 설계
▪ 제작회사: Computers & Structures
ETABS is the industry standard for the structural analysis and design of commercial and residential buildings. Widely used in architectural and structural engineering, it is specifically optimized for multi-story building systems. It streamlines the complex modeling process for floors, shear walls, and steel frames. Engineers rely heavily on ETABS to analyze the effects of lateral loads, like wind and seismic forces, making it an essential tool for designing safe high-rise structures.

SAP2000

▪ 사용용도: 범용 유한요소 해석 및 설계
▪ 제작회사: Computers & Structures
Used in broad civil and structural engineering fields, SAP2000 is a highly versatile, general-purpose 3D finite element analysis (FEA) and design software. Unlike ETABS, which strictly focuses on buildings, SAP2000 is ideal for complex, non-traditional structures such as bridges, stadiums, dams, and industrial facilities. It offers a flexible modeling environment and powerful analytical engines, allowing engineers to perform both static and dynamic analyses for practically any type of structural system.

MIDAS

▪ 사용용도: 건축/토목 통합 구조 해석 및 최적 설계
▪ 제작회사: 마이다스아이티 (MIDAS IT)
MIDAS is a comprehensive software suite used extensively in civil and structural engineering globally. MIDAS Gen focuses on general building structures, while MIDAS Civil is highly specialized for bridge design and analysis. Known for its highly intuitive user interface and fast processing speed, it covers everything from basic structural analysis to optimal design detailing. It is widely favored by engineers for practical, day-to-day modeling, offering highly efficient workflows.

실물장비

Mon, 01 Jan 0001 00:00:00 +0000

지진방재 실험 및 구조물 계측에 활용되는 실물장비의 사양과 용도에 대한 설명입니다.

Instrument

이미지 준비 중

가속도 측정기 (ES-U2)

▪ 분 류: 계측 장비
▪ 모델명: ES-U2 (110260-08-PL)
▪ 사용용도: 지진동 및 구조물 진동 가속도 측정
고감도 가속도 센서로 지진 발생 시 구조물의 동적 응답을 정밀하게 기록하는 데 사용됩니다.

이미지 준비 중

전자계측기 (Netpod4003)

▪ 분 류: 데이터 수집 장치
▪ 모델명: Netpod4003
▪ 사용용도: 다채널 센서 데이터 로깅 및 분석
다양한 물리량 센서로부터 들어오는 신호를 디지털 데이터로 변환하여 수집하는 통합 계측 솔루션입니다.

이미지 준비 중

진동 분석기 (NI PXI 시스템)

▪ 분 류: 신호 처리 및 분석 장비
▪ 모델명: NI PXI-1042Q / 8106 (외 악세사리)
▪ 사용용도: 구조물 동특성 분석 및 고속 신호 처리
고성능 PXI 플랫폼을 기반으로 복잡한 진동 신호를 실시간으로 처리하고 구조 건전성을 모니터링하는 장비입니다.

현재 최신화 작업 진행 중..

외부 전문가 특강

Mon, 01 Jan 0001 00:00:00 +0000

외부 전문가 초청 특강의 주요 내용과 진행 사례를 소개합니다.

제1회 특강

항목	내용
강의명	내진설계 및 실무
일시	2025.12.06 (10:00 ~ 12:30)
장소	건축관 9층 창의설계세미나실

강의 개요

이 강의는 국내외 지진피해 사례를 통해 건축물의 내진설계에 필요한 핵심 개념을 이해하도록 한다. 지진의 기본 원리와 구조물의 거동 특성을 파악하여 지진피해의 주요 원인을 분석한다. 또한 내진보강의 기본 원리와 구조해석의 개념을 소개한다. 마지막으로 기존 건축물의 조사·평가·보강에 대한 기초적 이해를 통해 실무적 관점을 확립한다.

제2회 특강

항목	내용
강의명	최신 인공지능(ChatGPT) 기술의 건설 실무 적용 사례 및 도입 전략
일시	2026.03.16 (15:00 ~ 17:30)
장소	건축관 9층 창의설계세미나실

강의 개요

AI 모델을 ‘직접 만드는’ 시대에서, 기업의 데이터를 ‘구조화’하여 ‘질문하는’ 시대로의 패러다임 전환을 이해합니다.

인공지능의 개념을 엔지니어의 언어로 명확히 정의합니다.
실제 건축·구조 실무에서 거대언어모델(LLM)과 컴퓨터비전(CV) 기술을 어떻게 강력한 도구로 활용할 수 있는지 구체적인 시나리오와 로드맵을 살펴봅니다.

지진방재 마이크로전공 개설

Mon, 01 Jan 0001 00:00:00 +0000

지진방재 마이크로전공과목을 모두 이수한 학생들은 성적증명서 발급 시 하단에 이수 인증 내용이 표기됩니다.

개설 배경

행정안전부의 지진방재 전문인력 양성 사업에 선정(2025년 9월 ~ 2027년 8월)되어, 사업계획서에 따라 마이크로전공을 운영합니다. 본 사업은 한양대, 연세대, 숭실대, 강원대 4개교가 선정되었으며, 주관학과인 건축공학과 및 건설환경공학과 내에 대학원 내규에 따라 지진방재 마이크로전공을 설치하여 운영합니다.

운영 개요

항목	내용
운영 시작	2025년 9월 1일
이수 기준	12학점 이상 취득
세부 요건	내진공학 9학점 이상 + 방재안전 3학점 이상

개설 교과목

건축공학과

학수번호	이수구분	교과목명	교강사
ARE8089	전공선택	PS콘크리트특론	최창식
AMM8014	전공선택	건설경영세미나	김주형
AES8058	연구선택	건축공학자를위한영어논문작성법과연구윤리	Adam Turner
AES8039	전공선택	건축구법및공법연구세미나	조성은
AES8030	전공선택	건축구조물의진동제어	유은종
EEE0010	전공선택	건축물에너지소비분석	정재훈
AES8010	전공선택	공기환경특론	박준석
ARE8081	전공선택	구조신뢰성공학	이민정
AES8059	전공선택	소성및안정론	김응수
ARE6038	전공선택	친환경시멘트산학프로젝트I	배성철
AES8050	전공선택	프로젝트관리체계및일정관리	장대철

건설환경공학과

학수번호	이수구분	교과목명	교강사
CIV8109	전공선택	건설AI프로젝트특론	김진우
CIE9081	전공선택	건설프로젝트관리특론	서종원
CIV9085	전공선택	고급기초공학	추현욱
DME8007	전공선택	고체역학특론	박대효
CEE8004	전공선택	교량공학특론	최동호
CIV9081	전공선택	구조시스템식별	김동주
CIV9077	전공선택	대기제어공학	김기현
CIV8110	전공선택	도시홍수모델링	강석구
CIV8111	전공선택	디지털워터공학	김영모
CIV5055	전공선택	순환자원건설재료공학	유재석
CIV8112	전공선택	재난안전대응시스템공학	한상욱
CIV8113	전공선택	지반-구조공동최적설계	추현욱
CIV9105	전공선택	지반역학과수치해석	박두희
COE8026	연구필수	석사논문연구	강석구, 김영모, 서종원, 전종수, 최동호, 추현욱
COE8027	연구필수	박사논문연구1	김기현, 김영모, 박재우, 서종원, 전종수, 최동호, 김동주
COE8028	연구필수	박사논문연구2	추현욱

학술 발표

Mon, 01 Jan 0001 00:00:00 +0000

학술대회 발표 및 연구성과를 정리한 내용입니다.

국제 학술대회

2025

한상환, 조은선, 홍민국. Cyclic Performance of Steel Beam-Column Connections with Weak Panel Zones: Experimental and Numerical Study. ISSS-PSSC. (2025.10)
이건찬, 이창석, 전종수. Shape memory alloy jacket repair of reinforced concrete column for aftershock demand reduction. ISSS-PSSC. (2025.11)

국내 학술대회

2026

박성관, 이문석, 배백일, 최창식. “반복하중을 받는 삼중나노보강 콘크리트의 부착강도 평가.” 한국구조물진단유지관리공학회. (2026.04)
김정훈, 정희진, 이문석, 배백일, 최창식. “기둥-슬래브 접합부에 고성능 프리캐스트 적용이 뚫림전단강도에 미치는 영향 분석.” 한국구조물진단유지관리공학회. (2026.04)
정희진, 이문석, 배백일, 최창식. “강섬유 보강 콘크리트를 활용한 PC 보-기둥 연성 접합부의 에너지소산능력 평가.” 한국구조물진단유지관리공학회. (2026.04)
이두연, 한상환. “우리나라 지진 재해도 평가를 위한 진원 거리 결정 방법.” 대한건축학회. (2026.04)
유나영, 한상환. “기둥 전단강성이 골조의 횡변위에 미치는 영향 평가.” 대한건축학회. (2026.04)
김영우, 이건찬, 전종수. “형상기억합금 보강근을 이용한 철근콘크리트 원형 기둥의 XGBoost 기반 변위 저항성능 예측.” 한국지진공학회. (2026.03)
김재현, 이건찬, 전종수. “양방향 반복하중 경로에 따른 철근콘크리트 정사각형 기둥의 손상단계별 취약도 곡선 비교.” 한국지진공학회. (2026.03)
강재도, 유은종, 유지성, 허두봉. “건축물 지진취약성 간이평가 시트 고도화 및 시범실시.” 한국지진공학회. (2026.03)
장은석, 박두희. “국가지진위험지도 기반 UHRS 산정 방법론 구축.” 한국지반공학회. (2026.03)
장은석, 박두희, 이용희, 김학성, 박정선. “전단파 속도 주상도 및 동적특성곡선 무작위화 체계 구축.” 한국지진공학회. (2026.03)

2025

왕길환, 윤성환, 전종수. “지진 및 차량 충돌에 따른 교량 기둥 손상 예측 모델의 테이블 데이터 기반 성능 평가.” 한국콘크리트학회. (2025.11)
오상헌, 왕길환, 전종수. “머신러닝을 활용한 2경간 콘크리트 박스거더 교량의 신속한 지진 손상평가 방법.” 한국콘크리트학회. (2025.11) [포스터발표]
이부용, 유은종. “시스템식별과 영상기반 군중하중 추정을 통한 공연장의 동적응답 및 사용성 평가.” 한국지진공학회. (2025.09)
최소리, 유은종. “비선형정적해석시 다축가진 조합법의 적절성 검토.” 한국지진공학회. (2025.09)
강중헌, 유은종. “비정형 건물의 비틀림효과를 반영한 비구조요소의 설계지진하중 산정.” 한국지진공학회. (2025.09)

홍보용 배너 전시

Mon, 01 Jan 0001 00:00:00 +0000

홍보용 배너 전시 및 성과 확산 활동을 소개합니다.

전시 개요

항목	내용
설치 장소	한양대학교 건축관
설치 목적	행안부 지진방재 전문인력 양성사업 홍보 및 신입생 유치
설치 기간	2025.11.25 ~ 사업 종료시까지

전시 사진

[홍보용 배너]

[홍보용 배너 전시 ]

Home |

Getting Started

Quick Start from Template

Create a site

Configure your new site

Add your content

Publish your site

Next

Customizing Hugo

Project Structure

Folder Structure

Hugo File Naming Convention

Docs Navigation

Configuration

Full Documentation

Navigation

Menu

Left Sidebar

Extra Links

Right Sidebar

참여 학생

⚡️ Turn Jupyter Notebooks into Blog Posts

Why publish notebooks?

Example: Data Science Workflow

Ship Notebook Stories in Minutes

How to add a notebook

Next steps

Example Talk: Recent Work

Example Talk

Dr. Alex Johnson · Meta AI

Research Overview

Code & Math

Dual Column Layout

Left Column

Right Column

Main Content (2/3 width)

Sidebar (1/3 width)

Image + Text Layout

Results

Speaker Notes

Progressive Reveals

Diagrams with Mermaid

Research Results

Custom Backgrounds

Vertical Navigation

Substep 1: Details

Substep 2: More Details

Citations & Quotes

Media: YouTube Videos

Media: All Options

Interactive Elements

Hidden Slide Demo (Inline Comment)

Thanks

Questions?

🎨 Branding Your Slides

📁 Adding Your Logo

📝 Title & Author Overlays

📄 Footer Text

🔇 Hiding Branding Per-Slide

🔇 Selective Hiding

✅ Quick Reference

🚀 Get Started

🎉 Easily create your own simple yet highly customizable blog

Overview

Get Started

Crowd-funded open-source software

Ecosystem

Inspiration

Features

Themes

License

Pandas

PyTorch

scikit-learn

🧠 Sharpen your thinking with a second brain

Mindmaps

Highlighting

Callouts

Did you find this page helpful? Consider sharing it 🙌

📈 Communicate your results effectively with the best data visualizations