Deploying Jekyll Sites with GitHub Actions and FormCrab.com

If you love the simplicity of Jekyll but hate the hassle of manual builds and exposing your email address on the web, you’ve come to the right place. In this post we’ll walk through:

Automating Jekyll builds with GitHub Actions – get a live site on every push.
Adding a secure, spam‑free contact form using FormCrab.com – no server, no HTML forms, no hidden email addresses.

By the end you’ll have a fully static blog that updates automatically and a private, customizable email link that protects your inbox from bots.

Why Combine Jekyll, GitHub Actions, and FormCrab?

Feature	Jekyll	GitHub Actions	FormCrab.com
Zero‑cost hosting	GitHub Pages serves static files for free	Runs in the same GitHub environment, also free	No hosting required – FormCrab provides the landing page & backend
No custom server	Only static assets needed	CI/CD runs on GitHub’s infrastructure	No server‑side code to write or maintain
Spam protection	N/A	N/A	Built‑in anti‑spam, email hidden from bots
Instant updates	Requires manual `jekyll build`	Automatically triggers on each push	Form updates instantly, no redeploy needed
Customization	Themes, plugins	Workflow files in YAML	GET parameters to pre‑fill name, email, subject, message, and redirect

1. Set Up Your Jekyll Blog

If you already have a Jekyll site, skip to the next section. Otherwise, create a fresh one:

# Install Jekyll (requires Ruby)
gem install jekyll bundler

# Create a new Jekyll site
jekyll new my-blog
cd my-blog

# Install dependencies
bundle install

# Test locally
bundle exec jekyll serve

Commit the site to a new GitHub repository (e.g., username/my-blog). Push the initial commit:

git init
git remote add origin https://github.com/username/my-blog.git
git add .
git commit -m "Initial Jekyll site"
git push -u origin main

2. Automate the Build with GitHub Actions

Create a workflow file at .github/workflows/jekyll.yml in your repository:

name: Build & Deploy Jekyll Site

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      # 1️⃣ Checkout code
      - uses: actions/checkout@v4

      # 2️⃣ Set up Ruby (Jekyll runs on Ruby)
      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'   # adjust if needed
          bundler-cache: true   # speeds up subsequent runs

      # 3️⃣ Install dependencies
      - name: Install Jekyll and Bundler
        run: |
          gem install jekyll bundler
          bundle install

      # 4️⃣ Build the site
      - name: Build site
        run: bundle exec jekyll build

      # 5️⃣ Deploy to GitHub Pages
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./_site
          # Optional: custom domain
          # cname: www.example.com

When you push to main, GitHub will:

Pull the source.
Install Ruby, Jekyll, and your gems.
Build the static site into _site.
Publish _site to the gh-pages branch (or the main branch if you configured GitHub Pages that way).

Your blog is now live on https://username.github.io/my-blog/ automatically after every commit.

3. Add a Contact Link with FormCrab.com

The problem with traditional `mailto:` links

Bots scrape mailto: – web scrapers collect addresses and spam you.
No control over user experience – you can’t pre‑fill fields or redirect after submission.

FormCrab solves it

Receive messages, hide your email – your address stays private.
No code required – just a single URL.
Anti‑spam protection – bots never see a valid email address.
One link, full control – customize name, email, subject, message, and redirect via GET parameters.

Getting Your Private Link

Sign up at formcrab.com.
Create a new form – you’ll receive a unique token, e.g., abcd1234.
Your base link will look like:

https://formcrab.com/f/abcd1234

Add this link anywhere in your Jekyll site (README, Twitter bio, blog footer, etc.) and users will be taken to a clean, responsive form hosted by FormCrab.

4. Customize the Form with GET Parameters

FormCrab lets you pre‑populate fields or change the post‑submission flow by appending query strings. Replace {custom-link} with your actual token.

1️⃣ Auto‑fill Name

<a href="https://formcrab.com/f/{custom-link}?name=Hugh" target="_blank">Email us</a>

2️⃣ Pre‑set Visitor Email

<a href="https://formcrab.com/f/{custom-link}[email protected]" target="_blank">Contact Support</a>

3️⃣ Custom Subject

<a href="https://formcrab.com/f/{custom-link}?subject=Urgent+Support+Request" target="_blank">Report an Issue</a>

4️⃣ Predefined Message

<a href="https://formcrab.com/f/{custom-link}?message=I+would+like+to+request+a+demo" target="_blank">Inquiry</a>

5️⃣ Custom Redirect After Submission

<a href="https://formcrab.com/f/{custom-link}?next=https://yoursite.com/success" target="_blank">Send and Return</a>

All parameters are URL‑encoded (+ for spaces, %20, etc.). You can mix them together, e.g.:

https://formcrab.com/f/{custom-link}?name=Jane&subject=Feedback&next=https://example.com/thanks

Embedding in Jekyll

Add a partial _includes/contact.html:

{% assign token = "abcd1234" %}
<a href="https://formcrab.com/f/{{ token }}?subject=Blog%20Feedback" target="_blank">Send Feedback</a>

Then use it in any layout:

{% include contact.html %}

Now every visitor can send you a message without ever seeing your email address.

5. Full End‑to‑End Example

Below is a minimal Jekyll index.md that showcases the automated site and a FormCrab contact button:

---
layout: default
title: Home
---

# Welcome to My Jekyll Blog

This site is built with **Jekyll**, deployed automatically by **GitHub Actions**, and includes a **spam‑free contact form** powered by **FormCrab.com**.

## Latest Posts

{% for post in site.posts limit:5 %}
- [{{ post.title }}]({{ post.url }})
{% endfor %}

## Get in Touch

You can reach me securely without exposing my email address:

<a href="https://formcrab.com/f/abcd1234?subject=Blog%20Inquiry" target="_blank">Contact the Author</a>

*Your message will arrive in my inbox, and my address stays hidden from bots.*

Commit the changes, push, and watch GitHub Actions rebuild and publish the site. The “Contact the Author” link opens a FormCrab form with the subject already set to “Blog Inquiry”.

6. Recap & Next Steps

What you achieved	How you did it
Zero‑maintenance static blog	Jekyll + GitHub Pages
Automatic builds on every push	GitHub Actions workflow
Secure, anti‑spam contact method	FormCrab private link
Customizable user experience	GET parameters for name, email, subject, message, redirect

What to explore next

Custom domains – point a personal domain to your GitHub Pages site.
Webhooks – trigger a Slack notification from FormCrab using its integrations.
Analytics – add a lightweight, privacy‑first analytics script (e.g., Plausible).
Theme tweaks – use Jekyll plugins or a Bootstrap theme for a polished look.

With the power of static generation, CI/CD automation, and a privacy‑first contact solution, you can focus on writing great content while the infrastructure takes care of itself.

Happy blogging! 🚀