サイトをつくってみた

s1280136 松本響輝

・人物紹介・作ったサイトの紹介・全体像・作った手順の説明

拓実よろしくたのむよ

いいんじゃないかな

おーすごい

よくできているな

HTMLファイル

・必要な分ページを作る例: `/` → `/aiueo` ・マークダウンファイルを読み込んで表示する aaa.mdとかbbb.mdを読み込む・マークダウンファイルから他のファイルを読み込むライブラリを紹介するのでc++のファイルを乗っけたかった・いい感じなデザインにする

・2020の年末に行ったZli の開発合宿で vueに触れたので使ってみようと思った 1. npm (パッケージ管理ツール)をインストールする 2. npmでその他色々をインストールする Vue.js（ヴュー・ジェイエス）またはVueは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソー
スのJavaScriptフレームワークである。他のJavaScriptライブラリを使用するプロジェクトへの導入において、容易になるように設計されている。なんでVueを使おうと思ったんだい？

ワイヤーフレームと呼ばれる雛形がすでに用意されている誰でもすぐ簡単にホームページが作れそうだね

マークダウンを一つのファイルからURLに応じて呼び出せない理想 /power /combination

ページの遷移 vue-routerを作る内部でvue-routerが作られてる vuetify 使える使える初期設定 routerの設定とかが多い自動的に設定されているサイトの生成
npm run buildでできる npm run generateでできる

・必要な分のページも作れた！ pages/hoge.vue /hoge -> hoge.vueが表示される！・URLに対応してマークダウンファイルも呼び出せそう！ pages/_id.vue /aiueo -> _id.vueの中で`aiueo`っていうURLが使える
aiueo.mdを呼び出せばいいあとはC++ファイルを呼び出せば・・・

URLに応じてマークダウンファイルを読み込めない読み込むのにwebpackのraw-loaderというのを使っていた

3.import文では変数を使えなくてさようなら… 2. import文ではシングルクオートかダブルクオートしか使えない 1. raw-loaderではimport文を使う必要がある

/contentディレクトリに書き込むことで以下の形式のファイルを取得できる・Markdown ・JSON ・YAML ・XML ・CSV _slug.vue 右のようなコードでマークダウンファイルを呼び出せる→ あとはc++ファイルを呼び出せば…

豊富な拡張機能！ remark-◦◦をnpm install するとmarkdownで色んな拡張機能が使える！今回はremark-code-import-replaceというのを使いました。素晴らしい！

HTMLファイル $ npm run generate HTMLを生成するコマンド (/dist/にHTMLファイルなどが自動で作られる)

HTMLファイル 1.GitHubでリポジトリを作っておく 2.push-dirをインストールする 3.push-dirの設定をする 4.コマンド一つで公開!

1.GitHubでリポジトリを作っておく GitHubに登録してを押してリポジトリを作る

1.GitHubでリポジトリを作っておく cloneする作業中… addして commitして pushする pullする

2.push-dirをインストールする $ npm install push-dir push-dirをインストールするコマンドこんな簡単にできるのか

3.push-dirの設定をする・ベースパスの設定をする「/」→「/リポジトリ名/」・アセット(アイコンの画像とか)のパスの設定をする GitHub PagesではURLが「ユーザ名.github.io/リポジトリ名/」となる。「ユーザ名.github.io/」がNuxt.jsでの「/」に対応しているので、Nuxt.jsの設定を「/リポジトリ名」にする必要がある。

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

HTMLファイル 1.Nuxtとかの環境を整える 2.開発する 3.HTMLファイルを生成する 4.GitHub Pagesにのっける

君もホームページを作ってみないか？

サイトをつくってみた

サイトをつくってみた

matumoto

More Decks by matumoto

Other Decks in Technology

Featured

Transcript

s1280136 松本響輝

・人物紹介・作ったサイトの紹介・全体像・作った手順の説明

拓実よろしくたのむよ

いいんじゃないかな

おーすごい

よくできているな

HTMLファイル

ワイヤーフレームと呼ばれる雛形がすでに用意されている誰でもすぐ簡単にホームページが作れそうだね

マークダウンを一つのファイルからURLに応じて呼び出せない理想 /power /combination

ページの遷移 vue-routerを作る内部でvue-routerが作られてる vuetify 使える使える初期設定 routerの設定とかが多い自動的に設定されているサイトの生成

・必要な分のページも作れた！ pages/hoge.vue /hoge -> hoge.vueが表示される！・URLに対応してマークダウンファイルも呼び出せそう！ pages/_id.vue /aiueo -> _id.vueの中で`aiueo`っていうURLが使える

URLに応じてマークダウンファイルを読み込めない読み込むのにwebpackのraw-loaderというのを使っていた

3.import文では変数を使えなくてさようなら… 2. import文ではシングルクオートかダブルクオートしか使えない 1. raw-loaderではimport文を使う必要がある

/contentディレクトリに書き込むことで以下の形式のファイルを取得できる・Markdown ・JSON ・YAML ・XML ・CSV _slug.vue 右のようなコードでマークダウンファイルを呼び出せる→ あとはc++ファイルを呼び出せば…

豊富な拡張機能！ remark-◦◦をnpm install するとmarkdownで色んな拡張機能が使える！今回はremark-code-import-replaceというのを使いました。素晴らしい！

HTMLファイル $ npm run generate HTMLを生成するコマンド (/dist/にHTMLファイルなどが自動で作られる)

HTMLファイル 1.GitHubでリポジトリを作っておく 2.push-dirをインストールする 3.push-dirの設定をする 4.コマンド一つで公開!

1.GitHubでリポジトリを作っておく GitHubに登録してを押してリポジトリを作る

1.GitHubでリポジトリを作っておく cloneする作業中… addして commitして pushする pullする

2.push-dirをインストールする $ npm install push-dir push-dirをインストールするコマンドこんな簡単にできるのか

4.コマンド一つで公開! $ push-dir --dir=dist --branch=gh-pages Github Pagesにページをのっける --dir=dist さっきnpm run

HTMLファイル 1.Nuxtとかの環境を整える 2.開発する 3.HTMLファイルを生成する 4.GitHub Pagesにのっける

君もホームページを作ってみないか？