Getting Started with Jekyll
Get started with Jekyll basics in this comprehensive overview. You will learn how to install and configure, as well as deploy it to a web server.
My First Steps into Blogging
Blogging has always fascinated me, but I never knew where to start. After exploring different options, I stumbled upon Jekyll - a simple, powerful static site generator that makes writing and publishing blogs a breeze.
This blog marks my first step into the world of blogging, and I want to share my journey with you. Whether you are a developer looking for a lightweight blogging platform or a beginner like me, this guide will walk you through setting up Jekyll, creating your first post, and getting your blog online. Let’s dive in!
Why Jekyll?
✅ Fast & Lightweight – Jekyll generates static HTML, making it faster than WordPress (which relies on a database) and Docusaurus (which uses React).
✅ Free & Easy Hosting – Can be hosted for free on GitHub Pages, unlike WordPress, which often requires paid hosting.
✅ Full Control – No platform restrictions like Medium or Substack; you own your content and customize everything.
Moreover, you just need to know how to write a markdown file for publishing a blog. That’s interesting!!!
Installation
Step 1. Choosing theme
In addition to default theme, you can find some Jekyll themes on public website and choose which is suitable for you:
- https://jekyllthemes.io/
- http://jekyllthemes.org/
- https://jekyll-themes.com/
- https://jamstackthemes.dev/ssg/jekyll/
My choice is chirpy as it has dark theme.
Step 2. Activating the Github Pages
After choosing a Jekyll theme, the next step is to host it on GitHub Pages. Each theme typically includes setup instructions, however, as my observation, here are the general steps:
- Create repository.
- If it is a GitHub template, click the Use this template button beside Star button, and then select Create a new repository.
- Else, Fork the theme repository.
- Name the new repository
<username>.github.io
, replacingusername
with your lowercase GitHub username.
(Optional) Some themes require to set the
url
in_config.yaml
to protocol & hostname (e.g. ‘https://username.github.io’) for your site .
You should go to
Settings
→Pages
→Build and Development
to ensure the source is chosen asGithub Actions
orDeploy from a branch
(you need to specify branch name).
But you don’t want just a template, you want to customized it to yourself. So, let’s move on to the next step.
Step 3. Customizing by your choice
Clone the repository you just created.
- Install Ruby and Jekyll on your machine through the official guide. For Windows users:
- Download and install Ruby from RubyInstaller and follow the instructions.
- Once your computer has Ruby, install Jekyll and Bundler using
gem install jekyll bundler
. - Check if Jekyll has been installed properly:
jekyll -v
cd
to your project folder and runbundle install
to install the required gems.- Update the variables of
_config.yml
as needed. Some of them are typical options.title
is the the main title of your websiteavatar
is the profile picture in the sidebartimezone
is used to display the date and time of your postslang
is the language of the site
- Run
bundle exec jekyll s
to start the local server.
Add flag
--livereload
to automatically reload the site when code changing (excepts for file_config.yaml
).
After a few seconds, the local server will be available at http://127.0.0.1:4000.
Step 4. Updating change
To update your change in GitHub Pages, commit your code to repository using these command lines:
1
2
3
git add .
git commit -m '<commit message>'
git push
Conclusion
Now you’ve had your own customized site, the next part is writing blog. Stay tuned, and see you in the next part! Thanks for your reading. Please leave the comment if you have any questions or feedbacks.