Cedric Chee's Website — Check it out! ·

Source code for my personal website and blog. Crafted with :heart:

---

Features | What is under the hood | Quick Start | Installation | Customization

  

Features

• Fast and lightweight, only ~10kB CSS before the content, images, and videos
• Total page weight ~7kB (gzip compressed)
• No unnecessary JavaScript, no Web bundler :sunglasses:
• Near perfect Lighthouse, YellowLabTools, and Observatory scores (need 11ty improvements)
• Netlify for hosting and deployment

What is under the hood

Built using:

• Zola
• Tests with GitHub Actions

Quick Start

If you want to test locally on your machine, do the following steps:

1. :star: to the project. :metal:
2. Install Zola
3. Clone the project:

sh git clone https://github.com/cedrickchee/cedricchee.com.git cd cedricchee.com

Run:

sh make serve

Next, open it in your browser: http://127.0.0.1:1111/.

Installation

The Quick Start shows how to run the theme directly as a site. Next we will use it as a theme to a NEW site.

Step 1: Create a new Zola site

zola init coolsite

Step 2: Install theme

Download this theme to your themes directory:

sh cd coolsite/themes git clone https://github.com/cedrickchee/cedricchee.com.git

Or install as a submodule:

sh cd coolsite git init # if your project is a git repository already, ignore this command git submodule add https://github.com/cedrickchee/cedricchee.com.git themes/cedricchee.com

Step 3: Configuration

Copy the config.toml from the theme directory to your project's root directory: (This will give you a base configuration with all config values used).

sh cp themes/cedricchee.com/config.toml config.toml cp themes/cedricchee.com/netlify.toml netlify.toml

Step 4: Add new content

Write some posts :bowtie:

Step 5: Run the project

Just run zola serve in the root path of the project:

sh zola serve

Zola will start the development web server making your site accessible by default at http://127.0.0.1:1111. Saved changes will live reload in the browser.

Customization

You can customize your configurations, templates and content for yourself. Look at the config.toml, content files, and templates files in this repo for an idea.

Edit Zola configurations in config.toml to customize your site.

Number of items per page for pagination

(WIP)

Colors and Styles

(WIP)

Global Configuration

There are some configuration options that you can customize in config.toml.

Configuration options before extra options

(WIP)

Configuration options under the extra

Most options in the config.toml are self documenting, meaning between the name of the config value and the notes in the file it is usually obvious what an option is for.

The following options should be under the [extra] in config.toml:

• (WIP)

Top and Footer menus

• (WIP)

SEO and Header Tags

I haven't add SEO tags yet. Some important head tags for browser compatibility have been added.

(WIP)

Templates

All pages extend to base.html, and you can customize them as need.

Optional Performance Optimizations

• Icon font (Hack, Iosevka)
• Dark/light theme-switcher

• Optimize PNG files:

  All PNG files can be optimized using oxipng, this usually results in files 1/2 the size: (TODO)

• Pre gzip/Brotli content to serve with NGINX:

  If you are serving your site with NGINX, you can pre gzip your content.

---

Reporting Issues

I use GitHub Issues as the official bug tracker. Please search existing issues. It's possible someone has already reported the same problem. If your problem or idea is not addressed yet, open a new issue.

License

• Code: MIT Copyright Cedric Chee
• Content: Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)

---

Aside: this is version 2 of my personal website project here.