鉄腕アトムオフィシャルブログ


🌤 アストロブログ起動


Astroブログスターターはあなたの新しいアストロブログに行くために迅速かつ便利な方法を提供しています.このポストでは、我々はそれを起動する方法を実行します.最初に、アクセシビリティとSEOのような特徴のいくつかを見ますが.スターターは、プレーンHTML/JavaScript/CSSの背景から来て誰のためにアクセスできるプレーンCSSを使用します.一方、簡単にバニラエッセンス(後述する問題を禁止)、Sass、Tailwindや他のCSSのツールを追加することができます.スターターもいくつかのダミーコンテンツがありますこれにより、ファイルをどこに置いてどのようにあなたのページを生成するかを理解することが容易になります.

🚀 アバウト


アストロは、サイトのビルダー、高速な静的サイトを構築することです.静的サイトは、すべての訪問者が同じコンテンツを見てブログに最適です.これは、ユーザーがログインし、カスタマイズされたフィードを参照してくださいInstagramのようなアプリと対照的です:彼らの信者のコンテンツと独自のDMS.静的サイトは一般的に高速です.なぜなら、コンテンツは誰にとっても同じであるので、ホストはそれをキャッシュすることができ、訪問者(エッジ)の近くのサーバから配送することができます.あなたがリフレッシュするか、ブログ内容に加えるならば、ホストはキャッシュを更新するだけです.
アストロは、プレーンHTMLやCSSだけでなく、他のライブラリとフレームワークの数の反応、Svelteを使用してコードをすることができます.アストロの2つの主要な特徴は島構造と共に部分的な水和である.デフォルトでは開発者として、コンポーネントを対話的にする必要がある場合は、JavaScriptを有効にします.JavaScriptの読み込み時に追加のコントロールを得る.これは、コンポーネントが表示されている場合のみ、またはモバイルデバイスの場合に限り、すぐにすることができます.これは一部のサイトの速度の利点を提供する可能性があります部分的な水和です.島のアーキテクチャは、すべての独立しているページ上のコンポーネントについてのすべてであり、さらにSvelteや他の反応のいくつかのコンポーネントを書くことができます.それは、ちょうどこれらの鉄腕機能の表面をひっくり返しています.あなたが望むならばlearn more, see the article on how you can get started with Astro .

🧑🏽‍🦼 クイックスタート


すぐに移動するには、repoをクローンして、これらのいくつかの行を端末で起動します.
git clone https://github.com/rodneylab/astro-blog-markdown
cd astro-blog-markdown
pnpm install
cp .env.EXAMPLE .env
pnpm run dev
あなたが必要になります node お使いのマシンですでにセットアップ.ここではpnpm しかし、コマンドを切り替えることもできますnpm ものnpm ノードが付属しています).あなたがコンピュータに着くまで待つことができないならば、あなたはそうすることができますsee the code in Stackblitz too .

🧐 どのような内部ですか?


.
├── README.md
├── astro.config.mjs
├── package.json
├── public
│   ├── favicon.svg
│   └── fonts
├── src
│   ├── components
│   │   ├── BlogPostSummary.svelte
│   │   ├── BlogRoll.svelte
│   │   ├── Footer.svelte
│   │   ├── Header.svelte
│   │   ├── Icons
│   │   └── SEO
│   │       └── index.astro
│   ├── config
│   │   └── website.js
│   ├── content
│   │   └── posts
│   │       ├── best-medium-format-camera-for-starting-out
│   │       ├── folding-camera
│   │       └── twin-lens-reflex-camera
│   ├── layouts
│   │   └── BaseLayout.astro
│   ├── pages
│   │   ├── [slug].astro
│   │   ├── contact.astro
│   │   └── index.astro
│   ├── styles
│   │   ├── normalise.css
│   │   ├── styles.css
│   │   └── variables.css
└── tsconfig.json

アストロ.設定。MJS


これは主なアストロ設定ファイルです.任意の追加の統合(反応、固体など)をここでだけでなく、任意の発言とRehype plugins あなたが追加することを決定.

公共


パブリックフォルダは処理を必要としないファイル用です.例はfaviconと自己ホストフォントです.ファイルとしてpublic/favicon.svg の最終サイトで利用可能になりますhttps://example.com/favicon.svg .

src


インポートとプロセスに必要なリソースを確保するsrc フォルダ.例はCSSファイルとマークダウンソースです.インsrc/components , 我々は、反応、Svelteとアストロコンポーネントを置くことができます.

src / config / webサイト。js


彼らはコンタクトページ、フッター、SEOや他の場所で使用することができますので、このファイルは、利便性のために、単一の場所に環境変数をインポートするために用意されています.必ず編集する.env そして、あなたのニーズに合うこのファイル.

src / content / post


ここでは、我々のブログ柱内容を持ちます.我々は、ちょうど作成する必要がありますindex.md ファイルsrc/content/posts/new-post-slug 新しい投稿を自動的にMarkdownから生成するhttps://example.com/new-post-slug .

src / layoutとsrc / pages


