Handism's Tech Blog

Category: Frontend

VitePressで作ったブログをNext.jsにマイグレーションする

VitePressで作ったブログをNext.jsにマイグレーションする

経緯 もうちょい前の話になるけど、仕事でも愛用しているGitHub Copilotが誰でも無料で使えるようになったこともあり、なんかコーディングをしてみたくなった。 さて何を作ろうか？というときに、自分の技術ブログがVueのVitePressのJAMstackで作られているのを思い出して、前から使ってみたかったReactで作り直してみようかなぁと。 仕様を考える まぁブログをやるだけならいくらでも

Frontend
#Next.js#React#Blog#AI
CSSに入門する

CSSに入門する

CSSの基礎知識 リセットスタイル 各ブラウザは、タグごとにデフォルトスタイルをそれぞれ持っていて、それをリセットする。 として一番最初に読み込ませるのが良さそう。 rem,vw が既存ではあったが、新たな長さの単位としてがある。 - ：親要素を基準とする。2emなら親の2倍 - ：ルートを基準とする。つまりhtmlを基準。レスポンシブデザインならフォントや幅などはこれかも - ：windowの幅

Frontend
#CSS
HTMLに入門する

HTMLに入門する

HTMLの基礎知識 文書型宣言 文字エンコーディング テンプレ section 章や節。 見出し＋本文。 article ブログの投稿など、切り出しても独立したコンテンツとして再利用可能なもの。 nav ナビゲーション。サイト内のページリンクの集まり。 aside メインのコンテンツとは関連が薄く、切り離せるコンテンツ。 補足、サイドバー、広告とか。 hgroup 見出しと、付随する小見出し、副題

Frontend
#HTML
WordPressの最小構成のブログテーマを自作する

WordPressの最小構成のブログテーマを自作する

経緯 勉強がてらWordPressのテーマを自作してみたので手順を記載しておく。 WordPressのテーマの自作手順 テーマを自作した際の手順は以下の通り。順番に深堀りしていく。 1. まずHTMLでマークアップ 2. HTMLをテンプレートタグに変換 3. CSSで装飾 4. テーマのインストール ① まずHTMLでマークアップ まずはどんなブログにしたいかの構想を練る。結果、以下のようなブロ

Frontend
#WordPress#Blog#PHP
過去にGatsbyで作成したブログを手直しする

過去にGatsbyで作成したブログを手直しする

Gatsbyについて Gatsbyとは、ReactとGraphQLを使用した静的Webサイトジェネレータ（SSG）のこと。読み方は「ギャッツビー」。プログラミング言語としてはJavaScriptやTypeScriptで記載する。 できあがるのが動的でなく静的なWebサイトということもあり、爆速で画面が表示されるのが大きな特徴とされている。 そして動作上もWebアプリケーションサーバを必要とせず、ホ

Frontend
#Gatsby#React#Blog
VitePressのカスタムテーマを自作する

VitePressのカスタムテーマを自作する

何故やるのか VitePressで技術ブログを作ってみたのだが、デフォルトのテーマがすごくおしゃれでダークテーマとライトテーマを切り替えられたりして便利だけども、やっぱり勉強のためにカスタムテーマを自作してみたくなった。 といっても日本語の情報はネットにほとんど落ちていないので、公式のドキュメントを読んだり試行錯誤したりして頑張ってみる。 要件 - 技術ブログの見た目はできれば出来合いのものではな

Frontend
#Vue#VitePress#Blog
VitePressで作ったブログをVuetifyでカスタマイズする

VitePressで作ったブログをVuetifyでカスタマイズする

前提 - npmのバージョン：10.2.3 - node.jsのバージョン：v20.10.0 - Vue.jsのバージョン：3.3.4 - VitePressのバージョン：v1.0.0-rc.30 - 既にVitePressが構築できていることが前提 - Macを使用 やりたいこと 前回、VitePressで技術ブログを自作したものの、まだまだ足りていない部分があるので追加していく。 まずは、記事

Frontend
#Vue#VitePress
VitePress + GitHub Actions + GitHub Pagesでブログを自作する

VitePress + GitHub Actions + GitHub Pagesでブログを自作する

何故やるのか ITエンジニアとして働いていて、毎日が勉強だと感じている。学んだことは技術メモとして残しておきたいと考えているが、あまりお金をかけずに済む方法はないものか…と考えていた。 他には無料ブログサービス（Blogger、はてなブログ、Qiita、Zenn等）を利用するなどの選択肢があるが、せっかくなので自分にない技術の勉強も兼ねて自作したい。 ブログサービス CMS SSG はてなブログ

Frontend
#Vue#VitePress#Blog
Vue.jsに入門してみる

Vue.jsに入門してみる

前提 - npmのバージョン：10.2.3 - node.jsのバージョン：v20.10.0 - Vue.jsのバージョン：3.3.4 - Macを使用 ① VSCodeの準備 入っていない場合はVSCodeをインストール。 https://code.visualstudio.com/download 拡張機能を入れる - 日本語化 - Vue Language Features (Volar)

Frontend
#Vue