This is the source code for the website of thephp.foundation. It is built using the PHP static-site generator Sculpin, and uses Tailwind CSS for design and layout.
To submit a blog post, create a pull request, adding a new file under source/_posts/
in the format {4-digit Year}-{2-digit Month}-{2-digit Day}-{dash-separated title}.md
.
All posts are written using Markdown with frontmatter YAML, and should have the following general format:
---
title: Title for the post
layout: post
tags:
- update
author:
name: Your name
url: A URL with information on you
---
Markdown content starts here
The site
To develop the website, you will need:
- PHP 8.0 or later
- Composer
- Node 14 or 16 with NPM
Install PHP dependencies using Composer:
$ composer install
Install CSS dependencies using NPM:
$ npm install
The site CSS is intentionally omitted from the source tree, as it is built using Tailwind from HTML classes. As such, you will need to build the CSS before initial testing:
$ npx tailwind -i assets/css/app.css -o source/assets/css/app.css
You can start the Sculpin development server using the following within a terminal:
$ ./vendor/bin/sculpin generate --watch --server
This will launch the server at https://localhost:8000
As you make content changes and save them, the server will regenerate pages automatically, allowing you to preview in your browser.
When done, press Ctrl-C
.
If you are making any design changes, including adding HTML class attributes, you should run the Tailwind watcher; this ensures a page refresh will pick up any CSS changes. Invoke the watcher in a terminal as follows:
$ npx tailwind -i assets/css/app.css -o source/assets/css/app.css --watch
When done, press Ctrl-C
.
The primary CSS file is kept in assets/css/app.css
, and contains a number of overrides for common HTML tags; this is done so that rendered Markdown can remain styled.
All other styles are derived from CSS classes; see the Tailwind CSS documentation for details on what classes you can compose to achieve different design goals.
This site has two Sculpin content types:
- pages (under
source/_pages/
) - posts (under
source/_posts/
)
Pages are one-off pages with a static permalink.
Posts are blog posts, and will show up on the /blog
page as well as in the site feed.
The site defines two top-level pages:
index.html
: The site landing page.blog.html
: The blog landing page.
The deployment workflow auto-deploys to gh-pages on a push to the main branch.