DarkLogo

Tech on this site.

· Kishimoto

使用技術/サービス

  • Hugo(静的サイトジェネレーター)
  • Golang(templateの知識)
  • Railway
  • GitHub
  • ※ HTML/CSS/JSは当然使います。

環境構築

Document読めばわかることを書いてますのでまずは読むことをおすすめします！！！

1. Hugoのinstall

  • 複数方法がある様ですが私はHomebrewからinstallしました。-> 詳しくはDoc参照
    $ arch -arm64 brew install hugo
    ※ 使用デバイスがM1 Macであるため上記のコマンドですがそれぞれの環境に合わせて下さい。

2. Golangのinstall

  • 元々入って居たので省略

3. Railway sign up

  • 元々使用しているサービスなので省略 -> 公式参照

4. GitHub

  • 元々使用しているサービスなので省略 -> 公式参照

5. gitのinstall

  • 元々入って居たので省略 -> 詳しくはDoc参照

6. themeのfork

  • 今回私はこちらのテーマを使わせて頂きました。
  • forkする理由としましてはHugoは静的ジェネレーターでpublic配下を直接変えてもhugoコマンドを実行すると当然自動で書き変わってしまうので大元のthemeを修正することになるのですがその際の変更をpushしようと思うと自分のrepositoryが必要になるためです。
  • 他のthemeを使いたい方はこちら

7. projectの作成/初期設定

  • Hugoプロジェクトの作成
    $ hugo new site {project_name}
  • themeをcloneするためにgit init
    $ cd {project_name}
$ git init
  • themeを追加
    $ git submodule add {先ほどforkしたrepositoryのurl} themes/{テーマ名(今回はpaper)}
$ echo "theme = '{テーマ名(今回はpaper)}'" >> config.toml
    ぶっちゃけこれだけです！！

8. ローカルサーバー起動

  • サーバー起動も超簡単
    $ hugo server
    出力されるURLをブラウザで表示してみて下さい！

コンテンツの追加

1.　コンテンツの追加

  • markdownの追加
    $ hugo new posts/{タイトル}.md
    上記でcontent/posts配下にmarkdownが追加されるのでそちらを修正してみて下さい。
  • 反映
    $ hugo server -D
    これで再度ブラウザで確認して頂ければpostが増えてるのではないでしょうか？

nanxiaobei/hugo-paperのカスタマイズ

1. postのデザイン変更

  • ニューモーフィズムにして見よう！
    • themes/paper/assets/custom.cssに下記を追加 ※ これは元々オーバーライドできる様に設置されてました。
      .list-item {
  height: 100px;
  padding: 20px;
  border-radius: 15px;
}

.shadow-item {
  box-shadow:  20px 20px 60px #d9d9d9,
            -20px -20px 60px #ffffff;
}

.dark .dark\:shadow-item {
  box-shadow: 20px 20px 60px #3c3939, -20px -20px 60px #3d3a3a;
}
    • themes/paper/layouts/_default/list.htmlを修正
        <section class="relative my-10 first-of-type:mt-0 last-of-type:mb-0 list-item shadow-item bg-white dark:bg-black dark:shadow-item">
    <h2 class="!my-0 pb-1 !leading-none">{{ .Title }}</h2>
    <time class="text-sm opacity-60">
      {{ .Date | time.Format ":date_medium" }}
    </time>
    <a class="absolute inset-0" href="{{ .Permalink }}"></a>
  </section>
    • ついでにpostした時間も表示できる様に修正 上記のhtmlを下記の様に変更
      <time class="text-sm opacity-60">
  {{ .Date | time.Format ":date_medium" }} {{ .Date | time.Format ":time_short" }}
</time>
    • 反映
      $ hugo --minify
    • サーバー起動
      $ hugo server -D
    これでそれっぽいデザインになってるんじゃないかな？ ダークモードでも上手く言ってるか確認してみて下さい！！

2. ロゴ画像のダークモード対応

  • ロゴ画像の追加

    • assets配下にimagesを設置しその中に画像を配置する

    • themes/paper/layouts/partials/header.htmlを修正

      <a
  class="-translate-x-[1px] -translate-y-0.5 text-3xl font-bold"
  href="{{ `` | absURL }}"
>
  {{ $logo := resources.Get "images/logo.png" }}
  <img src="{{ $logo.RelPermalink }}" id="mainLogo" width="180" height="130">

  {{ $logoWhite := resources.Get "images/logo_white.png" }}
  <img src="{{ $logoWhite.RelPermalink }}" id="mainLogoDark" width="180" height="130">
</a>

      ちょっとめんどくさいんですがassets配下に置いた要素はresources.Getで取得できる様になってるみたいです。

      まだこれだけだとロゴが二つ表示されているだけなのでscriptを書きます。 setDark()という関数があるのでそれに処理を加えれば完了！ 基本的に他要素を追加してもここに反映すれば問題なく動きそうな気がします。

      setDark関数自体はよくあるlocalStorageに値持ってるかどうかでダークモードかどうか判定できる様にしてるみたいです。

      const setDark = (isDark) => {
  metaTheme.setAttribute('content', isDark ? '#000' : lightBg)
  htmlClass[isDark ? 'add' : 'remove']('dark')
  localStorage.setItem('dark', isDark)

  const mainLogo = document.getElementById('mainLogo')
  const mainLogoDark = document.getElementById('mainLogoDark')
  mainLogoDark.style.display = 'none'
  mainLogo.style.display = 'none'

  const logo = isDark ? mainLogoDark : mainLogo
  logo.style.display = 'block'
}

3. faviconの変更

  • faviconの設置 static配下にfaviconディレクトリを入れてその中にfavicon.icoを入れれば完了です。 static/favicon/favicon.ico

基本的にPaperの場合layouts配下を弄れば色々変更できるっぽいです！！

後はここでは省略しますがheadとかにmetaでカードの設定とかもしてあげて下さい。


config.tomlのうんたら

こいつをちゃんと設定してないと読み込みエラー起きるので一度Railwayにdeployしたのちちゃんとここ埋めましょう

baseURL = 'https://example.com/'

この辺は見たままです。 paginateもそのままですが1ページに表示する最大投稿数です。

languageCode = 'ja'
DefaultContentLanguage = "ja"
author = "{author}"
title = '{title}'
theme = 'paper'
paginate = 5

[params]セクションは結構色々あるんで説明して行きます。

[params]
  color = 'light'

  twitter = '{twitter ID}'
  github = '{github ID}'
  mastodon = '{https://mastodon.instance/@xxx}'
  rss = true

  avatar = '{image url or gravatar email}'
  name = '{表示名}'
  bio = '{自己紹介}'

  disableHLJS = false
  monoDarkIcon = false

  comments = false

colorはlinen, wheat, gray, lightの四種類です。 適当に変えてお好みにして下さい。

color = 'light'

右上のアイコン表示です。 こいつらを設定してやると勝手に表示されます。

twitter = '{twitter ID}'
github = '{github ID}'
mastodon = '{https://mastodon.instance/@xxx}'
rss = true

画面上部に表示されるアイコンや表示名になります。 avatarの部分はどこかにアップされてる画像のURLでもいいですし gravatarをお使いの方は登録しているemailでも良いと思います！！ 処理を追うとgravatar apiを叩いてそうでした。

avatar = '{image url or gravatar email}'
name = '{表示名}'
bio = '{自己紹介}'

実際に変更してみて下さい、雰囲気が結構変わりました。

disableHLJS = false
monoDarkIcon = false

記事下部のコメント欄の表示非表示設定です。

comments = false

このほかにも沢山設定値がある様ですしthemeによってもそれぞれありそうなので是非調べて見てください！！

Deploy

1. GitHubにpush

  • 静的ファイル出力 Hugoは下記コマンドで/publicに静的ファイルを出力してくれます。
    ※ 今回はminifyオプションをつけています。

    $ hugo --minify

  • git push こちらはいつも通りで構いません。

    $ git add .
$ git commit -m "{commit message}"
$ git push {remote} HEAD

2. RailWayにDeploy

  • Deploy “Start a New Project” > “Deploy from GitHub repo” > {今回対象のrepo}
    と画面通りに設定していって下さい。
    完了したらDashboardから今回のProject > Settings > General > Root Directoryは　/publicとして下さい。
    ※これは重要で不要なファイルにアクセスされない様にするためです。

    ここまでやれば自動的にRedeployしてくれるので後は待つだけです。
    Deployが終わってDomainの設定をすれば公開完了です！！！

お疲れ様でした！！

最後に

結構簡単にサイトが立てれますし他のthemeとかももっと触って見たい判明静的であるが故に記事の投稿に不便を感じたりと色々気になるところはあります。 ただ興味のある方は是非一度触って見てほしいですね！
こちらのサイトは今後定期的に更新する予定ですので是非チェックしてみて下さい！！

後、Twitterのフォローもお願いします笑

それではまた！！