Half-Elf on Tech

Thoughts From a Professional Lesbian

Tag: hugo

  • Mailbag: Wasting Time

    Mailbag: Wasting Time

    Today’s question comes from a Slack DM tossed my way about learning and possibly discarding Jekyll.

    Don’t you think you’re wasting your time learning all these nonWordPress things?

    Nope! Every single thing I’ve learned and discarded has improved my skill set.

    Let’s take MediaWiki. Learning that taught me templating in a way that I never would have understood in WordPress. It also taught me about the perils of your ‘own’ language instead of HTML. While I’ve come to like Markdown, you still have to know HTML to make Markdown really work, because you need to understand what it is you’re writing.

    And Jekyll? I learned a lot about importing and exporting data between ‘languages’ that don’t like each other. I also learned a lot about deployment of static content. Anything but FTP, right? Jekyll had me writing my own deployment scripts.

    Now that I’m looking at Hugo, really not much has changed. I’ve learned GoLang, which is not all that different from things I already knew. But it’s expanding how I think about the logic structures. Hugo’s got an up on Jekyll in a lot of ways, like how easy it is to make loops for traditional blogs. Also it can handle remote JSON a little better, which sets me up for what’s next.

    You see, all of this work, all this learning, is going to come back to WordPress.

    What I want to do is manage my site in WordPress and have that output the JSON (via that awesome new JSON API I’ve been learning), which will in turn be dynamically called when I want to build my static HTML site.

    For sites you’re not updating daily, or even weekly, this might be the magic you need. Everyone writes on WordPress. Someone has a command (or even a script) to run that collects everything from JSON and dumps it to Hugo, which generates the site for you to proof and then push.

    Version controlling the content.

    Let the users write in Wordpress while you bask in the glory of your static site that is, pretty much, unhackable as a CMS. I mean… what are you going to do to my HTML?

    See?

    It’s all WordPress.

  • Deploying with Hugo

    Deploying with Hugo

    One of my headaches with Jeykll was the deployment. It wasn’t until I found Octopress that I had any success. Hugo wants you to use Wrecker for automated deployment. I don’t want to since I don’t host on GitHub.

    Deploying (v1)

    The first method I could use is a script like I have with Octopress, which runs an rsync, but instead I went with a git post-update hook:

    GIT_REPO=$HOME/repositories/my-repo.git
TMP_GIT_CLONE=$HOME/tmp/my-repo
PUBLIC_WWW=$HOME/public_html/

