Theme Development in Octopress - octopress

Octopress is a great blogging engine; however, I seem to have a lot of trouble finding how to create a new theme in Octopress.
The official guide I found (http://octopress.org/docs/theme/) only limits to how to modify the official theme, and doesn't really detail the syntax such as
{% assign index = true %}
{% for post in paginator.posts %}
{% assign content = post.content %}
nor the directory structures. Other theme creators (http://billpatrianakos.me/blog/2012/10/31/the-making-of-an-octopress-theme/) have simply done this by looking at the default theme, which is the path I might take.
But before I embark on this strenuous process, I want to know if there is some kind of guide to creating Octopress themes that I might have missed.
Thank you,

Octopress themes are in reality just Jekyll templates (Octopress is a wrapper around Jekyll that provides nice extras) which use the Liquid templating engine.
You can learn more about Jekyll (including the directory structure) from the documentation.
You can learn more about Liquid tags on their GitHub wiki.

You could look at other people theme code on github: https://github.com/imathis/octopress/wiki/3rd-Party-Octopress-Themes

Related

Jekyll or Hugo theme with multilanguage support

I'd like to start designing a website using Jekyll or Hugo. The plan is to publish it on GitHub or GitLab pages.
After hours of searching I'm pretty confused about all the facts. Hugo support natively a multilanguage utility while Jekyll not. There are some plugins for Jekyll but plugins are not supported on GitHub pages anyway.
With Jekyll I tried to follow this solution without any concrete solution for the translation of the layouts while with Hugo I've found the instruction pretty confused (but that's my fault).
What I'm looking for is a theme (Jekyll or Hugo it doesn't matter) that is already designed with 2 (or more) languages.
Beside the official Hugo instructions for creating a multilingual site, you also have:
multilingual examples which has been recently updated
multilingual mode
themes with multilingual already baked in as (from the Hugo themes list site):
hugo-scriptor-theme
dimension
docuapi
Plus, with Hugo 0.87 (Aug. 2021), you also have Date/time formatting layouts and localized string for the current language.
As well as the themes that VonC linked to, there is the Beautiful Hugo theme which I recently updated to work with multilingual sites.
I also recently made an example of a multilingual Hugo site in hugo-multilingual-example at Github, so you can compare that with the example in the Hugo repository that VonC linked to.
With Hugo, you should ignore the "Create a Multilingual Site" tutorial, as it was made before the native multilingual support was added, and is now outdated. Instead, you should base everything on the "multilingual mode" documentation.
Hopefully that should be enough to get you started, but let us know if you have any other problems.
I localized a Jekyll theme to output to German and Japanese here. It depends what requirements you're trying to support. We sent out translated files to a translation agency and then reimported them back into the project.
My strategy in defining the theme was to put each language in its own collection. Each collection defines default values for top nav and footer to be in that language.
Additionally, I used a different config file for each language. The language's config file defined strings for that language. File names and URLs remained in English.

Documentation for Hugo syntax inside of handlebars?

