webdogie/workshop_2_DOM_platzi

Snowpack Tailwind

✨ Bootstrapped with Create Snowpack App (CSA).

Ready-to-go template to create awesome websites using Tailwind on top of Snowpack and autopublish to GitHub pages using GitHub Actions.

• Quick start
• Features
• Available Scripts

Quick start

npx create-snowpack-app my-app --template snowpack-template-tailwind

It bootstraps this template into a new folder called my-app/.

✨ Every commit pushed to your main branch will autopublish the site on GitHub Pages.

Optional install using Yarn:

npx create-snowpack-app my-app --template snowpack-template-tailwind --use-yarn

Features

• Snowpack, of course.
• Tailwind.
• Prettier.
• Force prettier on commit.
• Autopublish on Github Pages.

Q: How do I enable auto publish to GitHub Pages?

1. Create a new Snowpack app using the script from the quick start section.
2. Update the value of homepage in package.json. It should like https://<your-username>.github.io/<your-repo-name> (no trailing slash).
3. Push your changes into a new GitHub repository.
4. You should see an Action running on https://github.com/<your-username>/<repo-name>/actions
5. Make sure to enable GitHub pages for your repo and select the gh-pages branch
6. Give GH Pages some minutes, your site should be live on https://<your-username>.github.io/<your-repo-name>
7. Enjoy :)

Q: How do I disable auto publish to GitHub Pages?

Remove the .github/workflows/publish.yml file.

Available Scripts

npm start

Runs the app in the development mode. Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

Builds a static copy of your site to the build/ folder. Your app is ready to be deployed!

For the best production performance: Add a build bundler plugin like @snowpack/plugin-webpack or snowpack-plugin-rollup-bundle to your snowpack.config.json config file.

Q: What about Eject?

No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.