KD Pixels | Setup a web development environment on MacOS Sonoma

Introduction

Jekyll is a powerful static site generator that allows developers to build fast, simple, and easily maintainable websites. Setting up a Jekyll web development environment on macOS Sonoma is straightforward and involves a few simple steps. In this tutorial, we'll walk you through the process of installing Jekyll and getting your development environment up and running.

Step 1: Install Xcode Command Line Tools

Before we begin, make sure you have Xcode Command Line Tools installed on your macOS Sonoma system.

Open the Terminal and run the following command:
```
xcode-select --install
```
Follow the on-screen instructions to install the Command Line Tools.
Step 2: Install Homebrew

Homebrew is a popular package manager for macOS that simplifies the installation of various software packages, including Jekyll.

To install Homebrew, open the Terminal and run the following command:
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
Follow the on-screen prompts to complete the installation.
Step 3: Install Ruby and Bundler

Jekyll is built on Ruby, so we need to make sure Ruby is installed on our system. macOS usually comes with a pre-installed version of Ruby.

To check if Ruby is installed, run the following command in the Terminal:
```
ruby -v
```
If Ruby is not installed, Homebrew can help us install it:
```
brew install ruby
```
Next, we'll install Bundler, a gem that helps manage Ruby dependencies:
```
gem install bundler
```
Step 4: Install Jekyll

With Ruby and Bundler installed, we can now install Jekyll using Bundler.

Create a new directory for your Jekyll project and navigate into it using the Terminal:
```
mkdir my-jekyll-site
cd my-jekyll-site
```
Create a new file named `Gemfile` in the project directory:
```
touch Gemfile
```
Open the `Gemfile` in a text editor and add the following line:
```
source "https://rubygems.org"
gem "jekyll"
```
Save the file and exit the text editor.

Now, in the Terminal, run Bundler to install Jekyll:
```
bundle install
```
Step 5: Create a New Jekyll Site

With Jekyll installed, we can create a new Jekyll site. In the Terminal, run the following command:
```
bundle exec jekyll new .
```
This will create a new Jekyll site in the current directory.
Step 6: Start the Local Development Server

To preview your Jekyll site locally, you can use the built-in development server. In the Terminal, run the following command:
```
bundle exec jekyll serve
```
Jekyll will start the development server, and you can access your site in your web browser at `http://localhost:4000`.
Step 7: Customize Your Jekyll Site

Your Jekyll site is now up and running! You can start customizing it by modifying the files in the project directory. Here are some important files and folders you should be familiar with:
- `_config.yml`: This is the configuration file for your Jekyll site. You can customize various settings, such as the site title, description, theme, and more in this file.
- `_layouts`: This folder contains layout templates for your site. You can create custom layouts for different pages or use the default layout provided by Jekyll.
- `_posts`: This is where your blog posts will go. Jekyll automatically converts files in this folder into blog posts.
- `_includes`: This folder contains reusable snippets of code that you can include in your layouts.
- `index.html`: This is the main page of your site, which serves as the homepage.
Step 8: Build and Deploy Your Jekyll Site

To build your Jekyll site for deployment, run the following command in the Terminal:
```
bundle exec jekyll build
```
This will generate the static HTML files for your site in the `_site` folder.

If you want to deploy your Jekyll site to a hosting platform, you can simply upload the contents of the `_site` folder to your server.

Conclusion

Congratulations! You have successfully set up a Jekyll web development environment on macOS Sonoma. With Jekyll, you can now easily create and manage static websites, blogs, and more. Enjoy the simplicity and power of Jekyll as you build beautiful and fast-loading websites on your macOS Sonoma machine. Happy coding!