Help customizing Marfa, aka getting Marfa to work like the referenced demo site

Can someone help me figure out how to get the Marfa theme working like the demo listed in the Github repo?

GitHub repo: GitHub - microdotblog/theme-marfa: Hugo theme inspired by Cactus theme (originally for Jekyll).

Demo site: https://mmarfil.com/

Is it possible to have a custom homepage with its own design when using the hosted Micro.blog service like the Marfa demo site?

Note that the Custom Home Page plugin doesn’t create a custom designed home page. The plugin replaces the main body content with a Markdown block/section within the existing design.

I also read the Custom Home Page instructions in the help, but it appears that this is the same as the plugin. It creates custom content within the existing design. It doesn’t create a custom home page with its own design like the Marfa demo site.

Thanks in advance!

It looks like the “demo site” (really just Marcelo’s web site) is not actually using exactly the same Marfa theme anymore. It’s similar, but he has customized it, especially the home page.

For the Custom home page instructions, if you want a completely from-scratch HTML page you can create the layouts/index.html template but without the define "main" part which is what adds the header/footer and other styling. That 2-pane home page would need to be custom, though, since it’s not built into the theme itself.

1 Like

Thanks Manton, I’ll give it a shot!

Okay, so I’m not having any luck and I’m trying to troubleshoot the why.

In my M.b account, when I go to Design → Edit Custom Themes am I only getting access to the /themes dir?

For example, if I create a new template called blog.html, is that file in:

blog.html
or
theme-marfa/blog.html

I tried creating:

layouts/blog/list.html

Thinking that I could then add a file called blog.html in the “root” of my M.b acct. If I understand Hugo’s parse order correctly (I probably don’t understand this), then Hugo should match it with layouts/blog/list.html for the list template.

But blog.html doesn’t reference layouts/blog/lists.html or layouts/blog/index.html, etc… (tried a number of variations).

I also tried referencing a specific template using yml frontmatter

layout = “blog”

Tried several variations on this with no luck.

How do I get a M.b custom theme to look a different template if I’ve modified layouts/index.html?

Related, does an M.b account support a more complex setup like the Papermod theme? This theme has what I’m looking for built in with its Profile mode that is turned via a config.yml file. I spent an hour trying to get it working last night but no luck.

And last, but not least, is there someone I can hire to help with this? I think once the initial setup is done, I can take it home via custom css and editing the existing layout files.

When you’re editing a custom theme, you have access to the root directory of that theme and can organize your templates and files using Hugo’s directory structure.

So, for example, if you have static files like images or JavaScript, you put them in the static/directory.

If you want to bundle actual content with your theme, like a page, you put it in the content/ directory. Say that you want to bundle a page with your theme, you could put it at content/blog.html. That page will appear at https://your.micro.blog/blog/, and a template is applied based on the lookup order.

For example, if you’re using Marfa and create a custom theme with a bundled page at content/blog.html, the template used will be layouts/_default/single.html based on the lookup order. If you want that page to use another template, that can be achieved by setting the layout variable in the front matter.

In the end, Micro.blog is just a service that hosts a Hugo website for you (with lots of bells and whistles and extra features). So yes, in theory, you should be able to port the Papermod theme to Micro.blog. But it will probably require modifications. And Micro.blog is “locked down” in some ways. For example, you don’t have access to the front matter when creating a page or a blog post from the web interface or an app.

Absolutely! Any web developer with Hugo experience (preferably in a Micro.blog context) should be able to help you out. I have experience with both. :wink: Send me a DM here on Discourse if you’re interested.

Thanks sod, much appreciated. I’m going to give it another try this weekend when I’ve got some hobby time. If I can’t make headway, you can expect a DM!