Ownable

https://docs.ownable.dev
Admin
Ownable is an AI-powered CMS and website builder that generates human-editable Markdown source code...
Tokens:109,877
Snippets:1,290
Trust Score:2.5
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install Prerequisites via Snap (Debian/Ubuntu)

Source: https://docs.ownable.dev/cli

Installs Go, Node.js, and Hugo Extended using Snap, a universal package manager for Linux. This is a convenient method for Debian/Ubuntu-based systems.

```shell
sudo snap install --classic go node hugo
```

--------------------------------

### Import Existing Ownable Site from GitHub

Source: https://docs.ownable.dev/cli

Clones an existing Ownable site from a GitHub repository, installs global dependencies, and starts the development server. This is an alternative to creating a new site from scratch.

```shell
git clone <github_repo_url> my-site
cd my-site
npm install -g hugoblox
hugoblox dev
```

--------------------------------

### Example Bash Command for Installation

Source: https://docs.ownable.dev/cms/writing/steps

This is an example of a bash command used within a step to install project dependencies. It's a common command-line operation for Node.js projects.

```bash
npm install
```

--------------------------------

### Install Homebrew and Dependencies (Mac)

Source: https://docs.ownable.dev/cli

Installs Homebrew package manager and then uses it to install Git, Go, Hugo, and Node.js. This is a common method for macOS users.

```shell
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

```shell
brew install git golang hugo node
```

--------------------------------

### Create New Ownable Site via CLI

Source: https://docs.ownable.dev/cli

Installs the hugoblox CLI globally and then uses it to create a new Ownable site. The CLI will prompt for site type and location.

```shell
npm install -g hugoblox
hugoblox create site
```

--------------------------------

### Install Core Requirements via Winget (Windows)

Source: https://docs.ownable.dev/cli

Installs Node.js LTS, Git, Go, and Hugo Extended using the Windows Package Manager (Winget). This is a recommended method for Windows users.

```shell
winget install OpenJS.NodeJS.LTS Git.Git GoLang.Go Hugo.Hugo.Extended
```

--------------------------------

### Verify Hugo Module Installation

Source: https://docs.ownable.dev/zh-cn/hugoblox/guides/slides

Example of a `go.mod` file after successful installation of Hugo modules. It lists the required modules, including `blox-tailwind` and `blox-plugin-reveal`, along with their versions.

```go
module github.com/USERNAME/my-site

go 1.19


require (
  github.com/HugoBlox/kit/modules/blox-tailwind v0.X.X
  github.com/HugoBlox/kit/modules/blox-plugin-reveal v0.X.X
)

```

--------------------------------

### Start Hugo Server

Source: https://docs.ownable.dev/hugoblox/guides/slides

Command to start the Hugo development server, allowing you to preview your website and presentations locally before deployment.

```bash
hugo server

```

--------------------------------

### Install Blogdown Package from GitHub

Source: https://docs.ownable.dev/cms/editors/rstudio

Installs the 'blogdown' package directly from its GitHub repository. This is an alternative method for users who must use blogdown, though it is not the recommended approach.

```r
remotes::install_github("rstudio/blogdown")
```

--------------------------------

### Info Cards Example (Hugo Templating)

Source: https://docs.ownable.dev/cms/writing/cards

An example demonstrating the creation of info cards without links. This setup uses the 'cards' and 'card' shortcodes to display information with a title, icon, and subtitle, useful for highlighting features or key points.

```gohtml
{{</* cards */>}}
  {{</* card title="Fast" icon="bolt" subtitle="Built for speed" */>}}
  {{</* card title="Secure" icon="shield-check" subtitle="Security first" */>}}
{{</* /cards */>}}
```

--------------------------------

### Start HugoBlox Development Server

Source: https://docs.ownable.dev/hugoblox

Starts the local development server for a HugoBlox site. This command allows you to preview your site changes in real-time as you develop.

```bash
cd my-site && hugo server
```

--------------------------------

### Complete Example: Research Lab Configuration

Source: https://docs.ownable.dev/hugoblox/guides/configuration

A fully configured `params.yaml` example for a research lab website, including identity, theme, header, and comments integration.

```yaml
hugoblox:
  schema: "2.0"


  identity:
    name: "Stanford AI Lab"
    organization: "Stanford University"
    type: organization
    tagline: "Advancing AI for humanity"


  theme:
    mode: system
    pack:
      light: minimal
      dark: contrast
    colors:
      primary: "#8C1515"  # Stanford red


  header:
    cta:
      enable: true
      text: "Join Our Team"
      url: "/careers/"

  comments:
    enable: true
    provider: giscus
    giscus:
      repo: "lab/website"
      repo_id: "..."
      category: "Comments"
      category_id: "..."
