lumeland / base-blog

A template repository to build a blog with Lume static site generator

Lume base blog example

A starter repository showing how to build a blog with the Lume static site generator.

This project started as a fork of eleventy-base-blog but adapted to Lume and with the NetlifyCMS.

Getting Started

1. Make sure you have Deno installed.
2. Clone this Repository git clone https://github.com/lumeland/base-blog.git my-blog-name
3. Edit _data/site.yml. Specifically have a look at _config.js to see if you want to configure any option differently. See the Lume documentation site.
4. Run Lume with deno task serve.

Implementation Notes

• about.md shows how to add a content page.
• posts/ has the blog posts but really they can live in any directory. The posts/_data.yml file adds the value for type and layout fields to all posts.
• The menu field adds any page to the top level site navigation. For example, this is in use on index.njk and about.md. You can configure the order with menu.order and the text with menu.title.
• css files are processed with postcss plugin. The imported styles are in _includes/css
• img folder is copied as is, (keeping the same directory structure).
• The blog post feed template is in feed.xml.njk and feed.tmpl.js.
• This example uses four layouts stored in _includes/layouts/:
  • base.njk: the top level HTML structure
  • home.njk: the home page template (wrapped into base.njk)
  • post.njk: the blog post template (wrapped into base.njk)
  • tag.njk: the tag page template (wrapped into base.njk)
• _includes/templates/postlist.njk is a Nunjucks a reusable template used to display a list of all the posts. index.njk has an example of how to use it.
• admin/ has the NetlifyCMS configuration so you can edit or create new posts using a friendly CMS.

Deployment

GitHub Pages

• Get your own Lume blog on Github Pages
• Open the file .github/workflows/build.yml and edit the --location option with the url of the site, for example --location=https://username.github.io/repo/
• Enable Github Pages and select the branch gh-pages as source.
• See a live demo

GitLab Pages

• Open the file .gitlab-ci.yml and edit the --location option with the url of the site, for example --location=https://username.gitlab.io/repo/
• See a live demo

Deno Deploy

• Create a project in Deno Deploy and configure it.
  • Link to your git repository
  • Set the GitHub Actions deployment mode.
• Open the file .github/workflows/deno_deploy.yml and edit the following:
  • The --location option with the url of the site, for example: --location=https://my-blog.deno.dev
  • The project name in the denoland/deployctl step with the name of your project.
• See a live demo

Vercel

• Get your own Lume blog on Vercel
• You need to config your the project manually with the following values:
  • Build Command: curl -fsSL https://deno.land/x/install/install.sh | sh && /vercel/.deno/bin/deno task build --location=https://example.vercel.app/. Edit the --location option with the name of your domain.
  • Output directory: _site
• See a live demo

Netlify

• Get your own Lume blog on Netlify
• Open the netlify.toml file and edit the --location=https://deno-blog.netlify.app/ option with your own domain.
• See a live demo
• If you want to use NetlifyCMS:
  • Activate the Identity service in your Netlify settings panel.
  • Activate the Git Gateway.
  • Invite the users to edit the content.

Fleek

• Import your project
• Open the .fleek.json file and edit the --location=https://example.on.fleek.co option with your own domain.
• See a live demo

Cloudflare Pages

• Configure the project with the following values:
  • Build Command: curl -fsSL https://deno.land/x/install/install.sh | sh && /opt/buildhome/.deno/bin/deno task build --location=https://example.pages.dev/. Edit the --location option with the name of your domain.
  • Output directory: _site
• See a live demo

AWS Amplify

• Configure the amplify.yml file with the following values:

  version: 1
  frontend:
    phases:
      build:
        commands:
          - curl -fsSL https://deno.land/x/install/install.sh | sh
          - /root/.deno/bin/deno task build
    artifacts:
      baseDirectory: /_site
      files:
        - '**/*'
    cache:
      paths: []

• See a live demo

base-blog's Issues

Add I18n feat

https://lume.land/plugins/multilanguage/
I propose to add the translation on the template

Had to change the build.yml script to work in GitHub

I was not able to get the GitHub website build script https://github.com/lumeland/base-blog/blob/master/.github/workflows/build.yml to push the static files to a gh-pages branch. I had to modify it slightly to the following:

# This script will build static site files and push them to a `gh-pages` branch of your repository.
# If you are able to go into the `gh-pages` branch and see you static content then the build action
# was successful in GitHub and you can continue on with configuring your repository to publish the 
# content of the `gh-pages` branch to your default repository website (which should look like 
# https://[gitUsername].github.io/[repositoryName]/). To publish this website, 
# in your GitHub repository online, go to Settings/Pages/Build and deployment/Source and choose the
# `Deploy from branch`. Then just below that option choose `gh-pages` as the branch. 
name: Build static files to gh-pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Allow one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true
  
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Clone repository
        uses: actions/checkout@v3

      - name: Setup Deno environment
        uses: denoland/setup-deno@v1
        with:
          deno-version: v1.x

      - name: Build site
        run: |
          deno task build --location=https://lumeland.github.io/base-blog/

      - name: Push static files to gh-pages branch
        uses: crazy-max/ghaction-github-pages@v3
        with:
          target_branch: gh-pages
          build_dir: _site
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

