インターネット老人おぢさん

【 #JAMStack 】お金がかからなくてもサイトを公開したい【 #勉強会 】

最終更新:2021年02月21日 12時07分22秒(初公開:2021年02月21日 12時07分22秒

【 #JAMStack 】お金がかからなくてもサイトを公開したい【 #勉強会 】

勉強会に参加していますが、タイトルの内容だったので既に私やってました…というオチでした。
何度かチラリと言いましたが、このサイト自体もJAMStack構成で作っていますので今更学ぶ事はなかったなぁ、という所感です。

とはいえ、この勉強会はコミュニティー内部のクローズド勉強会なので情報は公開されません。
登壇スピーカー講師の説明を、社内エンジニア(正社員講師)が受講生向けに再翻訳して解説するという流れですので、ガチエンジニアにとっては聞きたい事も聞けないのはお察しですね。
とはいえ、プログラミングスクールなどではじめてWebアプリケーションを作ろうと思っている人が爆速サイト(重要ではない)を無料(超重要)で開発できるというものです。

NuxtJSを使う

ReactJS系列だとNuxtJSかNextJSかのどちらかを使われる事が多いですよね。
ちなみに本サイトはGatsbyJSで作ってます。PWAをサクッとやりたかった……!

環境

  • Node.js: npmコマンドを実行するため。ここでNuxtJSをインストールします。
  • Vetur(VSCode): シンタックスハイライトなどVueを書くのが便利になる色々

打ち込むコマンド

git clone (当該リポジトリ)
cd (当該ディレクトリ)
npm install
npm run dev  # デバッグ: localhost:3000
npm run generate  # distにファイルが作成される

Gatsbyではpublic ディレクトリが作成されます。

作るだけならこれで完結できます。
公開はここで作成したファイルをアップロードすれば良いです。
Github ActionsなどCIツールを使ってビルド・デプロイを自動化するとデザインの仕方もありますがこのサイトみたいなものが出来ます。

プログラミング初心者の勉強会なので敢えてエンジニアリングより大事なものはサイトの作りよりデザインですよ、と念押ししておきます。

© 2020-2021のむらやごろう(@elder_uncle)

当サイトの全てのコンテンツを転載・無断での引用もお断りしています。