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
30
サイトをつくってみた
2021/4月に行われた新入生歓迎LTの発表資料です
matumoto
April 21, 2021
Tweet
Share
More Decks by matumoto
See All by matumoto
testingを眺める
matumoto
1
140
sync/v2 プロポーザルの 背景と sync.Pool について
matumoto
0
340
Goトランザクション処理
matumoto
1
48
いまいちどスライスの 挙動を見直してみる
matumoto
0
340
Go1.22のリリース予定の機能を見る
matumoto
0
65
GoのUnderlying typeについて
matumoto
0
190
Typed-nilについて
matumoto
0
310
GoのType Setsという概念
matumoto
0
27
GoのRateLimit処理の実装
matumoto
0
360
Other Decks in Technology
See All in Technology
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
slog.Handlerのよくある実装ミス
sakiengineer
4
170
Language Update: Java
skrb
2
300
「Linux」という言葉が指すもの
sat
PRO
4
140
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
430
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
480
いま注目のAIエージェントを作ってみよう
supermarimobros
0
300
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
250
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
200
Modern Linux
oracle4engineer
PRO
0
100
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
290
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Fireside Chat
paigeccino
39
3.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Designing Experiences People Love
moore
142
24k
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にのっける
君もホームページを作ってみないか?