Create Hugo Blox

Looking to build and publish a new Hugo Blox?

Hugo Blox makes it easy to create a beautiful website for free, customizing your site without code by using drag-and-drop blocks (aka blox) rendered with Hugo.

👉 Core Concepts

• Each blox consists of an HTML file and an optional CSS style file
• Design your blox with Go Templating, CSS, and Tailwind
• Unless you are already familiar with Tailwind, it's recommended to use vanilla CSS as Tailwind styles require an extra compilation step prior to use

🧑‍🎨 Create a Block

1. Click the Use This Template button on GitHub
   1. Name your repository with an appropriate name for your blox collection, such as johns-hugo-blox
2. Browse your new GitHub project, click the go.mod file, and then the ✏️ pencil button to edit it
   1. Replace the placeholder URL in go.mod with your new GitHub URL in the form module github.com/<USERNAME>/<COLLECTION-NAME> where <USERNAME> is your GitHub username and <COLLECTION-NAME> is a name for your collection of blox
   2. Scroll to the bottom and click Commit Changes to save
3. Browse to the blox/ folder, click my-block.html, and click the ✏️ pencil button to edit it
   1. Rename my-block.html in the text box to a unique ID in the form github.<USERNAME>.<BLOCK-NAME>.html, again replacing <USERNAME> with your GitHub username and <BLOCK-NAME> with your block name. It's important to provide this globally unique block name, otherwise another block can conflict with your block.
   2. Repeat the above step to rename the style file, my-block.css
   3. Scroll to the bottom and click Commit Changes to save
4. Edit the HTML for your new block
   • Design your blox with Go Templating, CSS, and Tailwind
   • You can access page and block (page section) variables using $page and $block, respectively
   • Check out the built-in blocks for inspiration

Example

Say your GitHub username is pikachu and you wish to create a block named pokemon:

1. We click Use This Template and enter pokemon-hugo-blox as the project name
2. We replace the first line of go.mod with the GitHub repository URL module github.com/pikachu/hugo-blox-pokemon
3. We browse to the blox/ folder, and rename my-block.html to github.pikachu.pokemon.html
4. We rename my-block.css to github.pikachu.pokemon.css
5. We customize the HTML in github.pikachu.pokemon.html and the style in github.pikachu.pokemon.css
6. We add the block to our site and share the block with the community following the guide below

🌈 Add the Block to your Site

1. Install the block by referencing it in your config/_defaults/config.yaml:

   module:
     imports:
       # Your block's GitHub URL (replace <USERNAME> and <COLLECTION-NAME> with your GitHub username and block collection name)
       - path: github.com/<USERNAME>/hugo-blox-<COLLECTION-NAME>

2. Create an instance of your block in a landing page, such as in your homepage at content/_index.md:

   ---
   title: My page
   type: landing
   
   # Add your page sections below
   # Replace <USERNAME> and <BLOCK-NAME> with your GitHub username and block name, respectively.
   sections:
     - block: 'github.<USERNAME>.<BLOCK-NAME>'
       content:
         title: My title
         text: Add any **markdown** formatted content here - text, images, videos, galleries - and even HTML code!
    ---

📢 Share your block

Add the hugo-blox tag to your block's GitHub repository to help other users find it.

Share your block with the community on Discord and Twitter.