Alphabeter's Website

日本IBMのインターン中に作成 Alphabeter 向け

Webサイトの立て方

1. Node.js をインストールする.

URLに飛んで, 濃い緑色の背景にLTSと書いてあるところからダウンロード.

Windowsの方用参考

Windows 10へNode.jsをインストールする

Macの方用参考

俺が過去に撮った動画がある笑

2. Webサイトのプログラムをダウンロード

gitの使い方を知っている方

git clone https://github.com/TakuKitamura/alphabeter.git # gitの使い方を知っている方はこちら(デスクトップにクローンした想定)

gitを知らない方

gitを知らない方は, こちらをクリックしてダウンロード. そして, ダウンロードしたmaster.zipというファイルをデスクトップ上で開く(解答, 展開) デスクトップにalphabeter-masterというフォルダがあることを確認する!

Windowsの方用参考

ファイルを zip 圧縮および解凍する

Macの方用参考

Macでファイルやフォルダを圧縮する/展開する

3. プログラムを操作できる画面を開く(CUI)

Windows の場合

コマンドプロンプトを起動する 黒い画面が開けたらOK!

Mac の場合

Macで「ターミナル」を開く/終了する

4. プログラムを操作できる画面を操作してWebサイトを立ち上げる

Windows の場合

黒い画面で以下の文字列を入力し, Enterボタンを押す

cd Desktop

黒い画面で以下の文字列を入力し, Enterボタンを押す

cd alphabeter-master

うまく行かなければ, ここを参照するとよいかも 【入門編】Windowsのコマンドプロンプトでディレクトリを移動する方法

Mac の場合

黒い画面で以下の文字列を入力し, Enterボタンを押す

cd ~/Desktop

黒い画面で以下の文字列を入力し, Enterボタンを押す

cd alphabeter-master

Windows, Mac 共通

Windows, Macで cd ほにゃらら の入力をおこなった後行う

黒い画面で以下の文字列を入力し, Enterボタンを押す

npm install

黒い画面で以下の文字列を入力し, Enterボタンを押す

npm run dev

うまくいくと

Listening on: http://192.168.1.233:3000/

というような緑の枠に囲われた記述が黒い画面に見られる. ただし, URLは個々人によって違うのでそれに合わせる. 今回の場合, http://192.168.1.233:3000/ にブウウザでアクセスするとWebサイトが見ることができる!

お疲れさまでした!!

質問は何なりと!