Yet another brazen two-column theme for Jekyll

  • By Gary
  • Last update: Sep 7, 2022
  • Comments: 0

Nox

Nox is an elegant, minimalistic Jekyll blogging theme based on Hyde. It focuses more on typographic style aesthetics, especially Chinese and Japanese content. As we all know, there is no perfect solution to the problem of CJK and Latin mixed typesetting at present, so it is inevitable that there will be some compromises in the design. In addition, it implements some fine-grained features and fixes some minor bugs of Hyde.

English

See Nox in action with the demo English typesetting / Chinese typesetting.

Features

  • Responsive Design
  • RSS feed (link here)
  • Math formula support (view in example post)
  • Archive, tags features (easy to add yourself)
  • Rich html style support (example content)
  • GitHub gist embed support and more...

Usage

1. Quickly deploy on vercel

Clone this repository:

$ git clone [email protected]:livrth/nox.git

All site titles, and personal information are modified in the _config.yml file, you can customize these content.

All blog posts are in the _posts directory, create your own here. Be sure to pay attention to the naming format, it needs to start with the date like the files I've put here.

Then you can use git to reinitialize this directory, create a new remote repository of your own, and just git push.

The last thing you need to do is to register an account on vercel, and then deploy the repository where you store this blog.

2. Deploy on GitHub Pages

Frankly speaking, in 2022 GitHub Pages still do not support Jekyll 4.0 and newer version, which makes many new features unavailable. Rendering of mathematical formulas is a problem, MathJax renders fine in Jekyll 4.0 and later versions most of the time, but does not display properly in lower versions. If your blog contains a lot of mathematical formulas, I suggest you deploy it in vercel, because it supports Jekyll versions after 4.0.

But GitHub has recently released new feature of deploying GitHub Pages using GitHub actions, which allows us to use Jekyll 4.0+ version.

I have already written the actions template and put it in the .github directory, so you only need to go to your repository's Settings -> Pages -> Build and deployment, and set the Source option to GitHub Actions. Note that you don't need to click the configure button, because the configuration file I have already written for you can be used directly.

One very important thing: make sure to change the baseurl option in the _config.yml file to the suffix of the GitHub repository name. For example, if your GitHub repository is username/repo, then change the baseurl to /repo, otherwise GitHub Pages will not be able to parse the paths of css and font files correctly. If your GitHub repository name is the default username.github.io, then you don't need to change it, just keep it as /.

Local development or debugging

If you are not interested in developing the code for the blog itself, then you can ignore this part.

1. Install dependencies

Nox is built on Jekyll and uses its built-in SCSS compiler to generate our CSS. Before getting started, you'll need to install the Jekyll gem:

$ gem install jekyll bundler

If you are unfamiliar with ruby, please refer to the official Jekyll installation tutorial and follow it step by step.

2. Running locally

Install all required gems:

$ bundle install

Preview the blog locally:

$ bundle exec jekyll serve --livereload

Depending on the version of Ruby and Jekyll on your system, there may be some warning messages, you can search Google to modify the version of these dependencies. Usually, however, these warnings have little effect.

Todo

  • Responsive Design
  • Web page adaptive screen ratio on PC
  • Dark Mode (based on the system theme)
  • Add menu on the mobile (more concise UI)

Credits

License

Open sourced under the MIT license.

Github

https://github.com/livrth/nox