自宅サーバの運用に関する主にソフトウェア(コンテナ、Nuxt、Gatsby)に関する記事の一覧です。

自宅のEdgerouterXにアクセスしているIPアドレスをGeoLite2+Rsyslog+Prometheus+Grafanaで地図上にプロットするダッシュボードを作って見ました。日によって違いますが、アクセスが多いのは、Netherlands、United States、China、United Kingdonm、Russiaの順ですかね。

Web Serve(IPv6)を監視するために、Fedora CoreOSにPodmanで監視コンテナ(Prometheus+Blackbox Exporter+Grafana)を作成してみました。今回はGrafanaの設定です。

Web Serve(IPv6)を監視するために、Fedora CoreOSにPodmanで監視コンテナ(Prometheus+Blackbox Exporter+Grafana)を作成してみました。

前回、NuxtからGatsbyに変えてLighthouseの点数が92点まで上がりました。今回はさらに100点を目指したいと思います。ついでPWAに対応したいと思います。

Lighthouseの点数が伸び悩むのでNuxtからGatsbyに変えてみた。点数も70点から92点に跳ね上がりました。移行手順の備忘録です。

NuxtのWebサイトをFull Static Generationで再構築してみました。私のサイトの場合、問題になったのはサーバサイドの処理をどのように回避するかでした。またリンクされていないページは、クローニング処理されないので、従来通り一手間かけてファイルを生成します。

今回も Nuxt ネタです。Google Search Console で URL 検査してみたら、「このページはモバイル フレンドリーではありません」との結果でした。この赤いビックマークが気に食わない、おじさんに火をつけたようです。このホームページをレスポンシブに対応したいと思います。また スタイルシートをCSS から SCSS に変更したいと思います。

Nuxtで作成したこのブログをSEO対応してみました。sitemapやrobotsの他に動的ページに合わせてfeedやmeta情報などを埋め込みたいと思います。このホームページは個人的な備忘録、記事を書き留めているだけなので、検索数を伸ばしたいとかはないですが、動的ページのホームページで SEO 対応どこまでできるかやってみました。

このホームページもそろそろリビルドしたいと思います。composition-apiで作成したVueファイルから記事、コンテンツ読み込み処理を Vue ファイルから分離したいと思います。composition-api+composables+typescriptでいきます。

「Nuxtでプログを構築しよう!!」の最終回です。言語切替にはvue-i18nを利用すると思いますが、今回は自前で言語切替を実装してみたいと思います。言語情報を各コンポーネントから共有するために composables コンポーネントにもチャレンジしたいと思います。

「Nuxtでプログを構築しよう!!」の9回目です。画面も整ってきましので、今回はヘッダーメニューを作ってみたいと思います。ヘッダーにはブログ説明のリンク、メニュー、言語切替ボタンを配置しようと思います。メニューにはマテリアルアンコンも入れたいと思います。

Nuxt には色々なUI フレームワークが用意されていますが覚えるのが面倒なので、おじさんでも数行のスタイルシートの変更でクールな画面に挑戦したいと思います。はたしてクールな画面になるなるのかなぁ。

「Nuxtでプログを構築しよう!!」の7回目です。今回はMardownで作成した記事を前回作成した記事一覧から該当する記事の内容を表示するようにしたいと思います。

「Nuxtでプログを構築しよう!!」の6回目。今回は登録した記事の一覧を表示する画面を作りたいと思います。Mardownファイルで登録した記事を検索して一覧表示したいと思います。予習として[Create a Blog with Nuxt Content](https://nuxtjs.org/blog/creating-blog-with-nuxt-content/)や[nuxt/content](https://content.nuxtjs.org/)を読んでおきましょう。ほとんどはこれだけで実装方法がわかります。

Nuxtでプログを構築しよう」の5回目のブログとなります。今回は基本レイアウトを考えていきたいと思います。画面構成は、ヘッダ、ボディ、フッターの基本的な構成にしたいと思います。基本レイアウトは layout フォルダの default.vue ファイルをカスタマイズしていきます。

「Nuxtでプログを構築しよう」の4回目のブログとなります。今回はプログ全体の構成を考えてみたいと思います。Nuxtの標準的なフォルダー構成を元に考えて、どんなページを用意するか、またどんなコンポーネントを作成するのかも考えたいと思います。

MacにNode.jsの環境が整いましたので、今回はNuxtをインストールしていきたいと思います。またVSCodeの環境設定も整えて、Nuxtの初期画面を表示することころまでやりたいと思います。

開発環境を整えたいと思います。開発環境は、自作Mac・・・・Mac mini壊れたのでその代替機を自作しました。この辺はまた別の機会にするとして、Macにnode.jsとコードエディタのVSCodeを入れていきたいと思います。

Vueも知らない私が、シンプルなブログをNuxtで作ってみようと思います。今回は、その第一回目、ブログ全体の構想を考えたいと思います。フレームワークは、Nuxt+Composition API+ Typescriptでいきたいと思います。