ここのファイルはサイトのページを作成するために使用されます.BaseLayout.astro HTMLヘッダが含まれます.例としてlang アクセシビリティの属性が含まれます.中src/pages , [slug].astro 生のMarkdownファイルを取って、実際のページにそれらを変えるテンプレートです.他のどんなページのためにでも、このフォルダでMarkdownまたはAstroファイルを作成してください.例として、作成することによって、約ページを追加することができますsrc/pages/about.astro または使用ページsrc/pages/uses.md .

TSconfigJSON


使用するソースコードにコンポーネントをインポートするときには、次のようにしてください$components import文ではなく、相対パス../../components . これは、tsconfig.json . ちょっとこのファイルのパターンに従って、あなた自身の便利な別名を加えてください.

🖋 アストロブログ柱のもう少し


---
postTitle: 'Folding Camera'
focusKeyphrase: 'folding camera best kept secret'
datePublished: '2022-03-05T15:38:49.000+0100'
lastUpdated: '2022-03-14T10:17:52.000+0100'
seoMetaDescription: 'Folding cameras have the benefits of high resolution negatives but are so much more compact and often have amazing optics'
featuredImage: 'folding-camera.jpg'
featuredImageAlt: 'Photograph of a classic folding camera'
ogImage: 'folding-camera-open-graph.jpg'
ogSquareImage: 'folding-camera-open-graph-square.jpg'
twitterImage: 'folding-camera-twitter.jpg'
categories: ''
tags: ''
draft: false
---

## What is a Folding Camera?

Folding cameras are a well kept secret. Typically the optics are amazing, in 
上記は、AstroブログスターターからのダミーMarkdownブログ記事のうちの1つからの抜粋です.最初の部分115 ) はフロントエンドと呼ばれます.これはポストメタで、ポストに関するデータ以外に何もありません.新しい記事にこれを記入し、それは検索エンジン最適化(SEO)スターター機能を介してフィードされます.以下のスクリーンショットは、このページのブラウザ開発者のインスペクタを示します.私たちは<title> , <meta name="description"> and <link rel="canonical"> タグ.これらはすべて無料で来る;スターターはフロントエンドからそれらを生成します.

タイトルと記述(一般的にメタ記述と呼ばれる)は検索エンジンによって拾われるでしょう.あなたのサイトが結果として表示されるとき、彼らはしばしば検索結果ページに表示されます.SEOには標準的なリンクも重要です.あなたが他のサイトであなたの全体のポストを共有するならば、Googleは複製内容としてそれを拾うかもしれません、そして、両方のランキングは苦しむかもしれません.標準的なリンクを含む主要なソースであるGoogleに指示します.つの結果が互いを「共食い」しないこの方法.
上にドラフト機能があります.セットdraft: true 正面とポストでは、建物から除外されます.これは、それを発表することなく、今後のコンテンツをスケッチすることができます.

💄 スタイリング


我々はスターターをより広い聴衆にアクセスできるようにスタイリングのためのプレーンCSSを使用します.これはSass、Tailwindまたはスイートあなたの好みに別のフレームワークのためにこれを交換するのは簡単です.アストロcurrently has an issue affecting using Vanilla Extract with Astro それで、エンジニアがそれを解決するまで、それをためしてください.
私たちは自己参照フォントをsrc/styles/styles.css . フォントファイル自体はpublic/fonts フォルダ.フォントを変更するときは、右のマークアップとgoogle-webfonts-helper . あなたはlearn more about the process and font optimisation for Astro in this video .
/* lora-regular - latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('/fonts/lora-v23-latin-regular.woff2') format('woff2'),
    url('/fonts/lora-v23-latin-regular.woff') format('woff');
}

🙌🏽 アストロランディングページ連絡フォーム




この記事では、Astro Blog Markdownスターターを紹介しました.
  • まず、アストロブログスターターを設定する方法.
  • ドラフトのポストだけでなく、SEOのメタを含むスターター機能の一部.
  • スターターで自己ホストフォントをカスタマイズする方法.
  • The Astro Markdown blog starter is available to clone from GitHub . また、try it on Stackblitz .
    私はこの記事が有用であることを発見し、どのようにあなた自身のプロジェクトのスターターと同様の改善を聞くことに熱心です.

    🏁 アストロブログMarkdownスターター:概要


    🙏🏽 ブログ一覧にもどる


    そのポストは役に立ちましたか.代わりに別のトピックの記事を見たいですか?新しい投稿のアイデアと連絡を取る.また、もしあなたが私のライティングスタイルが気に入ったら、あなたの会社のサイトにいくつかの記事を書くことができます.記事を読む上で、さらに以下のタッチを取得する方法を見つける.あなたがこの1つに類似したポストを支持したいならば、数ドル、ユーロまたはポンドを準備することができますconsider supporting me through Buy me a Coffee .
    最後に、あなたのソーシャルメディアアカウントの投稿を共有すること自由に感じているすべてのあなたの信者は、それが役に立つでしょう.だけでなく、以下のコメントを残して、あなたはTwitterやaskRodney on Telegram . また、further ways to get in touch with Rodney Lab . 定期的に投稿Astro だけでなくSvelteKit . Also subscribe to the newsletter to keep up-to-date 我々の最新プロジェクトで.