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.