Open2024/01/11にコメント追加3

WordPressの記事をMarkDown化してAstroでGithub Pagesに公開

WordPress

Astro

githubpage

mimi

Astro -> GithuPages

直下に作成する場合、base の指定は無しでよし。
xxx.github.io という名前のリポジトリにするとたぶん勝手に作られる公開Action pages build and deployment が走る。
そのため、最初アップロードした時点でページは生成されるが、それだとまだちゃんとbuildされていない模様。（README.mdの内容がトップページとして生成される。）

記事にあるように一度ファイルをPushしたら、

記事にあるdeply.yml

name: Github Pages Astro CI

on:
  # Trigger the workflow every time you push to the `main` branch
  # Using a different branch name? Replace `main` with your branch’s name
  push:
    branches: [ main ]
  # Allows you to run this workflow manually from the Actions tab on GitHub.
  workflow_dispatch:
  
# Allow this job to clone the repo and create a page deployment
permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout your repository using git
        uses: actions/checkout@v2          
      - name: Install, build, and upload your site
        uses: withastro/action@v0
        # with:
            # path: . # The root location of your Astro project inside the repository. (optional)
            # node-version: 16 # The specific version of Node that should be used to build your site. Defaults to 16. (optional)
            # package-manager: yarn # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)


  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

が走ってちゃんとbuildしたものが公開される。

TODO

pages build and deployment はたぶん不要なので、Actionが走らないようにしたい。

mimi

wordpress-export-to-markdown

npx wordpress-export-to-markdown

でかなりきれいにMarkDown化される。まああんまり複雑な記事書いてないからかな。

が、画像の読み込みがそのままではAstroではできなくてエラーがでる。

このあたりを読んで、

を試してみる。

npx astro add astro-remark-eleventy-image

したらいいだけぽかったけど駄目で、一旦publicに移動する。

mv src/**/images/* public/images/

して

!\[([^\]]*)\]\((images\/[^\)]+)\)

![$1](/public/$2)

で置換。取り敢えずエラーはなくなったが、ファイル名が日本語のままのものが日本語対応していないので表示されない。

mimi

copilotに日本語のファイル名のものをリネームするJSを書いてもらって変換

renameJaFile.js

import fs from "fs";
import path from "path";

function isJapanese(text) {
  return /[\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Han}]/u.test(text);
}

function renameFilesInDir(dir) {
  const files = fs.readdirSync(dir, { withFileTypes: true });

  for (const file of files) {
    const filePath = path.join(dir, file.name);

    if (file.isDirectory()) {
      renameFilesInDir(filePath); // Recursively process subdirectories
    } else {
      const fileNameWithoutExt = path.parse(file.name).name;

      if (isJapanese(fileNameWithoutExt)) {
        const newFileName =
          Math.random().toString(36).substring(2, 15) + path.extname(file.name);
        const newPath = path.join(dir, newFileName);

        fs.renameSync(filePath, newPath);
        console.log(`Renamed file ${filePath} to ${newPath}`);
      }
    }
  }
}

renameFilesInDir("/YOURPATHTOREPOGITORY/src/pages/");

node renameJaFile.js

で、取り敢えず全表示された。