ポートフォリオサイトをAstro 5に移行

1
npm create astro@latest .

1
npm warn EBADENGINE Unsupported engine {
2
npm warn EBADENGINE   package: 'create-astro@4.11.0',
3
npm warn EBADENGINE   required: { node: '^18.17.1 || ^20.3.0 || >=22.0.0' },
4
npm warn EBADENGINE   current: { node: 'v21.7.1', npm: '10.8.2' }
5
npm warn EBADENGINE }

1
volta install node@v23.5.0

1
success: installed and set node@23.5.0 as default
2
   note: this version of Node includes npm@10.9.2, which is higher than your default version (10.8.2).
3
      To use the version included with Node, run `volta install npm@bundled`

1
volta install npm@bundled

1
How would you like to start your new project?
2
 A basic, minimal starter (recommended)
3

4
Install dependencies? (recommended)
5
 Yes
6

7
# 最初から.gitはある状態でやったので以下は聞かれていない
8
# Initialize a new git repository?

1
npm run dev
2
# http://localhost:4321/

1
{
2
  "extends": "astro/tsconfigs/strict",
3
  "include": [".astro/types.d.ts", "**/*"],
4
  "exclude": ["dist"],
5
  "compilerOptions": {
6
    "baseUrl": ".",
7
    "paths": {
8
      "@/*": ["src/*"],
9
    }
10
  }
11
}

1
npm i @fontsource-variable/ysabeau astro-expressive-code date-fns

1
npm i -D @expressive-code/plugin-line-numbers @markuplint/astro-parser autoprefixer destyle.css markuplint postcss-html prettier prettier-plugin-astro remark-breaks remark-directive remark-external-links sass stylelint stylelint-config-recess-order stylelint-config-recommended-scss

1
PUBLIC_SITE_NAME=namakurajin
2
PUBLIC_SITE_URL=http://localhost:4321

1
{
2
  "parser": {
3
    ".astro$": "@markuplint/astro-parser"
4
  },
5
  "extends": ["markuplint:recommended"]
6
}

1
{
2
  "ignoreFiles": ["**/ec.*.css"],
3
  "extends": ["stylelint-config-recommended-scss", "stylelint-config-recess-order"],
4
  "rules": {
5
    "font-family-no-duplicate-names": null,
6
    "no-descending-specificity": null,
7
    "no-duplicate-selectors": null
8
  },
9
  "overrides": [
10
    {
11
      "files": ["src/**/*.astro"],
12
      "customSyntax": "postcss-html"
13
    }
14
  ]
15
}

1
module.exports = {
2
  plugins: [
3
    require('autoprefixer'),
4
  ],
5
};

1
/** @type {import("prettier").Config} */
2
module.exports = {
3
  arrowParens: "always",
4
  bracketSpacing: true,
5
  htmlWhitespaceSensitivity: "ignore",
6
  printWidth: 100,
7
  semi: true,
8
  singleQuote: true,
9
  trailingComma: "none",
10
  useTabs: false,
11
  plugins: ["prettier-plugin-astro"],
12
  overrides: [
13
    {
14
      files: "*.astro",
15
      options: {
16
        parser: "astro",
17
      },
18
    },
19
  ],
20
};

1
{
2
  // ...
3
  "scripts": {
4
    // ...
5
    "format:astro": "prettier --write 'src/**/*.astro'",
6
    "format:scss": "stylelint 'src/**/*.astro' --fix",
7
    "lint:astro": "markuplint 'src/**/*.astro'",
8
    "lint:scss": "stylelint 'src/**/*.astro'",
9
    "format:html": "prettier --write 'dist/**/*.html'",
10
    "format:css": "prettier --write 'dist/**/*.css' && stylelint 'dist/**/*.css' --fix",
11
    "lint:html": "markuplint dist/**/*.html",
12
    "lint:css": "stylelint 'dist/**/*.css'",
13
    "generate": "npm run build && npm run format:html && npm run format:css && npm run lint:html"
14
  },
15
  // ...
16
}

1
// @ts-check
2
import { defineConfig } from 'astro/config';
3

4
// コードブロック用
5
import expressiveCode from "astro-expressive-code";
6
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
7
import myRemarkPlugin from "./src/plugins/myRemarkPlugin";
8

9
// CSSのキャッシュを切る用
10
const cssVersion = '20240108';
11

12
// https://astro.build/config
13
export default defineConfig({
14
  // HTMLを圧縮しない
15
  compressHTML: false,
16
  // Astroの拡張
17
  integrations: [
18
    // コードブロックの拡張
19
    expressiveCode({
20
      themes: ['dracula-soft'],
21
      plugins: [
22
        pluginLineNumbers()
23
      ]
24
    })
25
  ],
26
  markdown: {
27
    remarkPlugins: ['remark-breaks', 'remark-external-links', 'remark-directive', myRemarkPlugin],
28
  },
29
  vite: {
30
    build: {
31
      rollupOptions: {
32
        output: {
33
          assetFileNames: (file) => {
34
            const fileName = file.names[0];
35

36
            // CSSは「css」ディレクトリに入れる
37
            const cssRegex = /\.css$/i;
38
            if (cssRegex.test(fileName)) {
39
              return `assets/css/styles${cssVersion}.css`;
40
            }
41

42
            // フォントは「font」ディレクトリに入れる
43
            const fontRegex = /\.(woff|woff2)$/i;
44
            if (fontRegex.test(fileName)) {
45
              return 'assets/font/[name].[ext]';
46
            }
47

48
            // 他にも必要ならここに設定を書く
49

50
            // デフォルト
51
            return 'assets/[name].[ext]';
52
          },
53
          // JavaScriptを任意の1ファイルにまとめる
54
          entryFileNames: (_file) => {
55
            return `assets/js/scripts.js`;
56
          }
57
        },
58
      },
59
      // CSS、JavaScriptを圧縮しない
60
      minify: false,
61
      // CSS、JavaScriptを必ず外部ファイルにまとめる
62
      assetsInlineLimit: 0,
63
      // ひとつのCSSにまとめる
64
      cssCodeSplit: false,
65
     }
66
  }
67
});

1
├── _articles
2
│   └── ここにMarkdown形式の記事を保存。
3
├── _statics
4
│   └── ここにMarkdown形式の固定ページ記事を保存。
5
├── components
6
│   ├── Article.astro
7
│   ├── Breadclumbs.astro
8
│   ├── Footer.astro
9
│   └── Header.astro
10
├── layouts
11
│   └── Layout.astro
12
├── libs
13
│   └── utils.ts
14
├── pages
15
│   ├── about.astro
16
│   ├── index.astro
17
│   └── note
18
│       ├── [slug].astro
19
│       └── index.astro
20
├── plugins
21
│   └── myRemarkPlugin.ts
22
└── styles
23
    └── global.scss