linux

Hexo

Previously I was working with Jekyll, the most popular static web generator. As I have an interest in Nodejs (and not in Ruby), I wanted to use a site generator that would give me practice with Node. Hexo was the most popular according to staticgen. I am working with the default “Landscape” theme.

Install

1
2
3
4
5

$npm install -g hexo-cli

apt-get install pandoc
npm install hexo-renderer-pandoc

Install hexo-render-pandoc and modify /node_modules/hexo-render-pandoc/index.js:

//var args = [ ‘-f’, ‘markdown’, ‘-t’, ‘html’, ‘–mathjax’, ‘–smart’];
var args = [ ‘-f’, ‘markdown’, ‘-t’, ‘html’, ‘–katex’, ‘–smart’];

1
2

npm install hexo-math --save

Basics


$hexo new draft mypost in the lostnation directory
will create the post in the _drafts subdirectory.
File title will be "mypost.md"
There will be a subdirectory "mypost" that will hold other content (figures, data etc.)
When ready: $hexo publish mypost
Will create 2016-12-06-mypost directory and 2016-12-06-mypost.md file.
$hexo generate will process all files into html
$hexo serve will start a local web server. The local site can be inspected at http://0.0.0.127:4000
$hexo deploy will upload to your web server. FTP parameters are in _config.yml

Hexo deploy

For deploy to work:
update ~/.netrc with site / username / password (for manual ftp diagnosis)
chmod 600 ~/.netrc

~/.netrc
1
machine lostnation.us login lnsDFoKytr@lostnation.us password mypassword

Must generate an FTP user and assign a home directory.
cpanel automatically generates a home directory different from what I want - so change.

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: ftpsync
  host: lostnation.us
  user: lnsDFoKytr@lostnation.us
  pass: mypassword
  remote: /
  port: 
  ignore:
  connections: 
  verbose: true

hexo deploy will fail silently without debugging info. Manually ftp to diagnose. Better yet, avoid it entirely.
Use rsync, which is faster and can perform incremental uploads, something hexo deploy can’t do.

lostnation-upload.sh
1
2
3
#!/bin/bash
rsync -avzP --delete --rsh='ssh -p2222' /home/mbc/syncd/lostnation/public/ mbc@nnn.nnn.nnn.215:/home2/mbc/public_html/lnsDFoKytr

The slash after …/public/ is necessary to transfer everything under ./public but not the public itself.
…/public will transfer ../public/…

add items in: /home/mbc/lostnation/themes/landscape/_config.yml

# Header
menu:
Home: /
Archives: /archives
About: /about
rss: /atom.xml

Comments

get rid of the extra comments link in /home/mbc/lostnation/themes/landscape/layout/_partial/article.ejs
comment out:

Templates

Templates are found in the scaffolds directory.
Modify to include categories, comments: true etc.
Anything included in the template will end up in the draft (or post).

RSS icon

http://jr0cket.co.uk/hexo-themes-test/2014/06/hexo-custom-theme---adding-navbar-icon-links-using-fontawesome/
https://github.com/iissnan/hexo-theme-next/issues/153

icons from CSS
http://astronautweb.co/snippet/font-awesome/

in theme modify layout/_partial/header.ejs
move:

    <% if (theme.rss){ %>
      <a id="nav-rss-link" class="nav-icon" href="<%- theme.rss %>" title="<%= __('rss_feed') %>"></a>
    <% } %>
    <a id="nav-search-btn" class="nav-icon" title="<%= __('search') %>"></a>
  <div id="search-form-wrap">
    <%- search_form({button: '&#xF002;'}) %>

up near other links

Favicon

http://stackoverflow.com/questions/30291588/add-favicon-to-hexo-blog

prefer to use my favicon across the entire site, so I’ve linked to the favicon in my theme config. I use Landscape, the default theme included with Hexo.

blog\blog\node_modules\hexo\node_modules\hexo-cli\assets\themes\landscape_config.yml

At the bottom of the file, you’ll find a section titled Miscellaneous.

# Miscellaneous
google_analytics:
favicon: blog\themes\landscape\source\css\images\favicon.ico
twitter:
google_plus:
fb_admins:
fb_app_id:

/home/mbc/lostnation/themes/landscape/source/css/images/favicon.ico

the _config.yml in the themes must look like:

# Miscellaneous
google_analytics:
favicon: /css/images/favicon.ico
twitter:
google_plus:
fb_admins:
fb_app_id:

Theme customization

/home/mbc/lostnation/public/css/images/

/home/mbc/lostnation/themes/landscape/source/css/_variables.styl
contains image path
indicate banner and icon here

/home/mbc/lostnation/themes/landscape/source/css/_partial/header.styl
in header.styl

header.styl
1
2
3
4
5
$logo-text
  text-decoration: none
  color: rgba(200, 54, 54, 0)             was #fff
  font-weight: 300
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0)    fourth 0 was 0.3

Bulk process

Sometimes e.g. during the migration from Jekyll to Hexo, I need to bulk process md files.
Set up process, backup, source, and destination directories.
Below are some useful sed commands for bulk processing


sed -i 's/{% highlight r %}/{% codeblock lang:r %}/g' *
sed -i 's/{% highlight text %}/{% codeblock lang:bash %}/g' *
sed -i 's/{% endhighlight %}/{% endcodeblock %}/g' *
sed -i 's/{% endhighlight %}/{% endcodeblock %}/g' *


sed -i 's/{% highlight sql linenos %}/{% codeblock lang:sql %}/g' *
sed -i 's/{% highlight lisp linenos %}/{% codeblock lang:lisp %}/g' *
sed -i 's/{% highlight r linenos %}/{% codeblock lang:r %}/g' *
sed -i 's/{% highlight html linenos %}/{% codeblock lang:html %}/g' *
sed -i 's/{% highlight elisp linenos %}/{% codeblock lang:elisp %}/g' *

sed -i 's/\/figs\//\/lnsDFoKytr\/figs\//g' *

sed -i 's/{{site.baseurl}}//g' *
sed -i 's/^permalink:.*//g' *
sed -n '/highlight/p' *
sed -n '/playstyle AA^{&̲#39;}/p' *
grep -nwl "playstyle " **/*.md

To copy and move around processed files

Pre modification clean directories:

1
2
3
rm /home/mbc/process/_posts/*.*
rm /home/mbc/process/modpostsbackup/*.*
rm /home/mbc/process/modposts/*.*

working _posts is THE _posts directory used by web

copy from working _posts to processing _posts:

1
2
cp /home/mbc/lostnation/source/_posts/*.*  /home/mbc/process/_posts/
cp /home/mbc/lostnation/source/_posts/*.*  /home/mbc/process/modposts/

modposts is where I modify posts

cd /home/mbc/process/modposts/

Recharge the modposts if an error was made

1
2
rm /home/mbc/process/modposts/*.*
cp /home/mbc/lostnation/source/_posts/*.*  /home/mbc/process/modposts/

change working posts:

1
2
rm /home/mbc/lostnation/source/_posts/*.*
cp /home/mbc/process/modposts/* /home/mbc/lostnation/source/_posts/

Post modification backup to the cloud:

1
2
rm /home/pl/owncloud/web/lostnation/source/_posts/*.*
cp /home/mbc/lostnation/source/_posts/* /home/pl/owncloud/web/lostnation/source/_posts/

Debugging

Hexo has horrendous error messages - no indication of the file giving the error.
Note also that md files in _drafts will be processed, so any errors there need attention.

Sometimes a keyword will pop out of the error output. Search across files with:

grep -Ril “highlight” ./

R: recursive
i: ignore case
l: show file name, not error
./: where to start looking

Share