Icarus is a great theme for Hexo. And we can also customize it to make it more personal! We assume you installed hexo-theme-icarus as a node package via npm. If not, you can replace all the node_modules/hexo-theme-icarus path below to corresponding installation path. And make a backup of your current configuration before you proceed in case of any error!

(Even More) Rounded Corners

The various containers, or “cards”, on the web page already have rounded corners. However, sometimes they don’t look round enough. We can manually adjust how much we want the rectangle corner to be curved. Go to node_modules/hexo-theme-icarus/include/style/base.styl and change $card-radius to your preferred size. I’m using $card-radius ?= 16px.

Change Primary Colors

By default, the “primary” color of this website is blue, which is the color of the color of hyperlinks, and active elements when you hover your mouse. This can be customized in the same base.styl file. Change the $primary variable to your favourite color, and there’s also other interesting variables like $navbar-item-active-color that you might consider to change.

In the same file, you can also configure other elements like card shadows. It follows the same format as the usual CSS box-shadow.

Wide Screen Page Width

The default page width seems a bit too narrow under wide screens (there are some unused horizontal screen space). And you can modify it! Go to node_modules/hexo-theme-icarus/include/style/responsive.styl and this Javascript code determines the page width. For the widescreen section under function fullhd, I changed it to max-width: $widescreen - 1 * $gap and width: $widescreen - 1 * $gap. It’s sufficient for me to just minus one multiply the gap. Thanks this blog for the solution!

Change Background Image

This one seems fun. Instead of the default grey background, you can configure something more interesting. You can simply put the css inside hexo-theme-icarus. Go to this directory: node_modules/hexo-theme-icarus/source/css, create a file (for example, bg.styl. You can use the generic way of setting the background image of any webpage:

1
2
3
4
5
6
7

body {
  background-image: url("/path/to/your/background/image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}

Then, include this file to the Hexo generation system by adding

1

@import 'bg'

to style.styl file. Now you have a working background image in your website! This blog uses a CG from Sakura no Uta as the background image.

Install Nodejs

Install hexo

1

$ npm install -g hexo-cli

Create blog folder

1
2

$ hexo init blog
$ npm install

Install deployer and next theme

1
2

$ npm install hexo-deployer-git 
$ npm install hexo-theme-next

Copy and customize theme file

1

$ cp node-modules/hexo-theme-next/_config.yml _config.next.yml

Create new post

1
2

$ hexo n "post-title"
$ hexo n page "page-title"

Generate

1

$ hexo g

Local testing server

1

$ hexo s	# or hexo s -g for generate

Deploy

1

$ hexo d	# or hexo d -g for generate