Transitioning my Portfolio Site From Netlify to Heroku — pt. 2
Previously, I had written about the process that I was going through to switch my portfolio site hosting from Netlify to Heroku. I had left off at a point where the domain name was correctly pointing to the new app hosted by Heroku, but it still wasn’t secure, and as such would likely be blocked by many possible viewers’ web browsers. In the interest of completion, I’d like to talk about what I did to resolve the issue. I have to admit I’m not 100% sure that what I ended up doing was the best solution, but I do believe at this time that it at least serves as a temporary solution.
Unfortunately for me, being that I am relatively inexperienced in this domain (no pun intended), I was forced to rely on somewhat vague sets of directions, without the ability to critically look at each command I was running to determine if it was necessary for my purposes. To begin the process of implementing SSL for my custom domain for my Heroku application I followed the steps listed at https://devcenter.heroku.com/articles/acquiring-an-ssl-certificate. I chose to to run these commands whilst in the directory of my project, although this is not truly necessary, especially since the files generated by these commands should not be uploaded to Github. After running the commands listed in the linked article I ended up with three files: server.csr, server.key, and server.pass.key. Like I said above, these files should not be publicly available, so if you’re like me and are running the commands inside of the project directory, be sure to add these files to the project’s gitignore file.
After running those commands, I took the server.csr file over to my name.com account, and clicked a button to activate SSL for my domain. I was asked to provide some basic contact information, and then pasted in the contents of the server.csr file. I was hoping to be able to upload the file itself, but for now it seems like the only option is to copy and paste the innards of the server.csr file. From here, the docs at Heroku make it seem as though I should receive a .crt file from my DNS provider (Name.com) which I then would need to provide to Heroku. Maybe I missed an email, but I had a very difficult time obtaining the .crt file from Name.com. In fact, I never received a .crt file from Name.com, and so I decided to make my own.
In the SSL section for my domain on Name.com, I located the certificate that had been generated, copied it, and created a new file that I called 1234.crt. This file could have any name, although I believe that it does need to have the .crt file type. This is the part where it felt a little bit sketchy, since I think that I probably should have contacted Name.com to get their .crt file, but things still seem to be working, and that’s good enough for me.
At this point, the bulk of the configuration was completed, and all that remained was to provide Heroku with the SSL certificate information that I had worked so diligently to obtain. However, as far as I can tell, the ability to manually add custom domains and SSL certificates with Heroku is limited in that one must pay actual money to access these features. I don’t mind paying a few dollars a month for the privilege of hacing a secured site, but I would also be interested to see if it can be done without paying for anything other than the domain name. Anyway, back to the task at hand, per instructions from Heroku, I ran the command “heroku certs:add server.key 1234.crt” and almost immediately I noticed that they site had been secured with SSL. If those two files were not in my directory, I don’t think it would have been a big deal to just provide the file path with the command, but I am grateful that I didn’t have to add that to the list of things that I needed to think about while doing this task.
At this point my site has been secured, and should be accessible to any person using any browser, at least until a year from now, when I have to figure out how to renew the certificate!
As always, please let me know if I’ve missed anything, or if there’s just an easier way to do it! Also, feel free to check out the site in question at jacobkenny.com!
