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.

Features

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.

Demo

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:

    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
  

Customization

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

• Examples in the _layouts directory, and
• The liquid documentation.

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!