Liquan Luoluo

Liquan Luoluo, a static blog driven by Jekyll, following the Material Design design specification, and the main body uses the Material Components Web framework.

It is not a general blog template, but a custom one based on my own preferences. It consists of four sections: essays, reprints, poems, and watching dramas. It uses a light-colored minimalist style, and does not add any extra elements except text, color, and animation. It can be used as a reference for Material Design personal websites, but it is not recommended to apply it directly, and the template has not been optimized yet.

Local debugging

The project consists of Webpack and Jekyll. Webpack is used to generate Javascript and CSS resources required for the website, and Jekyll is used to convert Markdown articles into HTML web pages to generate deployable static sites.

Webpack

Switch to the internal Webpack project directory and compile to generate JS and CSS:

# Enter the internal Webpack project
cd npm
# Install required dependencies
npm install
# Execute compilation and generate JS and CSS in the npm/dist/ directory
npm run build

When the website is deployed, these resource files are hosted on Alibaba Cloud OSS to improve the access speed in mainland China. References to them can be seen in _includes/head.html.

When debugging, you need to set the debug parameter in _includes/configure.html to true, and Jekyll will reference local resources in <header></header>. After entering debug mode, JS logs will also be output to the browser Console.

<!-- _includes/configure.html -->

<!-- Set debug to true, local resources will be used -->

Deploy to GitHub Pages

After debugging, the new JS and CSS files generated by Webpack need to be updated to OSS, and then turn off the debug mode in _includes/configure.html to use these remote resources.

<!-- _includes/configure.html -->

<!-- Set debug to false -->

Push the project to your own repository, and GitHub Pages will automatically execute the build operation of Jekyll to generate a static website.

git push

Wait for a few seconds or minutes, depending on the execution speed of Pages, and the webpage will be updated after completion.