Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20230317_Astroで始めるCloudflare Pages

20230317_Astroで始めるCloudflare Pages

midnight480

March 17, 2023
Tweet

More Decks by midnight480

Other Decks in Technology

Transcript

  1. 〜 astro-notion-blogを始めてみませんか 〜
    Astroで始めるCloudflare Pages
    2023年3月17日
    Cloudflare Meetup Fukuoka

    View full-size slide

  2. 大分(22年) → 東京(11年) → 福岡(2021.11~)→ 佐賀(2023.8~予定) 
    自己紹介
    https://linktr.ee/midnight480
    AWS Startup Community Fukuoka 運営
    JAWS-UG Saga 運営
    …その他イベントに顔だしています
    https://my.prairie.cards/u/midnight480

    View full-size slide

  3. https://astro.midnight480.com/

    View full-size slide

  4. このページ以降はSlides AI で作成を試みたので英語での記載となっています 🙏

    View full-size slide

  5. Introduction to Astro.js
    - Astro.js is a web framework designed for speed
    - SSG*1 that generates HTML when built
    - In demand for those who demand display speed
    *1 Static Site Generator

    View full-size slide

  6. Photo by Pixabay
    Introduction to Notion
    - A tool that consolidates all information
    - All-in-one workspace
    - Use as a CMS*2 to manage blog text, images, etc
    *2 Contents Management System

    View full-size slide

  7. Introduction to Cloudflare Pages
    - Available for free
    - Used to build and deploy Astro.js and other applications
    - a single site asset is 25 MiB

    View full-size slide

  8. Photo by Pixabay
    Tool for Connecting:
    astro-notion-blog
    - Github repository created by Mr.Otoyo
    https://github.com/otoyo/astro-notion-blog
    - easy-notion-blog, a combination of Next.js 13
    and Notion API , and Vercel
    - astro-notion-blog, a combination of Astro.js,
    Notion API, and Cloudflare Pages

    View full-size slide

  9. Photo by Pixabay
    Easy branch definition
    for preview environment
    - Can check the display in advance
    - Access restrictions can only be applied to
    members with limited access via Cloudflare Access

    View full-size slide

  10. Web Analytics
    - Add one line of JS snippet to the HTML page
    - For Astro-notion-blog, just add to Layout.astro

    View full-size slide

  11. Feature Request

    View full-size slide

  12. Custom Domain
    - DNS records without subdomains are required to
    be transferred
    → Vercel does not require transfer of DNS records
    without subdomains(A record)

    View full-size slide

  13. Deployment
    - Manual builds on demand, even when auto-deploy is enabled
     → Redeploying from the latest build is time-consuming
     → Running “Deploy hooks” while accessing the dashboard is time-consuming

    View full-size slide

  14. Thank you for your time 😊

    View full-size slide

  15. 2023/04/05(水)
    19:00 〜 21:00

    View full-size slide

  16. Astro

    Notion

    Pages | Cloudflare

    Let's start your own Notion Blog with Astro. 

    SlidesAI

    https://twitter.com/i/communities/1618017732653613056 

    Cloudflare Access


    View full-size slide