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

2K Views

September 30, 24

スライド概要

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

profile-image

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

シェア

またはPlayer版

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

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

一人一台のマイカー

5.

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

6.

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

7.

1オタク1ホームページ

8.

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

9.

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

10.

大丈夫!こんなお悩みなら解決できます • サーバーにお金をかけたくない • ある程度機能を持たせたい • コードをあまり書きたくない • Markdownで書きたい • HTML、CSS書きたくない デザインがわからない

11.

サーバーにお金をかけたくない • サーバー • バックエンド • フロントエンド • デザイン ※赤文字は対応箇所です

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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