Posts with tag Hexo

Using Sass and Webpack with Hexo

Why Use Sass and Webpack Sass is a superset of CSS that extends CSS syntax with numerous features, including rule nesting, variable definition, includes, and mathematical operations. Key functionalities can be explored in the Official Getting Started Guide . Sass originally used the .sass file extension with a YAML-like structure that wasn't fully compatible with traditional CSS. The current Sass format (.scss) maintains full CSS compatibility. I use Sass for two primary reasons: First, for clearer CSS rule management. For example, when I have CSS rules that only apply to the website header, I can group them within a single block: header { h1 { ... } } Second, to reduce CSS file size during page loading. Although my site uses Bootstrap,...

Getting Started with the Hexo Static Site Generator

What is a Static Site Generator Common CMS platforms like WordPress and Typecho are dynamic websites. When users access a webpage, the server runs programs written in languages like PHP, Python, or Node.js to dynamically generate the webpage in real-time based on the user's request and returns it to the user. Static site generators like Jekyll, Hexo, and Hugo take a different approach: they pre-generate HTML files in advance to match anticipated user requests. The main advantages and disadvantages of these two approaches are as follows: Advantage Dynamic Website Static Website Dynamic Supports complex interactions and content updates based on user input Limited flexibility,...