【脱WordPress #2】新年なので15分でいい感じのブログを開設する (Astro)


新年なので、いい感じのブログを開設しようという人向けです。
15 分程度で開設できます。[前回](https://qiita.com/mlab/items/308f0645267607b87629)の記事の続編です。

## 準備するもの

- Cloudfalre のアカウント
- GitHub のアカウント
- Node.js、git の入った PC

## Astro テーマを使う 所要時間：1m

今回使うのは、[Astro Paper](https://github.com/satnaing/astro-paper)というテーマです。
Astro Paper のリポジトリをフォークし、GitHub テンプレートからリポジトリを作成します。

## ローカルに環境構築する 所要時間：3m

以下のコマンドで環境を構築する。

```bash
git clone <作成したリポジトリurl>
npm install
```

開発環境を起動する。

```bash
npm run dev
```

ブラウザから http://localhost:4321/ へアクセスする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552182/bbb1d278-0726-9db5-38a8-02cbc706a41d.png)

## デプロイする　所要時間：5m

CloudFlare へログインし、Workers & Pages 　＞　アプリケーションを作成する　＞　 Pages タブ　へ移動する。
「Git に接続」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552182/62a049ad-d753-c833-2d54-17423deb8324.png)

作成したリポジトリを選択し、「セットアップの開始」をクリックする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552182/92827336-ec2d-1212-87e6-cdb41d2f267e.png)

プリセットのビルド構成を選択し、セットアップ完了。

デプロイ完了したので、デプロイ後のブログへアクセスできる。

LightHouse から SEO に最適化されいることがわかる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3552182/b91fcdc1-b470-4ce5-0181-77a9f597a931.png)

## 初期設定　所要時間：6m

src/config.ts からサイトの設定、言語設定を行う。

```typescript
import type { Site, SocialObjects } from "./types";

export const SITE: Site = {
  website: "https://astropaper-sample.pages.dev/", // ドメイン
  author: "mlab", // 著者名
  desc: "2024年も頑張りたい", //ブログの説明
  title: "techblog",
  ogImage: "astropaper-og.jpg",
  lightAndDarkMode: true,
  postPerPage: 3,
};

export const LOCALE = {
  lang: "ja", // html lang code. Set this empty and default will be "en"
  langTag: ["ja-JP"], // BCP 47 Language Tags. Set this empty [] to use the environment default
} as const;

export const LOGO_IMAGE = {
  enable: false,
  svg: true,
  width: 216,
  height: 46,
};

export const SOCIALS: SocialObjects = [
  {
    name: "Github",
    href: "https://github.com/satnaing/astro-paper", //自分のものに変更する
    linkTitle: ` ${SITE.title} on Github`,
    active: true, // falseにすると表示されない
  },
```

次に src/pages/index.astro を適宜更新する。

```react
<header />
<main id="main-content">
  <section id="hero">
    <h1 class="mr-2">Hello world</h1>
    <a
      target="_blank"
      href="/rss.xml"
      class="rss-link"
      aria-label="rss feed"
      title="RSS Feed"
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="rss-icon">
        <path
          d="M19 20.001C19 11.729 12.271 5 4 5v2c7.168 0 13 5.832 13 13.001h2z"
        ></path>
        <path
          d="M12 20.001h2C14 14.486 9.514 10 4 10v2c4.411 0 8 3.589 8 8.001z"
        ></path>
        <circle cx="6" cy="18" r="2"></circle>
      </svg>
    </a>

    <p>今年よろしくお願いいたします。</p>
  </section>
</main>
```

最後に src/content/blog のマークダウンをすべて削除する。

## 記事の投稿　所要時間：nm

src/content/blog 配下に以下のようなマークダウンを作成し、main ブランチにコミットする。  
コミット後、自動的にデプロイされる。

```markdown
---
author: mlab
pubDatetime: 2022-09-23T15:22:00Z
modDatetime: 2023-12-21T09:12:47.400Z
title: 投稿テスト
slug: adding-new-posts-in-astropaper-theme
featured: true
draft: false
tags:
  - docs
description: 投稿テストです。
---

astro はよい

## Table of contents

## 去年の振り返り

## 今年の目標
```

[今回作成したサイト（期間限定で公開）](https://astropaper-sample.pages.dev/)

## さいごに

最低限の準備はできたと思います。
今回は、簡単な設定だけだったが、いろいろな機能が Astro, Astro Paper に備わっているため、カスタマイズの余地もあります。

また、 React, Vue 等との連携もあるので、カスタマイズの過程で勉強にもなるかと思います。