I've Moved My Blog from Hatena Blog Pro to Hugo

I used to create my blog with Hugo + Netlify, but I somehow moved to Hatena Blog Pro. In the end, I returned to Hugo and hosted it on Amplify Console, so I'll leave a memo to avoid taking the same path again.

Purpose of Migration

• Reduce running costs
• Manage in markdown
• Improve display speed
• Open-source in the future

Let's take a look at each of these.

Reduce Running Costs

Hatena Blog requires a Pro contract to use a custom domain, which costs 1,008 yen per month (equivalent to 600 yen per month with a two-year contract). Although it's a good deal, I felt it was unnecessary since I wasn't using the Pro features much. ...Why did I migrate in the first place?

Moreover, there are now more options available, including Hugo. This became a significant reason for my migration.

However, Hatena Blog's ranking, star, and subscription features are powerful. If you value these features, migration might be difficult.

Manage in Markdown

Hatena Blog's editor and dashboard were frustrating for a modern programmer like me. I was always worried about accidentally publishing or forgetting to save.

With Hugo, I can manage my blog in markdown, making it extremely easy to search for articles using grep or replace them all at once. Additionally, uploading to Github makes management easy, and linking is also straightforward.

Improve Display Speed

Since my blog isn't very popular, I at least want to improve the display speed to avoid disappointing my readers (probably).

Hatena Blog has been stuck in beta for AMP support and doesn't seem to support HTTP/2. Basically, there are no updates, and it's stagnant. Moreover, Netlify's free plan doesn't have a Japanese edge in its CDN, which is a well-known issue. As a result, I decided to use Hugo to create a static site and host it on AWS Amplify Console.

After the migration, the mobile score on PageSpeed Insights improved significantly from 35 to 96. Although the scores for each page aren't as dramatic due to Disqus blocking, they still improved by about 10 points.

Open-Source in the Future

I think it's difficult to implement features like "article revision history" and "subscription" on a website. If these features are open to visitors, it's reassuring, but Wordpress and Hatena Blog only provide editor-oriented history. Subscription is also challenging, and it's difficult without an established service like Hatena Blog or Qiita (email subscription is also not very appealing).

By hosting my site on Github, I can fulfill these requirements. Of course, you need a Github account to subscribe, but that's okay since my blog is for engineers.

With a static site and Amplify Console, I don't need to include anonymous information in the repository, making it easy to open-source. I've added "in the future" to confirm that there are no issues, but I plan to open-source my blog soon.

Other Tricks

Use Iframely

Since my PV is low, I've embedded all card-type links using Iframely. It's easy to use, and I can customize it by simply passing the link as a shortcode.

Use AddToAny

Creating a share button is one of those tedious tasks. AddToAny generates a share button just by adding a link. I also tried AddThis, but it was blocked by AdBlock, so I switched to AddToAny.

Use Cloudinary

I was already using Cloudinary, but I realized its convenience during the migration. I upload images to Cloudinary and link to them. This way, I don't need to worry about images even if my blog's creation method changes. It's highly portable, so I recommend it.

Future Plans

Fine-Tune the Design

I want to adjust the design when I feel like it. Especially, I want to suppress the iframely card, which stands out too much.

Open-Source

As mentioned above.

Write More Articles

This is the most important thing.

Conclusion

If you have low PV, you don't need to worry about most things.