Setting up HTTPS using Let’s Encrypt, DNSimple and Heroku

    I’ve been meaning to enable HTTPS for my personal site (and all of my others sites too) for some time now. It was always a pain in the ass or the spectre of a pain in the spectre of the ass. And not inexpensive.

    Today, I finally did it. It was fairly painless and I’d like to document my process. Hopefully this helps somone in the future (including Future Me).

    The three pieces that I care about working together well are: Heroku, LetsEncrypt and DNSimple.


    Googling for setting up HTTPS using Heroku + LetsEncrypt + DNSimple didn’t much help.

    Results were complicated, out of date, incomplete, or only about some combination of those three pieces, but not about all three of them together.

    This was my experience on 2016–11–17. If you follow along with me, your mileage may vary. If you come across this post way after the publish date and these steps are wildy obsolete and you want to update them, please email me.


    During the time since I’ve been wanting to enable HTTPS and finally got around to doing it today, Heroku made their HTTPS offering both free and much each easier, and DNSimple added a simple integration with LetsEncrypt. LetsEncrypt is totally free, so the expense of it was no longer part of the deterrant.


    LetEncrypt

    LetsEncrypt is the certificate authority in this setup. They exist. They do stuff. But for the sake of my experience, I did not interact with LetsEncrypt directly at all. (And I think that’s part of their goal, to be this piece of infrastructure that you use indirectly at a higher level, like say via your DNS provider.)

    DNSimple

    DNSimple is a DNS provider. They don’t host websites or database or anything like that. They make DNS management for my websites dead simple. Google Apps setup, one click. GitHub Pages, Heroku, AWS, one click.

    At their core though, like all DNS providers, they connect a domain name, like example.com, to the computer where that website is served from, like an IP address or another domain name. Like, say, over on Heroku.

    Heroku

    I host all of my apps/site that are built with Ruby on Rails on Heroku. You can also host apps built in other languages and frameworks on Heroku. They’re a “Platform as a Service”. What that means for me, is that I focus on building my app in Rails and not worrying about how to install and scale up/down my Postgres database or whatever.

    Heroku provides free HTTPS by default for all apps at their *.herokuapp.com subdomain. But that doesn’t help me in this case, because part of #indieweb ethos is to own your domain.


    Setup

    I use example.com all through this post. Any where I use example.com, you should change that to your actual domain. For example, my actual domain was veganstraightedge.com. Good luck!

    1. Heroku: Use a Paid Dyno

    SSL stuff is built in now for all non-free dynos (Heroku’s word for a vm, roughly). Alternately, I think you can use the paid $20/month SSL add-on with free dynos. I can imagine that going away. And either way, it’s net cheaper to pay $7/month for a Hobby dyno and get free SSL.

    To migrate your free dyno to a paid dyno (Hobby tier, in this case), you can use this command on the terminal.

    https://dashboard.heroku.com/apps/YOUR_USER_NAME

    heroku dyno:type free --app YOUR_APP_NAME

    OR you can do this through the web interface in your Heroku dashboard.

    https://dashboard.heroku.com/apps/YOUR_APP_NAME/resources

    2. DNSimple: Create Certs

    You need to acquire the actual certs now. Go to your domain in DNSimple. Then click on SSL Certificates. You’ll be on a URL that looks like:

    https://dnsimple.com/a/USER_ID/domains/example.com/ssl_certificates

    Then click on Acquire an SSL Certificate which will take you to:

    https://dnsimple.com/a/USER_ID/domains/example.com/certificates/new

    Click on Continue under Let's Encrypt, taking you to:

    https://dnsimple.com/a/USER_ID/domains/example.com/certificates/letsencrypt/new

    Click the Automatically auto-renew the certificate check box.

    Click Create certificate order.

    On the confirmation page, click Confirm and request certificate.

    Then, wait for the email. It “generally takes 30 minutes”.

    3. DNSimple: Download Certs

    From the email with the subject of:

    SSL certificate www.exampl.com is issued

    Click on the like to the certificate page, taking you to a URL that looks like:

    https://dnsimple.com/a/USER_ID/domains/example.com/certificates/CERT_ID

    Click Install the SSL Certificate.

    Expand Heroku section.

    Save the certificate bundle to your computer by clicking Download www_rabbleconf_com.pem.

    Download the certificate private key by clicking on Download www_rabbleconf_com.key

    Right now, before doing anything else, make backups! Copy them to a USB stick (that you trust), a backup hard-drive, whatever. Just put them somewhere else too.

    4. Heroku: Add or Update Certs

    These are the instructions Heroku CLI commands to run to add new or update existing certs, as copied from the DNSimple docs.


    Install or Update the certificate on Heroku.

    Run the Heroku certs:add command to install the certificate:

    heroku certs:add www_example_com.pem www_example_com.key
    

    If you are updating an existing certificate, for example in case of renewal, run the Heroku certs:update command to replace the existing certificate:

    heroku certs:update www_example_com.pem www_example_com.key
    

    If you had previously been using the legacy SSL Endpoint add-on, you will need to follow additional steps to upgrade to the new Heroku SSL system.

    Check the certificate at Heroku.

    Run the Heroku certs command to check the certificate:

    heroku certs
    

    All commands above assume that you’re running them from the directly that the Heroku app is in (has a git remote of heroku) and that the keys are also in that directory. DO NOT LEAVE YOUR KEYS IN THIS DIRECTORY AND ACCIDENTALLY GIT COMMIT THEM.

    If you are running these commands from some directory other than where the Heroku app is, you need to append --app appname to each command (where appname is the name of your Heroku app, which you can get by heroku info from the app directory) to tell Heroku which app to apply the commands to.

    5. Local: Move Your Keys

    Add all of this is done and you have confirmed that your new certs are in your Heroku app, move your keys to someplace safe. Your public key is fine to share publicly. It’s meant to be, actually. But your private key should be treated like a password, shared with no one and protected at all costs. If it leaks out, or if you think that it could’ve leaked out, you need to go through the steps to issue a new private/public key pair and update your Heroku certs.

    6. Heroku: Add example.com and www.example.com to App

    Heroku needs to know which domains your app should respond to. It can be one or many. It doesn’t matter. Personally, I prefer the naked or root or Apex domain as the canonical URL.

    example.com instead of www.example.com.

    I like to redirect all www.example.com requests to example.com. In order to do this, Heroku needs to have both example.com and www.example.com added to your app. It’s easy to do.

    Run these two commands from your Heroku app directory.

    heroku domains:add example.com
    heroku domains:add www.example.com
    

    Instead of example.com in the above commands, you’ll want to use your actual domain.

    7. DNSimple: Use the Heroku Service

    Meanwhile, back at DNSimple, you need to hook up the Heroku services to your domain.

    First, find and click on your domain in your list of domains (or search for it in the search field). You’ll end up at a URL that looks something like.

    https://dnsimple.com/a/ID/domains/example.com

    Instead of ID, there will be a number that represents your user ID at DNSimple. It’s not important to know what it is, but mine will be different that yours.

    In the sidebar, click DNS.

    That’ll take your to a URL like:

    https://dnsimple.com/a/ID/domains/example.com/dns

    From there, under One click services, click Manage services.

    Click the Infrastructure tab.

    Find, Heroku in the list.

    Click the + Add to add the Heroku service to your domain.

    When prompted, enter your Heroku app’s name. (Again, that can be found by running heroku info from your Heroku app’s directory.)

    Click Complete Heroku setup.


    Now, you need to do that process again to add the Heroku SSL service to your domain.

    Click the Infrastructure tab.

    Find, Heroku SSL in the list.

    Click the + Add to add the Heroku service to your domain.

    When prompted, enter your Heroku app’s name. (Again, that can be found by running heroku info from your Heroku app’s directory.)

    Click Complete Heroku setup.

    8. Wait to Propagate

    So… in theory, you’re done.

    In practice, you might have to wait some indetermined amount of time for the DNS to propagate all over the internet, because reasons. But at this point, you can test.

    Go to https://example.com. If you get your expected website, great! You did it!

    Now, test the www to see if the redirect is working. Go to https://www.example.com. If you get redirected to https://example.com and you get your expected website, great! You did it again!

    If not, you might just have to wait. You might also have to debug to find possible mistakes made along the way. Maybe you mistyped something along the wait. Double triple check everything on Heroku and DNSimple to make sure it’s what is expected. And make sure you didn’t copy paste example.com instead of your actual domain.


    That’s it! Or at least, it was for me. I hope it goes well for you too. Best of luck!

    Indie Web Logo Study First Draft

    Earlier this year, I redesigned the Indie Web Camp logo. Shortly after that, we (the indieweb community) decided to change the name of the community and idea and matching domain to Indie Web. Going forward, Indie Web Camp would be used just for the events.

    I was a part of this decision and still think it was the right thing to do. But the then recently redesigned Indie Web Camp logo was no longer scoped properly to represent more than just the events. We would now need an Indie Web logo.

    Simply removing the C from the IWC in the Indie Web Camp logo would leave it imbalanced. The I and C act as counterweights to each other with the pointy bottom bits of W acting as a kind of fulcrum.

    I have been thinking about a new new logo for Indie Web to use on the community wiki, as an avatar on social media accounts, etc.

    Part of my thinking for this design was to build it in such a way that it could be a part of larger design system for indieweb related things. Namely, I want to design logos for all of the building blocks (IndieAuth, Webmention, Micropub, et al (and maybe even microformats if Dan Cederholm would be ok with it)). I want an Indie Web logo and those building blocks logos to be able to work together in a coherent way.

    One day in a Sacramento coffeeshop, I sketched some (mostly) square based logo ideas. I've also been drawn to hexagons for the basis of the design system because of how well they stack together.

    To that end, tonight I explored a hexagonal logo design using the I from the Indie Web Camp logo and a re-imagined W to better fit into the space of the hexagon and to balance out the I. Then I added the chevron shape across the top sides to fill out the hexagonal space which also creates the illusion of a cube.

    This is a first pass. I feel pretty good about it now. But like the Indie Web Camp logo before where we did a few rounds of iterations between the first draft and the final version, I expect that there will be some rounds of feedback and iteration.

    First draft of Indie Web logo design
    First draft of Indie Web logo design

    As per the usual logo process, color and type treatment will come after the final one color design is finalized.

    All discussion about this proposal should take place on the Indie Web community wiki /logo page.

    Cubs Post Season Roster 2016 Wishlist

    This is the 25 person roster that I would take to the post season if I was making that decision for the Chicago Cubs

    Pitchers

    Starters

    • Jake Arrieta
    • Jon Lester
    • Kyle Hendricks
    • Jason Hammel

    Middle Relievers

    • Trevor Cahill
    • Justin Grimm
    • John Lackey
    • Travis Wood
    • Carl Edwards Jr.

    Closers

    • Pedro Strop
    • Hector Rondon
    • Aroldis Chapman

    Catchers

    • Willson Contreras
    • Miguel Montero
    • David Ross

    Infield

    • Javier Baez
    • Kris Bryant
    • Anthony Rizzo
    • Addison Russell
    • Ben Zobrist

    Outfield

    • Chris Coghlan
    • Dexter Fowler
    • Jason Heyward
    • Jorge Soler
    • Matt Szczur

    Pitching and Catching

    Miguel Montero would catch Jake Arrieta's starts. David Ross would catch Jon Lester. Wilson Conteras would catch Kyle Hendricks and Jason Hammel and he'd sub in for Ross and Montero as necessary.

    Pedro Strop, Hector Rondon, and Aroldis Chapman would pitch the 7th, 8th and 9th innings respectively unless a starter is throwing a no-hitter.

    Middle relievers would clean up when someone gets in a jam. Duh.

    Infielders

    Anthony Rizzo at first base. Addison Russell at shortstop. Kris Bryant at third base. I currently like Ben Zobrist starting at second. Javier Baez subbing in at second, third or outfield as needed. He's also great for pinch hitting and running.

    Outfielders

    Dexter Fowler in centerfield. Jason Heyward in right field. Chris Coghlan and Jorge Soler as starting left fielders (depending on how each is hitting at the time). Matt Szczur and the other non-starter as left field subs and pinch hitters.


    Of course, when to make those substitutions, pinch hitters/runners and pitching changes is like 80% of the job. I like the way Joe Maddon manages this team. He sure is fun to watch!