nemanjam.github.io
1.0.0
これは、私のコーディングブログnemanjamitic.comのリポジトリです。無料でオープンソース、コードを再利用し、独自の開発者ブログのカスタマイズをしてください。ブログ投稿（将来）には帰属が必要です。
| 方法 | URL |
|---|---|
| nginx | https://nemanjamitic.com |
| githubページ | https://nemanjam.github.io |
| Docker | https://nmc-docker.arm1.nemanjamitic.com |
https://plausible.arm1.nemanjamitic.com/nemanjamitic.com
2023年の終わりまでに、私は通常の毎日のコーディング作業から丸みを帯びたブログ記事に洞察をキャプチャすることを考え始めたので、きれいでミニマルでよく構造化されたブログテンプレートを探し始めました。私は調査を開始し、Jekyll、Hugo、Next.jsを考慮しましたが、最終的にはAstroが静的で個人的なWebサイトの最良のツールであることに気付きました。
それから、私はそれを再利用し、スタイルをカスタマイズすることを意図して見つけることができるすべてのオープンソースのアストロの例を調査してレビューしましたが、それらのどれもコード構造と望ましい機能に対する私の好みを満たしていなかったので、それらすべてから最高の部分をコンパイルすることにしました私自身の好みの構造とコーディングスタイル。クレジットセクションBellowを参照してください。
私はこのウェブサイトを今後何年も使用するつもりなので、余分な努力が十分に費やされると考えています。さらに、その過程でAstroで実践的な経験を積むのに役立ちました。
開発では、デフォルトでドラフト投稿を見ることができます。
# .env.development
# this var is always without trailing slash '/'
SITE_URL=http://localhost:3000 # .env.production
SITE_URL=https://nemanjamitic.com
# set to true to preview draft posts in production
PREVIEW_MODE= # install packages
yarn install
# copy and set environment variables
cp .env.development.example .env.development
# run development server and visit http://localhost:3000
yarn dev
# delete node_modules and yarn.lock
yarn clean # copy and set environment variables
cp .env.production.example .env.production
# build website
yarn build
# run website and visit http://localhost:3000
yarn startローカルおよびGitHubアクションで利用可能な3つの展開方法があります。展開されたWebサイトのフッターで最新のコミット情報をチェックすることにより、現在展開されているバージョンをいつでも簡単に識別できます。
GitHubアクションのワークフローについては、GitHubリポジトリ設定にこれらの秘密を設定する必要があります。
# Dockerhub user and pass
DOCKER_PASSWORD
DOCKER_USERNAME
# remote server ssh credentials
REMOTE_HOST
REMOTE_KEY_ED25519
REMOTE_PORT
REMOTE_USERNAMEローカルの展開の場合、リモートサーバーのSSHエイリアスを、ローカルSSH構成ファイルなど、次のように設定する必要があります。
# /home/username/.ssh/config
# arm1 ssh alias for remote server
Host arm1 123.123.13.123
HostName 123.123.13.123
IdentityFile ~ /.ssh/my-servers/arm1-ssh-private-key.key
User your-userすべてのnginxデプロイメントは、Webサイトの構築と、 /distフォルダーからコンパイルされたファイルをリモートサーバー上のnginx Webルートフォルダーにコピーすることになります。
# package.json
# set your SITE_URL
" build:nginx " : " SITE_URL='https://nemanjamitic.com' astro build " ,
# build the app
yarn build:nginx
# configure ssh for your own "arm1" remote server in /home/username/.ssh/config
# copy compiled app from local /dist folder to Nginx web root on the remote server
" deploy:nginx " : " bash scripts/deploy-nginx.sh '~/traefik-proxy/apps/nmc-nginx-with-volume/website' arm1 " ,
# run deploy
yarn deploy:nginx次のワークフローのいずれかをトリガーするだけです。
# .github/workflows
bash__deploy-nginx.yml
default__deploy-nginx.ymlGitHubアクションでのみ利用できます。次のワークフローのいずれかをトリガーするだけです。
# .github/workflows
# uses official Astro action
gh-pages__deploy-astro.yml
# uses manual build, useful for Astro in monorepos
gh-pages__deploy-manual.ymllinux/arm64 Docker画像をローカルに構築するには、x86コンピューターがある場合はQEMUとBuildXをローカルにインストールする必要があります。このチュートリアルを参照してください。
Docker BuildXとQEMUを使用したマルチアーチ画像
Ubuntuにいる場合は、おそらくこれも実行する必要があります。
# Register QEMU for Docker
docker run --rm --privileged multiarch/qemu-user-static --reset -p yesその後、マルチプラットフォーム画像をローカルに構築およびプッシュできます。
# package.json
# open terminal and login with your Dockerhub account, both locally and on remote server
docker login my-user my-pass
# replace "nemanjamitic/nemanjam.github.io" with your image name
# set ARG_SITE_URL_ARM64 to your production url
# set correct architecture for your production server --platform linux/arm64 or linux/amd64
" docker:build:push:arm " : " docker buildx build -f ./docker/Dockerfile -t nemanjamitic/nemanjam.github.io --build-arg ARG_SITE_URL_ARM64='https://nmc-docker.arm1.nemanjamitic.com' --platform linux/arm64 --progress=plain --push . " ,
# build and push Docker image, replace "arm" with your architecture
yarn docker:build:push:arm
# replace "~/traefik-proxy/apps/nmc-docker" with your path to docker-compose.yml
# replace "nemanjamitic/nemanjam.github.io" with your image name
" deploy:docker " : " bash scripts/deploy-docker.sh arm1 '~/traefik-proxy/apps/nmc-docker' nemanjamitic/nemanjam.github.io " ,
# pull and run latest image on your production server
yarn deploy:dockerこれらのワークフローをトリガーするだけです。
# .github/workflows
# build and push Docker image
default__build-push-docker.yml
# pull and run latest Docker image
# trigger one of the following:
bash__deploy-docker.yml
default__deploy-docker.ymlしっかりとした、明確で、包括的で、理解しやすく、保守可能で、カスタマイズ可能なコード構造に専念しています。この背後にある意図は、物事を分離し、明確で、読みやすく、明白に保ち、複雑さと騒音を減らすことです。
以下は、機能とその実装のより詳細な概要です。
この静的に生成された高性能の最新のアストロWebサイト。 .mdxファイルを備えた投稿およびプロジェクトコンテンツコレクションがあり、アプリのメインモデルとして機能します。タグ（1：n）とカテゴリ（1：1）の両方が、投稿間の関係に対してサポートされています。ビュートランジションは有効になり、投稿はすべてのページでアニメーション化されますtransition:name画像はアストロが最適化されており、すべての画像サイズは、一貫性とオーバーヘッドを減らすための再利用可能な定数プリセットとして抽出されます。ポストリストとプロジェクトリストページの両方でページネーションを利用できます。プレビューモードは、 astro preview ScriptまたはPREVIEW_MODE=true in .env.productionを設定して使用できます。 RSSおよびJSONフィードは、静的APIエンドポイントとして実装されます。クライアントサイドのインタラクティブ性を必要とするすべてのコンポーネントに反応統合があります。
統合とプラグインの構成は、 astro.config.ts清潔で読み取り可能に保つために抽出されます。すべてのWebサイトルートは、ファイルパスで同じ単一の定数オブジェクトに集中します。レイヤーは分離され、階層的に編成され、あらゆるタイプのページの中心レイアウトと全幅のレイアウトの両方をサポートします： .mdxページ、2。コレクションページ - 投稿とプロジェクト、および3。リストページ - ページネーション付きのインデックス。メインアプリケーションモデルのクエリ-PostおよびProjectコンテンツコレクションは、クリーンで読み取り可能なgetStaticPaths()のために/modulesフォルダーに抽出されます。
明るい/暗い追い風モードとセマンティックカラーの色のテーマの両方にサポートがあります。テーマは、2つのレベルで編成されたCSS変数として、個別のファイルに保存されます。レスポンシブスタイリングは、間隔とタイポグラフィの両方でサポートされています。すべてのCSSコードは、3つの追い風層（ベース/コンポーネント/ユーティリティ）に編成されます。マークダウンコンテンツ（ tailwindcss/typographyプラグインとproseクラス）とカスタムコンポーネントの間でタイポグラフィスタイルを同期させるためのワークアウトシステムがあります。タイポグラフィスタイルはカスタマイズされ、カスタムmy-proseクラスに抽象化されています。コンポーネントスタイルのほとんどは、CSSファイルに抽出され、バリアントにclass-variance-authorityを使用します。動的クラス名はtailwind-mergeおよびclsx使用して実装されます。
メタデータは一元化されて入力されているか、すべてのタイプのページ（ .mdx 、コレクション、リスト）がフォールバックとしてデフォルトであります。各ページに適用されるSatoriとHTMLテンプレートを使用して、ヒーローイメージとランダムな色勾配を使用してオープングラフ画像を生成するためのAPIエンドポイントがあります。サイトマップは、公式統合を使用してビルドタイムで生成されます。カスタムスタイルの404ページが提供されています。
提供されたデフォルトを備えた最適化（ /src ）と非最適化（ /public ）画像の両方に組織化された資産構造があります。アイコンには、マテリアルデザイン（ mdi ）アイコンとローカルSVGの両方をサポートするastro-iconパッケージが使用されます。投稿をフィルタリングするには、次のページを塗ったページがあります。タグ - /tags 、カテゴリ - /categories 、両方で - /explore - （アーカイブ）ページ。 Navbarには、アレイとして保存されているアイテムがあり、現在のルートのアクティブアイテムのスタイルがあります。 Markdownコンテンツのサブヘッダーの階層を読み取るブログ投稿には、目次のコンポーネントがあります。 .mdxページを備えた設計システムは/designパスで利用でき、すべての視覚コンポーネントの明確なプレビューとデバッグを提供します。投稿を共有する共有投稿は、Twitter、Facebook、Reddit、LinkedIn、Hackernewsをサポートしています。
コメントはGiscusで行われ、Dark Modeはメインテーマと同期されています。ツイート、YouTube、Vimeoビデオ、およびオープングラフリンクの埋め込みは、 astro-embedで行われます。組み込みコードの構文強調表示は、 expressive-code統合を使用して実装されます。
すべてのコードはTypeScriptで記述され、アプリ全体のタイプは別のフォルダーにあります。ランタイムの例外を防ぐために、適切なデフォルトを備えた投稿、プロジェクト、および構成モデル用の集中ZODスキーマがあります。構成変数と環境変数の両方が入力され、ビルドタイムが検証されます。計算された読み取り時間などの追加のフィールドを含めることができるポストおよびプロジェクトコレクションモデルには抽象化されたタイプがあります。
tsconfig.jsonクリーンおよび整理された輸入のためのパスエイリアスを定義しています。ソートされたインポートを使用してきれいな状態を使用してコードがフォーマットされ、ESLINTは構文チェックに使用されます。
現在展開されているバージョンを簡単に識別するために、最新のGitコミット情報がWebサイトフッターに含まれています。生産展開には3つの方法があります。1。githubページ、2。nginxおよび3。docker画像とそれらはすべて、Githubアクションとローカルの両方でサポートされています。 NginxのコピーとDocker画像の構築をコピーするアセットは、Bashスクリプトに抽象化され、GitHubアクションとローカル展開の両方で再利用され、ローカルデバッグが容易になります。 linux/amd64とlinux/arm64 Docker画像の両方を構築するためのサポートがあります。
astro:env -done.mdxレンダリングします最も重要なプロジェクト、例、デモ、私が再利用してレビューしたリソース：
他のプロジェクト、例、デモ、私が再利用してレビューしたリソース：
