{"id":25070275,"url":"https://github.com/msisdev/giban","last_synced_at":"2026-05-19T03:05:55.942Z","repository":{"id":275779504,"uuid":"926868601","full_name":"msisdev/giban","owner":"msisdev","description":"Minimal blog starter with AstroJS","archived":false,"fork":false,"pushed_at":"2025-03-06T04:49:42.000Z","size":326,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T15:44:24.519Z","etag":null,"topics":["astrojs","cloudflare","markdoc","pagefind","pandacss"],"latest_commit_sha":null,"homepage":"https://giban.pages.dev","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/msisdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-04T01:54:00.000Z","updated_at":"2025-03-06T04:49:45.000Z","dependencies_parsed_at":"2025-02-20T16:31:34.959Z","dependency_job_id":"97f91d06-0770-448b-b47d-804d3e9f8d68","html_url":"https://github.com/msisdev/giban","commit_stats":null,"previous_names":["msisdev/giban"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/msisdev/giban","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msisdev%2Fgiban","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msisdev%2Fgiban/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msisdev%2Fgiban/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msisdev%2Fgiban/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/msisdev","download_url":"https://codeload.github.com/msisdev/giban/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msisdev%2Fgiban/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266841114,"owners_count":23993453,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astrojs","cloudflare","markdoc","pagefind","pandacss"],"created_at":"2025-02-06T21:19:33.249Z","updated_at":"2026-05-19T03:05:55.904Z","avatar_url":"https://github.com/msisdev.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [giban](https://giban.pages.dev/)\n\nMinimal blog starter with AstroJS\n\n![Astro](https://img.shields.io/badge/astro-%232C2052.svg?style=for-the-badge\u0026logo=astro\u0026logoColor=white)\n\n\n\n\n\n## Overview\n- [Quick Start](#quick-start)\n  - [With cloudflare](#with-cloudflare)\n  - [Without cloudflare](#without-cloudflare)\n  - [Troubleshoot](#troubleshoot)\n- [Introduction](#introduction)\n  - [Who can use this](#who-can-use-this)\n  - [Stack](#stack)\n  - [Features](#features)\n  - [Why giban](#why-giban)\n- [Guides](#guides)\n  - [How to change color set](#how-to-change-color-set)\n  - [How to use icon](#how-to-use-icon)\n- [Refs](#refs)\n\n\n\n\n\n## Quick Start\n### With cloudflare\n```\n$ bun create cloudflare@latest\n\n╭ Create an application with Cloudflare Step 1 of 3\n│\n├ In which directory do you want to create your application?\n│ dir ./my-blog\n│\n├ What would you like to start with?\n│ category Template from a GitHub repo\n│\n├ What's the url of git repo containing the template you'd like to use?\n│ repository msisdev/giban\n│\n├ Cloning template from: msisdev/giban\n│\n...\n```\n\n### Without cloudflare\n1. `$ bun create astro --template msisdev/giban`\n2. Remove cloudflare adapter\n    ```js\n    // astro.config.mjs\n    export default defineConfig({\n      // ↓ Remove this block ↓\n      adapter: cloudflare({\n        platformProxy: {\n          enabled: true\n        }\n      }),\n    })\n    ```\n3. `$ bun rm @cloudflare/workers-types`\n4. Remove/edit cloudflare specific codes\n  1. Search codes by `CLOUDFLARE_ONLY` keyword\n  2. Edit codes\n\n### Troubleshoot\n\nIf you get error `Cannot find module 'astro:content' or its corresponding type declarations`\n- `$ bunx astro sync`\n\n\n\n\n\n## Introduction\n\u003e giban (Korean, 기반): a foundation, or the foundation of a thing\n\ngiban is a minimal, fully functional blog. It has minimal style and CSS-in-JS boilerplates.  \nStart building your own style from this theme. Or swap color set and ready to go.\n\n### Who can use this?\n- Bloggers: swap color set and ready to go  \n- CSS Beginners:  launch blog and develop style progressively  \n- CSS Pros: save time by skipping tokens \u0026 scripts  \n- Developers: just explore patterns and implementations in AstroJS  \n\n### Stack\n- [AstroJS](https://astro.build/)\n- [Markdoc](https://markdoc.dev/)\n- [Pagefind](https://pagefind.app/)\n- [PandaCSS](https://panda-css.com/)\n- [Iconify](https://iconify.design/)\n\n### Features\nCommon blog patterns\n- Tags\n- Table of content\n- Reading time\n- Search by [pagefind](https://pagefind.app/)\n- Image optimization by [Cloudflare Images](https://developers.cloudflare.com/images/transform-images/transform-via-url/)\n- Dark mode switch\n\nStyling kit\n- Instant color swap (read the github guide)\n- PandaCSS boilerplates\n- Icon by Iconify\n\nI didn't add comment system because it is not minimal and easy to be added. Checkout discus or utterances.\n\nCheckout either [giscus](https://giscus.app) or [utterances](https://utteranc.es).\n\n\n\n\n\n## Why giban?\n\n### [AstroJS](https://astro.build/)\nAstroJS is a new contender of FrontEnd framework.\n- [Meta-framework](https://docs.astro.build/en/guides/integrations-guide/)\n- Built-in [SSG](https://docs.astro.build/en/guides/routing/#static-ssg-mode) support\n- Best performance by [Server island](https://astro.build/blog/future-of-astro-server-islands/)\n\n### [MDX](https://mdxjs.com/) vs [Markdoc](https://markdoc.dev/)\nMDX is like JSX.\n```markdown\nimport Callout from '../components/Callout.astro'\n\nI'm normal markdown line.\n\n\u003cCallout type=\"check\"\u003e\n  I'm custom component\n\u003c/Callout\u003e\n```\n\nWhile Markdoc is like expressive markdown.\n```markdoc\nI'm normal markdown line.\n\n{% callout type=\"check\" %}\n  I'm custom component\n{% /callout %}\n```\n\nBut you should aware that [@astrojs/markdoc](https://docs.astro.build/en/guides/integrations-guide/markdoc/) integration is in experimental stage.\n\n### [PandaCSS](https://panda-css.com/)\nPandaCSS is a [zero runtime CSS-in-JS](https://panda-css.com/docs/overview/why-panda#the-new-era-of-css-in-js) that generates static css files at build stage.  \nPandaCSS uses [helper function](https://panda-css.com/docs/concepts/writing-styles) to write styles fast.\n\nWriting styles in PandaCSS is like:\n```astro\n---\n// Footer.astro\nimport urls from \"@/config/urls\"\nimport { Icon } from \"astro-icon/components\"\nimport { css } from \"styled-system/css\"\n\nconst root = css({\n  padding: 4,\n})\n\nconst root__line1 = css({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n  \n  \"\u0026 a\": {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: 2,\n  },\n})\n---\n\u003cfooter class={root}\u003e\n  \u003cp class={root__line1}\u003e\n    \u0026copy;2025 by msisdev All rights reserved.\n    \u003ca href={urls.github} aria-label=\"Github repository\"\u003e\n      \u003cIcon name=\"iconoir:github\" /\u003e Github\n    \u003c/a\u003e\n  \u003c/p\u003e\n  \n\u003c/footer\u003e\n```\n\n### vs Obsidian Digital Garden\nYou may find [Obsidian Digital Garden](https://dg-docs.ole.dev/) is more useful, if you like Obsidian.\n\nBut you don't need Digital Garden if-\n- you want to keep things simple.\n- you don't need Obsidian.\n  - With help of Github Mobile app, you can create/edit files anywhere.\n\n\n\n\n\n## Guides\n\n### How to change color set\nYou can change colors instantly by using [Realtime Colors](https://www.realtimecolors.com/).  \nPlease follow this [guide](https://github.com/msisdev/giban/tree/master/panda/tokens/colors).\n\n### How to use icon\nThis project is using [Astro Icon](https://www.astroicon.dev/) and [Iconify](https://iconify.design/).  \nCurrently [iconoir](https://icon-sets.iconify.design/iconoir/?keyword=iconoi) is installed. To replace this, follow this [guide](https://www.astroicon.dev/guides/customization/#open-source-icon-sets).\n\n\n\n\n\n## Refs\n\n[AstroJS discussion](https://github.com/withastro/astro/issues/5711#issuecomment-1848331875)\n- When you encounter compile error on `astro:content`\n\n[Rodney](https://rodneylab.com/astro-markdoc/)\n- Astro markdoc for blog\n\n[ymcheung](https://github.com/ymcheung/build-ui)\n- Astro markdoc configs\n\n[Trung Vo](https://trungvose.com/blog/error-9421-too-many-redirects-with-cloudflare-images/)\n- Cloudflare Images troubleshoot\n\n[bharath kumar](https://unsplash.com/ko/%EC%82%AC%EC%A7%84/%EB%82%98%EC%84%A0%ED%98%95-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%B4-%EC%B8%A1%EB%A9%B4%EC%97%90-%EB%A7%A4%EB%8B%AC%EB%A0%A4-%EC%9E%88%EB%8A%94-%ED%9D%B0%EC%83%89-%EC%A1%B0%EA%B0%81%ED%92%88-lAG5K1x-36A)\n- Demo image\n\n[Anca I/O](https://www.anca.io/posts/adding-necessary-features-in-the-astro-markdoc-blog/#add-the-reading-time-to-your-postpage)\n- reading time\n\n[shishkin](https://github.com/shishkin/astro-pagefind)\n- astro-pagefind\n\n[Thomas Ledoux](https://www.thomasledoux.be/blog/search-static-astro-website)\n- how to use pagefind\n\n[Realtime Colors](https://www.realtimecolors.com/)\n- Automate color change\n\n[astro-icon](https://github.com/natemoo-re/astro-icon)\n- Iconify usage\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsisdev%2Fgiban","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmsisdev%2Fgiban","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsisdev%2Fgiban/lists"}