```

--------------------------------

### Upgrade Ownable CLI

Source: https://docs.ownable.dev/cli

Upgrades the Ownable CLI to the latest version using npm. This command should be run within your project folder to update core theme modules.

```shell
npx hugoblox@latest upgrade
```

--------------------------------

### Complete Example: Personal Academic Configuration

Source: https://docs.ownable.dev/hugoblox/guides/configuration

A fully configured `params.yaml` example for a personal academic website, including identity, theme, typography, header, content, and analytics settings.

```yaml
hugoblox:
  schema: "2.0"


  identity:
    name: "Dr. Jane Smith"
    type: person
    description: "AI researcher at Stanford..."
    social:
      twitter: "janesmith"


  theme:
    mode: system
    pack: minimal


  typography:
    font: serif
    size: md


  header:
    enable: true
    style: navbar
    search: true


  content:
    math:
      enable: true
    citations:
      style: apa

  analytics:
    google:
      measurement_id: "G-XXXXXXXXXX"
```

--------------------------------

### Markdown Inline Formatting Examples

Source: https://docs.ownable.dev/cms/writing/text-formatting

Demonstrates various inline text formatting techniques in Markdown, such as bold, italic, strikethrough, inline code, subscript, superscript, underline, and highlight. These are achieved using specific Markdown syntax or HTML tags.

```markdown
**Bold**
*Italic*
***Both***
~~Strike~~
`code`
<sub>sub</sub>
<sup>super</sup>
<ins>underline</ins>
<mark>highlight</mark>
```

--------------------------------

### Install HugoBlox CLI

Source: https://docs.ownable.dev/hugoblox

Installs the HugoBlox command-line interface globally using npm. This is the first step to managing your HugoBlox site locally.

```bash
npm install -g hugoblox
```

--------------------------------

### Start HugoBlox Development Server CLI

Source: https://docs.ownable.dev/hugoblox/reference/cli

Command to start the local development server with Hugo. This command wraps `hugo server` and provides helpful defaults for local development, with options to specify the project path and control output verbosity.

```bash
hbx dev [options]
```

--------------------------------

### YAML Frontmatter Cleanup Example

Source: https://docs.ownable.dev/cms/fix-it-bot

Demonstrates the transformation of YAML frontmatter before and after Fix-It Bot processing. It highlights the auto-fixing of inconsistent spacing and the addition of quotes for problematic strings.

```yaml
---
title: My Post
tags:[hugo, hugoblox] # inconsistent spacing
summary: A title: with a colon # needs quoting
---

```

```yaml
---
title: My Post
tags: [hugo, hugoblox]
summary: "A title: with a colon"
---

```

--------------------------------

### Configure Research Lab Website (v0.11)

Source: https://docs.ownable.dev/hugoblox/guides/upgrade/migrations/v0-11-0-migration

This configuration snippet details the v0.11 setup for a research lab website using HugoBlox. It includes schema version, identity details for an organization, header call-to-action, and enhanced comment integration with Giscus, specifying repository details and category.

```yaml
hugoblox:
  schema: "2.0"


  identity:
    name: "Stanford AI Lab"
    organization: "Stanford University"
    type: organization
    tagline: "Advancing AI for humanity"


  header:
    cta:
      enable: true
      text: "Join Us"
      url: "/careers/"


  comments:
    enable: true
    provider: giscus
    giscus:
      repo: "lab/website"
      repo_id: "..."
      category: "Comments"
      category_id: "..."

```

--------------------------------

### Navigation Cards Example (Hugo Templating)

Source: https://docs.ownable.dev/cms/writing/cards

An example showcasing how to create navigation cards using the 'cards' and 'card' shortcodes. Each card is configured with a URL for navigation, a title, and an icon, suitable for creating menus or quick links.

```gohtml
{{</* cards */>}}
  {{</* card url="/writing/buttons/" title="Buttons" icon="cursor-arrow-rays" */>}}
  {{</* card url="/writing/media/" title="Media" icon="play" */>}}
  {{</* card url="/writing/charts/" title="Charts" icon="chart-bar" */>}}
{{</* /cards */>}}
```

--------------------------------

### Configure Analytics and Verification

Source: https://docs.ownable.dev/zh-cn/hugoblox/guides/upgrade/migrations/v0-11-0-migration

Sets up Google Analytics and Plausible analytics, along with Google verification.

```yaml
hugoblox:
  analytics:
    google:
      measurement_id: "G-XXXXXXXXXX"
    plausible:
      domain: "yoursite.com"

  verification:
    google: "verification-code"
