サイトをつくってみた

2021/4月に行われた新入生歓迎LTの発表資料です

Transcript

1. s1280136 松本響輝
2. ・人物紹介 ・作ったサイトの紹介 ・全体像 ・作った手順の説明
3. 拓実 よろしくたのむよ
4. いいんじゃな いかな
5. おーすごい
6. よくできているな
7. HTMLファイル
9. ・必要な分ページを作る 例: `/` → `/aiueo` ・マークダウンファイルを読み込んで表示する aaa.mdとかbbb.mdを読み込む ・マークダウンファイルから他のファイルを読み込む ライブラリを紹介するのでc++のファイルを乗っけたかった ・いい感じなデザインにする
10. ・2020の年末に行ったZli の開発合宿で vueに触れたので使ってみようと思った 1. npm (パッケージ管理ツール)をインストールする 2. npmでその他色々をインストールする Vue.js（ヴュー・ジェイエス）またはVueは、Webアプリケーション におけるユーザーインターフェイスを構築するための、オープンソー スのJavaScriptフレームワークである。他のJavaScriptライブラリを 使用するプロジェクトへの導入において、容易になるように設計され ている。 なんでVueを使おうと 思ったんだい？
11. ワイヤーフレームと呼ばれる雛形が すでに用意されている 誰でもすぐ簡単にホームページ が作れそうだね
12. マークダウンを一つのファイルか らURLに応じて呼び出せない 理想 /power /combination
14. ページの遷移 vue-routerを作る 内部でvue-routerが作られてる vuetify 使える 使える 初期設定 routerの設定とかが多い 自動的に設定されている サイトの生成 npm run buildでできる npm run generateでできる
15. ・必要な分のページも作れた！ pages/hoge.vue /hoge -> hoge.vueが表示される！ ・URLに対応してマークダウンファイルも呼び出せそう！ pages/_id.vue /aiueo -> _id.vueの中で`aiueo`っていうURLが使える aiueo.mdを呼び出せばいい あとはC++ファイルを呼び出せば・・・
16. URLに応じてマークダウンファイルを読 み込めない 読み込むのにwebpackのraw-loaderというのを使っていた
17. 3.import文では変数を使えなくてさようなら… 2. import文ではシングルクオートかダブルクオートしか使えない 1. raw-loaderではimport文を使う必要がある
19. /contentディレクトリに書き込むことで以下の形式のファイルを取得できる ・Markdown ・JSON ・YAML ・XML ・CSV _slug.vue 右のようなコードでマークダウンファイルを 呼び出せる→ あとはc++ファイルを呼び出せば…
20. 豊富な拡張機能！ remark-◦◦をnpm install するとmarkdownで色んな拡張機能が使える！ 今回はremark-code-import-replaceというのを使いました。 素晴らしい！
21. HTMLファイル $ npm run generate HTMLを生成するコマンド (/dist/にHTMLファイルなどが自動で作られる)
22. HTMLファイル 1.GitHubでリポジトリを作っておく 2.push-dirをインストールする 3.push-dirの設定をする 4.コマンド一つで公開!
23. 1.GitHubでリポジトリを作っておく GitHubに登録して を押してリポジトリを作る
24. 1.GitHubでリポジトリを作っておく cloneする 作業中… addして commitして pushする pullする
25. 2.push-dirをインストールする $ npm install push-dir push-dirをインストールするコマンド こんな簡単にできるのか
26. 3.push-dirの設定をする ・ベースパスの設定をする 「/」→「/リポジトリ名/」 ・アセット(アイコンの画像とか)のパスの設定をする GitHub PagesではURLが「ユーザ名.github.io/リポジトリ名/」となる。 「ユーザ名.github.io/」がNuxt.jsでの「/」に対応しているので、Nuxt.jsの設定を「/リポジトリ名」 にする必要がある。
27. 4.コマンド一つで公開! $ push-dir --dir=dist --branch=gh-pages Github Pagesにページをのっける --dir=dist さっきnpm run generateで作ったdistディレクトリをGitHub Pagesにのっける --branch=gh-pages ブランチをgh-pagesという名前で作成する (ブランチは複数あるセーブデータの内の一つみたいなもの) ↓公式ドキュメント https://github.com/L33T-KR3W/push-dir
28. HTMLファイル 1.Nuxtとかの環境を整える 2.開発する 3.HTMLファイルを生成する 4.GitHub Pagesにのっける
29. 君もホームページを作ってみないか？