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

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"/>

snakagaw / unplugged-hp

readme