Skip to content

kght6123/kght6123.page

Repository files navigation

kght6123.page

nuxt.jsを使って Full-AMP のブログがマークダウンで作れるプロジェクト(コンテンツは個人ブログの内容が入ってます)

Getting Started

Please install volta!!!

https://volta.sh

Initial Setup

# firebaseにログイン
npm run login # 表示されたURLをブラウザで開いて、FirebaseのプロジェクトにアクセスできるGoogleアカウントでログインする
# 開発モードでローカル起動
npm run dev
# Firebaseでローカル起動
npm run serve
# Firebaseにデプロイ
npm run deploy

Road Map

  • 画像の差し替えと Hosting へ追加
  • アイキャッチ画像の表示
  • 全体の meta タグの見直しとページ別の設定
  • プロフィールページの作成
  • PC 向けにレイアウト調整
  • 過去記事(Markdown)を移行
  • ライトモードに対応(現在はダークモード)
  • ストラクチャードデータに対応 https://developers.google.com/search/docs/data-types/article
  • Google アナリティクスを設定
  • Ads を設定
  • ソースコードの整理と見直し
  • 全文検索をできるようにする??(amp-script?)

注意

2021/8/12 現在、 "@nuxtjs/amp": "^0.3.0", の upgrade は禁止、 tailwindcss が効かなくなる

WordPress から移行するメモ

https://github.com/lonekorean/wordpress-export-to-markdown

npx wordpress-export-to-markdown --input "slerse.WordPress.2022-05-26.xml" --output "slerse-md" --post-folders false --include-other-types true

画像を置換する

![](images/(.+.jpg)|(.+.png))

content/posts/過去ブログ

Project 構築時のメモ

~/develop % yarn create nuxt-app kght6123.page
yarn create v1.19.2
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-nuxt-app

create-nuxt-app v3.2.0
✨  Generating Nuxt.js project in kght6123.page
? Project name: kght6123.page
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Tailwind CSS
? Nuxt.js modules: Progressive Web App (PWA), Content
? Linting tools: Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)

「Static/JAMStack hosting」とは? https://github.com/nuxt/create-nuxt-app

「Nuxt AMP Module」とは? https://github.com/nuxt-community/amp-module

yarn add @nuxtjs/amp
# nuxt.config.jsのmoduleに追加する
yarn dev # 動作確認
yarn generate # 静的ファイル作成

firebase に新しいプロジェクトを作成(kght6123.page)

yarn global add firebase-tools
echo "export PATH=\"\$PATH:\`yarn global bin\`\"" >> ~/.zshrc
source ~/.zshrc
firebase login # 表示されたURLをブラウザで開いて、FirebaseのプロジェクトにアクセスできるGoogleアカウントでログインする
firebase init
# Hostingを選択する
# Firebaseプロジェクトを選択する(あらかじめ作っておいたので、既存のFirebaseぷろじぇくとから選ぶ「 Use an existing project」をせんたく
#
~/develop/kght6123.page % firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /home/kght6123/develop/kght6123.page

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confi
rm your choices. Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: kght6123-page (kght6123-page)
i  Using project kght6123-page (kght6123-page)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote dist/404.html
? File dist/index.html already exists. Overwrite? No
i  Skipping write of dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!
# デプロイする!
firebase deploy
Hosting URL: https://kght6123-page.web.app
# さいごに表示されるHosting URLにブラウザでアクセス!

Google Domains で購入したドメインでアクセスできるようにする

Firebase Console の Hosting を開いて、カスタムドメインを追加をクリック

購入したドメイン(kght6123.page)を入力する、「次へ」をクリック

「クイックセットアップ」になっていることを確認して「終了」

Google Domains を表示して、ひとつの A レコードに IP アドレス(2つ)を追加する

(カスタムドメインのステータスが「設定が必要です」になっているので、「表示」をクリックすると IP アドレスが表示される)

AMP Validator

https://validator.amp.dev/#url=https%3A%2F%2Fkght6123.page%2F

AMP Documentation

https://amp.dev/documentation/?format=websites

AMP ads

<amp-ad width="300" height="250"
  type="adsense"
  data-ad-client="ca-pub-????????"
  data-ad-slot="???????">
</amp-ad>

AMP Access

ログインとかサブスクリプション型のコンテンツとか、支払いとかできるみたい https://github.com/ampproject/amphtml/blob/master/extensions/amp-access/amp-access.md

AMP Form

https://amp.dev/documentation/components/amp-form/

amp-google-document-embed

https://amp.dev/documentation/components/amp-google-document-embed/

amp-layout

https://amp.dev/documentation/components/amp-layout/

amp-live-list

https://amp.dev/documentation/components/amp-live-list/

amp-next-page

https://amp.dev/documentation/components/amp-next-page/

amp-pan-zoom

https://amp.dev/documentation/components/amp-pan-zoom/

amp-recaptcha-input

https://amp.dev/documentation/components/amp-recaptcha-input