This tutorial will walk you through creating a static website using the Eleventy static site generator and deploying it on GitHub Pages. Additionally, we'll set up a contact form using Fabform.io, a service that easily handles form submissions for static sites.
By the end of this tutorial, you'll have a functional static website with a working contact form.
- Git and GitHub account: You'll need Git installed and a GitHub account. Sign up for a free account at GitHub.
- Node.js and npm: Install Node.js and npm from here.
- Basic knowledge of HTML/CSS: This tutorial assumes you have basic knowledge of HTML and CSS.
Eleventy is a simple static site generator. To install it, you'll need to have Node.js and npm installed.
-
Open your terminal or command prompt.
-
Run the following command to install Eleventy globally:
npm install -g @11ty/eleventy
-
Verify that Eleventy is installed by running:
eleventy --version
If installed correctly, you'll see the version number of Eleventy.
-
Create a directory for your project. Navigate to the location where you want to create your project and run:
mkdir my-eleventy-site cd my-eleventy-site -
Initialize a new Node.js project:
npm init -y
-
Install Eleventy as a local dependency:
npm install @11ty/eleventy --save-dev
-
Create a new directory for your site's content:
mkdir src
-
Inside the
srcdirectory, create anindex.mdfile:echo "# Hello World!" > src/index.md
-
In the root of your project directory, create an
.eleventy.jsconfiguration file:touch .eleventy.js
-
Add the following configuration to the
.eleventy.jsfile:module.exports = function(eleventyConfig) { return { dir: { input: "src", output: "_site" } }; };
This configuration tells Eleventy to look for source files in the
srcdirectory and output the generated files to the_sitedirectory.
-
Inside the
srcdirectory, create a new file calledindex.html:touch src/index.html
-
Add some basic HTML to the
index.htmlfile:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Eleventy Site</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <h1>Welcome to My Eleventy Site</h1> <p>This is a static website generated using Eleventy.</p> <a href="/contact.html">Contact</a> </body> </html>
-
Add a CSS file to style your site:
touch src/styles.css
Add some basic CSS:
body { font-family: Arial, sans-serif; margin: 0; padding: 20px; } h1 { color: #333; }
-
Create a new file called
contact.htmlin thesrcdirectory:touch src/contact.html
-
Sign up for a free account on Fabform.io.
-
Once signed in, click on "Create a New Form".
-
Customize the form fields as needed. For example, you can add fields for "Name", "Email", and "Message".
-
After creating your form, you'll get an HTML snippet that looks something like this:
<form action="https://fabform.io/f/your-form-id" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Message:</label> <textarea id="message" name="message" required></textarea> <button type="submit">Send</button> </form>
-
Add this form to your
contact.htmlfile:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact Us</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <h1>Contact Us</h1> <form action="https://fabform.io/f/your-form-id" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="message">Message:</label> <textarea id="message" name="message" required></textarea> <button type="submit">Send</button> </form> </body> </html>
Replace
"your-form-id"with the actual form ID provided by Fabform.io.
-
In your terminal, run the Eleventy build command:
npx eleventy
-
This will generate your static site in the
_sitedirectory. -
To serve your site locally, use Eleventy’s built-in development server:
npx eleventy --serve
-
Open your browser and navigate to
http://localhost:8080. You should see your site and be able to navigate to the contact page.
-
Create a new repository on GitHub.
-
Initialize a Git repository in your project directory:
git init git add . git commit -m "Initial commit"
-
Add your GitHub repository as a remote:
git remote add origin https://github.com/your-username/your-repo-name.git
-
Push your code to GitHub:
git push -u origin master
-
Go to your repository on GitHub. Click on the "Settings" tab.
-
Scroll down to the GitHub Pages section. Under "Source", select the
masterbranch and click "Save". -
Your site will be deployed on GitHub Pages at
https://your-username.github.io/your-repo-name/.
-
Navigate to the contact page of your live site.
-
Fill out the form and submit it. Fabform.io will handle the submission, and you should receive the details in your email (or in the Fabform.io dashboard, depending on your settings).
Congratulations! You've successfully created a static website using Eleventy, deployed it on GitHub Pages, and added a functional contact form using Fabform.io. You now have a simple but powerful static site with a form that can handle submissions without requiring any backend code.
Feel free to customize your site further by exploring more of Eleventy’s features or enhancing your design with additional CSS or JavaScript.
If you encounter any issues or need further customization, refer to the following resources:
- Eleventy Documentation: https://www.11ty.dev/docs/
- Fabform.io Documentation: https://fabform.io/docs
- GitHub Pages Documentation: https://pages.github.com/