{"id":2098,"date":"2022-02-28T20:20:05","date_gmt":"2022-02-28T13:20:05","guid":{"rendered":"https:\/\/wptips.dev\/?p=2098"},"modified":"2022-10-10T09:38:32","modified_gmt":"2022-10-10T02:38:32","slug":"wordpress-workflow","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/wordpress-workflow\/","title":{"rendered":"Our WordPress Workflow with Github Action"},"content":{"rendered":"\n

Github Action is an automation tool<\/strong> to deploy your code whenever a new commit is pushed to Github.<\/p>\n\n\n\n

This article will teach you how to automatically upload the changes using FTP<\/strong>. We opted to use FTP instead of SSH because it works in all hosting.<\/p>\n\n\n\n

Let’s take a look at how we do it:<\/p>\n\n\n\n

Git Folder Structure<\/h2>\n\n\n\n

We basically committed the whole WordPress folder<\/strong> while ignoring everything except the theme and custom plugins.<\/p>\n\n\n\n

Resulting in a repository that looks like this:<\/p>\n\n\n\n

\/\n\u251c\u2500\u2500 wp-content\/\n\u2502   \u251c\u2500\u2500 themes\/\n\u2502   \u2502   \u251c\u2500\u2500 my-theme\/\n\u2502   \u251c\u2500\u2500 plugins\/\n\u2502   \u2502   \u251c\u2500\u2500 custom-plugin-if-any\/\n\u251c\u2500\u2500 .github\n\u2502   \u251c\u2500\u2500 workflow\/\n\u2502   \u2502   \u251c\u2500\u2500 deploy.yml\n\u251c\u2500\u2500 composer.json\n\u2514\u2500\u2500 .gitignore<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
composer.json<\/h3>\n\n\n\n
All the plugins that are available in wordpress.org are managed with Composer. The custom ones are committed to the git.<\/p>\n\n\n\n
If you don’t know how to use Composer for WP plugins, read the guide below:<\/p>\n\n\n\n
\n
How to Use Composer<\/strong><\/a><\/div>\n<\/div>\n\n\n\n
.gitignore<\/h3>\n\n\n\n
This will ignore all except your custom theme and custom plugins.<\/p>\n\n\n\n
You need to specify included plugins<\/strong> and excluded themes<\/strong> like shown below:<\/p>\n\n\n\n
vendor\/\nwp-admin\/\nwp-includes\/\nwp-content\/*\n\n!wp-content\/plugins\/\nwp-content\/plugins\/*\n!wp-content\/plugins\/custom-plugin-if-any\n\n!wp-content\/themes\/\nwp-content\/themes\/twentynineteen\nwp-content\/themes\/twentytwenty\nwp-content\/themes\/twentytwentyone\nwp-content\/themes\/twentytwentytwo\nwp-content\/themes\/storefront\n\n\/*.php\n\/.htaccess\n\/wp-cli.local.yml\n\/composer.lock\n\/index.php\n\nnginx.conf\n.DS_Store\nnode_modules\/\nlogs\n*.log\nnpm-debug.log*\nreadme.html\nlicense.txt<\/code><\/pre>\n\n\n\n
deploy.yml<\/h3>\n\n\n\n
This file contains the Action commands. It resides in the folder .github\/workflows\/<\/code>.<\/p>\n\n\n\n
We have prepared two variations<\/strong> depending on whether your hosting supports SFTP or not.<\/p>\n\n\n\n
For SFTP:<\/strong> (only a few hosting support this)<\/p>\n\n\n\n
name: Deploy via SFTP\non:\n  push:\n    branches:\n      - main\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions\/checkout@v1\n    - name: Deploy app\n      uses: sebastianpopp\/git-ftp-action@fix-ssl-issue\n      with:\n        url: \"sftp:\/\/myhosting.com\"\n        user: ${{ secrets.FTP_USERNAME }}\n        password: ${{ secrets.FTP_PASSWORD }}\n        options: \"--auto-init --insecure --remote-root \/home\/path\/to\/your\/folder\"<\/code><\/pre>\n\n\n\n
If you’re using an old repo, the branch name might be “master” instead of “main”. So change that in the code above.<\/p>\n\n\n\n
For FTP:<\/strong> (most hostings only support this)<\/p>\n\n\n\n
name: Deploy via FTP\non:\n  push:\n    branches:\n      - main\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions\/checkout@v1\n    - name: git-ftp push\n      uses: sebastianpopp\/git-ftp-action@releases\/v3\n      with:\n        url: \"ftp.myhosting.com\/public_html\/mysite\"\n        user: ${{ secrets.FTP_USERNAME }}\n        password: ${{ secrets.FTP_PASSWORD }}<\/code><\/pre>\n\n\n\n
Getting the correct URL<\/strong> is a bit tricky.<\/p>\n\n\n\n
It starts with the FTP base address. For example ftp.myhosting.com<\/code>. Followed by the path to the site folder.<\/p>\n\n\n\n
But the path starts from where you landed in Filezilla. So if you landed in \/www<\/code> and the path is \/www\/public_html\/mysite<\/code>, no need to include the \/www<\/code>.<\/p>\n\n\n\n
Setup the Secrets<\/h2>\n\n\n\n
This is to replace the FTP_USERNAME and FTP_PASSWORD in our command. Follow the guide below:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
  1. Go to your Github and click “Settings” tab.<\/li>
  2. Click “Secrets” in the left sidebar.<\/li>
  3. Click “New repository secret” and create two variables named FTP_USERNAME and FTP_PASSWORD. Fill the values accordingly.<\/li>
  4. Done!<\/li><\/ol>\n\n\n\n
    Test It Out<\/h2>\n\n\n\n
    Make changes in your code and commit it. Then open the “Actions” tab in Github. You should see the deployment in progress:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    The initial commit will take quite a while<\/strong> (5-10 mins) depending on the number of files. After that, it will be much faster since it only uploads the modified file.<\/p>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    We have been using this workflow since 2016 with great success. Back then we were using a similar service called Bitbucket Pipeline.<\/p>\n\n\n\n
    In short, we are using different methods for deploying different parts of WordPress:<\/p>\n\n\n\n
    1. Deploying theme – uses Github Action<\/strong>.<\/li>
    2. Deploying plugins – uses Composer <\/strong>If hosting supports SSH, otherwise use FTP manually.<\/li>
    3. Deploying database and images – use WP Sync DB<\/strong><\/a>.<\/li><\/ol>\n\n\n\n
      Although it looks confusing to use different methods, we rarely need to do #2 and #3. So we only need to focus on how to make #1 as quick and seamless as possible.<\/p>\n\n\n\n
      If you have any question, let us know in the comment below<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
      Learn how to use Github to automatically deploy your WordPress theme changes based on commit. <\/p>\n","protected":false},"author":1,"featured_media":2108,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-2098","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/2098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=2098"}],"version-history":[{"count":14,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/2098\/revisions"}],"predecessor-version":[{"id":2221,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/2098\/revisions\/2221"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/2108"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=2098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=2098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=2098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}