Many people think that creating a website is hard, maybe it used to be, but I’m here to tell you that that’s not the case anymore. There are so many tools and platforms out there that enable even the most non tech savvy users to get their opinions on the internet. There range from platforms such as Medium and Tumlbr to site generaters like Square Space, and hosted solutions such as Wordpress. But, what if you didn’t want to deal with servers?
That’s where Jekyll comes in.
What is Jekyll?
Jekyll is a static site generator used in many blogs and websites currently on the Internet.
Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories. - Jekyll
Great, now how do I use it?
To get started you’ll want to install ruby on the computer you want to begin writing the content for your site on. For Windows you can use the Ruby Installer and on Mac OS the easiest way is to install brew and run:
brew install rubyOnce Ruby is intalled we can get started on installing Jekyll:
gem install jekyll bundlerAfter you run that command you’re all set to create a sample site by running the following command:
jekyll new my-awesome-siteRunning the above command will create a new folder with the name “my-awesome-site” . In it you’ll find a sample website with an interesting directory structure that doesn’t quite look like a website. Now that we have this sample let’s test it out using the following commands:
cd my-awesome-site
bundle exec jekyll serveOpen your browser and type in: http://localhost:4000. You should see a site with a few posts and an “about” page, congratulations you have a website! From here you can modify it as needed, be sure to read the Jekyll docs to make use of all of it’s features.
I’ve modified my site, can see it locally, and I love it! How do I show it to the rest of the world?
This part is up to personal preference, there’s many ways to host a website including running your own server and using a platform to host it for you. I personally did not want to manage servers, so I decided to use a platform, Firebase, specifically Firebase Hosting. It’s fairly easy to use if you’re used to using a terminal or command line, free to start off, and uses a CDN to serve content to your readers.
Use the instructions in their documentation to install the Firebase CLI. When configuring your Firebase Hosting project via CLI the you should be deploying the _site folder. Make sure that the local server serving your site is not running and run the following commands to build and deploy your website:
bundle exec jekyll build
firebase deployOnce the upload process is completed, visit the URL indicated by the Firebase CLI output, you should see your site again, but now it’s visible to the world, congratulations!
I’ve got a website, but I want to use my own domain, it looks nicer, how do I do it?
This part’s not too hard. Go ahead and buy a domain from your favorite domain registrar (I chose Godaddy, because why not). Once your domain is purchased go to the Firebase Hosting console and follow the instructions for using a custom domain.
For DNS I chose to use CloudFlare because they provide DDOS protection and a caching CDN which can reduce pricing drastically.
Congratulations, you made it to the end! You’ve created a website, deployed it, and configured a custom domain in a matter of minutes. Not too hard right?
Let me know in the comments below what you thought about this guide and what kinds of things I should cover in the future.
ODP out!