Creating a Hexo Widget

Widget

Extend your Hexo blog with specialized widgets.

Hexo is an excellent static website generator for creating a blog.

Check out my post Top 5 Reasons to Blog with a Static Site Generator for
reasons you might want to use a static site generator.

For a complete introduction to setting up your blog with either Hexo or DocPad, check out
my Pluralsight course Build a Better Blog with a Static Site Generator.

In this post let’s look at how to extend your blog with a widget you can add via
a configuration file.

The default Hexo theme “Landscape” comes with a number of widgets like tagcloud, archive, and recent_posts.

If you take a look at the theme’s _config.yml file you’ll see the following:

1
2
3
4
5
6
# Sidebar
sidebar: right
widgets:
- tagcloud
- archive
- recent_posts

As you can see under the widgets heading you can add or rearrange the widgets that will
appear in the sidebar.

As you can see in my blog I’ve added a few extra widgets like my most popular
posts list and my Twitter feed.

Let’s see what it takes to add the Twitter feed.

The theme folder structure of a Hexo blog is something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
└───landscape
├───layout
│ ├───_partial
│ │ └───post
│ └───_widget
├───scripts
└───source
├───css
│ ├───fonts
│ ├───images
│ ├───_partial
│ └───_util
├───fancybox
│ └───helpers
└───js

As you can see under the layout folder is a “_widget” folder.

Each of the widgets available to the Landscape theme are stored in this directory
as *.ejs files.

We’ll take the archive.ejs as our example.

1
2
3
4
5
6
7
8
<% if (site.posts.length){ %>
<div class="widget-wrap">
<h3 class="widget-title">Archives</h3>
<div class="widget">
<%- list_archives() %>
</div>
</div>
<% } %>

The first thing to notice is that has an if statement that makes sure we only
render the list if there are posts.

Next we see that the widget structure is defined by two divs and a header tag.

The outer div is of class “widget-wrap” and the inner div is of class “widget”.

Between the two divs is an H3 header of class “widget-title”.

If we follow this structure we can easily create our own widget.

We’ll just change the title and replace the <%- list_archives() %> with the snippet we grab
from Twitter’s Create a User Widget page.

That gives us the following:

1
2
3
4
5
6
7
8
9
10
11
<div id="twitter-feed" class="widget-wrap">
<h3 class="widget-title">Twitter Feed</h3>
<div class="widget">
<a class="twitter-timeline" href="https://twitter.com/jeffa00"
data-widget-id="440159277538238464">Tweets by @jeffa00</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?
'http':'https';if(!d.getElementById(id)){js=d.createElement(s);
js.id=id;js.src=p+"://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>

We’ll save that as twitterfeed.ejs in the layout/_widget directory.

Now we can add our new widget to the layout’s _config.yml (not the site’s):

1
2
3
4
5
6
7
# Sidebar
sidebar: right
widgets:
- tagcloud
- archive
- recent_posts
- twitterfeed

That’s all there is to it.

In the next post I’ll create a widget that uses Hexo’s Data Files feature to
display items from a data file.

One last reminder to check out my Pluralsight course on
setting up your blog with either Hexo or DocPad at Build a Better Blog with a Static Site Generator.

My First Pluralsight Course

Build A Better Blog

This is my new Pluralsight course
Build a Better Blog
with a Static Site Generator
.

I’m really excited to announce my first Pluralsight course: Build a Better Blog with a Static Site Generator.

I haven’t talked about it because I wasn’t sure I’d pull it off. I’d estimate that it takes me between two and three hours of work per finished minute of video. Whew!

I’ll blog more details about the course over the coming weeks, but the super short version is that you can’t get a faster, more secure, and more scalable blog than
with a static site generator.

With typical blog engines each page is assembled from a database entry and one or more template files for each reader unless you go to extra effort setting up
a cache of some sort.

With a static site generator you render your site from simple Markdown and YAML files to a plain old HTML site. You can use Git to version and deploy that site
whole cloth to your server.

I’ve been using the static site generator DocPad for about a year and a half at this point.

You can read more about the series of misfortunes that led me to this point:

If you have a chance, check out my course and please rate it!

Thanks!
jeffa

Intro To Nuget Package Creation

Slides

Slides for my Intro To Nuget Package Creation talk.

Here are the slides for my Introduction to Creating Nuget Packages lightning talk.

Check Out Visual Studio Online

Video From Build Conference 2015

Visual Studio
Online session Video
from Microsoft’s Build Conference 2015.

There are a number of great source control hosting services on the web.

GitHub is probably the best known at this point, but there are a few others worth investigating.

I personally use GitHub for my public, open source projects and BitBucket for my private repos.

A surprising choice for hosting Git is Microsoft’s Visual Studio Online. What? Microsoft?

Sign of the apocalypse! Cats and dogs, living together!

On the surface Visual Studio Online, or VSO, is a fair clone of BitBucket.

In both cases you get an unlimited number of private repos as long as you have 5 or fewer developers.

Where VSO becomes very interesting is when you look beyond source control at its other offerings.

First of all you get project management help complete with bug tracking and Kanban boards.

What I find most interesting, however is the build server.

I should say build service since it let’s you run your builds on pre-built virtual machines in a pool you don’t have to manage.

If you’ve worked with the older, XAML based build configurations from Microsoft, you are probably skeptical. Well, skeptical and possibly scarred.




I always found that build system to be an abomination, so I wasn’t super optimistic when I heard about the new version.

It’s been several months since the Build conference, but I finally watched the video linked at the top of the post.

Wow!

Not only is the new build system composed of sensible text files instead of chopped up and hidden behind a myriad of dialogs, you can actually build more than just .Net apps!

Now you can build anything from Java apps, to Node.js apps, to fricken’ IOS apps!

Well, to be fair you can’t build IOS apps on a Windows VM, but you can link out from the build system to trigger build steps on a Mac. At least they say you can. I don’t have a Mac, so I can’t prove it.

I’ve spent some time over the past few days setting up a build for work in VSO, and I’m impressed enough that I’m considering moving some of my Git repos from BitBucket to VSO.

I can’t promise you’ll be as impressed as I have been (I am easily entertained, after all), but I do recommend you check out what Microsoft has to offer. For personal projects with fewer than 5 developers it’s free, so check it out!

Countdown To ASP 5: Building a Sample App

Code Camp Atlanta Presentation 2015

This is my presentation for Code Camp Atlanta for 2015.
Click the image or this link to download the slides.

ASP 5 is on its way, are you ready?

This multi-page post is part of my presentation at Atlanta Code Camp 2015.

I’ve been talking about ASP 5 for about a year and a half at this point since it was called vNext.

Personally I’m really excited by the changes.

Since the early days of ASP.Net Microsoft did things their own way that made it hard to parlay your experience with ASP to any
other web development environment.

With the re-think of ASP in the new version, they have moved closer to they way most other web environments work.

Along the way to making ASP work cross-platform they yanked out .Net code that was really only geared to working on a desktop and not
a server. That means even Windows only developers will benefit from the cross platform work.

Back in the summer I did two talks in the same week. The first was for the Atlanta Windows App Developer group and the second was
for the Gwinnett, Georgia, Microsoft User Group.

The first was a workshop where the attendees built their own ASP 5 apps.

At least that was the plan.




Turns out that by the time I finished talking about what was new in ASP 5, we were out of time. Doh!

For Code Camp I decided to skip the talk and jump directly to building the sample app. That way I could code the app live
and just talk about what was new as we hit it.

The other posts in this set will give you some cheat sheets and a sample project you can build.

Here are the other posts in this series: