Discourseの非常に古いサイトをアップグレードするには？

サポート インストール
6

@Paul-Reed さん、@codinghorror さん、こんにちは。

@pfaffman さんが私の環境を復旧させてくれました。本当に素晴らしい仕事をしてくれました！サイトはすっかり新品のようにピカピカで、Discourse はバックアップに必要なものがすべて含まれていたため、本当に素晴らしいです！

Discourse の技術は本当にすごいものです！

@pfaffman さんから以下のような情報をいただきました。

  1. 2 つのコンテナを使ったインストール（こちらで説明されています）。
  2. 非常に古いインストールの場合、新規インストールからバックアップを復元するのが最も抵抗の少ない方法でした。
  3. バックアップ以外で本当に役立つファイルは /var/discourse/containers/app.yml だけですが、7 日ごとではなく毎日バックアップを取るべきでした！

私が知っていながら思い出さなかった重要な教訓：

10 分で終わると思っていたことが、実際にはそうではないことがあります。今回の更新は、@Paul-Reed さんにヘッダーについて良いアドバイスを提供したか確認したかっただけだったのですが、オプス！そして、これは私が学んだことだけでなく、私たちはよく忘れてしまいます。私の専門は、コンサルティング（https://www.shakacode.com）やオープンソースプロジェクト（https://github.com/shakacode/react_on_rails）を通じて、React と Ruby on Rails を使ったサイトをより良くすることです。

Docker 型の DevOps は私でもできますが、私が達成しようとしていることからはるかに多くの時間を奪ってしまいます！

そのため、@pfaffman さんに https://forum.shakacode.com/ のホームページの更新を手伝っていただこうと考えています。

というわけで、@codinghorror さんと @pfaffman さんには大変お世話になりました。心から感謝します！

興味があれば、今回の古い Discourse サイトの更新のきっかけとなったカスタムヘッダーの修正方法をご紹介します。

カスタムヘッダー

まず第一に、やけくそな作業をするよりも、@pfaffman さんに https://support.literatecomputing.com/ まで連絡することをお勧めします。実際、この分野でより素敵なものを作りたい場合は、@pfaffman さんに手伝っていただきます！

しかし、DIY をする方のために、役立つ部分はすべてここにあります。

2020-04-06_11-34-27
2020-04-06_11-34-27953×702 161 KB

2020-04-06_11-33-14
2020-04-06_11-33-14770×427 133 KB

私の知る限り、他はすべて空白です。

CSS

#top-navbar-container {
    background: black;
    height: 25px;
}

#top-navbar-links .spacer {
    display: inline-block;
    margin-left: 12px;
    margin-right: 12px;
}


#top-navbar-links, #top-navbar-links a:visited, #top-navbar-links a {
    color: white;
}

header.d-header {
    background: black;
    background-image: url(/uploads/default/63/873a733a013f8208.jpg);
    padding-top: 0;
    box-shadow: none;
    top: 25px;
    height: 63px;
}

.ember-view > #main-outlet {
    padding-top: 97px;
}

header > .container {
    background-image: url(/uploads/default/63/873a733a013f8208.jpg);
    max-width: 1200px;
    padding-right: 50px;
}

header.d-header > .container > .contents {
    margin: 0;
}

header.d-header #site-logo, header.d-header .logo-small {
    max-height: 53px;
}

body #main .extra-info > a.star {
    color: #A5ACDD;
}

header .extra-info-wrapper h1 {
    margin-top: 18px;    
}

@media screen and (min-width: 1140px)  {
    header .extra-info-wrapper {
        max-width: 780px;
    }
}

@media screen and (min-width: 967px) and (max-width: 1139px)  {
    header .extra-info-wrapper {
        max-width: 647px;
    }
}

#user-notifications, #search-button, #site-map  {
    color: #AAA; 
}

@media screen and (max-width: 966px) {
    .extra-info-wrapper {
        max-width: 620px;
    }
}

header .current-username .username > a {
    color: white;
}

header.d-header .icons .icon:hover {
    background-color: #000000;
}

ヘッダー

<div id="top-navbar-container" class="d-header">
<div id="top-navbar" class="wrap">
<span id="top-navbar-links" style="height:20px;">
  <a href="http://forum.talksurf.com">Home</a><span class="spacer"> | </span>
  <a href="http://forum.talksurf.com/category/surfing/doug-silva">Doug Silva</a><span class="spacer"> | </span>
  <a href="http://forum.talksurf.com/category/surfing">Surfing</a><span class="spacer"> | </span>
  <a href="http://forum.talksurf.com/category/kitesurfing">Kitesurfing</a><span class="spacer"> | </span>
  <a href="http://forum.talksurf.com/category/standup-paddling">SUP</a><span class="spacer"> | </span>
  <a href="http://forum.talksurf.com/category/windsurfing">Windsurfing</a><span class="spacer"> | </span>
  <a href="http://forum.talksurf.com/t/pros-instructors-equipment-travel/264">Pros</a><span class="spacer"> | </span>
  <a href="http://forum.talksurf.com/t/what-is-talksurf-com/265">About</a><span class="spacer"> | </span>
  <a href="http://forum.talksurf.com/faq">FAQ</a>
</span>
</div>
</div>