I'm guessing the addition of ...

        with:
          target_branch: gh-pages

...helped create the gh-pages branch and maybe using ghaction-github-pages@v3 helped too, but I didn't do much testing between the current version and this version to see what made the difference. If would like for me to send a PR for this I will.

For what it is worth GitHub Pages does a better job at caching resources out of the box. If using Vercel, I would suggest running this build script on GitHub and instead of telling Vercel to build the site on Vercel. If this script is successful in creating a gh-pages branch in your repository, go to the Git settings within your Vercel project and use the gh-pages branch from GitHub (which would have all of the static site files prebuilt for Vercel). You will also need to include a vercel.json (at least at the time of this writing) to set any caching headers, because Vercel will not cache HTTP resources by default when users make requests to the site. Just my 2cents.

Out of the box experience leads to "Error: No target found"

If you follow the steps in the README:

• Install Deno
• Clone this repo
• run deno task serve

The system errors out with:

Error: No target found
    at downloadBin (https://deno.land/x/[email protected]/mod.ts:71:11)
    at async downloadBinary (https://raw.githubusercontent.com/lumeland/experimental-plugins/main/pagefind/deps.ts:4:10)
    at async (https://raw.githubusercontent.com/lumeland/experimental-plugins/main/pagefind/mod.ts:115:22)
    at async Events.dispatchEvent (https://deno.land/x/[email protected]/core/events.ts:49:11)
    at async Site.build (https://deno.land/x/[email protected]/core/site.ts:486:5)
    at async build (https://deno.land/x/[email protected]/cli/build.ts:36:3)
    at async Command.execute (https://deno.land/x/[email protected]/command/command.ts:1433:7)
    at async (https://deno.land/x/[email protected]/cli.ts:182:3)

The docs suggest configuring _config.js, but I'm not sure what to adjust. This error appears related to pageFind, because if I remove that configuration then the serve works.

add pinned post

I propose to add to the homepage of the posts that would be pinned

Deno Deploy required workflow name "deploy.yml"

Hello - I tested this on Deno Deploy, but DD does not pick up the workflow as is, and, does not allow you to specify an arbitrary name. This script works fine:

https://github.com/lumeland/base-blog/blob/master/.github/workflows/deno_deploy.yml

... but I needed to change the name of it to deploy.yml to get DD to pick it up.

Just a FYI.

Module not found https://deno.land/x/[email protected]/task.ts

im using deno deploy with github actions,
i have exact file like the base blog

deno.json

{
  "importMap": "import_map.json",
  "tasks": {
    "build": "deno task lume",
    "serve": "deno task lume -s",
    "lume": "deno eval \"import 'lume/task.ts'\" --"
  }
}

import_map.json

{
  "imports": {
    "lume/": "https://deno.land/x/[email protected]/"
  }
}

github action error :

error: Module not found "https://deno.land/x/[email protected]/task.ts".
Error: Process completed with exit code 1.

New Install

Hi there!

I just did a fresh install of the base-blog and received this error:

Error: Error rendering this page
page: /index.njk

  Template render error: (/Users/Pope/Code/StormCloud/index.njk)
  Template render error: (/Users/Pope/Code/StormCloud/_includes/templates/postslist.njk) [Line 16, Column 29]
  Error: Unable to call `search["page"]`, which is undefined or falsey
  Template render error: (/Users/Pope/Code/StormCloud/_includes/templates/postslist.njk) [Line 16, Column 29]
  Error: Unable to call `search["page"]`, which is undefined or falsey
  at Module._prettifyError (https://deno.land/x/[email protected]/src/lib.js:32:11)
  at https://deno.land/x/[email protected]/src/environment.js:493:19
  at eval (eval at _compile (https://deno.land/x/[email protected]/src/environment.js:570:20), <anonymous>:40:11)
  at https://deno.land/x/[email protected]/src/environment.js:501:11
  at Template.root [as rootRenderFunc] (eval at _compile (https://deno.land/x/[email protected]/src/environment.js:570:20), <anonymous>:100:3)
  at Template.render (https://deno.land/x/[email protected]/src/environment.js:482:10)
  at eval (eval at _compile (https://deno.land/x/[email protected]/src/environment.js:570:20), <anonymous>:39:10)
  at fn (https://deno.land/x/[email protected]/src/waterfall.js:51:22)
  at https://deno.land/x/[email protected]/src/waterfall.js:34:22```

not really sure why its happening. I'm going to work around it and just remove the search function but I thought y'all would want to know

Heres the info about my environment: 
- 2015 Macbook Pro 13 inch, 2.7 GHz Intel Core i5, 8 GB 1867 MHz DDR3
- MacOS: 10.14.6 (18G9323)
- Deno 1.20.5
- Lume v1.1.0

add feat(style): dark mode

I propose to add a dark mode that would work with the media query

Bug discovered in trying to convert to lume 2 / VTO

https://github.com/lumeland/base-blog/blob/aeb5bc1fd3a9cbf353e6fe4cfa1c83dc2bb62b7d/_includes/templates/postslist.njk#L4C63-L4C68

From my reading, it appears that entry.data.url == url should be post.data.url == url.