Posted on

Table of Contents

WHY

I'm fully committed to Rust and eager to expedite compilation times. For simplicity, I'm willing to forgo comments, search functionalities, and any non-essential features.

Get Start with Zola and Migrate

To begin, install Zola using win-get:

winget install getzola.zola

Initialize our project in an empty folder, similar to Hexo, and follow the provided instructions.

zola init pumpkincheshire

For themes, I chose Apollo, which influenced my decision to use Zola:

git init
git submodule add https://github.com/not-matthias/apollo themes/apollo

Copy our previous posts first, for example, our Hexo blog. The file struct is a little bit different:

  • contents
    • posts
      • blogs
        • blog-hexo
          • index.md
          • ***.png
        • blog-zola
          • index.md
          • ***.png
        • _index.md
      • _index.md
    • _index.md

This structure utilizes Zola's section feature, allowing us to group blogs and create tags by section.

Each directory contains a _index.md , serving as a template for its section.

"Posts" is a primary section that can be added to the menu. Therefore, in the posts' index, include a TOML header:

+++
paginate_by = 7
path = "posts"
title = "Posts"
sort_by = "date"
+++

"Blogs" is a subsection intended to organize markdown files without adding unnecessary layers. To "bypass" this section:

+++
transparent = true
+++

The last "section" refers to individual articles, organized into directories alongside related images for a unified naming scheme. Image tags within markdown files only need to reference the image name, as they reside in the same path level.

Configurations

After migrating, the site might not build immediately due to missing configurations.

theme = "apollo"
taxonomies = [
    { name = "tags"},
]
[extra]
# Put all your custom variables here
mathjax = true
mathjax_dollar_inline_enable = true
toc = true
theme = "toggle"
socials = []
menu = [
    { name = "/posts", url = "/posts", weight = 1 },
    { name = "/tags", url = "/tags", weight = 2 },
    { name = "/about", url = "/about", weight = 3 },

]
comment = false

These configurations are essential for the compiler to identify required parameters.

Now, you should be able to compile. First, run a check:

zola check

Checking site...
Checking all internal links with anchors.
> Successfully checked 0 internal link(s) with anchors.
Checking 0 external link(s). Skipping 0 external link(s).
-> Site content: 6 pages (0 orphan), 2 sections
Done in 21ms.

To serve the site locally:

zola serve

The local site will be accessible at http://localhost:1111/

zola-init

However, we might notice issues with tags not functioning correctly.

An unmerged PR suggests the following fix:

# templates/marcros/marcros.html
{% macro list_title(pages, tag_name=false) %}
    {% if tag_name %}
        <h1>Entries tagged - "{{ term.name }}"</h1>
    {% else %}
        <h1 class="page-title">All articles</h1>
    {% endif %}

    <ul class="posts">
        {% for page in pages %}
            <li class="post">
                <a href="{{ page.permalink }}">{{ page.title }}</a>
                <span class="meta">{{ page.date | date(format="%Y-%m-%d") }}</span>
            </li>
        {% endfor %}
    </ul>
{% endmacro list_title %}

# templates/taxnomoy_single.html
{% extends "index.html" %}

{% block main_content %}
{{ post_macros::list_title(pages=term.pages, tag_name=term.name) }}
{% endblock main_content %}

After implementing this, tags should display correctly.

tags

tags-blog

Publish on Cloudflare

This time, let's deploy on Cloudflare Pages, which allows the use of private GitHub repositories.

git add .
git commit -m "init"
git branch -M main
git remote add origin  https://github.com/PumpkinCheshire/zola-blog
git push -u origin main

Connect our Cloudflare account to GitHub and select your private repository.

cloudflare-deploy

Cloudflare Pages has a Zola pre-set. We can use it and add ZOLA_VERSION to Environment variables along with UNSTABLE_PRE_BUILD

asdf plugin add zola https://github.com/salasrod/asdf-zola && asdf install zola 0.18.0 && asdf global zola 0.18.0

asdf

After the build process, it appeared that all CSS and JavaScript files were missing.

path-error

This issue likely stemmed from an incorrect setting for the web path. Lets temp fix it by change config:

base_url = "/"

Additionally, the noticeable flash when navigating to posts is attributed to slow JavaScript rendering. Activating Cloudflare's DNS and proxy services can alleviate this issue by utilizing caching mechanisms to speed up the rendering process.

Math Test

One more thing, I want to try if math function works:E=mc2E=mc^2 abcdefghi \def\arraystretch{1.5} \begin{array}{c:c:c} a & b & c \cr \hline d & e & f \cr \hdashline g & h & i \end{array}