Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
サイトをつくってみた
Search
matumoto
April 21, 2021
Technology
0
28
サイトをつくってみた
2021/4月に行われた新入生歓迎LTの発表資料です
matumoto
April 21, 2021
Tweet
Share
More Decks by matumoto
See All by matumoto
testingを眺める
matumoto
1
130
sync/v2 プロポーザルの 背景と sync.Pool について
matumoto
0
310
Goトランザクション処理
matumoto
1
45
いまいちどスライスの 挙動を見直してみる
matumoto
0
340
Go1.22のリリース予定の機能を見る
matumoto
0
65
GoのUnderlying typeについて
matumoto
0
190
Typed-nilについて
matumoto
0
300
GoのType Setsという概念
matumoto
0
26
GoのRateLimit処理の実装
matumoto
0
360
Other Decks in Technology
See All in Technology
サンドボックス技術でAI利活用を促進する
koh_naga
0
150
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
430
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
2
250
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
320
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
4
1.2k
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
240
見てわかるテスト駆動開発
recruitengineers
PRO
6
2.4k
Bye-Bye Query Spaghetti: Write Queries You'll Actually Understand Using Pipelined SQL Syntax
tobiaslampertlotum
0
120
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
430
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
4
2.4k
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
440
2025年になってもまだMySQLが好き
yoku0825
6
2.9k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
The Cult of Friendly URLs
andyhume
79
6.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Music & Morning Musume
bryan
46
6.8k
Fireside Chat
paigeccino
39
3.6k
How to train your dragon (web standard)
notwaldorf
96
6.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Into the Great Unknown - MozCon
thekraken
40
2k
Producing Creativity
orderedlist
PRO
347
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Transcript
s1280136 松本響輝
・人物紹介 ・作ったサイトの紹介 ・全体像 ・作った手順の説明
拓実 よろしくたのむよ
いいんじゃな いかな
おーすごい
よくできているな
HTMLファイル
None
・必要な分ページを作る 例: `/` → `/aiueo` ・マークダウンファイルを読み込んで表示する aaa.mdとかbbb.mdを読み込む ・マークダウンファイルから他のファイルを読み込む ライブラリを紹介するのでc++のファイルを乗っけたかった ・いい感じなデザインにする
・2020の年末に行ったZli の開発合宿で vueに触れたので使ってみようと思った 1. npm (パッケージ管理ツール)をインストールする 2. npmでその他色々をインストールする Vue.js(ヴュー・ジェイエス)またはVueは、Webアプリケーション におけるユーザーインターフェイスを構築するための、オープンソー
スのJavaScriptフレームワークである。他のJavaScriptライブラリを 使用するプロジェクトへの導入において、容易になるように設計され ている。 なんでVueを使おうと 思ったんだい?
ワイヤーフレームと呼ばれる雛形が すでに用意されている 誰でもすぐ簡単にホームページ が作れそうだね
マークダウンを一つのファイルか らURLに応じて呼び出せない 理想 /power /combination
None
ページの遷移 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文を使う必要がある
None
/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にのっける
君もホームページを作ってみないか?