After a while, I believe this Hexo Blog already finished most parts of the development, so I decided to write a simple guide about this website.
This website is based on Hexo. It is a fast, simple & powerful blog framework. It is also an open sources Program. You can find more on its Offical Website. At the same time, this blog was based on a theme called Butterfly, you can find more at the footer of the website. The reason I chose to use the theme is it let your blog become more flexible, it gives you a lot of choices to control your website and you can change the sources code to meet your requirements.
Finally, many of the features or improvements on this blog come from other people (from the Internet), thank them for sharing. I will add some recommended sites. Hope this article can help you.(I’m also a layman. I’m just play for fun.)
Recommended sites(You can find lots of useful articles from these website about the Blog，they all do better than I do.)
- https://butterfly.js.org (Theme Author)
The development environment：
Mac OS: Monterey (arm64)
Ubuntu: 20.04.3 LTS (arm64)
Main Steps(This article will pay more attention on simple beautification)
- Buy a computer(Ex: RPI😁)
- Install operating system
- Install npm
- Install node.js
- Install Hexo
- Chose a theme (This article use butterfly)
- Read a lot of articles about the theme
- Init hexo
- Write something by using Markdown
- Post it
- Transfer to your server or other places
- Review it
Before you do anything on your Blog, please make a backup to prevent you break it.
As the subject author Jerry said, it is best to create a file_config.butterfly.yml in the root directory of Hexo and copy the _config.yml content of the theme directory to _config.butterfly.yml, you only need to configure it in _config.butterfly.yml in the future.
Hexo automatically merges the configurations in
_config.butterfly.yml in the theme. If there is a configuration with the same name, it will use the configuration of
_config.butterfly.yml, which has a higher priority.
So I recommend you Inject Custom CSS first. It can prevent something stop working if you update the theme.
Command+F (Mac) and type “inject” in the search box. Find this.
After that you go to your myblog folder
/hexo-theme-butterfly/soueces/css/ then you create a css file you may call it mycss.
Just like I said, you can find a lot of resources on Internet, I put some CSS staff here and most of them are still from other websites, you can try to use and change this CSS, it won’t break your computer. Thank them for sharing again.
Arrow color change
/* Arrow color change */
/* Footer transparent */
Find more from Recommended sites
Inject CSS is just one way to let your Blog looks better, you can also add Plugins to change your Blog.
- Learn how to use search engine
- If you have some problems, you can join in some related groups
Go to https://hexo.io/plugins/
Go to https://hexo.io
You can start form here https://hexo.io/docs/