Categories
Dev Bootcamp

Using Jekyll to Generate Your Static Website

I have recently been using Github Pages to create my new personal project website. It was a good way for me to practice creating web pages from scratch with HTML, CSS, and even JavaScript. As a beginner, it was also a good way from me to practice using the terminal, git, committing, pushing, pulling, etc. I created simple index, about, contact, portfolio, and blog pages. For Dev Bootcamp, I’ve been writing 1-2 blogs a week on average and pushing it onto my GitHub Pages repository. All of these blog posts are on a separate web page following the same HTML blog post template.

There comes a point where I have too many blog posts to be able to maintain a website purely using HTML and CSS. Every time I want to make a change to the template, such as a link on the navigation menu bar or some text on the footer, I would have to go through each page and blog post and update the HTML in that page. It worked okay when I only have several web pages, but it got exponentially time-consuming as I built more and more pages.

Many websites are powered by a content management system (CMS), the most common one being WordPress, which is a great solution for creating a dynamic website. My own personal branding website is powered by WordPress. It can do just about anything you can think of. But my project website only needs to showcase my portfolio of projects and blogs. It will never need to use most of the functionality that a dynamic platform provides. WordPress would be an overkill.

Here comes Jeykll, a simple, static site generator that takes in a bunch of text and spits out a beautifully generated website. It gives me everything I need without all of the bulk that comes with a CMS platform. Jekyll allows me to easily create site-wide headers and footers without having to copy them across each and every page, which gets rid of the pain points I was describing earlier. It allows me to write content on web pages and blog posts with Textile and Markdown, so someone with no knowledge of HTML can still create a nice web pages.

Here is Jekyll’s definition on their website:

Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through a converter (like Markdown) and our Liquid renderer, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server. Jekyll also happens to be the engine behind GitHub Pages, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers for free.

Here are some advantages of using a static website as opposed to a dynamic website:

  • Simple – no database, no CMS, minimal
  • Fast – does not require server-side requests, so load time will be much quicker
  • Cheap – quick to develop, cheap to develop, cheap to host
  • Ease-of-Use – Since content is built with Markdown, so you can use whatever text editor you want to create and edit your web pages
  • Secure – less prone to risks, since there are no databases, CMS, PHP, etc.
  • Click here for more reasons from Site Point

Another great thing about Jeykll is that GitHub Pages is powered by Jekyll behind the scenes. Every time I push my website to GitHub Pages, it actually uses Jeykll to generate static HTML pages, so I don’t even need to do anything to make Jeykll work on GitHub. I just make the necessary changes to my Jekyll-powered website, push it to GitHub, and it automatically generates the static HTML and displays it on the web. This makes everything so easy. I can even point my domain name to my GitHub website and have fully-running website hosted for free.

The most difficult part of this process for me with the actual setting up of Jekyll on my local machine, so if you want to take Jeykll for a spin, here are some useful resources to start with:

After I got it set up, I spent quite a bit of time converting my previously hand-built HTML and CSS website into Jeykll’s simple text format. It was quite a pain, since I had a lot of pages to convert (I wish I started with Jeykll from the get go). But after the initial migration, I love it now. It gives me everything I need and nothing more. Automation where I want. Universal header and footer. Easy to change layouts. Simple pages created from plain text. Easy updates just by pushing it to GitHub; no databases, no FTP, etc.

If you’re running a simple website on WordPress and don’t take advantage of most of its features, consider using a static site generator such as Jeykll.

This blog has been initially published on tonymai.github.io.

Categories
Dev Bootcamp

Version Control, Track Changes, and GitHub

A Beginner’s Guide To What These Are

GitHub is a very popular platform where open source developers host and share their code. Most budding-developers will come across or hear about GitHub at some point in their developing career; most likely earlier than later. But before we talk about GitHub, let’s talk about two fundamental concepts: version control and track changes.

What is version control and how does it help? Imagine spending a couple of hours working on several parts of your code to implement new features and enhance existing ones. You are almost finally done. After your third cup of coffee, you finished implementing the 5 new features. You hit save and opened up your software to enjoy the new features that you just implemented. It crashes on you instantly. What do you do? If you do not have version control, then you probably have to find the backup that you manually made a copy of sometime ago; probably one that you copied right before you started working the new features. If you do have version control, you probably just reverted back to last working state of your code with the first 4 features still intact.

As you have probably guessed (by its name or by my introduction), version control keeps track of all the changes that was made to something and when they were made. You save batches of your changes via a commit, which takes a snapshot of the current state of your code. You can go back and view each commit that you made; what was added, modified, or deleted. If you messed up something in your code and it is not working anymore, you can just revert back to the last commit when your code was working.

Version control really shines, though, when you are working with multiple developers on a single project. Without version control, it would be a nightmare to make sure everyone has the most updated code and weren’t overwriting everyone else’s codes. Merging takes commits from multiple people and put the changes into one new file instead of creating multiple versions of the same file.

Git is a popular open source version control system. It is installed on your local machine and tracks all of the changes that you made in that local repository. Any changes you make to any files and directories are tracked. There are three states of files in git: working, staged, and commit. Git will tell you (1) which files were changed, but are not staged for commit, (2) which files are staged for commit, and (3) which files are new and untracked. Any changed file and new, untracked file can be moved to a staged state and any staged file can be reset back to an unstaged state. Finally, you can commit any staged files to save the changes that were made. This creates a checkpoint in your git repository. As mentioned earlier, if you messed up your code, you can simply revert back to the commit when your code was last working, so it is a good a idea to commit more often with smaller chunks of changes.

Finally, we get to GitHub. GitHub is a place where you can store your repositories remotely and access it from anywhere where you have an Internet connection. Don’t get GitHub confused with git. They are two different things. Git is a command line tool that helps you keep track of the changes on your local repositories. GitHub is a third-party tool that hosts your repositories remotely, with a nice, visual interface may I add. You can push your changes from your local git repository to the one that is stored on GitHub, as well as pull any changes that were made from GitHub to your local machine. GitHub is a great platform to collaborate with others on. Instead of pushing and pulling directly to and from all the developers that are working on the same project (imagine what a nightmare that would be), you only need to push to and pull from GitHub. GitHub acts as a central location that will always have the most updated stable version of the code.

I have only scratched the surface of the benefits of using git and GitHub.Users can also give feedback, document issues, and start a wiki right on GitHub. If you want to read more about GitHub and the benefits that it offer, you can start with TechCrunch’s article here. I will be blogging more on the technical concepts that I come across and learn. If you want to read my future blog posts, follow me on twitter!

This blog has been initially published on tonymai.github.io.