Configure Trellis w/ Static Site FE (Gatsby)

I’m converting my site’s front-end from a WordPress-generated site to a static front-end. Because I’ve got my WP sites on Trellis already, I’d like to leverage Trellis to serve the generated static site. Conceptually, what I think I need to do is update the deployment script to copy the static site into the correct location on the box, then update nginx config to serve from there except /wp/wp-admin/ & /wp-json/.

Could anyone provide any tips / suggestions for doing this? I’d like to avoid modifying the roles as much as possible, so if this is doable via variables, that would be ideal.

1 Like

Managed to get it working. These were the 3 pieces of configuration I added to Trellis. Would be interested in anyone has any improvements.


diff --git a/deploy-hooks/build-before.yml b/deploy-hooks/build-before.yml
--- a/deploy-hooks/build-before.yml
+++ b/deploy-hooks/build-before.yml
+- name: Install npm dependencies
+  command: npm ci
+  connection: local
+  args:
+    chdir: "~/path/to/gatsby"
+
+- name: Compile assets for production
+  command: npm run build
+  connection: local
+  args:
+    chdir: "~/path/to/gatsby"
+
+- name: Copy production assets
+  synchronize:
+    src: "~/path/to/gatsby/public"
+    dest: "{{ deploy_helper.new_release_path }}"
+    group: no
+    owner: no
+    rsync_opts: --chmod=Du=rwx,--chmod=Dg=rx,--chmod=Do=rx,--chmod=Fu=rw,--chmod=Fg=r,--chmod=Fo=r
diff --git a/group_vars/development/wordpress_sites.yml b/group_vars/development/wordpress_sites.yml
--- a/group_vars/development/wordpress_sites.yml
+++ b/group_vars/development/wordpress_sites.yml
@@ -8,6 +8,7 @@ wordpress_sites:
       - canonical: domain.test
     local_path: ../site # path targeting local Bedrock site directory (relative to Ansible root)
     admin_email: admin@domain.test
+    nginx_wordpress_site_conf: templates/domain.com.conf.j2
     multisite:
       enabled: false
     ssl:
diff --git a/group_vars/production/wordpress_sites.yml b/group_vars/production/wordpress_sites.yml
index 48b69b9..99d775f 100644
--- a/group_vars/production/wordpress_sites.yml
+++ b/group_vars/production/wordpress_sites.yml
@@ -9,6 +9,7 @@ wordpress_sites:
     local_path: ../site # path targeting local Bedrock site directory (relative to Ansible root)
     repo: git@bitbucket.org:repo/domain.git # replace with your Git repo URL
     branch: master
+    nginx_wordpress_site_conf: templates/domain.com.conf.j2
     multisite:
       enabled: false
     ssl:
diff --git a/templates/domain.com.conf.j2 b/templates/domain.com.conf.j2
+++ b/templates/domain.com.conf.j2
+{% extends 'roles/wordpress-setup/templates/wordpress-site.conf.j2' %}
+
+{% block location_primary -%}
+location /wp-json {
+    try_files $uri $uri/ /index.php?$args;
+  }
+  location /wp/ {
+    try_files $uri $uri/ /wp/wp-admin/;
+  }
+  location / {
+    root       {{ www_root }}/{{ item.key }}/{{ item.value.current_path | default('current') }}/public;
+    error_page 404 /404.html;
+  }
+{% endblock %}
5 Likes

I kept seeing Gatsby being mentioned but I thought it was something like Hugo and certainly didn’t think it was possible to integrate it with WordPress. I started reading today and my mind is blown - an actual setup to turn WordPress sites into PWAs! I love optimizing for performance, what an exciting time! :slight_smile:

@mAAdhaTTah thanks for sharing this. It would be awesome if you could share some other more important steps from your Sage/Bedrock setup. Or just links to the resources you used when creating your setup.

I’ve still got a couple of things to work out. I think the last remaining issue is I need to disable nginx’s microcaching, as I’m finding coming back to the site and the latest isn’t showing until I refresh and I think that’s cause. I also ended up splitting off the above hooks into a separate role, which I also need to update properly with variables and such. Then I broke that out into its own playbook so I could deploy the static site separately from the main WordPress site. Then, after all that, I configured my home desktop machine to deploy the static site automatically every hour.

I’ll write all this up into a blog post with everything once it’s settled down.

1 Like

My initial nginx config overlooked the /app directory. Parts of the admin dashboard didn’t work because plugins were unable to load their assets. I’ve updated it as follows:

{% extends 'roles/wordpress-setup/templates/wordpress-site.conf.j2' %}

{% block location_primary -%}
location /wp-json {
    try_files $uri $uri/ /index.php?$args;
  }
  location /wp/ {
    try_files $uri $uri/ /wp/wp-admin/;
  }
  location /app/ {
    try_files $uri =404;
  }
  location / {
    root       {{ www_root }}/{{ item.key }}/{{ item.value.current_path | default('current') }}/public;
    error_page 404 /404.html;
  }
{% endblock %}

However, this does mean if you have any Gatsby paths that start with /app/, they won’t get served. I’m not sure this is a big deal, but it might be nice to have a fallback of some kind, attempting to serve from the Gatsby directory if it’s not found in the WP app directory. I don’t know how much of an issue that is (can’t imagine a lot of Gatsby sites have an /app path), but worth keeping in mind.

1 Like

Did you ever write this up in a blog post? I would love to run Trellis/Bedrock/Sage/Gatsby.

No, sorry. I have long since abandoned Gatsby for Next.js cuz Gatsby builds took forever regularly and who has that kind of time.