blog-template

簡単にセットアップできるブログのテンプレートです。

Features

• SSL対応
• 記事の一覧表示 (/)
• 並び替え (昇順/降順)
• 記事の表示順 (公開日順/更新日順/名前順)
• 記事のピン止め
• 記事検索
• 閲覧ページ (/b/:id)
• 管理者ページ (/a)
• Web上での記事の編集 (/a/:id)
• 404
• マークダウン
• LaTeX
• Graph (Mermaid)
• Syntax Highlight
• 画像表示
• 動画表示
• 音声表示
• PDF Viewer
• 編集中のプレビュー表示
• ファイルアップローダー
• SPA(Single Page Application)対応
• XSS(Cross Site Scripting)対策
• 完全なdevコマンド

Required

このテンプレートを作成した環境を目安にしています。

node -v # v22.17.1
npm -v # v10.9.2

Setup (For Ubuntu)

0. Clone & Install

git clone https://github.com/otoneko1102/blog.git
cd blog
npm install

1. Edit files

Images (./routes/assets/img)

mkdir ./routes/assets/img

File name	Recommended size
header.png	1300x280
icon.png	48x48
thumbnail.png	1024x560

.env

Example: example.env

sudo nano .env

2. Exec command

Before building, select the security level.

./routes/src/scripts/config.js

const isStrictSecurity = false; // Default: false

• true: Use sessionStorage .
• false: Use localStorage .

npm run build

3. Always on

PM2をインストールしていない場合

sudo npm install -g pm2

Exec command

pm2 start ecosystem.config.js
pm2 startup
pm2 save

4. Edit /etc/nginx/sites-available/example

sudo nano /etc/nginx/sites-available/example

# www --> non-www
server {
  listen 80;
  server_name www.example.com; # 実際のドメインに変更

  return 301 http://example.com$request_uri;
}

server {
  listen 80;
  server_name example.com; # 実際のドメインに変更

  location / {
    # ファイルサイズ
    client_max_body_size 50M;

    proxy_pass http://localhost:3000; # 実際のポート番号に変更
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

Certbotをインストールしていない場合

sudo apt update
sudo apt install certbot python3-certbot-nginx

Nginx

sudo ln -s /etc/nginx/sites-available/example /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
sudo certbot --nginx -d example.com -d www.example.com