Skip to content
/ create-blox Public template

πŸ§‘β€πŸŽ¨ Create and publish your very own content blocks for Hugo

License

Notifications You must be signed in to change notification settings

HugoBlox/create-blox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

14 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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

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.