diff --git a/content/guides/_index.md b/content/guides/_index.md index 675d2fc5..14d1a3ea 100644 --- a/content/guides/_index.md +++ b/content/guides/_index.md @@ -36,6 +36,25 @@ comments: false {{< /cards >}} +## Static Site Generator (SSG) + +
+
+{{< hextra/hero-subtitle >}} + Use Clever Cloud as a runner to build an efficient static website and host it in minutes!  +{{< /hextra/hero-subtitle >}} +
{{< cards >}} + {{< card link="/guides/astro" title="Astro" subtitle= "Build and deploy a static Astro based website on Clever Cloud" icon="astro" >}} + {{< card link="/guides/docusaurus" title="Docusaurus" subtitle= "Build and deploy a static Docusaurus based website on Clever Cloud" icon="docusaurus" >}} + {{< card link="/guides/eleventy" title="Eleventy (11ty)" subtitle= "Build and deploy a static Eleventy (11ty) based website on Clever Cloud" icon="11ty" >}} + {{< card link="/guides/hexo" title="Hexo" subtitle= "Build and deploy a static Hexo based website on Clever Cloud" icon="hexo" >}} + {{< card link="/guides/hugo" title="Hugo" subtitle= "Build and deploy a static Hugo based website on Clever Cloud" icon="hugo" >}} + {{< card link="/guides/lume-deno" title="Lume (Deno)" subtitle= "Build and deploy a static Lume (Deno) based website on Clever Cloud" icon="deno" >}} + {{< card link="/guides/mkdocs" title="MkDocs" subtitle= "Build and deploy a static MkDocs based website on Clever Cloud" icon="docs" >}} + {{< card link="/guides/mdbook" title="mdBook" subtitle= "Build and deploy a static mbBook based website on Clever Cloud" icon="mdbook" >}} + {{< card link="/guides/nuxt" title="Nuxt" subtitle= "Build and deploy a static Nuxt based website on Clever Cloud" icon="nuxt" >}} +{{< /cards >}} + ## Starter Tutorials
diff --git a/content/guides/astro.md b/content/guides/astro.md new file mode 100644 index 00000000..6535a949 --- /dev/null +++ b/content/guides/astro.md @@ -0,0 +1,39 @@ +--- +title: Astro +description: Build your website with the Astro Static Site Generator (SSG) and host it on Clever Cloud. No dedicated runner needed. +tags: +- guides +keywords: +- astro +- nodejs +- static +- ssg +- html +- js +- css +- website +type: "docs" +comments: false +draft: false +--- +If you need an example source code, get [Astrowind](https://github.com/onwidget/astrowind) (you'll need [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node.js](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs)): +```bash +git clone https://github.com/onwidget/astrowind myStaticApp +``` + +{{< readfile file="guides/create-static.md" >}} + +## Configure environment variables +Next, we configure the application with a medium build instance to quickly generate static files. The host instance is nano-sized, enough for a simple website. As Clever Cloud is based on standards, you only need to define a few variables: +```bash +clever scale --build-flavor M +clever scale --flavor nano + +clever env set CC_NODE_VERSION "20" +clever env set CC_WEBROOT "/dist" +clever env set CC_OVERRIDE_BUILDCACHE "/dist" +clever env set CC_PRE_BUILD_HOOK "npm install && npm run astro telemetry disable" +clever env set CC_POST_BUILD_HOOK "npm run build" +``` + +{{< readfile file="guides/git-push.md" >}} \ No newline at end of file diff --git a/content/guides/docusaurus.md b/content/guides/docusaurus.md new file mode 100644 index 00000000..50f56925 --- /dev/null +++ b/content/guides/docusaurus.md @@ -0,0 +1,39 @@ +--- +title: Docusaurus +description: Build your website with the Docusaurus Static Site Generator (SSG) and host it on Clever Cloud. No dedicated runner needed. +tags: +- guides +keywords: +- docusaurus +- nodejs +- static +- ssg +- html +- js +- css +- website +type: "docs" +comments: false +draft: false +--- +If you need an example source code, init a new project (you'll need [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node.js](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs)): +```bash +npx create-docusaurus@latest myStaticApp classic +``` + +{{< readfile file="guides/create-static.md" >}} + +## Configure environment variables +Next, we configure the application with a medium build instance to quickly generate static files. The host instance is nano-sized, enough for a simple website. As Clever Cloud is based on standards, you only need to define a few variables: +```bash +clever scale --build-flavor M +clever scale --flavor nano + +clever env set CC_NODE_VERSION "20" +clever env set CC_WEBROOT "/build" +clever env set CC_OVERRIDE_BUILDCACHE "/build" +clever env set CC_PRE_BUILD_HOOK "npm install" +clever env set CC_POST_BUILD_HOOK "npx docusaurus build" +``` + +{{< readfile file="guides/git-push.md" >}} \ No newline at end of file diff --git a/content/guides/eleventy.md b/content/guides/eleventy.md new file mode 100644 index 00000000..a861743b --- /dev/null +++ b/content/guides/eleventy.md @@ -0,0 +1,40 @@ +--- +title: Eleventy (11ty) +description: Build your website with the Eleventy (11ty) Static Site Generator (SSG) and host it on Clever Cloud. No dedicated runner needed. +tags: +- guides +keywords: +- Eleventy +- 11ty +- nodejs +- static +- ssg +- html +- js +- css +- website +type: "docs" +comments: false +draft: false +--- +If you need an example source code, get [11ty base blog](https://github.com/11ty/eleventy-base-blog) (you'll need [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node.js](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs)): +```bash +git clone https://github.com/11ty/eleventy-base-blog myStaticApp +``` + +{{< readfile file="guides/create-static.md" >}} + +## Configure environment variables +Next, we configure the application with a medium build instance to quickly generate static files. The host instance is nano-sized, enough for a simple website. As Clever Cloud is based on standards, you only need to define a few variables: +```bash +clever scale --build-flavor M +clever scale --flavor nano + +clever env set CC_NODE_VERSION "20" +clever env set CC_WEBROOT "/_site" +clever env set CC_OVERRIDE_BUILDCACHE "/_site" +clever env set CC_PRE_BUILD_HOOK "npm install" +clever env set CC_POST_BUILD_HOOK "npx @11ty/eleventy" +``` + +{{< readfile file="guides/git-push.md" >}} \ No newline at end of file diff --git a/content/guides/hexo.md b/content/guides/hexo.md new file mode 100644 index 00000000..11c5653d --- /dev/null +++ b/content/guides/hexo.md @@ -0,0 +1,44 @@ +--- +title: Hexo +description: Build your website with the Hexo Static Site Generator (SSG) and host it on Clever Cloud. No dedicated runner needed. +tags: +- guides +keywords: +- hexo +- nodejs +- static +- ssg +- html +- js +- css +- website +type: "docs" +comments: false +draft: false +--- +If you need an example source code, get [Cactus](https://github.com/probberechts/hexo-theme-cactus) (you'll need [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node.js](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs)): +```bash +git clone https://github.com/probberechts/hexo-theme-cactus myStaticApp +``` + +For this project to work, don't import the theme with `git clone` but as a submodule: +```bash +git submodule add https://github.com/probberechts/hexo-theme-cactus.git themes/cactus +``` + +{{< readfile file="guides/create-static.md" >}} + +## Configure environment variables +Next, we configure the application with a medium build instance to quickly generate static files. The host instance is nano-sized, enough for a simple website. As Clever Cloud is based on standards, you only need to define a few variables: +```bash +clever scale --build-flavor M +clever scale --flavor nano + +clever env set CC_NODE_VERSION "20" +clever env set CC_WEBROOT "/public" +clever env set CC_OVERRIDE_BUILDCACHE "/public" +clever env set CC_PRE_BUILD_HOOK "npm i -g hexo && npm install" +clever enc set CC_POST_BUILD_HOOK "hexo generate" +``` + +{{< readfile file="guides/git-push.md" >}} \ No newline at end of file diff --git a/content/guides/hugo.md b/content/guides/hugo.md new file mode 100644 index 00000000..891075a3 --- /dev/null +++ b/content/guides/hugo.md @@ -0,0 +1,49 @@ +--- +title: Hugo +description: Build your website with the Hugo Static Site Generator (SSG) and host it on Clever Cloud. No dedicated runner needed. +tags: +- guides +keywords: +- hugo +- static +- ssg +- html +- js +- css +- website +type: "docs" +comments: false +draft: false +--- +If you need an example source code, use [Theme mini](https://github.com/nodejh/hugo-theme-mini) (you'll need [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Hugo](https://gohugo.io/installation/)): +```bash +git clone https://github.com/nodejh/hugo-theme-mini myStaticApp +``` +{{< readfile file="guides/create-static.md" >}} + +## Configure environment variables and deploy script +Next, configure the application with a medium build instance to quickly generate static files. The host instance is nano-sized, enough for a simple website. As Clever Cloud is based on standards, you only need to define a few variables: +```bash +clever scale --build-flavor M +clever scale --flavor nano + +clever env set CC_WEBROOT "/public" +clever env set CC_OVERRIDE_BUILDCACHE "/public" +clever env set CC_PRE_BUILD_HOOK "bash setup_hugo.sh" +clever env set CC_POST_BUILD_HOOK "hugo --minify --gc" +``` +Edit the deploy script (`setup_hugo.sh`) with this content: +```bash +HUGO_VERSION="0.121.1" +HUGO_URL="https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz" +DEST_BIN="${HOME}/.local/bin" +FILENAME="hugo.tar.gz" + +# Download Hugo Extended and place it in a folder in the $PATH +curl --create-dirs -s -L -o ${DEST_BIN}/${FILENAME} ${HUGO_URL} +cd ${DEST_BIN} +tar xvf ${FILENAME} -C ${DEST_BIN} +rm ${FILENAME} +``` + +{{< readfile file="guides/git-push.md" >}} \ No newline at end of file diff --git a/content/guides/lume-deno.md b/content/guides/lume-deno.md new file mode 100644 index 00000000..e07e77da --- /dev/null +++ b/content/guides/lume-deno.md @@ -0,0 +1,50 @@ +--- +title: Lume (Deno) +description: Build your website with Lume Static Site Generator (SSG) using Deno and host it on Clever Cloud. No dedicated runner needed. +tags: +- guides +keywords: +- deno +- lume +- static +- ssg +- html +- js +- css +- website +type: "docs" +comments: false +draft: false +--- +If you need an example source code, use [Lume website](https://github.com/lumeland/lume.land) (you'll need [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Deno](https://docs.deno.com/runtime/manual#install-deno)): +```bash +git clone https://github.com/lumeland/lume.land myStaticApp +``` +{{< readfile file="guides/create-static.md" >}} + +## Configure environment variables and deploy script +Next, configure the application with a medium build instance to quickly generate static files. The host instance is nano-sized, enough for a simple website. As Clever Cloud is based on standards, you only need to define a few variables: +```bash +clever scale --build-flavor M +clever scale --flavor nano + +clever env set CC_WEBROOT "/_site" +clever env set CC_OVERRIDE_BUILDCACHE "/_site" +clever env set CC_PRE_BUILD_HOOK "bash setup_deno.sh" +clever env set CC_POST_BUILD_HOOK "deno task lume" +``` +Edit the deploy script (`setup_deno.sh`) with this content: +```bash +DENO_VERSION="1.39.1" +DENO_URL="https://github.com/denoland/deno/releases/download/v${DENO_VERSION}/deno-x86_64-unknown-linux-gnu.zip" +DEST_BIN="${HOME}/.local/bin" +FILENAME="deno.zip" + +# Download Deno and place it in a folder in the $PATH +curl --create-dirs -s -L -o ${DEST_BIN}/${FILENAME} ${DENO_URL} +cd ${DEST_BIN} +unzip ${FILENAME} -d ${DEST_BIN} +rm ${FILENAME} +``` + +{{< readfile file="guides/git-push.md" >}} \ No newline at end of file diff --git a/content/guides/mdbook.md b/content/guides/mdbook.md new file mode 100644 index 00000000..cf40d310 --- /dev/null +++ b/content/guides/mdbook.md @@ -0,0 +1,39 @@ +--- +title: mdBook +description: Build your website with the mdBook Static Site Generator (SSG) and host it on Clever Cloud. No dedicated runner needed. +tags: +- guides +keywords: +- mdbook +- rust +- static +- ssg +- html +- js +- css +- website +type: "docs" +comments: false +draft: false +--- +If you need an example source code, init a new project (you'll need [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Rust](https://www.rust-lang.org/tools/install)): +```bash +cargo install mdbook +mdbook init myStaticApp --title="my mdBook" --ignore=git +``` + +{{< readfile file="guides/create-static.md" >}} + +## Configure environment variables +Next, we configure the application with a medium build instance to quickly generate static files. The host instance is nano-sized, enough for a simple website. As Clever Cloud is based on standards, you only need to define a few variables: +```bash +clever scale --build-flavor M +clever scale --flavor nano + +clever env set CC_WEBROOT "/book" +clever env set CC_OVERRIDE_BUILDCACHE "/book" +clever env set CC_PRE_BUILD_HOOK "cargo install mdbook" +clever env set CC_POST_BUILD_HOOK "/home/bas/.cargo/bin/mdbook build" +``` + +{{< readfile file="guides/git-push.md" >}} \ No newline at end of file diff --git a/content/guides/mkdocs.md b/content/guides/mkdocs.md new file mode 100644 index 00000000..62ac2dcf --- /dev/null +++ b/content/guides/mkdocs.md @@ -0,0 +1,40 @@ +--- +title: MkDocs +description: Build your website with the MkDocs Static Site Generator (SSG) and host it on Clever Cloud. No dedicated runner needed. +tags: +- guides +keywords: +- mkdocs +- python +- static +- ssg +- html +- js +- css +- website +type: "docs" +comments: false +draft: false +--- +If you need an example source code, init a new project (you'll need [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git), [Python](https://wiki.python.org/moin/BeginnersGuide/Download) and [pip](https://pip.pypa.io/en/stable/installation/)): +```bash +# Use pip or pip3 depending on your system +pip install mkdocs +mkdocs new myStaticApp +``` + +{{< readfile file="guides/create-static.md" >}} + +## Configure environment variables +Next, we configure the application with a medium build instance to quickly generate static files. The host instance is nano-sized, enough for a simple website. As Clever Cloud is based on standards, you only need to define a few variables: +```bash +clever scale --build-flavor M +clever scale --flavor nano + +clever env set CC_WEBROOT "/site" +clever env set CC_OVERRIDE_BUILDCACHE "/site" +clever env set CC_PRE_BUILD_HOOK "python3 -m ensurepip --upgrade && pip3 install mkdocs" +clever env set CC_POST_BUILD_HOOK "mkdocs build" +``` + +{{< readfile file="guides/git-push.md" >}} \ No newline at end of file diff --git a/content/guides/nuxt.md b/content/guides/nuxt.md new file mode 100644 index 00000000..fc9348e4 --- /dev/null +++ b/content/guides/nuxt.md @@ -0,0 +1,39 @@ +--- +title: Nuxt +description: Build your website with Nuxt as a Static Site Generator (SSG) and host it on Clever Cloud. No dedicated runner needed. +tags: +- guides +keywords: +- nuxt +- nodejs +- static +- ssg +- html +- js +- css +- website +type: "docs" +comments: false +draft: false +--- +If you need an example source code compatible avec Nuxt static generation, get [Zooper](https://github.com/fayazara/zooper) (you'll need [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node.js](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs)): +```bash +git clone https://github.com/fayazara/zooper myStaticApp +``` + +{{< readfile file="guides/create-static.md" >}} + +## Configure environment variables +Next, we configure the application with a medium build instance to quickly generate static files. The host instance is nano-sized, enough for a simple website. As Clever Cloud is based on standards, you only need to define a few variables: +```bash +clever scale --build-flavor M +clever scale --flavor nano + +clever env set CC_NODE_VERSION "20" +clever env set CC_WEBROOT "/.output/public" +clever env set CC_OVERRIDE_BUILDCACHE "/.output/public" +clever env set CC_PRE_BUILD_HOOK "npm install" +clever env set CC_POST_BUILD_HOOK "npx nuxi generate" +``` + +{{< readfile file="guides/git-push.md" >}} \ No newline at end of file diff --git a/data/icons.yaml b/data/icons.yaml index a6b4501c..a2a6075b 100644 --- a/data/icons.yaml +++ b/data/icons.yaml @@ -79,6 +79,7 @@ matomo: clamav: +clever: # Frameworks meteor: @@ -90,4 +91,17 @@ symfony: play: gradle: -fluentd: \ No newline at end of file +fluentd: + +# Static +11ty: +astro: +deno: +docs: +docusaurus: +hexo: +hugo: +html: +mdbook: +nuxt: + diff --git a/static/partials/guides/create-static.md b/static/partials/guides/create-static.md new file mode 100644 index 00000000..fcfa6194 --- /dev/null +++ b/static/partials/guides/create-static.md @@ -0,0 +1,13 @@ +## Create a static application +You can create an application in our [Console](https://console.clever-cloud.com) or through [Clever Tools](https://github.com/CleverCloud/clever-tools/): +```bash +npm i -g clever-tools +clever login + +cd myStaticApp +clever create -t static-apache myStaticApp +``` +To deploy on Clever Cloud, your local folder need to be a git reposiory (if not, `git init`) linked to an application. If you already have an application on Clever Cloud and want to link it to the current local folder: +```bash +clever link your_app_name_or_ID +``` \ No newline at end of file diff --git a/static/partials/guides/git-push.md b/static/partials/guides/git-push.md new file mode 100644 index 00000000..8ebf1247 --- /dev/null +++ b/static/partials/guides/git-push.md @@ -0,0 +1,12 @@ +## Git push! +Once all these steps have been completed, commit your content to the local repository and deploy it: +```bash +git add . +git commit -m "First deploy" +clever deploy +``` +You can display your website's URL or add a custom domain to it (you'll need to configure DNS): +```bash +clever domain +clever domain add your.website.tld +``` \ No newline at end of file