```

--------------------------------

### Icon Syntax Examples

Source: https://docs.ownable.dev/hugoblox/reference/icons

Demonstrates the correct syntax for referencing icons from different packs, including the default pack behavior.

```yaml
icon: brands/github
icon: hero/academic-cap
icon: academicons/google-scholar
```

--------------------------------

### Hugo Frontmatter Example

Source: https://docs.ownable.dev/cms/editors/obsidian

Example of Hugo frontmatter to be added to the top of an 'index.md' file. This frontmatter includes metadata such as the post title, date, and authors, which Hugo uses to render the content.

```markdown
---
title: My New Post
date: 2025-01-01
authors: [admin]
---

```

--------------------------------

### Diff Syntax Example

Source: https://docs.ownable.dev/cms/writing/code-blocks

Demonstrates the use of the 'diff' language identifier to show additions and removals in code.

```diff
- const old = "before";
+ const new = "after";
  const unchanged = "same";
```

--------------------------------

### Verify Hugo Module Installation

Source: https://docs.ownable.dev/hugoblox/guides/slides

Check the `go.mod` file to confirm that the necessary HugoBlox modules have been successfully added to your project's dependencies.

```go
module github.com/USERNAME/my-site

go 1.19

require (
  github.com/HugoBlox/kit/modules/blox-tailwind v0.X.X
  github.com/HugoBlox/kit/modules/blox-plugin-reveal v0.X.X
)

```

--------------------------------

### Test Site with New Configuration (Shell)

Source: https://docs.ownable.dev/hugoblox/guides/upgrade/migrations/v0-11-0-migration

This command initiates a local development server for testing the website with a specified template after configuration migration. It provides a local URL to access and verify the site's functionality.

```shell
pnpm dev <your-template>
# Visit http://localhost:1313
```

--------------------------------

### Install RMarkdown Package

Source: https://docs.ownable.dev/cms/editors/rstudio

Installs the 'rmarkdown' package, which is necessary for rendering R Markdown files to various output formats, including Markdown.

```r
install.packages("rmarkdown")
```

--------------------------------

### Initialize Go Modules for Hugo

Source: https://docs.ownable.dev/hugoblox/guides/slides

Command to initialize Go modules for a Hugo project if a `go.mod` file does not yet exist. This is a prerequisite for managing Hugo modules.

```bash
hugo mod init github.com/USERNAME/my-site

```

--------------------------------

### Markdown Line Break Examples

Source: https://docs.ownable.dev/cms/writing/text-formatting

Explains how to create line breaks within paragraphs in Markdown. This can be done by ending a line with two spaces or by using the HTML `<br>` tag.

```markdown
First line.  
Second line (note the two trailing spaces above).

Or use HTML: First line.<br>Second line.
```

--------------------------------

### Set PowerShell Execution Policy (Windows)

Source: https://docs.ownable.dev/start/manual

Changes the PowerShell execution policy to 'RemoteSigned' to allow local scripts to run, bypassing a common security restriction on Windows. This command requires administrative privileges.

```powershell
Set-ExecutionPolicy RemoteSigned
```

--------------------------------

### Initialize Hugo Modules

Source: https://docs.ownable.dev/hugoblox/guides/slides

Commands to initialize and update Hugo modules after adding new plugins. Ensure your project is set up with Go modules if you haven't already.

```bash
hugo mod get -u
hugo mod tidy

```

--------------------------------

### Python Code Snippets for Training and Inference

Source: https://docs.ownable.dev/hugoblox/guides/slides

Two Python code snippets demonstrating a basic model training setup using a Transformer and Adam optimizer, and an inference step for generating output. These are presented within a Markdown document for live coding examples.

```python
model = Transformer(d_model=512)
optimizer = Adam(model.parameters(), lr=1e-4)
```

```python
output = model.generate(prompt, max_tokens=100)
```

--------------------------------

### Using the Steps Shortcode with Markdown

Source: https://docs.ownable.dev/cms/writing/steps

This snippet demonstrates how to use the 'steps' shortcode to define tutorial steps. Each step is defined by a level-3 Markdown heading (###). The shortcode processes the inner content as Markdown, rendering each heading as a numbered step.

```go-template
{{% steps %}}

