Setting the stage

Hey everyone, I’m launching this blog to keep a better record of my life events, hobbies, tech setups, recipes, and anything else that comes to mind. It was a minor pain to set up, so I figure I’ll take a few minutes to make a record of how I got it going.

Tools of the trade

Before getting into any technical details of my setup, I thought I’d summarize the tools I’m using to write this blog.

Org-mode

This is one of the most powerful tools Emacs has to offer. Here’s a screenshot of what it looks like making this entry in Org-mode:

org_scrn_1.png

Writing in Org is a breeze thanks to key shortcuts that let you move through and manipulate text as fast as you can think. And organizing files is very easy with a text-based sub-list structural system that lets you quickly restructure your text however you want. I was thinking about going over to VIM a few days ago, but after spending some more time getting familiar with all that emacs has to offer, I’ve decided to stick with what I know best.

Hugo

So up until now, all of my blogs have been based on Blogspot or Wordpress. This is my first adventure into a blog that I have complete control over. I’ve decided to produce this blog using Hugo, a flexible static blog generator that plays well Org files. Hugo lets you create and launch a blog really fast - their quick-start guide lets you see results in 5 minutes tops - and the themes for Hugo are beautiful. I really like Hugo, and am glad to be using it, even if it is a little bit complicated to understand at first.

Github

This blog is being hosted on Github for now, since it’s free and has a url that isn’t embarrassing. I might move it over to a new page if I feel like paying a few dollars per year for hosting. I can serve the pages from my Dropbox or my home server depending on how many files I end up putting on here.

How it’s put together

This section is mainly for my own benefit. /Hugo sits in my /org folder in Dropbox, and has one subfolder: /blog. That is the project folder for this blog, and contains all of the folders that Hugo needs to generate the blog. Once the blog is generated (hugo command on the command line), the folder /public is populated with all of the files necessary to render the webpage. That folder is, in turn, uploaded to Github during the execution of the command ./deploy, which is a script that I found online that simplifies deployment. Git manages two aspects of the project: a front-facing webpage (http://ryancummings.github.io) and the backend materials contained in the /blog folder (http://github.com/ryancummings/blog).

The site itself uses the Blackburn theme, and settings are configured in the config.toml file. This file was copied from a template in the Blackburn folder and I have a lot to do to make it work for me. It has a lot of broken buttons since I don’t have very many social media accounts, but Facebook and Instagram should work! I should also add an about me page and a contact info page when I have a chance.

I have Emacs set up to auto-generate blog pages when I save this Org file. That was done in the Emacs init/org file (I don’t remember the real path, but it’s in there). There’s a piece of custom code that links into ox-hugo, the tool that translates org language into hugo markdown files.

Git file tracking was set up by command line, but would likely be better handled with the emacs-based Git manager Magit. This package has been helpful in the past, but I was always a little shaky using it, so I will definitely have to learn the ropes before I really dive into it. As a basic refresher, Magit commits to Git proceed as follows:

  1. Open Magit (m-x magit-status)
  2. Stage changes (s)
  3. Commit staged changes (c c)
  4. Add a comment to the commit then finalize (C-c C-c)
  5. Push commits (P p)

Images

I tried a few different methods of managing images on the blog, and ended up deciding to store them in the same folder as the .org file that generates the blog itself. This way, I can link to images using relative rather than absolute paths, such as [[file:image.png] ]. This way, emacs can display images inline, and Hugo can figure out how to put the images on the blog too. There is some duplication of dropbox space since ox-hugo copies all images into a static folder, but the advantages of inline images in emacs is worth it.

For reference, I use the following html export settings in emacs to set the size of the image:

#+ATTR_HTML: :width 800px
#+ATTR_ORG: :width 500

Wrap-up

So that’s about all I have time for today. I know this post will help trigger my memory when I need to make some changes to my setup. I’ll keep blogging about different things in my life. One good idea I saw was to add an About-style page detailing my personal stack: all the items I use on a daily or near-daily basis. Keep an eye out for that!

Addendum

Something weird happened when I went to update the site: git wouldn’t do it. So I had to go in and relink my ssh keys. To do that, I used the command ssh-add -K ~/.ssh/id_rsa replacing id_rsa with the github-specific key I use. Weird stuff for sure, so I thought I’d write about it here in case it happens again.

Edit 2: I switched to my default ssh id, which uses an authentication password. Hopefully that works more reliably.

I have also made some tweaks to allow me to post images inline. Hope it works better this way!

Edit 3: Another test to see when this thing uploads..

 
comments powered by Disqus