Local Development Setup for Your Personal Site
Local Development Setup for Your Personal Site
This is a Jekyll-based website. Here are multiple ways to set it up locally:
Option 1: Using rbenv (Recommended for macOS)
1. Install rbenv and Ruby
# Install rbenv
brew install rbenv ruby-build
# Install Ruby 3.0.0 (or latest stable)
rbenv install 3.0.0
rbenv local 3.0.0
# Add to your shell configuration
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
source ~/.zshrc
2. Install dependencies
# Install bundler
gem install bundler
# Install project dependencies
bundle install
# Install Node.js dependencies
npm install
3. Run locally
bundle exec jekyll serve --livereload
Option 2: Using Docker (Universal)
1. Create Dockerfile
Create a file called Dockerfile
in the project root:
FROM jekyll/jekyll:3.8
COPY . /srv/jekyll
WORKDIR /srv/jekyll
RUN bundle install
EXPOSE 4000
CMD ["bundle", "exec", "jekyll", "serve", "--host", "0.0.0.0", "--livereload"]
2. Run with Docker
# Build and run
docker build -t personal-site .
docker run -p 4000:4000 -v $(pwd):/srv/jekyll personal-site
Option 3: GitHub Codespaces (Cloud Development)
- Go to your GitHub repository
- Click “Code” → “Codespaces” → “Create codespace on main”
- Once loaded, run:
bundle install bundle exec jekyll serve --host 0.0.0.0
Troubleshooting
Ruby Version Issues
If you encounter Ruby version issues, you can:
- Remove the Ruby version requirement from
Gemfile
- Use rbenv to manage Ruby versions
- Use Docker for a consistent environment
Permission Issues
If you get permission errors:
# Install gems to user directory instead of system
bundle install --path ~/.gem
Development Workflow
1. View your site
Open http://localhost:4000 in your browser
2. Making changes
- The site will automatically rebuild when you make changes
- Use
--livereload
flag to automatically refresh your browser - For JavaScript changes:
npm run build:js
3. Useful commands
# Serve with drafts
bundle exec jekyll serve --drafts --livereload
# Build without serving
bundle exec jekyll build
# Clean build cache
bundle exec jekyll clean
Quick Start (if you have Ruby working)
bundle install
npm install
bundle exec jekyll serve --livereload
Then visit http://localhost:4000 to see your site!