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
- blog-hexo
- _index.md
- blogs
- _index.md
- posts
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/
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.
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 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
After the build process, it appeared that all CSS and JavaScript files were missing.
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: