Major Hexo Workday

Looooooong day today working on one of my Hexo sites, I got so much work done! Big fan of 4-day weekends over here. 😄

I’d been sitting on some site improvements for a while and got a lot of them implemented today. In the process I learned some new things about Hexo and Netlify:

Netlify Forms

Super easy to set up. They give you the ability to add forms to your static website without needing a server to run the post requests. It’s just a matter of adding netlify and a name attribute to the form tag:

<form id="contact-form" name="contact" method="POST" netlify-honeypot="bot-field" action="/contact-confirm/" netlify>

  <div class="form__item">
    <label for="name">Your Name: </label>
    <input type="text" name="name" placeholder="Name" />
  </div>

  <div class="form__item">
    <label for="email">Email Address: </label>
    <input type="email" name="email" placeholder="Email" required />
  </div>

  <label for="message">Message: </label>
  <textarea name="message" required></textarea>

  <p class="hidden"><label>Don’t fill this out if you're human: <input name="bot-field" /></label></p>

  <button type="submit">Submit</button>

</form>

I also added the action attribute to redirect to this contact-confirm page after submitting the form…it’s possible to submit via XHR and avoid going to a new page, but I didn’t set that up today.

Netlify also does spam filtering on these forms by default. I opted to add netlify-honeypot as an added measure of anti-spam…this is a hidden field that bots wouldn’t know if hidden; any form submissions that have this input filled out will be automatically rejected.

To see the responses, it’s just a matter of logging into the site’s Netlify dashboard. Or even better…set up email notification and then I can reply directly to the person who submitted the form.

Hexo Title Casing

A while back I noticed that one random post title was appearing on the site as 011 - the Truth About Pineapples with the word ‘the’ in lowercase, even though I’d written it in uppercase in the post title. Well on further review today, I found that all posts with ‘the’ as the first word were being de-capitalized. No, wait!—looking even deeper it turned out all appearances of ‘the’ were being de-capitalized. What gives!?

Turns out there is a setting in Hexo’s _config.yml (under ‘writing’) that titlecases post titles by default; presumably because I have a number prefix in front of the word ‘the’, it made them all lowercase. It was as simple as setting titlecase: false and voila! All of the post titles appeared as they should.

Likewise, in the process I learned about the filename_case: 0 setting in the same section of _config.yml. This setting determines how post filenames are generated by Hexo. By default, 0 makes no changes, but I could change this to 1 and have the filenames automatically be made into lowercase. This is a good find! Before, to create a new post in the command line, I always typed the slug:

$ hexo new this-is-what-i-want-my-post-to-be-titled

Not only is it annoying to type hyphens instead of spaces, afterwards I would also have to edit the host title in the actual post file in order to case it properly. Now, with the setting filename_case: 1, the command is much easier:

$ hexo n "This Is What I Want My Post To Be Titled"

Another improvement I’d had on the list for a while was to add hover effects to the navigation bar, and to make the nav reflect whatever current page you’re on. The hover effects were straightforward, but determining the current page was not so simple. Because the nav is set up using a template which loops through menu items, it was figuring out how to set an if condition against the loop. My efforts, Googling, and searching through issues in the Hexo GitHub repo all turned up nothing, BUT!…eventually I found a good example in someone else’s Hexo theme, and added my own condition to the ternary statement:

<ul class="nav__menu">
  <% for (var i in theme.menu){ %>
    <li class="<%= is_current(theme.menu[i]) && theme.menu[i] !== "/" ? "nav__menu--current" : "" %>">
      <a href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
    </li>
  <% } %>
    <li>
</ul>

Other Stuff

I got a complimentary ticket to GHC 2018!! Annnd I found a premium-economy flight for £400 from London. Accommodations look like they’ll cost a pretty penny but so far, so good $$-wise. I’m so excited!

Up Next

Probably will be working on more site improvements tomorrow!