Something like a "blog" but not a "blog"

Note

At the end of November 2023, I made a major review of Npm packages, Gulp and Npm scripts, etc.
However, this document does not cover them.

I built this based on Eleventy, not to mass produce articles on blogs, but to mass produce articles on a "topic/theme".
ブログで記事を量産するため、ではなく、ある「トピック/テーマ」について記事を量産するために、私はEleventyをベースに、これを構築しました。

Demo site (unlimited text works, the 4th.)

Getting Started

git clone git@github.com:dollplayer2501/Eleventy-netlify-V2.git any-path-name
cd any-path-name
nvm use
npm install

#
# 1. Local
#   Data is stored in ./any-path-name/_develop
#
npm run develop:build-watch
# http://localhost:8080

# 2. Production
#   Data is stored in ./any-path-name/_product
#   HTML, CSS, Javascript are compressed
#   Built and published on Netlify
#
npm run product:build
# If you want to check production's data
npm run product:serve
# http://localhost:3000

When you write an article after building a local environment, it is recommended to run npm run develop:eleventy:watach to write the article.

Notes for me !

When developing a filter, npx @11ty/eleventy --config=Eleventy.js --quiet or npm run develop:eleventy:build. I feel that this method is safer.

Features

Eleventy

• Eleventy, a simpler static site generator
• Nunjucks
• (BrowserSync)

To avoid cluttering the description in the template engine, I use Eleventy's filtering feature.

The plugin below was difficult for me to use, so I haven't used it.

• Image pulgin
• Navigation pulgin

Markdown uses the following npm packages.

• markdown-it
• markdown-it-anchor
• markdown-it-deflist
• markdown-it-footnote
• markdown-it-table-of-contents
• Implementation of ruby tag using shortcodes instead of markdown-it-ruby

Here is the sample page for the example above.

Laravel Mix

Note
I stopped using Laravel Mix and unified Gulp to use.

• Compiling SCSS
• Passthrough file/directry copy, also possible with Eleventy, see Passthrough File Copy - Eleventy

Regarding SCSS, I'm using responsive HTML5 and CSS3 site templates, Solid State of HTML5 UP!.
I had the option to use Webpack, but I couldn't compile with SCSS and I could compile with Laravel Mix, so I used it.

Gulp

• gulp-libsquoosh
  I currently don't know how to compress the image. Is the existing method of using imagemin currently available?
• gulp-sass/sass
  I use addWatchTarget for the directories.
• gulp-uglify