Jekyll & Netlify: A Web Love Story
Create your own website without taking a sweat
Today I’ll cover a different topic than usual. In fact, i am not going to mention the word Swift (oops, just did) or iOS in the whole article. On this occasion I will talk about a personal project I developed while enjoying my summer holidays in the south of Spain: my personal website.
Why a personal website?
To be honest, the main reason why I created my own website was to learn the technologies involved in the process. We as mobile developers sometimes see the web and its environment as something obscure and arcane. Nothing further from the truth. As we are going to see, the development of a simple and good looking web page is a very straightforward process, given the cool technologies we can use.
On top of that, as a Software Developer, having your own website is a perfect scenario to showcase your skills, projects, and experience at one single place. If not your personal website, you can choose to create something less egotist as a blog focusing on your area of expertise. These are popping up like mushrooms these days, some of them really well curated and visually pleasant.
What do we need?
Once we know what (a simple personal website) and why (to learn, to enhance my professional image), we need the how, and as Nietzsche suggested,
“He who has a why can bear almost any how”.
So in order to successfully achieve our task, we need three steps:
- A Domain
- The Website itself
- A Hosting Service
The Domain
Even if that is not necessarily the first step in chronological order, it is allegedly the most exciting, envisioning your own website URL in the browser address bar.
The domain name should be simple and short, avoiding double or special characters, such as dashes and hyphens. If you do not have the misfortune of sharing your name with a popular baseball player as in my case you should stick to .com as top-level domain, otherwise I would go with your country one, or something easy to remember. In my case, it was my name + surname + country top-level domain: cesarvargas.es: short, catchy and memorable. Of course, all these tips are very good but we depend on the domain availability: it could be taken, or cost a large sum of money:
“Everybody has a plan until they get punched in the mouth.” Mike Tyson
Once we dodged that punch and came up with an available domain name we should purchase it promptly, before our best frenemy does it.
There are nowadays many Internet domain registrar companies with similar services, I went for GoDaddy because already had an account. It is allegedly the largest domain provider, with its simplicity and pricing as their largest strengths. The cheap prices can be deceiving though, as they would charge for something as simple as privacy. On top of that, be ready for a ton of spam if you are not renewing your domain and their continuous tries to upsell you.
In the other hand, if you feel brave and want something more powerful, you should take a look at Google Domains or Amazon Route 53
The Page
Once we have a domain, it is time to develop the website itself. As you may suspect this is the longest task but do not fear, in our case it will be uncomplicated.
As far as we are concerned, we just need something simple. It will show the same content to all users and all contexts. It will rarely change, maybe we will edit our bio or project texts but once performed, it will be very stable. Oh wait, we just defined a static website!
A static web page (sometimes called a flat page or a stationary page) is a web page that is delivered to the user’s web browser exactly as stored, in contrast to dynamic web pages which are generated by a web application.
Consequently, a static web page displays the same information for all users, from all contexts, subject to modern capabilities of a web server to negotiate content-type or language of the document where such versions are available and the server is configured to do so. Wikipedia
So, what are the advantages of a static web page compared to a more dynamic web application?:
- It is safer, being so simple it has fewer vulnerabilities.
- More performant, faster.
- Fewer dependencies, no databases, no CMS. Fewer headaches.
- Cheaper, we just need a cloud storage.
Of course, dynamic web applications are a must if we want something more complex, with queries and other dynamic functionality, but given that we do not need that, we can safely go for a static one. The biggest restriction we have is that any personalization or interactivity has to run client-side, which can be cumbersome. But again, that is not something we should worry about here.
Yes! we want a static website, and we will accept any external help to achieve our task. We will make use of Jekyll. According to their repo, Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. 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.
It was recommended to me for its simplicity and ease of configuration. Furthermore, as we will see, it is well known and supported in the community, where you can find free and paid templates that match your case.
So, once we have the technology, we need the most important part, the content. And again, in search of simplicity, we will download a template and adapt it to our requirements instead of creating it ourselves. Take a look at Jekyll Resources, where you can find a handsome case that matches your scenario. But we should not constrain ourselves only to a preset Jekyll Theme, if we already have an HTML site we can easily convert it to Jekyll following the process described in this article.
Alright! We have a theme, but the content is not personalized for our story, we should add our information so our moms can proudly show it to relatives and friends. And here it is where the perks of Jekyll come to shine. If the template was flexible enough, the content is easily customizable by adding the visible properties defined in the _config.yml A ton of HTML or CSS variable are defined there, together other main predefined ones
# Site settings
title: César Vargas Casaseca
url: https://cesarvargas.es# Google webmaster tools
google_verify:# Color settings (hex-codes without the leading hash-tag)
color:
primary: 0d0c0c #80B3FF
primary-rgb: “255,70,49” #”128,179,255"#texts
main: This is a just a text to be shown in our awesome website
And if we want to add more flexibility to our project by including other customizable elements, we can just add it to the relevant file using the template language Liquid. Jekyll will then traverse the files looking for something to process. Take a look here and here for more information.
Summing up this step a bit, in order to achieve a static website with Jekyll we have to:
- Download and install Jekyll
- Download a Jekyll Template theme, or convert any other HTML one to Jekyll
- Customize it by adding your wished variables or creating new ones. Adjust texts, colors and other elements
The Hosting
Nice! We have a super fancy website that runs smoothly … locally, on our computer. The next step is to host it externally, so it can be accessed everywhere. And we want to do it easily and cheaply, without a strenuous process to deploy or expensive tiers for just hosting a static webpage. Besides that, it should blend effortlessly with Jekyll, and be able to set the domain from an external provider without further endeavour.
The answer to all our wishes is Netlify. Netlify is a cloud computing company that offers hosting and server less back end services for static websites. It features continuous deployment from Git across a global application delivery network, server less form handling, support for AWS Lambda functions, and full integration with Let’s Encrypt.
It is free for our case, the UI is very intuitive and deployments are rapid. As I mentioned above, the deployments are to be done with Git, so if you did not do it before, we should store our project into a GitHub repository. Once we’ve done that, we can login to Netlify with our GitHub account and specify that everytime we push to master the webpage is deployed. It is that easy! Furthermore, it supports Jekyll very smoothly, we just have to add our Build command jekyll build in the Build Settings. You can get to know more about how Jekyll is integrated with Netlify in this interesting post.
And finally we just need to connect our domain with the hosted website in Netlify. For the purpose of using Netlify DNS, we are going to change the domain names in GoDaddy or any other domain provider to the custom hostnames assigned to your DNS zone in Netlify. It can take a maximum 24 hours to complete this task depending on the registrar. Once it is finished, your domain will be pointing to your hosted website in Netlify and will be available everywhere. So, in order to host your web in Netlify …
- Login to Netlify with your GitHub account
- Host your webpage project in a GitHub Repo
- Specify your website GitHub Repo in your Netlify Settings
- Add the Build Command in Build settings, in our case
jekyll build - Push to master (or any other specified branch) to deploy
- Connect your domain to your Netlify DNS zone
The Icing on the Cake
With that you should now have your own website up and running, accessible through your domain from anywhere in the world. At that moment I still felt brave enough to try to improve it a little bit. For instance, I registered my website in Google Search Console. Search Console tools and reports help you measure your site’s Search traffic and performance, fix issues and make your site shine in Google Search results. You can do the same with Bing, or any other SEO tools that you might find convenient. Do not forget, our goal was to learn, play and have fun, and these tools are a warranty for that.
In addition, our product would feel orphan without a proper way to track its traffic and activity. Google Analytics is the most widely used website statistics service, but there are others such as Matomo or Woopra, with a bigger emphasis on privacy or easiness of usage.
And if you feel like you could earn some nickels monetizing your website, you can display some ads on it. Take a look at Google AdSense for an easy ad integration. In short, if we want to improve our web, we could …
- Enhance our SEO with Google Search Console or Bing Webmaster Tools
- Track our traffic and activity with an Analytics tool, such as Google Analytics
- Monetize our content displaying Ads
Conclusion
In this post we have learned that basic web development should not be difficult. We have seen the differences between static and dynamic websites, and when to use each of them. We picked up contrasted tool for each step along the process, and described ways to refine our project learning new technologies and products.
As always, if you have any suggestion please drop a message or a margin note. Here you can see my final outcome: https://cesarvargas.es
Happy web creating!