### Install dependencies

Run the following command:

```bash
npm install
```

### Configure your site

Edit `config.yaml` with your settings.

### Deploy

Push to your repository and deploy.

{{% /steps %}}
```

--------------------------------

### Configure Buttons in YAML

Source: https://docs.ownable.dev/tutorial/link-in-bio/step-3

This YAML snippet demonstrates how to define a list of buttons for a website's homepage. Each button can have a title, an icon (referencing built-in or custom icons), and a URL. New buttons can be added by extending this list.

```yaml
- block: buttons
    content:
      buttons:
        - title: Read my latest paper on LLMs
          icon: brands/arxiv
          url: https://arxiv.org/abs/2304.01852
        - title: Watch my new YouTube video to achieve 20x productivity
          icon: brands/youtube
          url: https://youtube.com
        - title: Connect with me on LinkedIn
          icon: brands/linkedin
          url: https://linkedin.com

```

--------------------------------

### Configure Personal Academic Website (v0.11)

Source: https://docs.ownable.dev/hugoblox/guides/upgrade/migrations/v0-11-0-migration

This configuration snippet details the v0.11 setup for a personal academic website using HugoBlox. It includes schema version, identity details, theme, typography, layout, header, footer, copyright, content features, analytics, and locale settings. This version offers more granular control over various aspects of the website.

```yaml
hugoblox:
  schema: "2.0"


  identity:
    name: "Dr. Jane Smith"
    type: person
    description: "AI researcher..."
    social:
      twitter: "janesmith"


  theme:
    mode: system
    pack: minimal


  typography:
    font: serif
    size: md


  layout:
    radius: md
    spacing: comfortable
    avatar_shape: circle


  header:
    enable: true
    style: navbar
    sticky: true
    search: true
    theme_toggle: true


  footer:
    style: minimal


  copyright:
    notice: "© {year} {name}"
    license:
      type: cc
      allow_derivatives: false
      share_alike: true
      allow_commercial: false


  content:
    math:
      enable: true
    citations:
      style: apa


  analytics:
    google:
      measurement_id: "G-XXXXXXXXXX"


  locale:
    date_format: "Jan 2, 2006"
    time_format: "3:04 PM"
    address_format: en-us

```

--------------------------------

### Create a New HugoBlox Site

Source: https://docs.ownable.dev/hugoblox

Initializes a new HugoBlox site project. This command sets up the basic directory structure and configuration files for your site.

```bash
hugoblox create site
```

--------------------------------

### Advanced Button: Download Example

Source: https://docs.ownable.dev/cms/writing/buttons

An example of an advanced button for downloading a file, utilizing a secondary style, a document icon, and a fully rounded (pill) shape.

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

--------------------------------

### Configure Netlify Build Command for Pagefind

Source: https://docs.ownable.dev/hugoblox/guides/search

This configuration snippet demonstrates how to integrate Pagefind's index generation into your Netlify build process. The `command` in `netlify.toml` ensures that Hugo builds the site and then runs `npx pagefind` to create the search index in the `public` directory.

```toml
[build]
  command = "hugo --gc --minify -b $URL && npx pagefind --source 'public'"
  publish = "public"
```

--------------------------------

### Define Categories and Tags for Blog Posts

Source: https://docs.ownable.dev/hugoblox/guides/blog-posts

This example demonstrates how to assign categories and tags to a blog post using frontmatter. Categories are for broad groupings, while tags are for specific topics. These taxonomies automatically generate listing pages.

```yaml
categories:
  - Research
  - Tutorial
tags:
  - python
  - machine-learning
  - data-visualization
