Login to Netlify and create a new site with default settings pointed at your new GitHub repo - it will just work which is pretty amazing! Your theme also needs to be published on NPM for this to work. You don’t have to choose Netlify, you could use any hosting provider. Here is what the GitHub action looks like: name : Test Themes on : push : branches : - main paths : - 'starters/**' - 'themes/**' - '.github/**' - 'cypress/**' pull_request : branches : - main paths : - 'starters/**' - 'themes/**' - '.github/**' - 'cypress/**' jobs : test_theme : runs-on : ubuntu-latest steps : - name : Checkout uses : - name : Run Tests uses : with : build : yarn build:empty start : yarn serve:empty config-file : cypress/cypress-github-actions.json spec : cypress/e2e/ Deploy to Netlify Here is an example package.json, note the use of custom scripts to shorten the workspaces syntax and that private is set to true. Yarn workspaces are configured through the root package.json file with a special workspaces field which tells Yarn where to look for additional dependencies and related packages. In practical terms this means you can seamlessly work on both your theme and your site at the same time and only push changes to NPM when you are ready. Yarn workspaces abstracts all of the complicated package management necessary for local theme development. Run yarn install in your terminal to start installing all of the packages and creating a lock file. Typically people only publish the theme to NPM. Note that the starter’s package.json has a private: true field set on it so it is not published to NPM. The name field should already be correct if you followed the above steps correctly. You should have folders that look like themes/gatsby-theme-your-theme-name and starters/gatsby-starter-your-theme-name.īrowse to themes/gatsby-theme-monorepo-tutorial/package.json and starters/gatsby-starter-monorepo-tutorial/package.json and update any fields you need to like the author, description and repo links. Update the folder names to properly reflect your new theme and starter. So for example if your theme was going to be named gatsby-theme-kickoff you would find and replace empty -> kickoff. Update naming across your files and folders using find and replace.ĭo a find and replace for empty -> your-theme-name. My hope with this template is that there is little, if anything, you need to delete before you can start working. You will notice some configuration files for the tools and that is about it. There are also folders for Cypress.io and GitHub. Themes and starters are located in their respective folder. I intentionally kept this repository as “empty” as possible, it is only a hello world, and instead focuses on the tooling for the monorepo itself.Ĭlick the Use This Template button on GitHub which will prompt you to clone the template into a new repo under your own username.Ĭlone your new repo locally and open it in your code editor of choice.Įxplore the files and folder structures. Gatsby Theme Empty is a GitHub template repository that is preconfigured with the tools mentioned above so you can quickly get started with your own project and avoid lots of copy/paste. This is a long one so get a fresh cup of coffee and let’s go! Use a template This post assumes you have some basic familiarity with Gatsby, Gatsby themes, NPM and GitHub. Dependabot for automated dependency updates.Here are the tools (all free) we will be reviewing in this post: At the end of this tutorial you will have a Gatsby themes monorepo setup with automated testing, automated dependency management, automated publishing, continuous integration, and continuous deployment! I manage a Gatsby themes monorepo that currently has 11 themes and 8 starters with over 1500 commits - lots of moving parts to keep organized.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |