Bottlefolio

イラスト向けのシンプルなポータルサイトジェネレーターです。

コンパイルしたものをwebサーバーに置くだけで動くため、さくらのレンタルサーバー等のホスティングサービスに置くだけで公開できます。

Twitterのモーメントの代わりになればと思い開発してみました。

サンプルサイト（現在スマホ向けのみレイアウト調整を行っています）

🚅 Quick start

1. imageInfos.jsonの配置

   サーバーにimageInfos.jsonを配置してください（サンプル）。
   TwitterやPixivなどのIDを持っていない場合はリンクURLは#を指定すればOKです。

   [
       {
           "link": {
               "twitterUrl": "TwitterのリンクURL",
               "pixivUrl": "PixivのリンクURL"
           },
           "imageUrls": {
               "completed": "完成画像のURL",
               "rough": "ラフのURL（無い場合は空でOK）",
               "line": "線画のURL（無い場合は空でOK）",
               "timeLapse": "タイムラプスgifのURL（無い場合は空でOK）"
           },
           "title": "タイトル",
           "subtitle": "サブタイトル",
           "description": "説明（改行は\nで行えます）",
           "props": {
               "iconColor": "テーマカラー（pinkや#fffなどのCSS値が使用可能です）"
           }
       }
   ]

2. userInfo.jsonの配置

   サーバーにuserInfos.jsonを配置してください（サンプル）。
   links内のブログやGitHub等のIDを持っていない場合、URLは#を指定すればOKです。

   {
       "name": "ユーザー名",
       "description": "自己紹介文",
       "links": {
           "blog": "ブログのURL",
           "twitter": "TwitterのURL",
           "pixiv": "PixivのURL",
           "skeb": "SkebのURL",
           "gitHub": "GitHubのURL"
       },
       "header": {
           "iconUrl": "https://via.placeholder.com/128",
           "backgroundUrl": "https://via.placeholder.com/720x1280"
       },
       "meta": {
           "domain": "yourHomepage.com",
           "title": "サイトのタイトル",
           "description": "サイトの説明",
           "image": "https://via.placeholder.com/128"
       }
   }

3. config.jsを編集

   リポジトリ内のconfig.jsを編集してください。

   export const siteConfig = {
       imageInfosUrl: 'imageInfos.jsonの配置URL',
       userInfoUrl: 'userInfo.jsonの配置URL',
       meta: {
           title: 'サイトのタイトル',
           twitterSite: 'Twitter ID',
           twitterCreator: 'Twitter ID',
           ogUrl: 'サイトのURL',
           ogTitle: 'SNS共有時のタイトル',
           ogDescription: 'SNS共有時の説明',
           ogImage: 'SNS共有時のサムネ',
       }
   }

4. ビルドしてファイルを配置

   yarn build

   buildディレクトリ配下に生成されたファイルをサーバーに配置してください。

ライセンス

本リポジトリはGPLv3で公開されていますが、src/assets/icon配下のディレクトリのPixivアイコンおよびTwitterアイコン等はそれぞれの利用規約に準拠してください。

• Twitterアイコンの利用について
• Pixivアイコンの利用について

他にも明確に当リポジトリの生成物でないものはそれぞれの利用規約に準拠します。

Copyright Sakaki Mirai 2023