Website Renewal - Background and Design

I have renewed the esplo.net website.
As with the Shikinen Sengu, I periodically transplant it, but this time the theme is "original design", "multilingual support", and "portability".
I will leave the technical details and implementation for the next article, and first, I will look at the background and details of these themes.

Background

Generally, renewal is often done at the whim of the developer, and this time is no exception. However, I had some problems to solve, so I will introduce the problems that existed before the transplant.

Articles and created items are scattered

I had placed blog articles on blog.esplo.net, but as a result of trying out Zenn, note, and dev.to, they were scattered all over the internet. I also had old Qiita articles left over. Additionally, I had placed created items on the "Works" page, but since it was separate from blog articles, it was difficult to access.

With this renewal, I have summarized articles in one place, improving visibility, and managing them in bulk so that I don't forget what I wrote^[1].

Why not use a platform?

Firstly, I wanted to write articles in Markdown and manage them myself. This is because I want to use excellent local editors like VS Code, and I want to make bulk changes. Japanese proofreading tools like textlint are also useful, and the benefits of having the original manuscript in Markdown are significant for multilingual support. Portability is also high, making it easy to respond to changes like this.

Currently, most popular blog platforms do not allow managing articles locally.

Secondly, I wanted to try multilingual support.
WordPress-based blog sites often have a language switching function within pages. In general, blog platforms only support one language, and if necessary, you need to create separate accounts for each language. I wanted to achieve more convenient management and switching.

Thirdly, there was a problem with freedom.
For example, Zenn has good functionality and design, but it is basically only possible to post technical articles^[2]. Other platforms have different features, such as image captions and series summaries, but they are not comprehensive.

I had these concerns, so I decided to build a blog system from scratch.

Original Design

This is the first theme. When it came to renewing the site, I struggled with the design. I decided to create it from scratch, thinking about typography, layout, and everything else.

By the way, the old site used the Notepadium theme of Hugo as is. It's a simple and easy-to-read theme, suitable for technical blogs. However, it was a bit too simple, and I wanted to change the impression.

Old site screen - Top

Old site screen - Article details

Ground Design

First, I thought about what kind of impression I wanted to create.

Since the main content is a technical blog, I decided to add elements that are not typical of technical blogs as accents. Looking at various technical blogs, I thought that the opposite would be "bright", "cute", and "delicious". Food introduction sites often have these elements, so I decided to add sweet-like elements as accents to change the impression. This also addresses the issue of simplicity.

However, since it's a text-based blog site, I need to maintain readability. Therefore, I aimed to create a design that balances simplicity and impression.

Color Scheme