git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf $PUBLIC_WWW/*
cp -r $TMP_GIT_CLONE/public/* $PUBLIC_WWW
rm -Rf $TMP_GIT_CLONE
exit

    And that copies things over nice and fast. I could do this for Jekyll as well, since now I’m version controlling my site content (in public) as well as my source code. There are downsides to this. I don’t want to sync my site folder. It’s going to get very large and messy and annoying.

    The workaround for Jekyll people is to install on the server and that didn’t work for me.

    Install on the Server

    But Wait! There’s More!

    I actually like Hugo better than Jekyll,. It feels slicker and faster and more … app like. Also since it’s not Ruby, I was able to install it properly on my server. Yes, unlike Ruby which was a crime, GoLang was incredibly easy to install on CentOS 6.

    First install Go and it’s dependancies:

    $ yum install golang
$ yum install hg

    Now install Hugo. No you can’t yum it up:

    $ export GOPATH=/usr/local/go
$ go get -v github.com/spf13/hugo

    This puts it in /usr/local/go/bin/hugo and I can run Hugo commands natively.

    Which brings me to …

    Deployment (v2)

    Change the aforementioned script to this:

    GIT_REPO=$HOME/repositories/my-repo.git
TMP_GIT_CLONE=$HOME/tmp/my-repo
PUBLIC_WWW=$HOME/public_html/

git clone $GIT_REPO $TMP_GIT_CLONE
/usr/local/go/bin/hugo -s $TMP_GIT_CLONE -d $PUBLIC_WWW 
rm -Rf $TMP_GIT_CLONE
exit

    Works perfectly. Unlike Ruby which is just a brat.

    Now the Magic

    When I’m ready to write a new post, I can locally spin up my hugo site with hugo server, write my post, make sure it looks nice, and then commit my changes to git and push.

    cd ~/Development/my-repos/hugo-site/
hugo new content/some-file.md
vi content/some-file.md
git add content/some-file.md
git commit -m "revised some-file"
git push deploy master

    And it all works.

    Massive hattip to Andrew Codispiti for detailing his work which made mine easier.

  • Hugo

    Hugo

    I’ve been playing with Jekyll a lot. After WordCamp US, I started toying with the idea of a JSON powered Jekyll site, where WordPress output its posts as JSON and Jekyll pulled in the posts and converted them. This ran into many snags. It wouldn’t be ‘dynamic’ for one, but the biggest issue is that Jekyll’s JSON reading ability was terrible. It didn’t like the complex JSON that WordPress put out.

    That sent me hunting down other things like Hugo. Unlike Jekyll and it’s use of Liquid, Hugo uses Go (hence the Go in the name you see).

    Installation (on a Mac) is easy.

    brew install hugo

    Done. It’s harder on my server, but still easier than Jekyll, which started to become a ‘thing’ as I worked through all this.

    Using Hugo is remarkably similar to Jekyll except that it works faster and a little more smoothly. The site builds incredibly fast and it dynamically refreshes. So if I edit a post, the page refreshes itself. This let me tweak my theme and posts and sort out the new language incredibly fast. Edit a file, boom, I see what’s wrong.

    It’s about as logical as Jekyll too, so it took me one DayQuil addled afternoon to sort out how to make things work.

    The Basics

    The basic are simple. You have a basic structure like this:

    ▸ archetypes/ 
▸ content/
▸ data/
▸ layouts/
▸ static/
▸ themes/
config.toml

    The config file is what you think it is. Your posts go in content and the html-ized version shows up a public folder that gets created on the fly. The data folder is for your static data like a .json file or a .yaml.

    Independant to your theme, you can put css and js in the static folder, and layouts in the layout folder. Ditto archetypes, which are post-types. So if you know you’re always going to have a post type of ‘musician’ and you want it to have special headers, then you can have an archetype called musician.md with all that pre-filled in. Then when you want to make a new entry for Clifford:

    $ hugo new musician/clifford.md

    You can also have those in your theme if you wanted, but generally I use the same theme and separate projects. At this point, I was impressed enough to be swayed from Jekyll. I’m not going to explain how to write a post, since it’s just markdown and a header, just like Jekyll or GitHub Pages.

    Building Your Site

    The commands are basic. Running $ hugo server will build your demo server. Of course, you’ll want to post your drafts, so you need to add the param --buildDrafts … Oh and you want a theme …

    $ hugo server --theme=utility-pro --buildDrafts

    That’s silly, right? Why do I have to define all that? Thankfully I can edit my config.toml file:

    baseurl = "http://example.com/videos"
languageCode = "en-us"
title = "My Super cool Video Library"
theme = "utility-pro"
buildDrafts = "true"
[params]
Subtitle = "Videos about cats, collected from the internet."

    Now every time I run the command ‘hugo’ it will build my drafts with my theme!

    $ hugo
45 of 45 drafts rendered
0 future content
45 pages created
42 paginator pages created
14 tags created
3 categories created
in 254 ms

    That’s incredible fast seeing as it built everything. Of course the other site I have is a great many more pages.

    Theming

    Since I’d already mastered Jekyll theming, this was trivial. Go and Liquid are weirdly similar and most of it was transposing. There’s not much to say here except that there’s a Twenty Fourteen Theme for Hugo and it’s pretty much what you expect. For WordPressers, it’s a good place to start.

    Shortcodes

    The neat thing is that Hugo has shortcodes! They’re not like WordPress ones, but you can see the similarity between WordPress and Hugo.

    [video mp4="video.mp4" flv="video.flv"]

    vs.

    {{< video mp4="video.mp4" flv="video.flv" >}}

    Sadly there’s no oEmbed. And I had to write the shortcode on my own, but again, if you know the basics of logic all this stuff is easy. Here’s the magic behind the shortcode:

    <video class="video-js" width="{{ if .Get "width" }}{{ .Get "width" }}{{ else }}640{{ end }}" height="{{ if .Get "height" }}{{ .Get "height" }}{{ else }}385{{ end }}" controls>

	{{ if .Get "mp4"  }}<source src="{{ .Get "mp4" }}" type="video/mp4">{{ end }}
	{{ if .Get "ogg"  }}<source src="{{ .Get "ogg" }}" type="video/ogg">{{ end }}
	{{ if .Get "webm" }}<source src="{{ .Get "webm" }}" type="video/webm">{{ end }}

Your browser does not support the video tag.
</video>

    Once you look at it, it’s remarkably like WordPress. Only I don’t need a plugin. Everything in /layouts/shortcodes/ are like mu-plugins.

    And So?

    And so Hugo won enough of my attention that I’m going to keep playing with it and see what’s next.