Yōuyǎ Jekyll theme

I finally spun my website into a Jekyll theme of it’s own. As someone who hasn’t touched web design in years, it was a long learning curve, and there are still many things I hope to improve - but it’s a start!

You can find the Yōuyǎ theme here for free under MIT license.

From the README:

Yōuyǎ is an elegant profile theme for Jekyll.

Building the theme

I used Blocs to design the actual pages and behavior. It worked great, but as someone who doesn’t spend a lot of time on UI, mixing GUI and code generation is still really painful. In particular, versioning the Blocs project in Git doesn’t work, which made the development cycle feel precarious.

I ended up relying on DVC heavily to manage the Blocs app and the related assets - it’s a brilliant technology that I learned from working on ML projects that I hope will keep growing in its adoption.


Here is what I aimed for when building the theme:

  • Profile with sections for:
    • Code with links to GitHub
    • Academic papers with links to arXvi & descriptions
    • Projects, with links to GitHub & arXiv
    • Reading book list
    • Writing & blog entries
    • Photography
    • About
  • Random background from a collection of images.
  • Custom menus for each page.
  • Social links.
  • Easily customizable.

The theme supports the following page types:

  • About
  • Papers (for academia)
  • Projects (for coding)
  • Notes (for writing)
  • Reading (for posting your reading list, which has helped me keep up my reading goals this year)
  • Photography - this section is the most basic so far, and I hope to expand it in the future.


You can see a live demo of the site in action here.

Get started

  1. In your own Jekyll website, add it to your Gemfile
      gem "youya", github: "smrfeld/jekyll-theme-youya", branch: "main"

    and run

      bundle install

    or just put this whole repo in your _theme/youya directory.

  2. Finally set the theme in your _config.yml file:
      theme: youya

Now you can set the following required fields (see also the example _config.yml in the test folder):

  • URL of site:
      url: https://smrfeld.github.io/jekyll-theme-youya
  • Background images: The background image is read from a folder under assets/img in your site loads a random image each time: 0000.jpeg,0001.jpeg,…. In your _config.yml:
      background_img_folder: background_imgs
      no_background_images: 2
  • Logo images: both black and white logo images should be provided, referring to assets/img:
      logo_black: logo_black.png
      logo_white: logo_white.png
  • Favicon in assets folder should be 32x32 pixels:
      favicon: favicon.png
  • Menu: this is the main navigation menu:
        - title: Home
          local_url: index.html
        - title: Page
          local_url: page.html
        - title: Reading
          local_url: reading.html
        - title: Writing
          local_url: writing.html
        - title: Photography
          local_url: photography.html

    You can also specify a remote_url instead of a local_url - local_url is relative to the top-level directory of your site.

  • About section text and image (referring to assets/img folder):
      about: "Hello World"
      about_img: profile.jpg
  • Social links to GitHub, LinkedIn, Google Scholar:
      github_url: https://github.com
      linkedin_url: https://www.linkedin.com
      google_scholar_url: https://scholar.google.com


The site is broken into many reusable sections in the _include directory. You can easily make your own _layouts. Refer to:

Final thoughts

There are still some odd ends, but I hope to keep building on the theme in the future - maybe to the point that someone in the wild will end up using it too!


Oliver K. Ernst
December 31, 2022