【AWS Amplify Studio】コードを書かずにサイト作ってみた【技術系VTuber】

https://www.youtube.com/watch?v=YGHdEllxpgU
のおまけ記事です。

App.cssに追加する内容

.navbar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index:100;
}

App.jsの最終的な内容

import logo from './logo.svg';
import './App.css';
import Amplify from 'aws-amplify';
import "@aws-amplify/ui-react/styles.css";
import { 
  ItemCardCollection,NavBar, HeroLayout2, NewsCardCollection, ContactUs
} from './ui-components';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

function App() {
  return (
    <div className="App">
      <div className='navbar'>
       <NavBar width={'100vw'}/>
      </div>
     <section id="About">
     <h1>About</h1>
     <HeroLayout2  width={'100vw'}/>
     </section>
      <section id="Link">
      <h1>Link</h1>
     <ItemCardCollection width={'100vw'}/>
     </section>
      <section id="News">
      <h1>News</h1>
     <NewsCardCollection width={'100vw'}/>
     </section>
     <section id="Contact">
     <h1>Contact Us</h1>
     <ContactUs width={'100vw'}/>
     </section>
    </div>
  );
}

export default App;

打ち込んだコマンド一覧

node –v
npm install -g @aws-amplify/cli
amplify configure
npx create-react-app <name-of-app>
cd <name-of-app>
amplify init
npm install aws-amplify @aws-amplify/ui-react
amplify pull
npm start
amplify hosting add
amplify publish