A kitchen studio site from scratch
Thirteen chapters about your first site: install Eile, write templates, add a kitchen catalog with prices and a measuring visit request, and finally put the site on the internet with HTTPS.
No programming experience needed. You can copy every code example whole, and below each one we go through what every line does. A test checks all the examples: it walks through the chapters in order on a real Eile.
Chapters
- 1 3 min read
What we’ll build and what you need
Over thirteen chapters we’ll build a website for Facade, a kitchen studio. It will have a kitchen catalog with prices, finished projects, a form for booking a measuring visit and its own address on the internet. You don’t need any programming experience: every step is shown and explained.
- 2 5 min read
Installing and the first run
We’ll install Eile with one command, start an empty site and sign in to the manager. It takes about ten minutes.
- 3 5 min read
Pages and the site tree
An Eile site grows like a tree: every page has a place, an address and a number. Let’s create the studio’s pages and publish them.
- 4 5 min read
Your first template
A template decides how a page looks. We’ll go through the Minimal template line by line and write our own, with a header, a title and the studio’s calm colors.
- 5 5 min read
Components: header, menu and footer
It’s handy to keep the header and the footer as separate pieces that you can plug into any template. These pieces are called components. We’ll make three: a menu, a header and a footer.
- 6 3 min read
The frame: one layout for every template
Soon there will be several templates. So that each one doesn’t repeat the header, footer and styles, we’ll gather them into a frame, and templates will put only their own part inside it.
- 7 5 min read
Fields: price, shape and photo of a kitchen
A kitchen has a price per meter, a shape and a photo. Writing them into the text is awkward: you can’t sort by price or change it in one place. For data like this, pages have fields.
- 8 8 min read
Lists: catalog, projects and the home page
Catalog will build the kitchen cards with prices on its own, Projects will show the studio’s work five to a page, and the home page will become the studio’s shop window, with kitchens and recent projects.
- 9 3 min read
Custom settings: address and phone in one place
The studio’s phone number is needed in the footer, on the contact page and next to the measuring visit form. We’ll enter it once in the settings, and templates and page texts will take it from there.
- 10 4 min read
A form: measuring visit requests
A visitor leaves their name, phone number, address and a convenient date, and the request arrives in the manager and in Telegram. We’ll build the form without writing any code and put it on the contact page.
- 11 6 min read
Live parts: “showroom open” and a kitchen calculator
Eile builds a page once and then serves it from memory instantly. Some things have to change, though: whether the showroom is open right now, or what a 3.4-meter kitchen will cost. That’s what uncached regions and islands are for.
- 12 7 min read
The site on the internet: server, domain and HTTPS
So far the site lives on your computer. Let’s move it to a server, connect a domain and turn on HTTPS. You’ll need a Linux server and a domain, and Eile does the rest by itself.
- 13 2 min read
What’s next
The studio’s site is up and running. Here’s what else Eile can do and where to look when you want more.