"Zola" static site engine 静的サイトエンジンをApacheで動かしてみた。

目次

きっかけなど

  • Zolaというstatic site engineについて書きます。当プログもZolaで作られています。
  • なぜZolaを選んだか？
    • WordPressだと、このサーバーのリソース(メモリ)が足りないので、軽量なブログエンジンを探していた
    • WordPressはセキュリティで注意しなければらならず、コスト高いため
    • Rustで作られているから(まだ、Rustのソースは見ていないが、(＠_＠;))
    • Markdownで書けるから

ZolaのINSTALL方法・設定など

Zola と Apache の連携の概要図

概要図

概要図

Apache Configの設定で virtual-hosts(バーチャルホスト/サブドメイン) を設定する

  • 最終的には以下のような感じになりました。

FILE: /etc/apache2/sites-enabled/000-default.conf

<VirtualHost *:80>
    ServerName uptime.chunky.tokyo
    DocumentRoot /var/www/html/uptime.chunky.tokyo
    ErrorLog ${APACHE_LOG_DIR}/uptime.chunky.tokyo.error.log
    CustomLog ${APACHE_LOG_DIR}/uptime.chunky.tokyo.access.log combined
    RewriteEngine on
    RewriteCond %{SERVER_NAME} =uptime.chunky.tokyo
    RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

FILE: /etc/apache2/sites-enabled/000-default-le-ssl.conf

<IfModule mod_ssl.c>
    <VirtualHost *:443>
        ServerName uptime.chunky.tokyo
        DocumentRoot /var/www/html/uptime.chunky.tokyo
        ErrorLog ${APACHE_LOG_DIR}/uptime.chunky.tokyo.error.log
        CustomLog ${APACHE_LOG_DIR}/uptime.chunky.tokyo.access.log combined
        SSLCertificateFile /etc/letsencrypt/live/uptime.chunky.tokyo/fullchain.pem
        SSLCertificateKeyFile /etc/letsencrypt/live/uptime.chunky.tokyo/privkey.pem
        Include /etc/letsencrypt/options-ssl-apache.conf
    </VirtualHost>
</IfModule>

ApacheにSSLの設定をする

  • 基本的に下記のサイトを参照して設定すればOK
  • ポイント
    • まずはグローバルからhtttp/80経由で接続をできるようしておく。 certbot がうまくやってくれる
    • その後に、sudo certbot --apache certonlyをすること。いきなり Apacheのhttps/443の設定しても、Apacheが起動しない(そりゃそうか)
    • certbotで作成されたファイルを confに設定する。
    • http/80 --> https/443にリダクレイト設定する
$ sudo certbot --apache certonly
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator apache, Installer apache

Which names would you like to activate HTTPS for?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: nanj.chunky.tokyo
2: uptime.chunky.tokyo
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate numbers separated by commas and/or spaces, or leave input
blank to select all options shown (Enter 'c' to cancel): 2
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for uptime.chunky.tokyo
Waiting for verification...
Cleaning up challenges

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/uptime.chunky.tokyo/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/uptime.chunky.tokyo/privkey.pem
   Your cert will expire on 2022-10-15. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot
   again. To non-interactively renew *all* of your certificates, run
   "certbot renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

MacBook(ローカル)からVultr (リモート・公開サーバー)へソースをデプロイについて

$ rsync --delete -a --verbose [Zolaのpublicフォルダ] [接続先サーバー:フォルダ名]

Misc

MacBook(ローカル)のApache でSSL接続をしてみる --> オレオレ証明書の作成と認識ががうまくいかないので途中でやめた。

Zola に{{toc}}的なものはないのか？

  {% if page.toc %}
  <details open>
    <summary>目次</summary>
    <nav>
      <ol>
        {% for h1 in page.toc %}
        <li>
          <a href="{{ h1.permalink }}">{{ h1.title }}</a>
        </li>
        {% endfor %}
      </ol>
    </nav>
  </details>
  {% endif %}

アイコンを設定する

<link rel="shortcut icon" href="/icons/uptime.png" />
<link rel="apple-touch-icon-precomposed" href="/icons/uptime.png" />

Dracula Color Theme の主要な色(Hex) を確認する。概要図を作るときにも使用

#bd93f9 紫
#8be9fd 青
#50fa7b 緑
#ff79c6 ピンク