Zenn
🌵

Nuxt3で作ったポートフォリオをGithub Pagesにデプロイする時に詰まった点

2023/08/04に公開
Tailwind CSS
GitHub Pages
Vue 3
Nuxt 3
tech

Nuxt3で作ったポートフォリオサイトを，とりあえず無料で気軽に使えるGithub Pagesにgh-pagesを使ってデプロイすることを試みたら，色々とトラブルに見舞われたのでそれをまとめていく

結構初歩的な問題が多いので，Nuxt3或いはWeb製作入門者向け

出来たポートフォリオ

完成品
色々と製作中

tailwindcssが読みこまれない

デプロイ後普通のcssは読み込まれるのにtailwindcssが機能しない場合

自分の原因

  • package.jsonのdev dependenciesのみに書かれているため。

公式サイトのtailwindcssパッケージの通りに，

# Using pnpm
pnpm add --save-dev @nuxtjs/tailwindcss

# Using yarn
yarn add --dev @nuxtjs/tailwindcss

# Using npm
npm install --save-dev @nuxtjs/tailwindcss

とパッケージをインストールすると当然--devが付いているため本番環境では作動しませんよ～という話

解決方法

  • dependenciesにdev dependenciesからコピペして書き足す

トップページ以外に遷移出来ない（404）

開発環境では普通にページを切り替え出来ても，本番環境ではトップページ以外404が出る（例：/aboutに飛んだとき）場合

自分の原因

  • ページのパスがデプロイ後変わっていた点

開発環境：localhost:3000/hogehoge
本番環境：https://githubusername.github.io/repository名/hogehoge

とrepository名が間に挟まっていたためにページが見つからなかった。

解決方法（もっといい方法があるかも）

  • リポジトリ名をgithubusername.github.ioに変更する

Github Pagesの仕様として，ユーザー及び組織サイトはgithubusername.github.ioにする必要がある。以下公式より

ユーザー サイトを公開するには、自分の個人アカウントが所有する <username>.github.io と
いう名前のリポジトリを作成する必要があります。 組織サイトを公開するには、<organization>.github.io という名前の組織が所有するリポジトリを作成する必要があります。

普通のリポジトリでgh-pagesを使うとプロジェクトサイトの扱いになる。おそらくプロジェクトサイトはDocsを用いた単純なWikiのようにして使われるもので，nuxtで作った.outputを表示させる機能はないため，リンクが機能しないなどの問題が発生すると思われる。（参考）

ContentDocなどの外部プラグインが機能しない

Loading module なんちゃら was blocked because of a disallowed MIME type (“text/html”).とブラウザコンソールを開いて表示される場合

自分の原因

  • .nojekyllファイルを置き忘れた

jekyllのHPでも言われている通り，Github Pagesにはjekyllがデフォルトで使われている。jekyllはここでも述べている通り，gh-pagesブランチの.output/public/_nuxtを認識してくれず，結果として_nuxt内のjsファイルを読みこんでくれない。

解決方法

.nojekyllという名前の空ファイルを，/public直下に置いた状態でデプロイする。

名前の通りjekyllを無効化する。いちいちデプロイ後にファイルを追加するのは面倒なので，.nojekyllがデプロイ後フォルダのrootの位置（faviconと同じ）に来るようにしている。

ContentRendererでmarkdownが表示されない

自分のaboutページのように，v-if要素内にContentDoc及びContentRendererを設定し，開いた時にそれを表示しようとする方法，つまりContentDocを動的ページの要素として使おうと考えている場合

自分の原因

  • ContentDocは動的ページのコンテンツ読み込みには対応しきれていないため

ContentDocはjekyllのように，/content内の要素をページのパスもしくは与えられたパスから探し出し，ページ生成時に表示する目的で作られているため，下のような導入では上手くいかない。

<ul v-if="isOpen" class="description rounded border-gray-500" >
  <ContentDoc :path="'/content/' + description" v-slot="{ doc }">
     <ContentRenderer class="text p-2 markdown" :value="doc" />
  </ContentDoc>
</ul>

解決方法

  • fetchしたmarkdownファイルの中身をStringとして，vue-markdown-renderに渡して表示するようにした
<script setup>
import VueMarkdown from 'vue-markdown-render'

const options = ({
  html:true,
  linkify: true,
  typographer: true
})

const props = defineProps({
  title: String,
  description: String,
})

const isOpen = ref(false)
const markdownContent = ref('')

const toggleOpen = () => {
  isOpen.value = !isOpen.value;
  if (isOpen.value) {
    const filePath = `../aboutmd/${props.description}.md`;
    fetch(filePath)
      .then(response => response.text())
      .then(data => {
        markdownContent.value = data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};

const triangle = computed(() => {
  return isOpen.value ? '▲' : '▼';
});
</script>

<template>
  <div class="mt-4">
    <div :class="{ 'border': isOpen }">
      <div @click="toggleOpen" class="text-center hover:bg-slate-600 transition duration-75 cursor-pointer">
        <p class="text text-xl py-1" :class="{ 'border-b': isOpen }">{{ title }}  <span>{{ triangle }}</span></p>
      </div>
      <Transition name="slide">
        <ul v-if="isOpen" class="description rounded border-gray-500">
          <vue-markdown class="markdown text p-2" :source="markdownContent" :options="options" />
        </ul>
      </Transition>
    </div>
  </div>
	</template>

参考になったサイト

Nuxt3 + GitHub Pages で ﾎｰﾑﾍﾟｰｼﾞ兼 ﾌﾞﾛｸﾞを作成してみた
Nuxt Content (Nuxt3版)を使ってブログを作ってみた

Discussion