## File: README.md

# [The Academic CV That Gets You Hired](https://github.com/HugoBlox/hugo-theme-academic-cv)

[](https://hugoblox.com/templates/academic-cv?utm_source=github&utm_medium=readme&utm_content=preview)




<h1 align="center">The Portfolio That Works While You Sleep</h1>









---

## Why This Template?

Most academic CVs are static PDFs that get lost in the pile. This is an **always-on portfolio** that works 24/7 to advance your career:

- **Students & grads** applying to top labs and industry roles — stand out with a living portfolio, not a flat PDF
- **Researchers** who want a citable online presence with publications, projects, and talks in one place
- **Faculty & PIs** showcasing their lab, group news, and team members
- **Anyone with publications** who wants auto-imported citations from BibTeX/DOI without manual formatting

> *"My citations went up 3x after switching to this template. Colleagues started finding my work through Google Scholar links back to my site. The BibTeX auto-sync is a lifesaver."*
> — **Dr. Li Zhang**, AI Research Scientist

> *"I set this up during a weekend and my PhD students had their profiles live by Monday. They just edit Markdown — no tickets to IT, no WordPress logins."*
> — **Prof. Sarah Chen**, Computer Science, ETH Zürich



---

## Features

| Feature | Benefit |
| :--- | :--- |
| **BibTeX / DOI auto-import** | Drop in a `.bib` file — publication pages generated automatically with proper citations. |
| **Jupyter & RMarkdown** | Publish `.ipynb` notebooks as beautiful posts — code, outputs, and narrative intact. |
| **LaTeX math** | Native rendering for equations and technical writing. |
| **Markdown slides** | Present with reveal.js — math, syntax highlighting, diagrams, speaker notes. |
| **SEO & AI-ready** | Optimized for search engines and LLMs — your work gets found, cited, and recommended. |
| **AI page generation** | Describe what you need to [Hugo Chat](https://hugo.chat/?utm_source=github&utm_medium=readme&utm_content=features_academic-cv) — get structured pages with correct front matter instantly. |
| **Visual editor** | Drag-and-drop blocks in VS Code with [Ownable CMS](https://marketplace.visualstudio.com/items?itemName=ownable.ownable). No coding needed. |
| **Plain Markdown** | Every file is human-readable. No database, no lock-in, take your content anywhere. |
| **Free hosting** | Deploy to GitHub Pages, Netlify, Vercel, or Cloudflare — all free tier. |

---

## 🚀 Get Started

### Step 1: Deploy Your Site

**Option A: Launch in browser** (fastest — no install needed)

> [!TIP]
> Deploy a live site in 60 seconds — no software to install:
> [**Deploy Academic CV free**](https://hugoblox.com/templates/academic-cv?utm_source=github&utm_medium=readme&utm_content=get_started)

**Option B: Use the CLI**

```bash
# Requires Hugo Extended & Node.js
npx hugoblox create site --template academic-cv
```

### Step 2: Customize With AI + Visual Editing



| **✨ Hugo Chat** — AI customization

Tell Hugo Chat what you want in plain English. It generates structured pages with the right front matter, shortcodes, and blocks for this template.

> *"Add a publications page with my 2024 papers from this BibTeX file"*

[**Try Hugo Chat — free**](https://hugo.chat/?utm_source=github&utm_medium=readme&utm_content=step2_academic-cv) | **Ownable CMS** — visual editing in VS Code

1. Install [Ownable CMS](https://marketplace.visualstudio.com/items?itemName=ownable.ownable)
2. Open your project in VS Code
3. Click the Ownable icon to start editing visually |
| --- | --- |




*Ownable CMS: Drag-and-drop page builder inside VS Code.*

> [!NOTE]
> **New to Hugo?** No problem. You don't need to know Hugo — edit visually or write Markdown. Hugo is the engine under the hood that makes your site fast, secure, and free to host. [Learn more →](https://docs.ownable.dev/?utm_source=github&utm_medium=readme&utm_content=docs_academic-cv)

---

## 💎 Go Premium

Love the free version? **Academic CV Pro** and **Resume Pro** take it further:

- Premium designs that make an unforgettable first impression
- Advanced timeline and layout options
- Full-featured course/lecture sections
- Remove attribution, priority support

| | **Academic CV** (Free) | **Academic CV Pro** |
| :--- | :---: | :---: |
| Design | Professional & clean | **Premium designs** |
| Layouts | Standard sections | **Advanced timelines** |
| Courses/lectures | Basic | **Full-featured** |
| Support | Community | **Priority** |



---

## 🏆 Why HugoBlox?

> *Why not just use WordPress, Webflow, or an AI builder like Lovable?*

| | **AI builders** (Lovable, v0) | **CMS platforms** (WordPress, Webflow) | **HugoBlox** |
| :--- | :---: | :---: | :---: |
| AI generates your pages | Yes | No | **Yes** |
| You own the output as readable files | No — React code | No — database | **Yes — Markdown** |
| Free to host forever | No | No | **Yes** |
| Human-editable without the tool | Barely | No | **Yes — it's Markdown** |
| Open source | No | No | **Yes — MIT licensed** |

> [!IMPORTANT]
> Your content is plain Markdown files. No lock-in, no database, no vendor dependency. If you ever want to leave, take your files and go.

---

## FAQ


**Do I need to know Hugo?**
No. Edit visually with Ownable CMS or write Markdown. Hugo is the build engine — you don't need to touch it.



**Can I import my existing publications?**
Yes. Drop a BibTeX file and publication pages are generated automatically with proper citations, metadata, and links.



**Can I host for free?**
Yes. GitHub Pages, Netlify, Vercel, and Cloudflare Pages all have free tiers for static sites.



**Can I migrate my content later?**
Yes. Your site is just Markdown files in a folder. Copy them anywhere.



**What's Hugo Chat?**
An AI assistant trained on Hugo and HugoBlox docs. Describe what you want and it generates the right pages with correct front matter. [Free to try.](https://hugo.chat/?utm_source=github&utm_medium=readme&utm_content=faq_academic-cv)



**Can I cancel Pro anytime?**
Yes. No questions asked.


---

<h2 align="center">🚀 Ready to launch?</h2>





---

## Community & Support

- 💬 [**Discord**](https://discord.gg/z8wNYzb) — ask questions, share your site
- 📚 [**Docs**](https://docs.ownable.dev/?utm_source=github&utm_medium=readme&utm_content=community_academic-cv)
- ⭐ [**Star HugoBlox**](https://github.com/HugoBlox/kit) — help others find it
- 🐦 [**Follow on X**](https://x.com/GoOwnable)

### Sponsors

[**❤️ Sponsor on GitHub**](https://github.com/sponsors/gcushen) | [**🏢 Become a Partner**](https://github.com/sponsors/gcushen)

---

Copyright 2016-present [**Lore Labs**](https://lore.tech/?utm_source=github&utm_medium=readme).
Released under the [MIT License](./LICENSE.md).

---

## File: content/authors/_index.md

---
# To publish author profile pages, remove all the `build` and `cascade` settings below.
build:
  render: never
cascade:
  build:
    render: never
    list: always
---

---

## File: content/blog/data-visualization/index.md

---
title: 📈 Communicate your results effectively with the best data visualizations
summary: Use popular tools such as HuggingFace, Plotly, Mermaid, and data frames.
date: 2023-10-25
authors:
  - me
tags:
  - Hugo
  - Hugo Blox
  - Markdown
cover:
  image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
  position:
    x: 50
    y: 40
  overlay:
    enabled: true
    type: "gradient"
    opacity: 0.4
    gradient: "bottom"
  fade:
    enabled: true
    height: "80px"
  icon:
    name: "✨"
image:
  caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
---

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

{{< embed platform="huggingface" resource="google/embeddinggemma-300m" type="model" >}}

HuggingFace Dataset

{{< embed platform="huggingface" resource="fka/awesome-chatgpt-prompts" type="dataset" >}}

GitHub Repository

{{< embed platform="github" resource="HugoBlox/kit" type="repo" >}}

Custom embed with manual data

{{< embed url="https://example.com" title="My Custom Resource" description="A great resource for learning" >}}

### Custom Images

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

{{< embed url="https://example.com" title="Data Visualization Guide" description="Beautiful data visualization workspace" image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=800&h=600&auto=format&fit=crop" width="800" height="600" quality="90" >}}

You can also add images to any platform embed:

{{< embed platform="github" resource="plotly/plotly.py" type="repo" image="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&auto=format&fit=crop" width="600" height="400" >}}

## Charts

Hugo Blox supports the popular [Plotly](https://plot.ly/) 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:

{{< chart data="line-chart" >}}

You might also find the [Plotly JSON Editor](http://plotly-json-editor.getforge.io/) 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

```mermaid
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

```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!
```

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

```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
```

An example **state diagram**:

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

renders as

```mermaid
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:

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

renders as

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

## Interactive Buttons

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

### Basic Buttons

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

&nbsp;

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

```go-html-template
{{</* button url="/" */>}}Contact Us{{</* /button */>}}

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

### Styled Buttons for Data Actions

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

&nbsp;

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

&nbsp;

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

```go-html-template
{{</* 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

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

&nbsp;

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

```go-html-template
{{</* 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 */>}}
```

## Did you find this page helpful? Consider sharing it 🙌

---

## File: content/blog/get-started/index.md

---
title: 🎉 Easily create your own simple yet highly customizable blog
summary: Take full control of your personal brand and privacy by migrating away from the big tech platforms!
date: 2023-10-27

# Featured image
# Place an image named `featured.jpg/png` in this page's folder and customize its options here.
image:
  caption: 'Image credit: [**Unsplash**](https://unsplash.com)'

cover:
  image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
  position:
    x: 50
    y: 40
  overlay:
    enabled: true
    type: "gradient"
    opacity: 0.4
    gradient: "bottom"
  fade:
    enabled: true
    height: "80px"
  icon:
    name: "✨"

authors:
  - me
  - Ted

tags:
  - Academic
  - Hugo Blox
  - Markdown

content_meta:
  trending: true
---

Welcome 👋

{{< toc mobile_only=true is_open=true >}}

## Overview

1. 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
2. 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**
3. 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

[//]: # '[](https://hugoblox.com)'

### Get Started

> [!TIP]+ Quick Start Guide
> New to Hugo Blox? Follow these steps to get your site up and running in minutes!

- 👉 [**Create a new site**](https://hugoblox.com/templates/)
- 📚 [**Personalize your site**](https://docs.hugoblox.com/)
- 💬 [Chat with the **Hugo Blox community**](https://discord.gg/z8wNYzb) or [**Hugo community**](https://discourse.gohugo.io)
- 🐦 Twitter: [@GoOwnable](https://x.com/GoOwnable)  #MadeWithHugoBlox
- 💡 [Request a **feature** or report a **bug** for _Hugo Blox_](https://github.com/HugoBlox/kit/issues)
- ⬆️ **Updating Hugo Blox?** View the [Update Guide](https://docs.hugoblox.com/reference/update/) and [Release Notes](https://github.com/HugoBlox/kit/releases)

> [!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.

### [❤️ Click here to become a sponsor and help support Hugo Blox's future ❤️](https://hugoblox.com/sponsor/)

As a token of appreciation for sponsoring, you can **unlock [these](https://hugoblox.com/sponsor/) awesome rewards and extra features 🦄✨**

## Ecosystem

- **[Bibtex To Markdown](https://github.com/GetRD/academic-file-converter):** Automatically import publications from BibTeX

## Inspiration

[Learn what other **creators**](https://hugoblox.com/creators/) are building with this template.

## Features

> [!NOTE]+ 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 [**blocks**](https://hugoblox.com/blocks/) and [**elements**](https://docs.hugoblox.com/reference/markdown/)
- **Edit any type of content** - Blog posts, publications, talks, slides, projects, and more!
- **Create content** in [**Markdown**](https://docs.hugoblox.com/reference/markdown/), [**Jupyter**](https://docs.hugoblox.com/getting-started/cms/), or [**RStudio**](https://docs.hugoblox.com/getting-started/cms/)
- **Plugin System** - Fully customizable [**color** and **font themes**](https://docs.hugoblox.com/getting-started/customize/)
- **Display Code and Math** - Code syntax highlighting and LaTeX math supported
- **Integrations** - [Google Analytics](https://analytics.google.com), [Disqus commenting](https://disqus.com), 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.

> [!WARNING]+ 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.

[Choose a stunning **theme** and **font**](https://docs.hugoblox.com/getting-started/customize/) for your site. Themes are fully customizable.

## License

Released under the [MIT](https://github.com/HugoBlox/kit/blob/main/LICENSE.md) license.

---

## File: content/blog/notebook-onboarding/index.md

---
title: ⚡️ Turn Jupyter Notebooks into Blog Posts
summary: Publish your data science and research directly from Jupyter Notebooks. No screenshots required.
date: 2024-07-15
authors:
  - me
tags:
  - Hugo Blox
  - Jupyter
  - Open Science
  - Tutorials
cover:
  # image: cover.jpg  # Auto-detected from cover image in this folder
  icon:
    name: "📔"
image:
  caption: "Image credit: [HugoBlox](https://hugoblox.com)"
  focal_point: Center
  placement: 1
content_meta:
  trending: true
---

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.

{{< toc mobile_only=true is_open=true >}}

## 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.

{{< notebook
    src="hugoblox-onboarding.ipynb"
    title="Launch Readiness Analysis"
    show_metadata=true
    line_numbers=true
    dense=false
    download_label="Download notebook"
    show_outputs=true
>}}

## How to add a notebook

1. **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`).
2. **Add the shortcode.** In any Markdown page, simply use:
   `{{</* notebook src="analysis.ipynb" */>}}`
3. **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 [Discord](https://discord.gg/z8wNYzb) or check the [documentation](https://docs.hugoblox.com).

Happy researching! 🚀

---

## File: content/blog/project-management/index.md

---
title: ✅ Manage your projects
summary: Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!
date: 2023-10-23
authors:
  - me
tags:
  - Hugo Blox
  - Markdown
image:
  caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
cover:
  image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
  position:
    x: 50
    y: 40
  overlay:
    enabled: true
    type: "gradient"
    opacity: 0.4
    gradient: "bottom"
  fade:
    enabled: true
    height: "80px"
  icon:
    name: "✨"
---

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:



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



renders as

```markmap {height="200px"}
- 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

```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
```

## Todo lists

You can even write your todo lists in Markdown too:

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

renders as

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

## Did you find this page helpful? Consider sharing it 🙌

---

## File: content/blog/second-brain/index.md

---
title: 🧠 Sharpen your thinking with a second brain
summary: Create a personal knowledge base and share your knowledge with your peers.
date: 2023-10-26
authors:
  - me
tags:
  - Second Brain
  - Markdown
image:
  caption: 'Image credit: [**Unsplash**](https://unsplash.com)'
cover:
  image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
  position:
    x: 50
    y: 40
  overlay:
    enabled: true
    type: "gradient"
    opacity: 0.4
    gradient: "bottom"
  fade:
    enabled: true
    height: "80px"
  icon:
    name: "✨"
---

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:



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



renders as

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

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



<code>
```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}$
```
</code>



renders as

```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}$
```

## Highlighting

<mark>Highlight</mark> important text with `mark`:

```html
<mark>Highlighted text</mark>
```

## Callouts

Use [callouts](https://docs.hugoblox.com/reference/markdown/#callouts) (aka _asides_, _hints_, or _alerts_) to draw attention to notes, tips, and warnings.

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

```markdown
> [!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.

## Did you find this page helpful? Consider sharing it 🙌

---

## File: content/blog/teach-courses/index.md

---
title: 👩🏼‍🏫 Teach academic courses
summary: Embed videos, podcasts, code, LaTeX math, and even test students!
date: 2023-10-24
math: true
authors:
  - me
tags:
  - Hugo
  - HugoBlox Kit
  - Markdown
image:
  caption: 'Embed rich media such as videos and LaTeX math'
cover:
  image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
  position:
    x: 50
    y: 40
  overlay:
    enabled: true
    type: "gradient"
    opacity: 0.4
    gradient: "bottom"
  fade:
    enabled: true
    height: "80px"
  icon:
    name: "✨"
---

[HugoBlox Kit](https://hugoblox.com) 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:

{{< cite page="/publications/preprint" view="citation" >}}

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

{{< cite page="/publications/conference-paper" >}}

## Video

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

**Youtube**:

    {{</* youtube D2vj0WcvH5c */>}}

{{< 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 [page's folder](https://gohugo.io/content-management/page-bundles/), 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:

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

## Test students

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

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

renders as

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

## 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:

```yaml
features:
  math:
    enable: true
```

To render _inline_ or _block_ math, wrap your LaTeX math with `$...$` or `$$...$$`, respectively.

Example **math block**:

```latex
$$
\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 (`\\`):

```latex
$$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

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

## Inline Images

```go
{{</* icon name="python" */>}} Python
```

renders as

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

## Did you find this page helpful? Consider sharing it 🙌

---

## File: content/courses/hugo-blox/guide/formatting/_index.md

---
title: Formatting
---

Write rich, engaging content with Markdown and re-usable Hugo Blox components (shortcodes):

{{< cards >}}
  {{< card url="button" title="Button" icon="cursor-arrow-rays" >}}
  {{< card url="callout" title="Callout" icon="warning" >}}
  {{< card url="cards" title="Cards" icon="card" >}}
  {{< card url="toggle" title="Spoiler" icon="chevron-right" >}}
  {{< card url="steps" title="Steps" icon="one" >}}
{{< /cards >}}