サイト整備の備忘録


これを読めば、誰でもサイト運営できる!はず。

H﨑  2018/12/26  hugo

物理部部長のH﨑です。もうそろそろ受験に向けてスイッチを切り替えないといけない季節なので、このサイト運営に必要な知識をここに全て残しておきたいと思います。後輩諸君!これを読めば、物理サイトを運営できるはず。もし分からないことがあれば、遠慮なく聞いてください。

見ての通り、後輩に向けた完全な身内ネタになると思われますが、どうかお許しを。

物理部サイトの構造

今のところ(2018年現在)、GitHubNetlifyを用いたシステムで構築しています。

GitHubというのは簡単に言うとクラウド上にプログラムのコードなどを保管できるサービスで、ここにサイトの全てのソースコードが保管されています。このコードはgo言語を使ったhugoというソフトで管理されています。

次にNetlifyというサービスがGithubのファイルが更新されたことを感知して、自動でhugoを使ってデプロイ(サイトの組み立て)を行ってくれます。特に押すボタンとかはありません。

言い換えると、githubのコードを変更すれば、物理部サイトの設定を自由に変えることができます。

ただ、Github上のコードを直接書き換えるのは、サイトのデザインを変更する時新しく機能を追加する時だけです。新しく記事を書いたり、固定ページを編集するだけなら、ウェブ上のページで簡単に編集出来るので安心してください。

記事を書く

物理部サイトに活動記録(記事)を追加する方法をお教えします。  ※記事を追加する際はPC環境を使うのがオススメです。iOSのSafariとかだと、上手く編集出来ません。

まずはログイン!

まず、物理部サイトの上部のメニューから管理者ログインをクリックして下さい。すると、GitHubのログインページが出てくると思うので、部長から受け継がれるであろう、メールアドレスとパスワードを入力して、ログイン!

管理者画面が出てきたと思います。次に、新しく記事を追加する場合は上部のメニューのQuick Addをクリックして、記事を選択して下さい。

記事の設定をする

記事の編集画面が出てきたと思います。
設定項目は

・タイトル(記事のタイトル)
・公開URL名(記号なしの単語がオススメ)
・公開日
・サムネイル画像
・説明(20文字ぐらいがベスト)
・作者(あなたのペンネーム)
・タグ(数学や科学といったタグ。カンマ(,)で区切って列挙できます)
・数式(オンにするとMathJaxを使って数式を書けます。後述)
・コメント(記事の最後にコメント欄を追加できます。オンでいいと思います。)
・非公開(これをオンにすると、記事が非公開になります)

以上が記事の設定欄です。全て埋めないと、記事の表示が狂います。面倒でも全て埋めてください。

本文を書く

本文に関しては上部の「Rich Text」モードにすれば、ワードと同じような感覚で文字を大きくしたり、URLを貼り付けたり出来るので問題無いかと思います。 「Markdown」モードについてですが、これはマークダウン書式で原稿を書くモードです。詳細については、こちらをご覧下さい。慣れるとマークダウンの方が便利なので、使ってみるのもアリかもしれません。

※この編集画面はある一定時間が過ぎると接続が切れてしまい、原稿がリセットされてしまう可能性があるので、原稿はメモ帳などで予め作っておいて、編集画面にコピペして下さい。

改行

仕様のためどうしようもないのですが、改行する場合、ただ改行しただけでは、改行されません。 改行したい場合は半角の空白を2つと改行入れると改行できます。意外と忘れやすいので、念のため釘を刺しておきます。

Hello  ←半角空白2つ
World  ←半角空白2つ
Hello←空白なし
World

Hello
World
Hello World

違いをお分りいただけたでしょうか。

写真の挿入

写真は本文メニューの+ボタンをクリックすると、imageというボタンが表示されるのでそれをクリックして下さい。すると、本文にimageというフォームが追加されたと思います。

ここに入力するのは

・image
・alt text
・title

この3つです。

imageはchoose an image、次にuploadをクリックして、入れたい写真をアップロードして下さい。アップロードされた写真をクリックしてchoose Selectedすれば、写真が挿入されます。 alt textは写真の説明でも入れて下さい。空白でも大丈夫です。

でもtitleに文章を入れないで!!

確かに本来であればここにはタイトルを入れるのですが、記事を書く上で写真サイズを変えるメニューがないのが不便だったので、ここに1〜100の数字を入れて写真サイズを変えられるように仕様変更しています。100で画面一杯に表示されます。基本は100を入力してください。

 文書の保存

文章が書けたら保存して、公開してみましょう。記事設定の非公開をオンにしていると保存しても公開されないので注意しましょう。これがオフになっていることを確認して、上部のsaveボタンを押してください。

数秒すると、右のほうにsetが表示されるのでクリックして下に出てきたReadyをクリックして下さい。

また数秒後に、Entry Status Updatedというお知らせが表示されたら、Publishをクリックししたに出てきたPublish nowをクリック!

そうすれば、保存と記事の公開が完了します。お疲れ様でした。

中間ゴール

このような感じで、記事を投稿することができます。簡単、、、でしょ? 固定ページ(部員紹介)もこのような感じで編集できます。部員紹介はJavascript使ってるけどね!

記事の投稿が出来れば、ほぼ仕事は終わったようなもの。あとは、これだけでは物足りないであろう上級者編に移りたいと思います。分からなかったら見て見ぬフリをしてください。

数式

手書きの数式を写真に撮って載せるのもアリですけど、見にくいし醜い。 そんな時は記事設定のmathをオンにして、MathJaxコードを記事に書けば綺麗な数式を表示することができます。

ddt(L˙θ1)Lθ1=0

Mathjaxコードについては、サンプルを見てもらうとわかりやすいと思います。
また僕が昔書いた二重振り子についての記事やそのソースコードを見てもらうとわかりやすいと思います。また、手書きの文字をLaTexに変換してくれる便利なサービス(こちら)もあるようなので、活用してみてください。

物理部のアカウント

現在、物理部が所有しているアカウントは

・github
・netlify
・DISQUS(記事の最後のコメント欄)
・Youtube
・Twitter
・googleアカウント


この6つです。Twitterとかも定期的に更新してます。学校の評判を地に貶めるような発言は慎むようにしてくださいね(ブーメラン)

google consoleにアクセスすれば、サイト閲覧数などの分析を見ることができます。気になったら見てみてください。