Wordpress Starter Kit - Docker edition!

A starter kit for WordPress projects

Kit Contents

• Docker
  • With MailHog
• WordPress
• Themes
  • JuicyStrap - A barebones WordPress starter theme
    • NO LONGER includes Bootstrap!
      • Bootstrap was great for providing a good grid system supported by all browsers, but the web has come a long way and it's now dead simple to build your own grid system. Bootstrap tended to add a lot of bloat through components and utilities which often went unused. It's time to say goodbye and get familiar with CSS Grid and Flex instead!
    • Includes:
      • Font Awesome Pro 6
      • Laravel Mix for asset compilation
      • Babel for ESNext transpilation
      • Prettier for code style consistency
      • Stylelint for stylesheet code quality
      • ESLint for JS code quality
      • EditorConfig for code style consistency
  • A WordPress default theme (useful as a fallback for debugging)
• Plugins
  • Advanced Custom Fields Pro
  • WP Media Offload Lite
  • Disable Embeds
  • EWWW Image Optimiser
  • Gravity Forms
  • WordFence
  • Yoast SEO
  • WP Mail SMTP
  • WP Super Cache

Getting Started

1. Create a new GitLab Project if one does not already exist.
2. Download an archive of this repository. Unzip it and rename it to the project name.
3. Initialise your repo

   git init
   git checkout -b main
   git remote add origin git@gitlab.com:juicy-media-ltd/<PROJECT_SLUG>.git

4. In .docker/.env.example, change the value of the PHP_IDE_CONFIG server name to the name of the project.
5. Duplicate .env.example, renaming it to .env.
6. It's probably a good idea to change the ports this project is bound to, so that they don't clash with other projects you may have running. Change these in docker-compose.yml if required and update this README accordingly.
7. Open the Dockerfile, set the base image (FROM wordpress:php...) to the latest version of WordPress and PHP supported by the WordPress Docker image.
8. Open a terminal at the project root, run docker-compose build then docker-compose up.
9. Rename the juicystrap folder in wordpress/wp-content/themes/wp-content/themes to the theme name.
10. Run and a find and replace on the theme folder, replacing juicystrap with your theme name.
11. Update the theme information in wordpress/wp-content/themes/<THEME_NAME>/style.css.
12. Open a terminal at wordpress/wp-content/themes/<THEME_NAME>, run npm install then npm run dev.
13. Head to http://localhost:32080 in your browser, you should see the setup page.
14. Set up the WordPress site:
    • Step 1:
      • Site title: <PROJECT_NAME>
      • Username: juicyadmin
      • Password: <RANDOM_STRONG_PASSWORD>
      • Email: admin@juicymedia.co.uk

• Save these credentials to the Juicy Logins 1Password Vault

Finally

1. Log into the admin panel, check everything more or less works.
2. Activate the theme.
3. Update Plugins.
4. Activate and set up the plugins as much as possible. You can skip enabling plugins that aren't needed during development (e.g. WordFence, WP Super Cache). Remove any that may not be applicable to the project.
   • WP Mail SMTP is set up via wp-config.php and .docker/.env to send mail on local development to MailHog. Access MailHog at http://localhost:32082.
5. At the root of the project, run docker-compose exec db /usr/bin/mysqldump -u root --password=wordpress wordpress > .docker/db-entrypoint/wordpress.sql . This will dump the DB so it can be committed to git and used as a starting point for developers on this project. It's worth regularly updating this file as the project develops.
6. Rename .gitlab-ci.yml.sample to .gitlab-ci.yml, configure the file with the theme name and add or remove any relevant jobs
7. Edit this README.md:
   • Remove these instructions
   • Uncomment the block below
   • Fill the <PLACEHOLDERS>
   • READ and review it - it has useful information that you should be aware of, and you may need to tweak or remove information that might not be applicable to your project.
8. Commit your project and push
9. Open up your project on GitLab
10. In Deployments > Environment, add two new environments, one called production and the other stage.
11. In Settings > Repository, under Protected Tags add v* and only allow Maintainers to create it.
12. In Settings > CI/CD > Variables, add the following:
    • AWS_DEFAULT_REGION: eu-west-2
    • ROLE_ARN: arn:aws:iam::948445212038:role/GitLab-OIDC
    • IMAGE_NAME: wordpress
    • Once they've been set up in AWS, for each environment add:
      • ECS_CLUSTER: The name of the ECS cluster in AWS
      • ECS_SERVICE: The name of the ECS service in AWS (probably the same as the cluster name)

git add .
git commit -m "Initial commit"
git push -u origin main