To create a sweet-like impression, I used a cream color (#FFFCF0) for the background and a pink color (#FFC7ED) for the header.

I used pale tones with high brightness and low chroma to add brightness and cuteness. As an accent color, I used a blue color (#466DE2) that is the complementary color of the base color, making it stand out with high chroma.

I limited the colors used to three to maintain simplicity^[3].

Color Palette

I used the base color as the background color, the main color for headers and some borders, and the accent color for parts that need attention, such as "Read more".

The contrast ratio between the base color and the text color is 10, which is good. For auxiliary elements like dates, the contrast ratio is 4.7, which meets the minimum standard^[4].

Font

Using a special font can change the impression, but it can make the text harder to read if used in large areas. Therefore, I used the default font for areas with a lot of text, such as blog articles. Browser standard fonts are useful.

I applied ZEN Maru Gothic to headers and footers, which are areas with little text and need attention. It's a round, cute, and easy-to-read font that helps to soften the impression.

Article Display

I displayed works and blog articles in a card-like format. I used a line to separate them, but it was too strong, so I made it look three-dimensional by adding a shadow. In reality, it's just a shadow, but it makes the shadowless part stand out.

On the home screen, I differentiated between works and articles by changing the appearance, but the content is the same. I made the title part, which needs the most attention, bold and black, and the summary part slightly lighter. I made the tags and dates lighter and added a thin border around the tags with the main color as an accent.

Works Card

Article Card

Article Screen

This screen also displays header information in the same way as the thumbnail card.

I referenced the Zenn screen, which is easy to read, for the article body. In terms of functionality, I added a sticky table of contents, similar to Zenn's, to the article body. This is because I used the Zenn library to convert Markdown to HTML.

I added links to the next and previous articles, which are commonly used. I reused the thumbnail card, but it's too big, so I'm considering removing the image and summary.

Header and Footer

Since there is little information to display, I used the main color as a solid color to make it a design element.

I placed elements that need direct access, such as the language switcher in the top right and SNS links in the bottom right. I used icons to reduce text and maintain simplicity.

Responsive Design

I created it to fit the smartphone screen. Almost everything is made with flex or grid, so it doesn't become strange even if the screen size changes. I branched the table of contents and long horizontal elements by screen size.

By the way, I didn't fix the width of the article body, but instead made it free. On article sites, it's common to fix the width, but this can make it difficult to read on large displays. This time, I assumed that it would be readable even on wide screens and made the width free.

Animation

Currently, I'm using it only for the header source that drops down. I'm considering how to use it effectively.

Multilingual Support

This is the second theme. The old site only provided Japanese, but this time I made all elements multilingual.

Content Translation

I targeted Japanese and English, considering the user layer.

There are several ways to achieve multilingual support. One method is to apply Google Translate to the entire page, which is widely used on personal sites and is easy to implement. On the other hand, with the recent progress of LLMs, high-quality translations can be done at a low cost.

Therefore, this time I used the Perplexity API (llama-3.1-sonar-large-128k-online) to translate the Japanese Markdown file into English. I displayed the translated English Markdown file in the same way as the Japanese version, achieving multilingual support.

However, the translation quality is not stable, and the Markdown syntax is sometimes broken or summarized. I'm considering how to improve the translation quality.

URL Options

There are several options for handling language information (locale).

Subdomains, paths, query parameters, and cookies are available, but this time I included the locale in the path and had the browser keep the state. This is because it's easy to switch and completely separates the content.

When accessing the canonical URL, it automatically determines the locale and redirects, and I added a language switcher in the header.

Portability

Works and blog articles are written in Markdown files. If you've used Hugo before, you'll find it easy to understand. This provides the following benefits:

High Portability

If you want to move it to another site, you can simply copy and paste the Markdown content. Additionally, since it's a standardized notation, it's easy to convert to other formats.

If you've used blog platforms before, you may have had trouble with images not being portable. For small sites, you can distribute images via Cloudinary and complete the migration by copying and pasting.

Easy Article Correction

Since it's almost plain text and widely known notation, you can use various linters. Starting with textlint, you can easily use tools that help with writing articles.

Furthermore, as seen in multilingual support, you can use the output from LLMs as is. You can simply copy and paste the translation results and deploy them.

Easy Management

It's easy to replace multiple articles at once or apply the results of LLMs and revert them if needed. Since you can use Markdown, Git, and VS Code, you can manage it with the same feeling as managing ordinary source code. As an engineer, you can use powerful tools without learning costs and manage it easily.

Extensibility

Markdown itself has limited expressive power compared to general blog platforms, but it's sufficient for ordinary articles. If you need to, you can modify the parser to achieve it. There are various Markdown parsers and plugins available, so you can use the one you like^[5].

While it's not recommended to overdo it, as it may lose portability, having an escape hatch is convenient.

Summary

I've introduced the background and themes of the site renewal. In the next article, I'll discuss the details of the functionality and implementation, as well as future challenges.

脚注

1. Some are still being transplanted ↩︎

2. https://zenn.dev/tech-or-idea ↩︎

3. Using many colors is difficult. Also, I'm not sure if I should include monochromatic text in the palette. ↩︎

4. According to w3.org, the minimum standard is 4.5, and 7 or higher is considered excellent. https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1#contrast-minimum ↩︎

5. By the way, Zenn's library uses markdown-it. ↩︎