/qrzou.github.io

Primary LanguageSCSSCreative Commons Zero v1.0 UniversalCC0-1.0

The Minimal Light Theme

LICENSE

[Demo the theme] [简体中文 | 繁體中文 | Deutsche]

This is the source code of my homepage. I build this website based on minimal.
Feel free to use and share the source code anywhere you like.

The latest version of my homepage is available here: [link]
A template for Max Planck Institute for Informatics is available here: [link]

Features

  • Simple and elegant personal homepage theme
  • Jekyll theme, automatically deployed by GitHub Pages
  • Basic search engine optimization
  • Mobile friendly
  • Supporting Markdown
  • Supporting dark mode

Project Architecture

.
├── _includes                    # the Markdown files for publications and services  
├── _layouts                  
|   └── homepage.html            #  the html template for the homepage 
├── _sass                     
|   └── minimal-light.scss       #  this file will be compiled into a CSS file to control the style of the page
├── assets                       #  some files
├── .gitignore                   #  this file specifies intentionally untracked files that Git should ignore
├── CNAME                        #  the custom domain, will be used by GitHub page sevice
├── Gemfile                      #  a RubyGems related file
├── LICENSE                      #  the license file
├── README.md                    #  the readme file (English)
├── README_de.md                 #  the readme file (German)
├── README_zh_Hans.md            #  the readme file (Simplified Chinese)
├── README_zh_Hant.md            #  the readme file (Traditional Chinese)
├── _config.yml                  #  the Jekyll configuration file, including some options of the page  
└── index.md                     #  the content of the index page, using Markdown

Usage

Using on GitHub

To use this theme, add the following to your repository's _config.yml:

remote_theme: yaoyao-liu/minimal-light

Please note that adding the above line will directly apply all the default settings in this repository to yours.

If you hope to edit any files (e.g., index.md), you still need to copy them to your repository.

You may also fork this repository (or use this repository as a template) and change the name to your-username.github.io.

Then you need to enable the GitHub pages for that repository following the steps here.

Using Locally with Jekyll

You need to install Ruby and Jekyll fisrt.

Clone this repository:

git clone https://github.com/yaoyao-liu/minimal-light.git
cd minimal-light

Install and run:

bundle install
bundle exec jekyll server

View the live page using localhost: http://localhost:4000. You can get the html files in _site folder.

Customizing

Configuration variables

The Minimal Light theme will respect the following variables, if set in your site's _config.yml:

# Basic Information 
title: Your Name
position: Ph.D. Student
affiliation: Your Affiliation
email: yourname (at) example.edu

# Search Engine Optimization (SEO)
# The following information is used to improve the website traffic from search engines, e.g., Google.
keywords: minimal light
description: The Minimal Light is a simple and elegant jekyll theme for academic personal homepage.
canonical: https://minimal-light-theme.yliu.me/

# Links 
# If you don't need one of them, you may delete the corresponding line.
google_scholar: https://scholar.google.com/
cv_link: files/Curriculum_Vitae.pdf
github_link: https://github.com/
linkedin: https://www.linkedin.com/
twitter: https://twitter.com/

# Images (e.g., your profile picture and your website's favicon) 
# "favicon" and "favicon_dark" are used for the light and dark modes, respectively. 
avatar: ./assets/img/avatar.png
favicon: ./assets/img/favicon.png
favicon_dark: ./assets/img/favicon-dark.png

# Google Analytics ID
# Please remove this if you don't use Google Analytics
google_analytics: UA-111540567-4

Editing index.md

Create index.md and add your personal information (e.g., publications, research).

Stylesheet

If you'd like to add your own custom styles:

  1. Create a file called /assets/css/style.scss in your site

  2. Add the following content to the top of the file, exactly as shown:

    ---
    ---
    
    @import "{{ site.theme }}";
  3. Add any custom CSS (or Sass, including imports) you'd like immediately after the @import line

Layouts

If you'd like to change the theme's HTML layout:

  1. Copy the original template from the theme's repository
    (Pro-tip: click "raw" to make copying easier)
  2. Create a file called /_layouts/homepage.html in your site
  3. Paste the default layout content copied in the first step
  4. Customize the layout as you'd like

License

This work is licensed under a Creative Commons Zero v1.0 Universal License.

Acknowledgements

Our project uses the source code from the following repositories: