Start a Hexo Static Site and Make Your Own Theme

A question came up recently for a module I’m working on. It’s about how to start hexo and make a new theme for it.

In the order of events we will:

  • Generate a hexo blog / site
  • Generate a theme
  • Change the theme settings
  • Change the hexo settings to use that theme
  • Run the test server

From the terminal we can go through it all like this:

npm install hexo-cli@latest -g
npm install yo@latest -g
npm install generator-hexo-theme@latest -g
mkdir blogtest
cd blogtest
hexo init
cd themes
mkdir themetest
cd themetest
yo hexo-theme
# edit _config.yml
cd ../..
# edit _config.yml, change theme: themetest
hexo server --debug

The top part for the npm install is just to update and refresh the modules needed to generate and serve the blog. Sometimes an old version can be hanging out that throws a wrench in our attempts.

Next we create the directories needed for the site and the theme. hexo init will create the files required for the blog. yo hexo-theme runs generator-hexo-theme through yeoman which stubs out the files for a blank theme.

Once you have the files generated you can edit the _config.yml file both in the blog root and in the theme directory. Look for theme: landscape and change it to theme: my-own-custom-theme then you’re ready to run it.

hexo server --debug

Be well and happy theming!

Author Tony Crowe, Salt Lake City, UT
top
home
Attribution
Lato font by Łukasz Dziedzicwww.latofonts.com/team
Roboto font by Christian Robertson, Google Incchristianrobertson.comwww.google.com/fonts
Inconsolata font by Raph Levien, Google Incwww.levien.comwww.google.com/fonts
hexo: fast, simple & powerful blog frameworkhexo.io
ace editorace.c9.io
virtual-domwww.npmjs.com/package/virtual-dom
Black Granite Water Droplets, William Warbyhttps://www.flickr.com/photos/wwarby