It is 2017, you are a developer and you are ashamed of having your personal domain forwarded to an about.me page… if you are like me, you probably want YOUR OWN SITE with your bio, your portfolio, links to your social media profiles, and you want to be able to customize it a bit.
What to do, what to do… let’s think out loud and list at least 3 options:
A. Get hosting from GoDaddy or other traditional hosting provider and set up a CMS like Wordpress… nah, too expensive, and you don’t really want to deal with Wordpress for something simple as a personal website, believe me. Plus, for most sites a CMS is completely unnecessary overhead and only adds complexity and they are plagued with performance problems and security issues you don’t really want to waste your time resolving.
B. Create a full-fledged web app with some programming language and deploy it on heroku… no man, too complicated and time consuming, you just want a simple website.
C. Forward your domain to your tumblr micro blog or other social media profile… hmm… not a really good idea, specially if you want it for professional purposes, plus there is no way to customize them.
Ok, these are just 3 alternatives, and there are some many options out there that you might end up just forgetting about it and keep using your lame about.me page you can’t say you built yourself.
Well, I was in the same situation until I recently found out about static site generators.
There are several static site generators… my rule of thumb for picking third party libraries and other OSS is “always use whatever is more popular” (that way you can find more docs, help, etc… and it won’t probably be an abandoned thing next year), so I decided I’ll go with Jekyll.
We all know that the best things in life are FREE and we all love FREE stuff right?
So… how can we get FREE HOSTING for our new static site and even better, with a FREE SSL certificate? As a guy who has used Google products since the early days of GMail and Google Apps, the answer was clear… Firebase Hosting!.
Open a terminal and type:
gem install jekyll jekyll new you-site-folder cd your-site-folder
Before you build your site for the first time, let’s do an early tweak to jekyll that will help us with Firebase along the road. Open “your-site-folder” using vim, nano, emacs, atom (recommended) or whatever text editor you like to use… and open the “_config.yml” file and add the following line:
After you are done with changing the jekyll’s destination folder, execute
Sweet, we are done setting up Jekyll! Your static site was built inside the “public” folder and you should now be able to see your site at http://127.0.0.1:4000/.
Use your browser to log into Google and to to [Firebase Console][https://console.firebase.google.com/] and click “GET STARTED FOR FREE”.
Then click “CREATE NEW PROJECT”.
Name your project and click “CREATE”.
Verify you got the Spark plan (Free $0/month) and click in the Hosting menu option on the Navigation Drawer in the left.
Click “GET STARTED”.
A dialog will show up with instructions similar to the ones below, but I recommend you to follow the instructions on this post because I’ll be mentioning jekyll related stuff.
To install firebase’s CLI, cd yourself into “your-site-folder” and execute
sudo npm install -g firebase-tools.
When everything is installed, execute
firebase login to sign into Google.
Then, initiate your project by executing
firebase init. Follow the prompts and when prompted:
I. Select the “Hosting” option.
II. Select your project.
III. For the database rules, just hit enter. (We are not using it.)
IV. For public directory, just hit enter. (We already told jekyll to build in “public” which is Firebase’s default).
V. Ok… if you want a “single-page” site, type
y and hit enter. If you want a custom 404 page, type
N and hit enter and a 404.html page you can customize later will be created inside “public”.
VI. Because you already built your site with jekyll there is already a “public” folder, type
N and hit enter. If you did deleted the folder, there is nothing to fear as jekyll will recreate everything in there every time you execute
We’re done setting up firebase! Enter
firebase deploy and your site will be deployed to the interwebz! Firebase will give you an URL (https://your-site-something.firebaseapp.com) where you can see your site.
Now, we need to tell jekyll about some files we don’t want it to put in the “public” folder when we build our site again. Open the “_config.yml” file again, find the “exclude” entries and add Firebase’s JSON files.
exclude: - Gemfile - Gemfile.lock - database.rules.json - firebase.json
To deploy new versions of your site, just do
jekyll serve and
Time to secure our site! Go back to your project on Firebase Console, click “CONNECT A DOMAIN”.
Then follow the instructions, can’t really get into the details because each domain provider has a different UI for this, but the bottom line is that you will have to add some DNS records to your domain settings to prove you own it. Then, just wait a couple of hour while Google detects these DNS records and provisions your SSL certificate.
Voilà! Next time you deploy to Firebase, you’ll see your domain in the Terminal, open it in your browser and enjoy!
In case you are asking yourself… why HTTPS?.