This is a static version of the WordCamp Seattle 2019 site, to make it easy to collaborate on the content and custom CSS before the site is launched. This avoids having to share database dumps, or setup a shared remote staging site.

If you're starting from scratch, the Alternative Approach described below might work better than the one described here.

Development

Setup this repo locally

1. git clone https://github.com/iandunn/wordcamp-seattle-2019.git
2. npm install
3. Send the Git repo owner your GitHub username, so they can add you to the team, allowing you to push changes
4. Install the LiveReload browser extension, so you don't have to refresh manually. Firefox, Chrome.

Development workflow

1. git pull
2. npm start: Run the linter and build the CSS file, watching scss files for changes. Also turns on the livereload server.
3. Load the index.php file in your browser, with a page param that matches the content template. e.g., index.php?page=front-page.
4. Edit the SCSS files to match the mockup.
5. npm run lint and fix any violations.
6. npm run build to get a final CSS file suitable for production.
   1. @todo this may not be needed since wordcamp-remote-css will minify, but confirm that.
7. git commit
8. git pull --rebase
9. git push

Creating/editing the static HTML files

1. Setup a fresh WP site locally
2. Delete the wp-content folder
3. Download and extract https://github.com/WordPress/wordcamp.org/archive/production.zip
4. Move the wordcamp.org wp-content folder into your local installation
5. Activate the CampSite 2017 theme and all the plugins.
6. Setup the basic content elements for the area you want to work on: menus, widgets, etc. The content inside them can be placeholders, you just need the containers to match what will eventually be on production. CampSite 2017 provides lots of widget areas that can be helpful, especially with the Custom HTML widget.
7. Open the front end of the site, view-source, and copy-paste the relevant parts into the corresponding static HTML page in template-parts/.

Production site

When you're ready to launch:

1. Turn on Coming Soon mode, so visitors don't see the site in transition
2. Switch to the CampSite 2017 theme
3. Configure Remote CSS to point to the built style.css file in the GitHub repo
4. Create nav menus, widgets, etc to match what's in the static HTML files
5. use the Additional CSS panel in the Custmoizers to quickly/easily make any tweaks that are needed
6. Setup the webhook so that pushing changes to the Git repo automatically deploy them to the production site (see Remote CSS on-screen help).
7. Move the Additional CSS tweaks to the Git repo so that everything is in one place and consistent.
8. Turn off Coming Soon mode

TODO

• Can get rid of custom .stylelintrc.json and just rely on wp coding standard plugin?
• Fix any @todo notes throughout the repo.

Alternate Approach

With this method, the production site still looks nice during development, but there's much less work transferring content between local and production.

1. Clone another WordCamp site that's using the theme you want to use.
2. Setup your header/footer/sidbar content on production.
3. View the HTML source of the homepage, and save that to a .html file in this folder.
4. Change the URL to the CSS file to be the local file here.
5. Once you've finished implementing the design locally, remove the cloned theme's custom CSS and setup this stylesheet as the Remote CSS URL.

Using this approach for other camps

This approach works well if you've already turned off Coming Soon mode, so that you can start publishing posts.

If you have time to develop on the production site instead, then that's probably easier than doing this.

For other ideas, check out the handbook.

This might not be needed in the future if some improvements are made to the Coming Soon feature.

Credits

This borrows a lot of tooling etc from wcus/wcus-2019, props @ryelle et al.