Azure Static Web AppsでVuePressサイトをつくーる

はじめに

このチュートリアルやっていきます
https://docs.microsoft.com/ja-jp/azure/static-web-apps/publish-vuepress

開発環境

• Node.js
• GitHub
• Azure
• Windows 10

導入

1．vuepress-static-appフォルダの作成

2．README.mdの作成

README.md

# Hello From VuePress

3．node.jsのコマンドプロンプトを起動

cd vuepress-static-app
npm init -y
npm install --save-dev vuepress

4．package.jsonを編集

package.json

{
  "name": "vuepress-static-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "vuepress build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^1.8.2"
  }
}

5．.gitignoreを作成

.gitignore

node_modules

6．コミット

 git init
 git add .
 git commit -m "initial commit"

7．https://github.com/new から新しいgitレポジトリを作成（名前はvuepress-static-app, Private、ここでREADMEは作成しない）

8．push

git remote add origin https://github.com/SatoshiRobatoFujimoto/vuepress-static-app.git
git branch -M main
git push -u origin main

9．AzureポータルでStatic Web Appを作成

10．確認および作成

11．GitHub アクションが無事に成功したらURLにアクセス

きたこれ

12．ローカルで開発するためにpackage.jsonを編集

{
  "name": "vuepress-static-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^1.8.2"
  }
}

13．dev環境を起動し、http://localhost:8080/ にアクセスしてみる

npm run dev

14．タイトルとナビゲーションを作成する。.vuepressフォルダを作成し、下記のconfig.jsを作成する。
https://github.com/reverentgeek/vuepress-authentication-tutorial

config.js

module.exports = {
  title: "My Documentation Site",
  description: "This is going to be awesome!",
  themeConfig: {
    nav: [
      { text: "Home", link: "/" },
      { text: "About", link: "/about/" }
    ]
  }
};