This is description.

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. 君もホームページを作ってみないか？