The URLs below point to the same site.
@dollplayer2501's portal and portfolio site? build with 11ty/Eleventy and Gulp.
- One page website
- Pico CSS ver. 2
- CSS Grid of Bootstrap ver. 5
- Fontawesome-free
- Lightbox2
- Node.js versioning assumes the use of rtx to mise-en-place
- Back end system is 11ty/Eleventy and Gulp.
- Eleventy ver. 3
- eleventy-plugin-directory-output plugin
- html-minifier
- Nunjucks included in 11ty/Eleventy
- markdown-it and markdown-it-deflist
- Gulp ver. 5
- gulp-dart-sass with gulp-sourcemaps
My skills don't allow me to deal with warnings when compiling Sass/SCSS.
Because of this, I used to compile from the Sass/SCSS package, but now I don't do this and just copy the CSS. - gulp-terser with gulp-sourcemaps
- gulp-webp with lastrun
- gulp-mode
- gulp-if
- gulp-dart-sass with gulp-sourcemaps
- npm scripts
- Eleventy ver. 3
git clone [email protected]:dollplayer2501/project2501-v3.git any-path-name
cd any-path-name
Note
Currently...as of March 2025, I am using mise-en-place instead of rtx.
It seems that hoge processes the file normally even with the file name .tool-versions
.
For this reason, I have not changed the file name.
rtx activate fish | source
Refer to ./.tool-versions
for the current version used.
npm install
Check my ./package.json
's scripts
section.
Output files are stored in ./any-path-name/_develop
.
URL is http://localhost:8080
(default).
npm run develop:watch
Output files are stored in ./any-path-name/_product
.
HTML, JavaScript and CSS are compressed, image files are converted to webp.
npm run product:build
If you want to visually check using a web browser, please see below.
URL is http://localhost:3000
(default).
npm run product:serve
Portfolio images are created using ImagemMagick commands in Python.
These Python scripts are invoked by shell scripts from an Npm script.
I plan to introduce light boxes in the near future.
//