snakagaw / unplugged-hp Goto Github PK

新アンプラホームページ

JavaScript 1.35% Vue 3.60% HTML 94.58% CSS 0.47%

unplugged-hp's Introduction

京大アンプラグドのホームページ

How To Write(管理者の方へ)

はじめに

お仕事お疲れ様です. Wordpress 嫌になって移行しました. サーバー構成の関係でセキュリティ面で強く, 一生アプデしなくていいはずです. あとスマホ対応もしました. 歴史的な経緯を盛り込んでおくと, 2012 年に旧HP(html 手打ち)からwordpressに移行, 2019 年にnuxtに移行です 🎉

管理を簡単に(といってちょっと面倒にはなっていますが, データ消失のリスクに備えるとかいう手間も一緒に減らしてるので勘弁してください...), 運営を堅実にかつ体制を柔軟に, 見やすくいサイト(スマホ対応が急務でしたね...)を目標に移行しました(URL 変わってないので引越しではないです). まぁこれなんとかしてくれとかあったらissue立てたりPRしてください~

記事の追加方法

wordpressと同じように, web(github だけど...)でできます!(PCの設定等は不要です)
markdown 使えるので楽です! (markdown の書き方はとか参考にしてください. html の 10000 倍は楽です.
@つよいひともちろん, git cloneして好きなエディタで書いても大丈夫です.
ファイルアップロードとかも対応してます
ちょっと手順慣れはいるのでご勘弁を...

固定ページの編集

https://github.com/snakagaw/unplugged-hp/tree/master/pages でできます. 簡単な取説載せてるので随時.

ブログの投稿

github 上で contentsに行きます.
編集なら, 目的のページ(紹介ならTODO:リンクとか)を押して右上の鉛筆マーク(edit this file)を押します.
新規作成なら, Create new file を押して, 年-月-日-タイトル.md のファイルを作ります. 例えば, 2019-10-01-後期始まる とか. タイトルには任意の文字が使えます. うれしい.
書き換えます. Preview changes で, markdown の状態がわかります. 便利. 新規の場合, 行頭に,

---
category: ライブ
---
# 卒業ライブ 2012

を付与してください. カテゴリは, ライブ, イベント, お知らせ がありますが, 増やしたければどうぞ. 増やさない方が良いと思うけど.
# 卒業ライブ 2012 の部分ですが, # は, <h1>(タイトル)を表します. ## の後に半角スペースは必須です.

下の方に行って, Commit changes を記入します
1. テンプレ通りでいいです. ぶろぐとーこーとか簡単で. 「かいちょーに言われて嫌々書いた」とかでも全然良いと思います.
2. commit directory to the master branchを選んじゃって大丈夫です. 気になる人は PR 立ててください.
3. Commit changesを押します.
数分すると, https://unplugged-hp.firebaseapp.com に反映されてます. ユーザー名: kiuchi, パスワード mickey です. (まぁどーせ公開するし適当でいいかなと思い...公式と勘違いされない様に, あとSEOに引っかからない様にしているだけです.)
一応確認します. 問題なかったら, circleci #TODO: リンク貼るで, Approveを押します. これ押すとこれまた数分で本番に反映されます.

↓ 自分のパソコンで書きたい方はどうぞ. ぶっちゃけ楽です. clone して, 更新して(確認には yarn run dev), commit してpush. push した瞬間circleci でビルドが走ります. 便利.

Build Setup

# install dependencies
$ yarn install

# git管理外のsummary.jsonを作成する必要あり
$ yarn md
# これで作成できる

# serve with hot reload at localhost:3000
# you may change port number by usinfg --port 3333
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

For detailed explanation on how things work, checkout Nuxt.js docs.

modules

bootstrap-vue/nuxt

components reference : https://bootstrap-vue.js.org/docs/components/alert

nuxt-fontawesome

icons
use like <font-awesome-icon icon="tractor"/>

unplugged-hp's People

Contributors

Stargazers

Watchers

Forkers

sinnta123 tsume-ha bya0829 gitada0 memento-mogi

unplugged-hp's Issues

最近の活動を自動で読み込む

HP係がさぼっても大丈夫なように, 最近の活動をLiveLogのAPIからとってきたい.

API はある(認証なしでもLive名, 日付は取れる)ので取ってきて表示するだけ
自分のページがあり, LiveLogより新しければそれを取ってくる
自分で定義もできる(やるかは疑問. ブログ書いたらそれを貼るって方がいいかも)

要件定義, 技術仕様などの決定

要件

知識ゼロでも書ける(セキュリティとかアプデとか気にせずにmarkdown で書いてデプロイで完了. 全てwebで完結させるのでインストール等は不要)
- 静的サイトホスティング(セキュリティ面で強いのでアプデとかいらない)
- 自動デプロイ (githubで編集, になると思うがそれ以上のgitの知識はいらない)
- 完全に外部向けなのでそんなに更新の必要はないか?
- 会員サイトは別に移動. 更新の多いもの(リハ音源とか)はそっちでOK
wordpress のものとほぼ同じ形にしたいのでカスタマイズというより見た目はゼロから作るイメージ
- けどスマホ対応はしたい
- デフォテンプレートをいじって近づけるのしんどい
- できればcssはコピペで終わらせたい

検討

hugo : go書けないのでしんどい...?
nuxt (next とか他のjsライブラリよりはよさそう. vue慣れてるし)
jekyll 触ったことはあるがカスタマイズしんどそう...
headless CMS

その他

heroku をテストサーバーにする(basic認証かけれる)
master直PUSHで, 本番環境はdeploy とかにした方が楽かなぁ....

master にpush(デフォをdevelopに変えれたらそっちにする)
Circle CI でビルド
firebase (or heroku)にホスティング(認証付き), staging で確認
CIrcle CI でPRを作成(https://made.livesense.co.jp/entry/2017/11/07/090000)
PR作成後, 管理者が主導でmerge(ボタン押すだけでよい)
release ブランチから自動でstaging に飛ぶ

~~dist をgit管理する~~
Github Actions の設定
- nuxt generate (master を検知?, 中身が変わっているかのチェックをやってもいいかも. genereateの負荷が減る)
- ~~dist の中身が変わっているか?~~
  - ~~変わっていれば, release branch にcheckout, commit~~
  - ~~release からmaster へPR作成~~
- coreserver へwebhook
coreserver
- ~~git のsshキーを設定(読み出しのみの権限)~~
- php でデプロイスクリプト(zipをcurl, 展開, ファイル置き換え)を設定

最近の投稿とLiveLogの最新のライブのうち, 最近のものを取得してリンクを追加
twitter を追加(できるとは思うが...)
例会教室を追加

テストを追加

静的ページだけなので特に不要だが, リンク切れを検知したい

member ページを作る

related:#17

LiveLog のリンク(音源, 動画, 写真について載せとく)
message.ku-unplugged.net (名前未定?)のリンク. (リハ音源, 感想用紙の扱いについて載せとく)
message.ku-unplugged.net ではあるが, セトリとかのリンク. 便利ように.
ピアノシフトのお知らせ(踏襲するか?)
twitter (いる?)
メーリングリスト: message.ku-unplugged.net. 移行の説明とか後で載せたいなぁ

目標

YouTube動画を載せる

課題

動画の羅列にする？ライブごとにまとめる？

固定ページを流し込む

index, about, members... を流し込む. せっかくなのでmarkdownにしてしまう.
合わせて,

h1 等のCSS流し込み
固定ファイル(セトリとか)の方針(完全にUnpluggedMessageに移行した方が見やすいかも. 完全外部向けって形で)
READMEの更新

何が何を読み込んでいるのか
このページはどのURLに相当するのか
関数はどこで定義されているのか
を全部かく

developはもう使わない(git のハードルを下げたいので, 一般的には良くはないがそうする)ので削除
master のpush で, prereleaseを作成する
同時に, firebase にはアップする.
管理者が, releaseする
released を検知し, deploy する

色を変更する

アクセシビリティの問題. .text-danger とかの上書きで対応

過去のライブの扱いを決める

/about/activities/ で, /old に飛ばしているがLiveLog に飛ばすべき...?