Deploy to Github-Pages using Github-Actions

[DavidUnzue]

Hi there,

did anyone get this working with deployments to Github-Pages using Github-Actions? More specifically using helaili/jekyll-action.

I'm getting an error as soon as the postCSS part sets in. here it is:

Configuration file: /github/workspace/_config.yml
            Source: /github/workspace
       Destination: /github/workspace/build
 Incremental build: disabled. Enable with --incremental
      Generating... 
env: can't execute 'node': No such file or directory
  Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'css/styles.css':
                    783: unexpected token at ''
                    ------------------------------------------------
      Jekyll 4.2.0   Please append `--trace` to the `build` command 
                     for any additional information or backtrace. 
                    ------------------------------------------------
/usr/local/lib/ruby/2.7.0/json/common.rb:156:in `parse': 783: unexpected token at '' (JSON::ParserError)
    from /usr/local/lib/ruby/2.7.0/json/common.rb:156:in `parse'

I checked my syntax and everything is fine, no errors there. Also, everything is working fine locally when I build the site using:

JEKYLL_ENV=production NODE_ENV=production bundle exec jekyll build

I'm using jekyll-postcss just to load in TailwindCSS with a couple of postCSS plugins. Nothing fancy.

Here is my PostCSS config:

// postcss.config.js
module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("postcss-nested"),
    require("autoprefixer"),
    ...(process.env.JEKYLL_ENV == "production"
      ? [require("cssnano")({ preset: "default" })]
      : []),
  ],
};

Here the Tailwind config:

module.exports = {
  purge: [
    "./_includes/**/*.html",
    "./_layouts/**/*.html",
    "./_posts/*.md",
    "./*.html",
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [require("@tailwindcss/typography")],
};

And my CSS styles:

---
---

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

I tried different variations of the Github action:

The standard way from jekyll-action's docs:

name: Build and deploy Jekyll site to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  github-pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Install NPM dependencies
        run: |
          npm install

      - uses: helaili/jekyll-action@2.1.0
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
        env:
          NODE_ENV: "production"

And a extended version to make sure Ruby and Node.js are installed and setup:

name: Build and deploy Jekyll site to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  github-pages:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: "2.7"

      - name: Ruby gem cache
        uses: actions/cache@v2
        with:
          path: vendor/bundle
          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
          restore-keys: |
            ${{ runner.os }}-gems-
      - name: Install Gems
        run: |
          bundle config path vendor/bundle
          bundle install --jobs 4 --retry 3
      - name: Install node
        uses: actions/setup-node@v1
        with:
          node-version: 13.x

      - name: Node packages cache
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install NPM dependencies
        run: |
          npm install

      - uses: helaili/jekyll-action@2.1.0
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
        env:
          NODE_ENV: "production"

Note: helaili/jekyll-action will set JEKYLL_ENV to production by default.

I'm note sure why the line

env: can't execute 'node': No such file or directory

keeps appearing even after explicitly setting up node in the pipeline. I don't know if that might be the reason for the pipeline to fail or if it is related to jekyll-postcss not parsing correctly.

Any idea?

Thanks in advance ✌️

[mhanberg]

There is a chance the jekyll-action is executed in a different environment than the rest of the job, so node might not be in the path.

That's the best thing I can think of. I might suggest going to the GitHub actions support rather than asking here for more help.

[DavidUnzue]

Hey @mhanberg thank you for the fast reaction. I found out that helaili/jekyll-action doesn't provide a Node or Javascript runtime, as you guessed. I then tried with limjh16/jekyll-action-ts . After doing that, the error regarding the Node environment dissapeared. However, the build still fails as soon as PostCSS sets in, now with following error:

Conversion error: Jekyll::Converters::PostCss encountered an error while converting 'css/styles.css':
                      PostCssNotFoundError

The output comes from:

vendor/bundle/ruby/2.7.0/gems/jekyll-postcss-0.4.0/lib/jekyll/converters/postcss.rb:30:in `convert': PostCssNotFoundError (PostCssNotFoundError)

jekyll-postcss is definitly listed in the Gemfile.

Do you have any suggestion?

[mhanberg]

You still need to install postcss with npm or yarn.

This plugin doesn't vendor it.

[DavidUnzue]

Yes, you are right! I was thinking that limjh16/jekyll-action-ts would install the dependencies by itself.

I also realized that I was missing a couple of npm dependencies, which were installed locally but not in the package.json...

Now everything is working! Thank you!

[m0ddixx]

Yes, you are right! I was thinking that limjh16/jekyll-action-ts would install the dependencies by itself.

I also realized that I was missing a couple of npm dependencies, which were installed locally but not in the package.json...

Now everything is working! Thank you!

What npm dependencies were you missing exactly? I am having the same setup, but even with all npm packackes in packages.json I can think of, postcss is still not found. I also use the same action, but i added actions/setup-node to install npm packages manually