¶ 1. Introduction
This page is a work in progress, tests needed. Silex is free/libre software which means you need to contribute.
This tutorial is very long but it should work fine if you follow each step. If you would like us to develop a WordPress plugin that makes it a little easier, you can vote for this feature here
You may want to check this video too, it is an other attempt to document the WordPress integration
By the end of this tutorial, you will have a WordPress backend to edit your website. The frontend will be designed with Silex drag and drop interface and it will be hosted on GitLab pages for free.
Requirements: you need **a regular WordPress website. Local WordPress (development) will not work because Silex and GitLab will not be able to access it.
This guide includes all the setup necessary to make your WordPress ready for Silex. We will install a number of plugins such as SCF (ex-ACF)
Feel free to ask in the chat or forums if you need explanations about why this step or that action
¶ 2. Click "Add New Plugin"
Let's start from your WordPress admin, click on "add new plugin" from the "plugin" tab.
¶ 3. Fill "Secure Custom Fields"
Fill "Secure Custom Fields."
¶ 4. Click "Install Now"
Initiate the installation process.
¶ 5. Click "Activate"
Activate the plugin.
¶ 6. Click "Add New Plugin"
Let's add another plugin.
¶ 7. Fill "WPGraphQL"
Enter "WPGraphQL" in the search field.
¶ 8. Click "Install Now"
Initiate the installation process.
¶ 9. Click "Activate"
Activate the plugin.
¶ 10. Click "Add New Plugin"
Add a new plugin.
¶ 11. Fill "WPGraphQL ACF"
Fill in the search box with "WPGraphQL ACF."
¶ 12. Click "Install Now"
Initiate the installation process.
¶ 13. Click "Activate"
Activate the plugin.
¶ 14. Click "Settings"
Access the settings.
¶ 15. Copy the value of "The endpoint" for the GraphQL
Set the GraphQL API endpoint.
¶ 16. Enable Public Introspection
Select "Enable Public Introspection."
¶ 17. Click "Save Changes"
Save the changes made.
¶ 18. Switch to "v3.silex.me"
Switch to "v3.silex.me."
¶ 19. Login with GitLab.com
Access Silex with your GitLab account.
¶ 20. Create a new site
Say hi to the dashboard, create a new empty site.
¶ 21. Click here
Click on the specified location.
¶ 22. Click "CMS"
Access the CMS section.
¶ 23. Add a data source
Click on the "Add data source" button.
¶ 24. Fill here the value from before
Enter information in the field that was the value "Endpoint."
¶ 25. Click on "test connection"
Make sure that this does not display any error.
¶ 26. Click "Apply"
Apply the changes.
¶ 27. Click on "+"
Add a text to your site.
¶ 28. Use the text block
Drag a text to the canvas.
¶ 29. Click on the "
Open the settings of the new text block.
¶ 30. In the loop section, click the "expression button"
Add an expression in the loop field.
¶ 31. Select "Pages"
When you will publish your site, it will duplicate the text field, one per page in WordPress.
The "{ }" next to "Pages" means it is an object, not an array.
¶ 32. Select "nodes"
The "[ ]" next to "nodes" means it is an array of pages. You can loop on that.
When you publish your site, it will duplicate the text field, one per page in WordPress.
¶ 33. Click on "expression" in "HTML content"
This will make the content of the text field an expression. When you publish your site, the text content will be replaced by the expression you select.
¶ 34. Select "Loop data"
Loop data is the one page that the text field represents.
¶ 35. Select "Title"
The pages have a title, so you can make the text field display the page title.
When you publish your site, the text content will be replaced by the page title.
¶ 36. Click "Publish"
Publish the changes.
¶ 37. Click "GitLab.com"
Select GitLab to publish to GitLab pages hosting (free and good quality).
¶ 38. Click "Publish"
Publish the website. Wait 30 seconds.
¶ 39. Click "Your website will soon be live here"
Access the live website link.
¶ 40. The generated website
Here is your website, with one text field for the one page that WordPress has by default.
Copy the URL of your website for later use (the address in the address bar).
¶ 41. Click "Add New Plugin"
Back to WordPress, add a new plugin.
¶ 42. Search for the plugin "Faust"
Search for the Faust plugin (will make your WordPress truly headless).
¶ 43. Click "Install Now"
Initiate the installation process.
¶ 44. Click "Activate"
Activate the plugin.
¶ 45. Click "Faust"
Access "Faust."
¶ 46. Fill "Front-end site URL"
Paste the front-end site URL that you got from step 40.
¶ 47. Click "Save Changes"
Save the changes made.
¶ 48. Click "Visit Site"
Visit the site.
¶ 49. Click "Add New Plugin"
Add a new plugin.
¶ 50. Search for the "JAMStack deployment" plugin
The "JAMStack deployment" plugin will add a button to update your frontend when you edit content in WordPress (no need to publish from Silex).
¶ 51. Click "Install Now"
Initiate the installation process.
¶ 52. Click "Activate"
Activate the plugin.
¶ 53. Click "Deployments"
Access the Deployments section.
¶ 54. Switch to "v3.silex.me"
Switch to the app "v3.silex.me."
¶ 55. Click "GitLab Pages settings"
Access GitLab Pages settings.
This brings you to GitLab:
¶ 56. Setup the pipelin in GitLab
This is not needed with newer versions of Silex, skip this step unless you have issues
Here you need to edit a file in gitlab: click on the name of your project to see the files. Click on .gitlab-Ci.yml
Now click "edit" button then "edit single file":
It should contain something like this:
# silexOverwrite: true
# You will want to remove these lines if you customize your build process
# Silex will overwrite this file unless you remove these lines
# This is the default build process for plain eleventy sites
image: node:20
pages:
stage: deploy
environment: production
script:
- npx @11ty/eleventy@v3.0.0-alpha.20 --input=public --output=_site
- mkdir -p public/css public/assets && cp -R public/css public/assets _site/
- rm -rf public && mv _site public
- echo "The site will be deployed to $CI_PAGES_URL"
artifacts:
paths:
- public
rules:
- if: '$CI_COMMIT_TAG'
Remove the first line and add this line at the end, after the last line:
- if: '$CI_PIPELINE_SOURCE == "trigger"'
Make sure you respect indentation, it should be like this (you can also replace the whole content with this):
# You will want to remove these lines if you customize your build process
# Silex will overwrite this file unless you remove these lines
# This is the default build process for plain eleventy sites
image: node:20
pages:
stage: deploy
environment: production
script:
- npx @11ty/eleventy@v3.0.0-alpha.20 --input=public --output=_site
- mkdir -p public/css public/assets && cp -R public/css public/assets _site/
- rm -rf public && mv _site public
- echo "The site will be deployed to $CI_PAGES_URL"
artifacts:
paths:
- public
rules:
- if: '$CI_COMMIT_TAG'
- if: '$CI_PIPELINE_SOURCE == "trigger"'
Click "Commit changes" to save and you're done
¶ 57. Click "CI/CD"
Access the CI/CD section.
¶ 58. Open the "Pipeline trigger tokens" section
¶ 59. Click "Add new token"
Click the selected location.
¶ 60. Click "View trigger token usage examples"
Access trigger token usage examples.
¶ 61. Copy the "Webhook" example
¶ 62. Set WordPress "build hook URL"
Switch back to WordPress, paste the URL you got from the previous step.
¶ 63. Switch to "gitlab.com"
Navigate to "gitlab.com."
¶ 64. Copy the deploy token
Click on the "copy" button next to the token you previously created.
¶ 65. Replace TOKEN
Access the trigger pipeline URL and replace TOKEN with the token.
¶ 66. Replace "REF_NAME"
Replace the word "REF_NAME" with "main."
¶ 67. Switch to GitLab and open the section "General pipelines"
¶ 68. Copy the link of "Pipeline status"
Take only the part in href="THIS ADDRESS."
¶ 69. Paste it in "Badge Link"
¶ 70. Switch to GitLab again and copy the "Badge image" URL
It is the part like src="THIS URL."
¶ 71. Paste it in "Badge Image URL" in WordPress
¶ 72. Click "Save Settings"
Click to save the settings.
¶ 73. Click "Deploy Website"
Thanks to this new plugin, we can initiate a website deployment.
¶ 74. Check the deployment status
The badge appears here and updates automatically.
¶ 75. Click "Pages"
Access the pages section.
¶ 76. Click "Add New Page"
Select to add a new page.
¶ 77. Click "Publish"
Click to publish the page.
¶ 78. Click "Publish" again
Click to really publish the page.
¶ 79. Click on the logo
This will close the page editor.
¶ 80. Click "Deploy Website"
Initiate the website deployment process.
¶ 81. Check the deployment status
Wait until it is green.
¶ 82. Click "Visit Site"
Access the website.
¶ 83. This is your site
The site has been updated with WordPress content.
¶ Next steps
Now you can add content to your WordPress site and edit the design in Silex. Next step will probably be to use ACF to create content types and advanced designs. For now, you should ask for guidance in the chat or forums.