I'm trying to build a site with Hugo and having a hard time understanding some of their documentation. Specifically, when displaying frontmatter in a template.
There are functions you can preform on variables inside the handle bars. ex: {{ range .Data.Pages }} What is range? I can't find any documentation on what these functions do. Or is it just plain Go code and anything Go is fair game? Just looking for documentation so I can figure out what I need.
These are functions that have specifically been made available to Go templates (you can't just use any Go functions). They include the built-in functions documented in the golang.org template docs which JimB linked to in his comment, and also Hugo-specific functions which are documented on the Hugo template functions page.

Jekyll page failing on github but works successfully locally with --safe flag

I have a Jekyll based post which works successfully when running locally with the --safe flag on. However, the page build fails on github pages. I am not using any plugins either. Can someone please help me figure out what is not compatible with github? Their page is not very helpful. I'm already following their advice of not plugins and using --safe locally to test before committing.
Link to my post: https://raw.github.com/danishm/danishm.github.com/master/_posts/2012-07-23-maintaning-read-more-links-when-moving-from-drupal-to-jekyll.md
Could it be the usage of {% raw %}? or the fact that I am trying to talk about liquid template code itself and trying to syntax highlight it
The issue is due to the fact that github pages uses liquid 2.2.2 and my local install was using liquig 2.3.0. The filter {% raw %} is new in 2.3 and not available in 2.2.2. In version 2.2.2, you need to use {% literal %} instead.
Once I made that change, the page got built successfully on github pages and is now visible on my blog.
I was also able to reproduce the issue locally by installing Jekyll 0.11.0 and liquid 2.2.2, which is what github pages use.
Not sure, but there might be something wrong on GitHub, their status page shows that there was some problems with Pages (25th Jul 2012), that should be fixed now, but I still have same issues as you, pages won't compile, and local run w/ jekyll --pygments --safe works fine.
If you had used Jekyll version 1.0 at the beginning, you may config 'auto' option in _config.yml file. But the current version of Jekyll is 1.2.x, so this option is depreciated. In my case, it made my errors: successfully in local but not working in git page. The solution is so easy, just comment this line: "auto:true". Everything seems OK. In more details, you must comment that line to turn on Auto-regeneration feature which allow the server regenerate html pages automatically.

Simple Compass+HAML webserver

I love compass (SASS) and HAML. I've been using staticmatic for building static web pages. Staticmatic seams outdated (no updates, bugs). What are the alternatives?
What I would like:
$ preview .
> Server started ad port XXXX
> Now you can use Compass and HAML
:). So... no configuratio, no directory structure, just haml and sass files.
I am currently using Compass/Sass/Haml with middleman. https://github.com/tdreyno/middleman It is very easy to use, and runs a sinatra in the background so you can see your changes live in your web browser.
After you are done editing and previewing your markup it builds static HTML from your stack of Compass/Sass/Haml. See https://github.com/tdreyno/middleman/wiki for usage.
This requires no conf at all except to tell it which templating engines you are using at setup so I think it is exactly what you are looking for.
You can try jekyll. I think it doesn't work with sass and haml out of the box but you can look at plugins
Don't forget Nanoc. While it is a little involved, it has some slightly more powerful features than StaticMatic. It does depend on a directory however. :/
There are just a ton of static generators around, most of them in Ruby. I'm planning to use Frank for the next few static projects.
It uses Tilt to support a ton of template engines
It has a concept of layouts, which go in a separate layouts folder, and templates can have a metadata header, but other than that it's very minimal.

Jekyll vs RefineryCMS?

I know many Ruby users are using Jekyll but I wonder what the benefits that will bring over RefineryCMS?
Could someone highlights the differences and pros/cons for each.
I'm one of the core developers on Refinery CMS.
The architecture of each project is vastly different. Here's a few things Refinery CMS has:
Web based interface (just go to /refinery to login and edit content)
Visual content editing (but also supports editing in plain HTML)
Stores it's content in a database (MySQL, SQLite, PostgreSQL - your choice)
Suitable for non technical people to edit
Supports Rails 3
Supports localisation in 11 languages (and you can add your own)
Support and docs: IRC, Google Group, Tutorials, API docs, Github repository
I can't be authoritative about Jekyll (maybe mojombo can answer) but it looks like:
Static content editing
Stores it's content in files
Developer focused, not suitable for an end user to edit
Markup based editing
Will load slightly faster as the pages are static
I hope that helps weigh it up. It all comes down to your project requirements.
Well, jekyll is 100% static. All files are generated into static HTML. Jekyll is amazing for small sites that don't really need dynamic content. With jekyll you write the content in your own text editor.
I haven't tested RefineryCMS, but it is more like what you would think of as a content management system with data stored in a database managed through a web interface. If the site is going to be managed by non-tech people, I'll say jekyll is a no-go and that refinery is a better choice.
RefineryCMS is fully Rails 3.0 compatible and they offer great support over IRC. Furthermore RefineryCMS is a fully featured CMS with a localizable interface while Jekyl is not. It all depends on your projects needs.
The best thing to do would be to install them both and play. You will soon see they both serve two completely different purposes. Refinery is a CMS and Jekyll is a static site generator . Jekyll is not built for content management.

Resources