diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 4ec1cd5..c87cc33 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -5,6 +5,24 @@ on: types: [published] jobs: + deploy-client: + name: Build and Export Client + if: github.event.release.target_commitish == 'master' + runs-on: ubuntu-latest + steps: + - name: Checkout the repository + uses: actions/checkout@v3 + with: + ref: ${{ github.event.release.tag_name }} + - name: List files for publish + run: cd public && ls -l -a + - name: Deploy to Github Pages + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: public + publish_branch: gh-pages + docker-build-push-tag: name: Push Tagged Image if: github.event.release.target_commitish == 'master' && vars.DOCKERHUB_USERNAME != '' diff --git a/README.md b/README.md index 9b72757..3dfcc55 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Simple localhost static website development environment for plain HTML, CSS, and Its development static hosting and file-serving architecture are closer to traditional static web servers. Uses **Gulp** and **Browser-Sync** > [!NOTE] -> An alternate localhost static development environment, also with live reload using Webpack is available at
+> An alternate localhost static development environment using **Webpack**, also with live reload, is available at
> https://github.com/weaponsforge/livereload-webpack ### Content @@ -92,7 +92,7 @@ https://hub.docker.com/r/weaponsforge/livereload-basic 2. Run the development image. - Using only Docker (1st option): - > **INFO:** This option requires having the static website development HTML, CSS and JavaScript files inside a "/public" directory, consisting of at least: + > **INFO:** This option requires having the static website development HTML, CSS and JavaScript files inside a `"/public"` directory, consisting of at least: ``` ├─ my-website-project @@ -100,6 +100,7 @@ https://hub.docker.com/r/weaponsforge/livereload-basic │ ├─── index.html │ ├─── ... ``` + Navigate to the website project directory (for example, `"my-website-project"`) using a terminal, then run: ``` # On Linux OS diff --git a/gulpfile.js b/gulpfile.js index 60c7c87..468959b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -18,7 +18,7 @@ const watch = function () { const css = `${root}/**/*.css` const js = `${root}/**/*.js` - // Use gulp internal and polling if working in Windows WSL2 to enable hot reload + // Use gulp interval and polling if working in Windows WSL2 to enable hot reload gulp.watch(html, (process.env.USE_POLLING && { interval: 1000, usePolling: true }) ).on('change', browserSync.reload) diff --git a/public/index.html b/public/index.html index 294348a..5aeefa9 100644 --- a/public/index.html +++ b/public/index.html @@ -1,19 +1,19 @@ - - - - - - Live Reload Demo - - - - -
-

It Works!

- -
- -
-
- - \ No newline at end of file + + + + + + Live Reload Demo + + + + +
+

It Works!

+ +
+ +
+
+ + diff --git a/public/main.css b/public/main.css index 3e8d450..eb12841 100644 --- a/public/main.css +++ b/public/main.css @@ -1,23 +1,23 @@ -body, html { - margin: 0; - padding: 0; - font-family: Arial, Helvetica, sans-serif; - background-image: url('images/landscape.jpg'); -} - -.imgcontainer { - margin-top: 48px; -} - -img { - width: 300px; - height: 300px; -} - -main { - width: 400px; - margin: auto; - display: flex; - flex-direction: column; - align-items: center; -} \ No newline at end of file +body, html { + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; + background-image: url('images/landscape.jpg'); +} + +.imgcontainer { + margin-top: 48px; +} + +img { + width: 300px; + height: 300px; +} + +main { + width: 400px; + margin: auto; + display: flex; + flex-direction: column; + align-items: center; +} diff --git a/public/main.js b/public/main.js index e49cd73..f5d395a 100644 --- a/public/main.js +++ b/public/main.js @@ -1,7 +1,7 @@ -function init () { - console.log('loaded!!') -} - -function clickme () { - alert('i was clicked!') -} \ No newline at end of file +function init () { + console.log('loaded!!') +} + +function clickme () { + alert('i was clicked!') +}