initial template mods to evan-ify
This commit is contained in:
Evan Scamehorn
Binary file not shown.
|
Before Width: | Height: | Size: 228 KiB |
@@ -1,252 +0,0 @@
|
||||
---
|
||||
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/hugo-blox-builder" 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 >}}
|
||||
|
||||
|
||||
|
||||
{{< 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 >}}
|
||||
|
||||
|
||||
|
||||
{{< 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 >}}
|
||||
|
||||
```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 >}}
|
||||
|
||||
|
||||
|
||||
{{< 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 🙌
|
||||
@@ -1,71 +0,0 @@
|
||||
{
|
||||
"data": [
|
||||
{
|
||||
"uid": "babced",
|
||||
"fill": "tonexty",
|
||||
"mode": "none",
|
||||
"name": "Col2",
|
||||
"type": "scatter",
|
||||
"x": [
|
||||
"2000-01-01",
|
||||
"2001-01-01",
|
||||
"2002-01-01",
|
||||
"2003-01-01",
|
||||
"2004-01-01",
|
||||
"2005-01-01",
|
||||
"2006-01-01",
|
||||
"2007-01-01",
|
||||
"2008-01-01",
|
||||
"2009-01-01",
|
||||
"2010-01-01",
|
||||
"2011-01-01",
|
||||
"2012-01-01",
|
||||
"2013-01-01",
|
||||
"2014-01-01",
|
||||
"2015-01-01",
|
||||
"2016-01-01"
|
||||
],
|
||||
"y": [
|
||||
"17087182",
|
||||
"29354370",
|
||||
"38760373",
|
||||
"40912332",
|
||||
"51611646",
|
||||
"64780617",
|
||||
"85507314",
|
||||
"121892559",
|
||||
"172338726",
|
||||
"238027855",
|
||||
"206956723",
|
||||
"346004403",
|
||||
"697089489",
|
||||
"672985183",
|
||||
"968882453",
|
||||
"863105652",
|
||||
"1068513050"
|
||||
],
|
||||
"fillcolor": "rgb(224, 102, 102)"
|
||||
}
|
||||
],
|
||||
"layout": {
|
||||
"title": "Total Number of Websites",
|
||||
"width": 800,
|
||||
"xaxis": {
|
||||
"type": "date",
|
||||
"range": [946702800000, 1451624400000],
|
||||
"title": "Source: <a href=\"http://www.scribblrs.com/\">Scribblrs</a><br>Source: <a href=\"http://www.internetlivestats.com/total-number-of-websites/\">Internet Live Stats</a>",
|
||||
"showgrid": false,
|
||||
"autorange": true,
|
||||
"tickformat": "%Y"
|
||||
},
|
||||
"yaxis": {
|
||||
"type": "linear",
|
||||
"range": [0, 1124750578.9473684],
|
||||
"title": "",
|
||||
"autorange": true
|
||||
},
|
||||
"height": 500,
|
||||
"autosize": false
|
||||
},
|
||||
"frames": []
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
customer_id, score
|
||||
1,0
|
||||
2,0.5
|
||||
3,1
|
||||
|
Binary file not shown.
|
Before Width: | Height: | Size: 333 KiB |
@@ -1,117 +0,0 @@
|
||||
---
|
||||
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: [@BuildLore](https://x.com/BuildLore) [@GeorgeCushen](https://x.com/GeorgeCushen) #MadeWithHugoBlox
|
||||
- 💡 [Request a **feature** or report a **bug** for _Hugo Blox_](https://github.com/HugoBlox/hugo-blox-builder/issues)
|
||||
- ⬆️ **Updating Hugo Blox?** View the [Update Guide](https://docs.hugoblox.com/reference/update/) and [Release Notes](https://github.com/HugoBlox/hugo-blox-builder/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
|
||||
|
||||
Copyright 2016-present [George Cushen](https://georgecushen.com).
|
||||
|
||||
Released under the [MIT](https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md) license.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
@@ -1,161 +0,0 @@
|
||||
{
|
||||
"cells": [
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "2f21e4c5",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"# Ship Notebook Stories in Minutes\n",
|
||||
"Hugo Blox Notebook renderer turns your `.ipynb` experiments into beautiful long-form posts.\n",
|
||||
"Use this sample to see how markdown, code, and outputs flow together."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "3078072c",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"1. Drop notebooks inside `assets/notebooks/` (or import them as page resources).\n",
|
||||
"2. Reference them with `{{</* notebook src=\"your.ipynb\" */>}}`.\n",
|
||||
"3. Control code, outputs, metadata badges, and download links via shortcode params."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 1,
|
||||
"id": "7b29b28a",
|
||||
"metadata": {
|
||||
"tags": [
|
||||
"demo",
|
||||
"quickstart"
|
||||
]
|
||||
},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Collecting data...\n",
|
||||
"Training notebook-ready block...\n",
|
||||
"Done!\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"0.982"
|
||||
]
|
||||
},
|
||||
"execution_count": 1,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"import math\n",
|
||||
"accuracy = 0.982\n",
|
||||
"print(\"Collecting data...\")\n",
|
||||
"print(\"Training notebook-ready block...\")\n",
|
||||
"print(\"Done!\")\n",
|
||||
"accuracy"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 2,
|
||||
"id": "ceecfe89",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/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>"
|
||||
],
|
||||
"text/plain": [
|
||||
"<IPython.core.display.HTML object>"
|
||||
]
|
||||
},
|
||||
"metadata": {},
|
||||
"output_type": "display_data"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"from IPython.display import HTML\n",
|
||||
"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>\")"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 3,
|
||||
"id": "664e49ca",
|
||||
"metadata": {
|
||||
"tags": [
|
||||
"metrics"
|
||||
]
|
||||
},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"application/json": {
|
||||
"metrics": {
|
||||
"engagement_rate": 0.73,
|
||||
"read_time_minutes": 4.6,
|
||||
"subscribers": 1280
|
||||
}
|
||||
},
|
||||
"text/plain": [
|
||||
"{'metrics': {'engagement_rate': 0.73, 'read_time_minutes': 4.6, 'subscribers': 1280}}"
|
||||
]
|
||||
},
|
||||
"execution_count": 3,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"metrics = {\n",
|
||||
" 'metrics': {\n",
|
||||
" 'engagement_rate': 0.73,\n",
|
||||
" 'read_time_minutes': 4.6,\n",
|
||||
" 'subscribers': 1280\n",
|
||||
" }\n",
|
||||
"}\n",
|
||||
"metrics"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "0f761ba1",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"> Tip: Pair this block with Call-to-Action cards or the Embed shortcode to link to GitHub repos, datasets, or ARXIV preprints."
|
||||
]
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"authors": [
|
||||
{
|
||||
"name": "HugoBlox Studio"
|
||||
}
|
||||
],
|
||||
"kernelspec": {
|
||||
"display_name": "Python 3",
|
||||
"language": "python",
|
||||
"name": "python3"
|
||||
},
|
||||
"language_info": {
|
||||
"codemirror_mode": {
|
||||
"name": "ipython",
|
||||
"version": 3
|
||||
},
|
||||
"file_extension": ".py",
|
||||
"mimetype": "text/x-python",
|
||||
"name": "python",
|
||||
"nbconvert_exporter": "python",
|
||||
"pygments_lexer": "ipython3",
|
||||
"version": "3.11"
|
||||
}
|
||||
},
|
||||
"nbformat": 4,
|
||||
"nbformat_minor": 5
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
---
|
||||
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! 🚀
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 177 KiB |
@@ -1,109 +0,0 @@
|
||||
---
|
||||
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:
|
||||
|
||||
<div class="highlight">
|
||||
<pre class="chroma">
|
||||
<code>
|
||||
```markmap {height="200px"}
|
||||
- Hugo Modules
|
||||
- Hugo Blox
|
||||
- blox-plugins-netlify
|
||||
- blox-plugins-netlify-cms
|
||||
- blox-plugins-reveal
|
||||
```
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
renders as
|
||||
|
||||
```markmap {height="200px"}
|
||||
- Hugo Modules
|
||||
- Hugo Blox
|
||||
- blox-plugins-netlify
|
||||
- blox-plugins-netlify-cms
|
||||
- blox-plugins-reveal
|
||||
```
|
||||
|
||||
## 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 🙌
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
@@ -1,140 +0,0 @@
|
||||
---
|
||||
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:
|
||||
|
||||
<div class="highlight">
|
||||
<pre class="chroma">
|
||||
<code>
|
||||
```markmap {height="200px"}
|
||||
- Hugo Modules
|
||||
- Hugo Blox
|
||||
- blox-plugins-netlify
|
||||
- blox-plugins-netlify-cms
|
||||
- blox-plugins-reveal
|
||||
```
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
renders as
|
||||
|
||||
```markmap {height="200px"}
|
||||
- Hugo Modules
|
||||
- Hugo Blox
|
||||
- blox-plugins-netlify
|
||||
- blox-plugins-netlify-cms
|
||||
- blox-plugins-reveal
|
||||
```
|
||||
|
||||
Anh here's a more advanced mindmap with formatting, code blocks, and math:
|
||||
|
||||
<div class="highlight">
|
||||
<pre class="chroma">
|
||||
<code>
|
||||
```markmap
|
||||
- Mindmaps
|
||||
- Links
|
||||
- [Hugo Blox Docs](https://docs.hugoblox.com/)
|
||||
- [Discord Community](https://discord.gg/z8wNYzb)
|
||||
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
|
||||
- Features
|
||||
- Markdown formatting
|
||||
- **inline** ~~text~~ *styles*
|
||||
- multiline
|
||||
text
|
||||
- `inline code`
|
||||
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
|
||||
```
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
renders as
|
||||
|
||||
```markmap
|
||||
- Mindmaps
|
||||
- Links
|
||||
- [Hugo Blox Docs](https://docs.hugoblox.com/)
|
||||
- [Discord Community](https://discord.gg/z8wNYzb)
|
||||
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
|
||||
- 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 🙌
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 170 KiB |
@@ -1,161 +0,0 @@
|
||||
---
|
||||
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
|
||||
- Hugo Blox Builder
|
||||
- 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: "✨"
|
||||
---
|
||||
|
||||
[Hugo Blox Builder](https://hugoblox.com) is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder 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
|
||||
|
||||
Hugo Blox Builder 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
|
||||
|
||||
Hugo Blox Builder 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 🙌
|
||||
Reference in New Issue
Block a user