オタク、気軽にホームページを生やそう

1.3K Views

September 30, 24

スライド概要

簡単なフロントエンドのススメ

profile-image

アニメ、ラノベ、きららが好きです 競技プログラミング、電子工作、フロントエンド、バックエンド、BAAS、データエンジニアリングに興味があります

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

オタク、 気軽にホームページを作ろう

2.

突然ですが何か物を使えることに ステータスを感じることってありますよね?

3.

一家族に一つのマイホーム

4.

一人一台のマイカー

5.

1オタク2ベッド ※おでかけ用語です

6.

そんなことを思っていたところ、こんなツイートを見かけました 確かに!!!!!!!!!!

7.

1オタク1ホームページ

8.

というわけでみんな気軽に ホームページを作ろう

9.

でもお高いんでしょう?(サーバー代金とか) しかもスキルとかもかなり必要そう... バックエンド サーバー デザイン フロントエンド

10.

サーバーにお金をかけたくない • サーバー • バックエンド • フロントエンド • デザイン

11.

個人ホームページなら無料で作成可能 • HtmlとCSSを書いてデプロイコマンドを打つだけ! • Firebaseとかならgithubと連携して初期設定を全部やってくれ ます

12.

ある程度機能を持たせたい • サーバー • バックエンド • フロントエンド • デザイン

13.

Baasを使おう • 主にできること • データベースの処理 • 認証 • サーバーレス関数の使用

14.

コードをあまり書きたくない • サーバー • バックエンド • フロントエンド • デザイン

15.

CSSフレームワークを使おう • 完成されたwebページを構成する部品を簡単に呼び出し • こんなのが簡単に作れる • 有名なのはbootstrap • 最近はtailwindCSSが流行っているとか

16.

Markdownで書きたい • サーバー • バックエンド • フロントエンド • デザイン

17.

SGGやheadlessCMSを使おう headlessCMS • SGG(静的サイトジェネレータ) • ウェブサイトを作るためのフレームワーク • APIからMarkdownを呼び出す • 有名なもの • Nextjs • Hugo • Nuxtjs • Astro 呼び出し • headlessCMS • ここにMarkdownファイルを置いておく • 日本ではmicroCMSが有名 サイト 詳しくはJAMSTACK(JavaScript 、API、Markup)で調べてみてくださ い

18.

HTML、CSS書きたくない デザインがわからない • サーバー • バックエンド • フロントエンド • デザイン

19.

SSGのThemeを使おう • SGGにはTheme(あらかじめ洗練されたデザインのテンプレ)が あります • 個人ページ用や自作ブログまで揃っています Hugo Themes Astro Themes

20.

ホームページ、 意外と簡単に生やせます! 私はfirebase+bootstrap5で作成してます (流行の技術ではないけどすぐにできました) もっと便利にやる方法があるかもなので ほかにも方法を探してみてください!