Foldocs

Put it online

2026-10-23T11:39:46+02:00

If someone you know looks after a website or a server, send them this page. The steps below take about fifteen minutes.

Share a folder in Google Drive with anyone with the link.
In the Google Cloud console, create a project, enable the Google Drive API and create an API key for it. No billing needed.
Get the code from GitHub, and copy .env.example to .env: fill in the folder's link, the key, your site's address and your name.
Run docker compose up -d. One container keeps the site in step with the folder, the other serves it, behind the web server you already have.

The README has the details: Nextcloud, themes, variants, and running it without Docker.

Photos and images

2026-10-23T11:33:13+02:00

A photo in a folder becomes a photo page: titled by its file name, dated by when it was taken, and captioned by its description in Drive. See Photo pages. Photos from an iPhone (HEIC) work as they are, as do JPEG, PNG, WebP and GIF.

Names, dates and captions

The file	On the site
`Black sand.jpg`	Titled Black sand, dated by the camera
`IMG_4012.jpg`	No title (a camera's name means nothing); dated by the camera
`1968-12-24 Earthrise.jpg`	Titled Earthrise, dated 24 December 1968
A description in Drive	The caption under the photo

Five sizes

Every image, in a photo or a document, is saved in five widths as WebP. A phone downloads a small one and a large screen a sharper one. A page is about 100 kilobytes before its images.

Photos and drawings

Photos are cropped to fill their frames; drawings and diagrams are shown whole. Compare the cards in Photo pages with those in Examples.

Search and sharing

2026-10-23T11:33:12+02:00

Search engines

Every page has a title (Themes · Foldocs), a description from its subtitle or first lines, and an address of its own (/guide/going-further/colors-and-fonts/). A sitemap lists every page with the day it last changed, so search engines know what is new.

Pages also describe themselves in structured data: who the site is by, which page is a post and when it was published, and the breadcrumbs to each. Search engines use it for richer results.

Link previews

A link pasted into a chat or a post shows a preview with the page's title, description and image: its first picture, or the theme's share image.

Feed

The newest pages are in a feed. A feed reader given the site's address picks up new documents from it.

Accessibility and size

Meets WCAG 2.2 AA: contrast, headings, landmarks, a skip link, visible focus and alt text
Designed for phones first, with a dark mode that follows the device
About 100 kilobytes a page, with images sized for the screen

Drafts

While a site is a draft, one setting (NOINDEX) asks search engines not to index any of its pages.

Themes

2026-10-23T11:33:11+02:00

The bundled themes

Foldocs comes with three themes. All three are running on this site's folder:

Theme	Presents the folder as	See it
Default	A personal site: a headline, then a row per section	foldocs.com
Journal	A blog: one column, newest first	journal.foldocs.com
Index	The folder tree itself	index.foldocs.com

The second and third are variants: the same content, built in another theme at the same time, each at its own address. A banner says what they are, and they ask search engines not to index them, so they don't compete with the main site. Variants are useful for choosing a design with your own content in it.

Your own theme

A theme can extend another and change only what differs: a short settings file and a few lines of CSS, or templates of your own for any part of a page.

A logo: put logo.svg (and logo-dark.svg) in the theme, and it replaces the name in the header, as on this site
Icons: favicon.svg for the browser tab, apple-touch-icon.png for phone home screens
A share image: share.png, 1200 by 630, shown when someone shares a page without a picture
A verification tag: _head.html goes into every page's head
Another language: every word the templates use, from See all to the month names, is set in the theme

The README explains how. foldocs check-theme checks a theme's contrast in light and dark mode against WCAG AA.

Colors and fonts

2026-10-23T11:33:11+02:00

Put a document called design next to your folders, with a table in it, and fill in the settings you want to change. This site's blue is set this way. An empty cell keeps the theme's value.

Setting	Light	Dark	What it changes
Accent	#1f63d6	#6ea2ff	Links, buttons, numbers, the marks that stand out
Background			The page; panels, bands and borders follow
Text			The text; secondary text follows
Heading font			Titles and headings
Body font			Running text
UI font			Menus, labels, dates
Corners			Rounding of images, cards and buttons

Colors

Any color, as a hex code like #1f63d6. The Dark column is for visitors whose device is in dark mode; leave it empty, and the theme's dark colors stay. Choose a background and a text color, and the softer shades for panels, borders and secondary text follow from them.

Fonts

Any family on Google Fonts: type its name, or paste the link to its page. Foldocs downloads the font once and serves it from your site, so visitors' browsers don't contact Google. End the list with serif, sans-serif or monospace to set what shows while the font loads.

Three examples

	Editorial	Technical	Warm
Accent	#9b2c2c	#0f766e	#c2410c
Background	#fbf8f3	#f8fafc	#fff7ed
Heading font	Fraunces, serif	Space Grotesk	DM Serif Display, serif
Body font	Lora, serif	Inter	Nunito
Corners	0	4px	16px

Editorial: Fraunces and Lora on warm paper, a deep red, square corners.

Technical: Space Grotesk and Inter on cool white, teal, slightly rounded.

Warm: DM Serif Display and Nunito on cream, burnt orange, soft round corners.

Copy a column into your design document (the Light cells), and the site changes a few minutes later. Every value is checked first; an invalid one is skipped, and the theme's value stays.

And themes

The same settings work in every theme, so changing theme keeps your colors and fonts. A theme of your own can change anything else.

How it works

2026-10-23T11:33:11+02:00

Folder: Google Docs, Word files, photos and folders.
Sync: once a minute, Foldocs lists the folder's names, dates and descriptions. Only files that changed are downloaded.
Cache: a changed document is exported as HTML and rebuilt from a short list of allowed elements; its images are made in five sizes.
Build: the whole site is written as plain files, with a feed and a sitemap. Only what changed is rewritten.
Site: any web server can serve it; Foldocs includes a small one in a container.

There is no database: the folder is the source, and the site is a copy of it.

To run it yourself, see Put it online. The code is open source.

Documents become pages

2026-10-23T11:33:11+02:00

The paragraph styled Title is the page's title, the one styled Subtitle its summary, like the line above. Without a Title, the document's name is the title. Everything else comes along as it is. Open this page's document with the link next to its title, and compare.

Text

Bold, italic, code and links. Text in a monospace font, such as Courier New or Roboto Mono, becomes code, for a file name like intro.docx or a setting like FOLDER_URL. Links to web pages, email and phone numbers work; anything else is left out. A heading is a heading on the page, with an anchor of its own to link to. To link to another page of your site, paste its full address: it becomes a link within the site.

Lists

Bulleted lists
Numbered lists
- and lists in lists
  - as deep as you need

First
Second
Third

Quotes

Docs has no quote style, so an indented paragraph becomes a quote:

Simplicity is prerequisite for reliability. — Edsger W. Dijkstra

Tables

In the folder	On the site
A folder	A section, or a subsection
A document	A page
A photo	A photo page
A number in front of a name	Its place in the order
A date in front of a name	Its date

Images

An image as wide as the page in the document is as wide as the text on the site:

An image you made smaller keeps that share of the width:

The first image in a document is also its picture on cards and in link previews.

What stays behind

Comments, suggestions, version history and the document's own fonts and colors stay in the document. Foldocs rebuilds every page from a short list of allowed elements, so the site looks consistent however a document was styled.

Folders become sections

2026-10-23T11:33:11+02:00

Every folder in the shared folder is a section: a row on the home page, a page of its own and an item in the menu. This site has five: Get started, Examples, Guide, Updates and Photo pages. The Guide has two folders inside it, Basics and Going further: they are the two links under its title.

The rules

You do	The site does
Add a folder at the top	A new row, page and menu item
Put a folder in a folder	A subsection, at /work/clients/, as deep as you like; the menu lists it under its section
Start a name with a number, `1 Work`	Sets the order; the number isn't shown
Add a document called `intro`	Opens the section's page, see below
Rename a folder	Renames the menu item and the address
Delete a folder	Removes its pages, a minute later

Order and dates

The name	The page
`Why I sketch`	Dated by when it went into the folder
`2024-05-01 Why I sketch`	Dated 1 May 2024, titled Why I sketch
`01 Start here`	First in a numbered folder; the number isn't shown

A section shows its newest files first, unless every file in it is numbered: then it keeps that order, like this Guide. Number all of them, or none. A date in front of a name places a piece back in time, which is useful when moving older writing: 1968-12-24 Earthrise in Photo pages is dated Christmas Eve 1968.

`intro`: what opens a page

Every folder is a page: the shared folder is the home page, and each folder in it, however deep, a page of its own. A document called intro is never a page itself: it opens the page of the folder it's in. Every intro is optional. Name it in lowercase (Foldocs ignores case, but it stands out that way among your pages).

Where the `intro` is	Title	Subtitle	The rest
Next to your folders: the home page	The headline	The label above it	The first paragraph under it; a list becomes the topics; links to your email and profiles go in every page's footer
In a section's folder: the section's page	The section's name, instead of the folder's	The line under its name, on its page and in its row on the home page; also its description for search engines	Text and images above its pages; the first image is its picture in link previews

Your contact links go in the home page's intro, anywhere, as links: your email and your profiles. They show at the bottom of every page, the email as a button and the profiles as their logos: LinkedIn, Bluesky, X, Instagram, Threads, Facebook, Mastodon, GitHub, YouTube, Behance, Dribbble, Substack, ORCID and more. No email link, no button.

A section's address still comes from its folder's name, so a new title breaks no links. A subsection can have an intro too. Every section on this site has one: the lines under the titles on the home page come from them.

Files next to the folders

Documents and a photo in the shared folder itself, next to the section folders, belong to the site as a whole. Every document there is a page in the menu, after the sections, like About and Contact on this site. Two names aren't pages: intro and design.

Next to the folders	Becomes
`intro`	Not a page: the home page's opening. Its links to your email and profiles go in the footer
`design`	Not a page: your colors and fonts, see Colors and fonts
Any other document	A page in the menu, at an address from its name: `About` is at /about/
A number in front, `1 About`	Sets the order in the menu; the number isn't shown
A photo	The portrait on the home page; the newest, if there are more

Share a folder

2026-10-23T11:33:11+02:00

In Google Drive

Make a folder for your site, say My site.
Right-click it, choose Share, and under General access pick Anyone with the link, as Viewer.
Copy the link. Foldocs uses it to find the folder.
Create a free Google API key for the Drive API (the README has the three commands). The key identifies Foldocs to Google; it gives no access to anything.

Google Docs and Word files both work; a Word file stays a Word file, or Drive converts it on upload.

In Nextcloud

Create a read-only share link for the folder, with a password if you want one, and give Foldocs the link. No account or key is needed. Pages are Word files (.docx), so set Collabora or OnlyOffice to save in that format. A share has no file descriptions, so photos have no captions.

What public means

Everything in the folder is published. That is the one rule to remember.

Do	Don't
Keep drafts in another folder until they're ready	Park a draft in the site's folder
Empty the trash of anything that never belonged	Trust the trash to hide things
Share the folder as Viewer	Give the link edit rights

A folder shared by link isn't listed anywhere: search engines don't index it, and its address can't be guessed. The site doesn't link back to it unless its theme does, as this one does. Image addresses don't contain file IDs.

Check it

Open the link in a private window: what you see there is what Foldocs sees. If you unshare the folder, the site stays as it was until you share it again; Foldocs doesn't empty a site because it can't read the folder.

Your first site

2026-10-23T11:33:10+02:00

In Google Drive, make a folder and share it: Anyone with the link, as Viewer. In Nextcloud, make a read-only share link. Copy the link; it is the one setting Foldocs needs. See Share a folder.

2. Add a document called `intro`

In the folder, make a document called intro, in lowercase. It is not a page of its own but the top of your home page. Write it with the paragraph styles from the style menu (Normal text in Google Docs, the Styles gallery in Word):

In `intro`	On the home page
A line in the Title style	The big headline
A line in the Subtitle style	The small label above it
A paragraph of normal text	The introduction
A heading and a bulleted list (optional)	Numbered topics, named by the heading
Links to your email and profiles (optional)	The footer: an email button and your profiles

Optional, next to intro: a photo, which becomes the portrait beside the headline, and documents such as About and Contact, which become pages in the menu. See Folders become sections for all of them.

3. Add a folder per section

Next to intro, add a folder for each part of your site: 1 Work, 2 Writing. Each is a row on the home page, a page of its own and an item in the menu. The number sets the order and isn't shown.

A section can have an intro of its own, too: it opens the section's page the way the first one opens the home page. Its Title renames the section, its Subtitle is the line under it, and the rest comes before the section's pages. Every intro is optional.

4. Add documents: one per page

Every document in a section folder is a page. Its Title line is the page's title, its Subtitle line the summary on its card, and the rest is the page: headings, lists, links, tables. See Documents become pages.

5. Add images, in two ways

Where	What it becomes
In a document: Insert → Image	Part of that page, as wide as you made it; the first one is also its card's picture
As a file in a section folder	A photo page of its own, dated by the camera, in the section's row
As a file in the shared folder	The portrait on the home page

The result

📁 My site
- 📄 intro: the home page's opening, not a page
- 📄 About: optional
- 🖼️ me.jpg: optional, the portrait
- 📁 1 Work
  - 📄 intro: optional, opens the section's page
  - 📄 A first project: a page, with images inside
  - 🖼️ Studio.jpg: a photo page

That is the whole site. Once it is online, it follows the folder: a change appears about five minutes after you last edited the file. Everything in the folder is published, so keep drafts elsewhere. Next: Put it online.

Start here

2026-10-23T11:33:09+02:00

Foldocs is short for folder of documents. You share a folder in Google Drive or Nextcloud, and every folder in it works the same way:

A document called intro opens the folder's page. In the shared folder, that is your home page: its headline and introduction. In a folder in it, that section's page.
Every other document adds a page. Next to your folders, a page in the menu, like About or Contact. In a folder, one of its pages: a post, a project, a note.
Every folder adds a section, with a page of its own. A folder in a folder is a subsection, and works the same way again.
A photo next to your folders is your portrait; in a folder, a page of its own.

One more name: a document called design, next to your folders, sets the site's colors and fonts. Neither intro nor design is a page itself.

This site is a folder

Everything on foldocs.com is a file in one public Google Drive folder. Foldocs checks the folder every minute and rebuilds what changed. Below, on the left, a Google Doc from that folder; on the right, the page made from it.

How a change reaches the site

Google Docs saves while you type, so Foldocs waits until a file has been left alone for five minutes, and an edit in progress isn't published. It then fetches the file, converts it and rebuilds the pages it affects.

The basics

Share a folder: setting up the folder, and what public means
Folders become sections: structure, order and the home page
Documents become pages: what a page can contain
Photos and images: photo pages and image sizes

Going further

Colors and fonts: set in a table in a document
Themes: other layouts for the same folder
Search and sharing: search engines, link previews and the feed
How it works: from a change in the folder to the page on the site

Making a site

Make a folder and share it with a link. Put a document called intro in it, and a folder with a document in it. Your first site goes through it step by step.

A research group

2026-10-23T11:33:08+02:00

A research group already shares a drive: proposals, papers, notes from meetings. Its website is often harder to update, because it lives elsewhere, behind someone else's login. With Foldocs, the website is one more shared folder.

The folder

📁 Language Lab
- 📄 intro
- 📄 Join us
- 🖼️ The group.jpg
- 📁 1 Research
  - 📁 Speech in noise
    - 📄 01 The question
    - 📄 02 Methods
    - 🖼️ Setup.jpg
  - 📁 Children's reading
    - 📄 01 Overview
- 📁 2 People
  - 📄 01 Ada Lindqvist
  - 📄 02 Omar Haddad
  - 📄 03 Yuki Tanaka
- 📁 3 News
  - 📄 2026-09-30 New grant for the reading study
  - 📁 papers
  - 📁 talks

On the site

Three rows on the home page: Research, with a subsection per project; People, in the order of their numbers, each with their photo on their card; and News, newest first, filterable by papers and talks. Join us sits next to the folders, so it is a page in the menu, after the sections. See Folders become sections.

Working together

Drive decides who may write: give the group edit rights, and everyone keeps their own page up to date, with comments and suggestions as usual. The public only gets the link to view, which is all Foldocs needs. No one needs an account on the website itself.

Good to know

An intro in each project's folder opens its page: one line under its name, then what it's about
Papers as Docs get their own pages; a PDF in the folder is left out, so link to it instead
Search engines see who the site is by and when each post was published: see Search and sharing

A handbook

2026-10-23T11:33:08+02:00

A team's handbook is written in documents anyway: how we work, how to set things up, who to ask. Publishing it usually means copying it elsewhere, where it gets out of date. With Foldocs, the documents are the handbook and the site is a way to read it.

The folder

📁 Handbook
- 📄 intro
- 📄 Contact
- 📁 1 Getting started
  - 📄 01 Your first day
  - 📄 02 Accounts and tools
  - 📄 03 Who's who
- 📁 2 How we work
  - 📄 01 Meetings
  - 📄 02 Writing things down
  - 📁 Releases
    - 📄 01 Checklist
- 📁 3 Reference
  - 📁 Glossary
  - 📁 Templates

On the site

Numbered chapters in numbered folders keep their order everywhere. Headings in a document become anchors to link to, so see Releases, step 3 can be a link. Shown as a folder tree, the whole handbook reads like a table of contents, every page one click away.

Reviewing

Changes are suggested and discussed in the documents, with comments, before anyone accepts them. Comments and suggestions never reach the site; the accepted text does, five minutes after the last edit. See Start here.

A travel journal

2026-10-23T11:33:08+02:00

On a trip, a phone with the Drive app is enough: photos go into a folder, a sentence or two into a document, and people at home can follow along.

The folder

📁 Away
- 📄 intro
- 📄 About us
- 📁 1 Iceland 2026
  - 📄 2026-06-02 Day 1: Reykjavík
  - 📄 2026-06-03 Day 2: The south coast
  - 🖼️ IMG_4012.jpg
  - 🖼️ Black sand.jpg
  - 🖼️ Skógafoss.jpg
- 📁 2 Japan 2027
  - 📄 Plans

On the site

A row per trip, newest first. Every photo gets its own page, dated by when it was taken, not when it was uploaded, so a batch sent home on the last day still lands on the right days. A photo's description in Drive is its caption; IMG_4012 gets no title, since a camera's name for it means nothing to a reader. See Photos and images.

The same journal reads well as a blog: one column, newest first, every trip mixed in by date.

Good to know

Photos are saved in five sizes, so pages load quickly on phones
The camera's location stays out of the site's images; the originals stay in Drive
Upload when there is a connection; the site updates a few minutes later

A personal site

2026-10-23T11:33:08+02:00

Say you're Jan, a designer who works freelance. You want a home page that says what you do, a portfolio in an order you choose, and somewhere to write now and then. Here is the whole site, as a folder:

The folder

📁 Jan's site
- 📄 intro
- 📄 About
- 📄 Contact
- 📄 design
- 🖼️ Jan.jpg
- 📁 1 Work
  - 📄 01 A museum's new identity
  - 📄 02 An annual report
  - 📄 03 Signs for a park
- 📁 2 Writing
  - 📄 2026-03-14 On choosing typefaces
  - 📄 Why I sketch on paper first
  - 📁 talks

On the site

The home page opens with the headline and first paragraph from intro, the list in it as Jan's topics, and the photo beside them. Below come two rows: Work, in the order of its numbers, and Writing, newest first, with talks as a subsection. The menu reads Work, Writing, then About and Contact: the documents next to the folders.

Each project is a document with photos in it: the first one is its card's image. The post about typefaces is dated by its name, so it sits where it belongs in time, not where it was uploaded. See Folders become sections.

Day to day

A new project: a new document in 1 Work, numbered where it should go
A new post: a document in 2 Writing; it goes live five minutes after the last edit
A different color or font: a row in design

Good to know

Number every project, or none: a folder whose files are all numbered keeps their order, any other sorts by date. Keep drafts in another folder: everything in this one is public.

Foldocs 0.1

2026-10-22T12:00:00+02:00

Foldocs publishes a shared folder of documents as a website. You write in Google Docs or Word and share the folder with a link; a few minutes after each change, the site is updated. Documents become pages, folders sections, and photos photo pages.

This site is made with it. Every page here is a document in one Google Drive folder, which you can see beside the site, and every page links to its document. The same folder is also built as a blog and as a folder tree.

Why

People rarely write in the place where their website lives. Foldocs builds the website from the place where they write, without an editor or database of its own.

Where to start

Your first site takes you from an empty folder to a site
The Examples show four sites, folder by folder
The Guide shows everything Foldocs does, one page at a time

Feedback

Foldocs is in beta. Problems and suggestions are welcome as issues on GitHub.

Nextcloud

2026-10-21T12:00:00+02:00

Not everyone keeps their documents with Google. Nextcloud runs on servers its users choose: at home, at their organization, at a provider they trust. Foldocs reads a Nextcloud folder just as it reads a Drive folder, through nothing but its share link.

Setting it up

In Nextcloud, share the folder with a share link, read only. A password is fine.
Give Foldocs the link (and the password) instead of a Drive folder and key. No account or key is needed.

What's different

Nextcloud keeps documents as files, so pages there are Word files (.docx); set your office app to save as Word rather than OpenDocument. A share has no descriptions, so photos get no captions. Everything else works the same: sections, subsections, dates, numbers, photos, themes and the design document.

A design in a document

2026-10-20T12:00:00+02:00

A theme decides how a site looks, but changing a color shouldn't take a theme of your own: a document called design next to your folders does it, with a table in it.

Setting	Light	Dark
Accent	#1f63d6	#6ea2ff
Heading font	Fraunces, serif
Corners	6px

A row per setting; the Dark column is for visitors in dark mode. Fonts are any family on Google Fonts, downloaded once and served from your own site, so visitors' browsers never ask Google. Every value is checked before it reaches the site: one that isn't valid is left out, and the theme's own value stays.

This site's blue is set in its design document; the table above is an example. All settings are in Colors and fonts.

One folder, three designs

2026-10-19T12:00:00+02:00

Choosing a design is easier when you can see your own content in it. A variant is the same site, built from the same folder at the same moment, in another theme, at its own address: foldocs.com is also journal.foldocs.com, a blog, and index.foldocs.com, the folder tree.

A banner on a variant says what it is and links back. Variants share the original's photos, and ask search engines not to index them. A theme gets them by having a variants folder: see Themes.

Earthset from Orion

2026-04-06T12:00:00+02:00

Foldocs

Put it online

Photos and images

Names, dates and captions

Five sizes

Photos and drawings

Search and sharing

Search engines

Link previews

Feed

Accessibility and size

Drafts

Themes

The bundled themes

Your own theme

Colors and fonts

Colors

Fonts

Three examples

And themes

How it works

Documents become pages

Text

Lists

Quotes

Tables

Images

What stays behind

Folders become sections

The rules

Order and dates

intro: what opens a page

Files next to the folders

Share a folder

In Google Drive

In Nextcloud

What public means

Check it

Your first site

1. Share an empty folder

2. Add a document called intro

3. Add a folder per section

4. Add documents: one per page

5. Add images, in two ways

The result

Start here

This site is a folder

How a change reaches the site

The basics

Going further

Making a site

A research group

The folder

On the site

Working together

Good to know

A handbook

The folder

On the site

Reviewing

A travel journal

The folder

On the site

Good to know

A personal site

The folder

On the site

Day to day

Good to know

Foldocs 0.1

Why

Where to start

Feedback

Nextcloud

Setting it up

What's different

A design in a document

One folder, three designs

Earthset from Orion

`intro`: what opens a page

2. Add a document called `intro`