```

--------------------------------

### Custom Start Number for Ordered Lists (Markdown)

Source: https://docs.ownable.dev/cms/writing/lists

Explains how to start an ordered list from a number other than one, useful for continuing sequences or specific formatting.

```markdown
5. Fifth item
6. Sixth item
7. Seventh item
```

--------------------------------

### HugoBlox BibTeX Citation Example

Source: https://docs.ownable.dev/hugoblox/guides/publications

This is an example of a BibTeX entry that can be placed in a `cite.bib` file within a publication's folder. HugoBlox parses this file to display the citation and provide a 'Cite' button.

```bibtex
@article{doe2024novel,
  title     = {A Novel Approach to Machine Learning},
  author    = {Doe, Jane and Smith, John},
  journal   = {Journal of Machine Learning Research},
  volume    = {25},
  pages     = {1--42},
  year      = {2024},
  publisher = {JMLR}
}
```

--------------------------------

### BibTeX Citation Example

Source: https://docs.ownable.dev/zh-cn/hugoblox/guides/publications

This is an example of a BibTeX entry for an academic paper. HugoBlox uses this format to parse citation details and display them on the publication page, also providing a 'Cite' button for easy copying.

```bibtex
@article{doe2024novel,
  title     = {A Novel Approach to Machine Learning},
  author    = {Doe, Jane and Smith, John},
  journal   = {Journal of Machine Learning Research},
  volume    = {25},
  pages     = {1--42},
  year      = {2024},
  publisher = {JMLR}
}

```

--------------------------------

### Manual go.mod Module Path Updates

Source: https://docs.ownable.dev/hugoblox/guides/upgrade/migrations/v0-11-0-migration

Demonstrates manual updates to the go.mod file for migrating module paths. It shows the 'Before' and 'After' states for 'require' directives, reflecting the new module structure.

```go
require (
    github.com/HugoBlox/kit/modules/blox-tailwind v0.0.0
    github.com/HugoBlox/kit/modules/blox-plugin-netlify v0.0.0
    github.com/HugoBlox/kit/modules/blox-plugin-reveal v0.0.0
)
```

```go
require (
    github.com/HugoBlox/kit/modules/blox v0.11.0
    github.com/HugoBlox/kit/modules/integrations/netlify v1.2.1
    github.com/HugoBlox/kit/modules/slides v1.2.5
)
```

--------------------------------

### Use Icons in Blocks and Elements

Source: https://docs.ownable.dev/hugoblox/guides/blocks

Demonstrates the syntax for using icons from various icon packs within blocks, buttons, and menus. The format is 'pack/icon-name'.

```markdown
icon: brands/github
icon: hero/sparkles
icon: academicons/google-scholar
```

--------------------------------

### Example Landing Page Configuration (YAML)

Source: https://docs.ownable.dev/hugoblox/guides/landing-pages

This YAML configuration defines a multi-section landing page. It includes a hero section with a welcome message and actions, a features section highlighting key attributes, and a call-to-action (CTA) section. Each section is defined by a `block` type and its specific `content` configuration.

```yaml
---
title: Home
type: landing


sections:
  - block: hero
    content:
      title: Welcome to My Site
      text: A short intro paragraph.
      primary_action:
        text: Get Started
        url: /about/
      secondary_action:
        text: Learn More
        url: /docs/


  - block: features
    content:
      title: Key Features
      items:
        - name: Fast
          icon: bolt
          description: Lightning-fast static HTML.
        - name: Secure
          icon: shield
          description: No databases to hack.


  - block: cta
    content:
      title: Ready to start?
      text: Join thousands of researchers.
      button:
        text: Sign Up Free
        url: /signup/
---

```

--------------------------------

### Backup Configuration File (Shell)

Source: https://docs.ownable.dev/hugoblox/guides/upgrade/migrations/v0-11-0-migration

This command backs up the current params.yaml configuration file by creating a copy with a .backup extension. This is a crucial first step before migrating configurations to ensure data safety.

```shell
cp config/_default/params.yaml config/_default/params.yaml.backup
```

--------------------------------

### HugoBlox Presentation File Structure Example

Source: https://docs.ownable.dev/hugoblox/guides/slides

An example of a HugoBlox presentation's frontmatter and content structure. It showcases how to define presentation settings like theme, highlight style, and reveal.js options, followed by slide content using Markdown.

```yaml
---
title: "My Amazing Talk"
date: 2024-06-15
type: slides

slides:
  theme: black
  highlight_style: dracula
  diagram: true
  reveal_options:
    controls: true
    progress: true
    slideNumber: true
---


# Title Slide
### Your Name


---


## Agenda


- Introduction
- Methods
- Results
- Conclusion


---


# Thank You! 


Questions?

```

--------------------------------

### Code Snippet within Toggle/Spoiler (Python)

Source: https://docs.ownable.dev/cms/writing/toggles

Shows how to embed a code snippet, specifically a Python function, within a spoiler toggle. This allows users to reveal and view code examples on demand, keeping the main content clean. The example uses a standard Python Fibonacci function.

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
```
Tokens:
Raw