Creating a Tech Blog with Jekyll and GitHub Pages
Hello there! 🌟 Are you dreaming of starting your own tech blog but not sure where to start? You’ve clicked on the right link! Today, we’ll walk through creating a tech blog using Jekyll and GitHub Pages. No prior web development experience is needed; just a willingness to learn and a dash of curiosity. Let’s dive in!
What is Jekyll?
Before we roll up our sleeves and start coding, let’s quickly talk about Jekyll. Jekyll is a static site generator—a tool that takes your content, merges it with templates, and produces a website you can easily host and share. It’s perfect for blogs and small websites. Why use Jekyll? Because it’s simple, efficient, and integrates seamlessly with GitHub Pages, allowing you to host your blog for free!
Setting Up Your Environment
Step 1: Install Ruby
Jekyll is built with Ruby, so the first step is to install Ruby on your computer. If you’re using Windows, consider using RubyInstaller. For macOS, Ruby is usually pre-installed, but you can use a version manager like rbenv or RVM for better control. For Linux, it’s as simple as running:
bash
sudo apt-get install ruby-full
Step 2: Install Jekyll and Bundler
Next, we’ll need Jekyll and Bundler. Bundler is used to manage project dependencies. Open your terminal and type:
bash
gem install jekyll bundler
Creating Your Jekyll Blog
Step 3: Jekyll New Site
With Jekyll installed, we can create a new site. Run the following command in your terminal:
bash
jekyll new my-awesome-blog
This will generate a new directory called my-awesome-blog with the boilerplate Jekyll site files.
Step 4: Running Your Blog Locally
Let’s see our blog in action!
bash
cd my-awesome-blog
bundle exec jekyll serve
Open your browser and go to http://localhost:4000. Tada! You should see your new blog up and running locally.
Customizing Your Blog
Step 5: Choose a Theme
Jekyll themes can transform your plain-looking blog into something more appealing. You can explore Jekyll Themes for inspiration. Once you find one you like, update your _config.yml:
yaml
theme:
Step 6: Customize the Layout
You can edit the files in the _layouts, _includes, and _sass folders to tweak your theme’s layout and styles. Don’t be afraid to experiment—this is where your unique style comes into play!
Step 7: Adding Content
To add your first post, head to the _posts directory, and create a new file named YYYY-MM-DD-title.md:
markdown
---
layout: post
title: "My First Blog Post"
date: YYYY-MM-DD HH:MM:SS
categories: jekyll update
---
Hello world! This is my very first blog post on my new Jekyll site.
Jekyll uses Markdown, a simple language for formatting your text. It’s easy to learn and helps keep your posts consistent and readable.
Hosting on GitHub Pages
Step 8: Push Your Blog to GitHub
Now, let’s host your new blog on GitHub! First, create a new repository on GitHub—name it your-username.github.io. This is crucial as GitHub will use this naming to serve your blog.
bash
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin git@github.com:your-username/your-username.github.io.git
git push -u origin main
Step 9: Enable GitHub Pages
Go to the repository on GitHub, select “Settings”, and scroll down to “GitHub Pages”. Select the source branch (usually main) and your site should be live at https://your-username.github.io.
Conclusion
Congratulations—you’re now the proud owner of a Jekyll blog hosted on GitHub Pages! You’ve set up your environment, created posts, and enhanced your blog with a theme. You’re all set to share your tech adventures with the world. 🎉
Optional Practice Ideas:
– Explore Jekyll plugins to add more functionality to your blog.
– Write a series of posts on what you’ve learned from creating your blog.
– Try creating custom CSS styles to give your blog a unique look.
Whether this is your first foray into web development or just a new tool in your kit, I hope this guide has been helpful. Keep experimenting and happy blogging! 🚀