I started to build my own blog website in 2013. I initially used WordPress, bought a cloud host, and adopted a CMS style skin. The original website looked like this:

Then I learned Markdown syntax, got my hands on some static site generation tools, and struggled to migrate the original site to Hexo. I wrote my own skin and made it look like this:

Later, I gradually found that Hexo was too slow for each build and release. Sometimes when changing skins, I would encounter a lot of JS errors, and it was not easy to debug when developing my own skin.

Then I came into contact with Hugo, the static site generator implemented by Go language, known as “the world’s fastest static site generation framework”, both content generation speed and development efficiency are very high.

Decisively switching from Hexo to Hugo. There is almost no migration cost, just copy the Markdown article and run.

The next most important thing after the site generation tool is to get a good skin. The last skin I used looked like this:

Every once in a while, I will feel the blog skin is not good, and then always want to change the skin, on the Internet to find a circle of no like will write their own.

Some time ago I saw PHP bird brother’s personal website:

I was attracted at that time, I like this simple atmosphere with black and white style. So I came up with the idea of copying bird brother’s blog skin.

Fortunately, Hugo’s theme development work is relatively simple, and the official website documents are very detailed. It took almost two hours to finish the basic page, and another week to do some optimization.

Finally write the Hugo skin: hugo-theme-period.

Why period? Because I found that the WordPress theme used by Birdbrother’s website is also called Period. I do wordpress-theme-copy-to-Hugo work, so keep the theme name the same.

The skin is now available on my website: idoubi.cc, and the preview looks like this:

I support several widgets on the right side of this theme, respectively

  • [Widget. about
  • [Widget. projects] Open source projects showcase
  • [Widget.qrcode
  • [Widget. categories] Article categories display
  • [Widget. tags] Article tags display
  • [Widget.links] Links

If you download my theme, you can configure the corresponding pendant according to their own needs.

The skin is open source on Github at github.com/idoubi/hugo…

I have also submitted this skin to Hugo’s official theme warehouse, and I can see it in Hugo’s official theme store after it is approved.

Welcome to download and use, give a Star.

More

I highly recommend Hugo, it’s one of the best development tools I’ve ever used. In addition to writing static websites, you can also use it to write project documents, apis, etc. It is very extensible and document-friendly.

I wrote an article before: build a personal blog website based on “Hugo”, and made a simple popular science on the basic use of Hugo. Later, I plan to write about Hugo’s key skills in developing custom skin, hoping that more people will pay attention to Hugo and use Hugo.

Please follow my official account for more information.