Build blog and community with hugo

[julz]

Fixes #3539.
Fixes #3541.

Builds the blog and community tabs with hugo.

Also added a little CSS to visually distinguish these links.

This works by cloning the website and community repos locally, copying blog and community in to the right places (same trick website uses in https://github.com/knative/website/blob/main/scripts/processsourcefiles.sh#L107), and then building those pieces using hugo in to the same site dir as mkdocs builds the docs.

Running:

• Same as today: mkdocs serve previews just the main site (with live reloading previews)
• New: ./hack/build-with-blog.sh builds to /site/ and is what we should run in the netlify build/github action.
• New: ./hack/build-with-blog.sh serve builds to /site/ and starts a local preview server with blog/community included (but no live reloads, sorry!).
  • Please run npm install -g http-server first.

Follow on work: allow community/website to be checked out as sibling directories/cached to avoid rerunning the git clone / allow local testing of changes to these repositories.

Known issue: the library Im using to do the local preview (npm install -g serve) doesn't cope with URLs that have dots in them, like http://localhost:5000/blog/2021/01/15/version-v0.20-release/, this is just a local preview issue which can be solved by using some other tool to preview the built site/ directory, but I think we can solve that separately.
.. Fixed! Using http-server instead.

/assign @omerbensaadon @csantanapr

[omerbensaadon]

Love the CSS!! Also tips you off that you are about to experience a different format to the one you are currently on.

Heads up, got this error:

Error: Error building site: POSTCSS: failed to transform "scss/main.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/

Going to install postcss and try again

[julz]

oh yeah, you do indeed need postcss for the hugo build, and there's another library too I think it needs I forgot to document, npm install autoprefixer (maybe you already had it?). Hopefully we'll throw all this in a docker container so folks dont have to care, but in the meantime these should go in contributor guide.

[omerbensaadon]

It looks like this build off of the existing website repo, so none of the processes for posting to the blog or editing community will change?

Also, still getting this error after running npm install autoprefixer and npm install postcss-cli

[julz]

It looks like this build off of the existing website repo, so none of the processes for posting to the blog or editing community will change?

correct, the build for those parts is essentially unmodified (just being driven from docs rather than other way round), so all the author workflows for docs/community should stay the same, I think

[omerbensaadon]

npm install -g postcss postcss-cli autoprefixer fixed my problem!

[omerbensaadon]

There will need to be a clean up story written to ensure that folks cannot escape into the old site, but for now, this is absolutely sufficiently de-risked. Good work @julz!

[omerbensaadon]

/lgtm

[csantanapr]

Using

npm install -g postcss postcss-cli autoprefixer

Doesn't work for me

Total in 1150 ms
Error: Error building site: POSTCSS: failed to transform "scss/main.css" (text/css): Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'

[csantanapr]

They need to be local for me to work

npm install postcss postcss-cli autoprefixer

Then it works.

❯ cat package.json
{
  "dependencies": {
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.15",
    "postcss-cli": "^8.3.1"
  }
}

[csantanapr]

Add package.json and package-lock.json

{
  "dependencies": {
    "autoprefixer": "^10.2.5",
    "postcss": "^8.2.15",
    "postcss-cli": "^8.3.1"
  }
}

this way user can just npm install at the root before running the script

[csantanapr]

add temp to .gitignore

[csantanapr]

You think is better to use python3 -m http.server 8000 ?

[julz]

Dunno, I just picked the first thing I found that worked 😅 we need npm for autoprefixer and postcss anyway tho so doesn't seem any big reason to switch 🤷‍♂️. Might be able to make it a one liner with "npx run http-server" tho 🤔

[csantanapr]

I'm done with the review, is works great.
That was very clever stuff you did here @julz 🔥

I would say lets add the package.json and package-lock.json, and the .gitignore for temp and merge it

[csantanapr]

/hold

[julz]

ok, copied the package.json over from website and deleted the libraries we don't use. Also added temp and node_modules to gitignore and changed the http-server command to go via npx so everything should work after only npm i.

@csantanapr ptal!

[csantanapr]

works like a charm
/unhold

[csantanapr]

/lgtm
/approve

[knative-prow-robot]

[APPROVALNOTIFIER] This PR is APPROVED

Approval requirements bypassed by manually added approval.

This pull-request has been approved by: csantanapr

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[julz]

/retest