https://yinji.org/tags/broadcastchannel/ Recent content in Broadcastchannel on 印记 Hugo zh-cn me@yinji.org (青山) me@yinji.org (青山) Copyright © 2018-2026, huhexian. Sun, 13 Oct 2024 00:00:00 +0000 https://yinji.org/how-to-use-telegram-to-create-a-zero-cost-microblog.html/ Sun, 13 Oct 2024 00:00:00 +0000me@yinji.org (青山) https://yinji.org/how-to-use-telegram-to-create-a-zero-cost-microblog.html/ <p><figure class="image-caption image-zoom-container" > <input type="checkbox" id="img-6a39d68a" class="image-zoom-toggle" aria-label="放大图片：" /> <label for="img-6a39d68a" class="image-zoom-label" > <img src="images/6Jtvo36MfuDqNmxf.png" alt="" loading="lazy" class="zoomable-image" /> </label> <label for="img-6a39d68a" class="image-zoom-overlay" > <img src="images/6Jtvo36MfuDqNmxf.png" alt="" class="zoomable-image" /> </label> <figcaption></figcaption> </figure> </p> <p>看到标题可能有人就说了，Telegram Channel 本身就可以作为一个微博客使用，但问题是并不是所有人都有能力和方法使用并访问 Telegram Channel，CloudFlare 和开源项目 BroadcastChannel 巧妙地解决了这个问题。</p> <h2 id="broadcastchannel-介绍">BroadcastChannel 介绍</h2> <p><a href="https://github.com/ccbikai/BroadcastChannel" rel="noopener noreferrer">BroadcastChannel</a> 是<a href="https://chi.miantiao.me" rel="noopener noreferrer">面条</a>大佬开发的项目，可以将 Telegram Channel 转为微博客使用，通过 Telegram Channel 发布内容，另一端通过 <a href="https://astro.build" rel="noopener noreferrer">Astro</a> 程序进行呈现。</p> <p>事先需要准备好 CloudFlare 账号和可以使用 Telegram 的网络。</p> <p>项目提供了 Serverless 和 Docker 两种部署方式，前者简单易懂，也是我目前使用的。</p> <h2 id="broadcastchannel-部署">BroadcastChannel 部署</h2> <p>第一步，Fork 该项目到自己的 GitHub，接着前往 CloudFlare 或者 Vercel、Netlify 等平台创建项目，仓库即选择刚刚 Fork 的 BroadcastChannel。</p> <p><figure class="image-caption image-zoom-container" > <input type="checkbox" id="img-e333263c" class="image-zoom-toggle" aria-label="放大图片：" /> <label for="img-e333263c" class="image-zoom-label" > <img src="images/WX20241013-231431@2x.png" alt="" loading="lazy" class="zoomable-image" /> </label> <label for="img-e333263c" class="image-zoom-overlay" > <img src="images/WX20241013-231431@2x.png" alt="" class="zoomable-image" /> </label> <figcaption></figcaption> </figure> </p> <p>选择 BroadcastChannel 项目和 Astro 框架，然后再配置环境变量，其中必须事先配置的是 CHANNEL 变量，内容填频道名称，例如我的 @<a href="https://t.me/findblog" rel="noopener noreferrer">FindBlog</a> 频道，变量就填写 FindBlog 即可。</p> <p><figure class="image-caption image-zoom-container" > <input type="checkbox" id="img-b65e129e" class="image-zoom-toggle" aria-label="放大图片：" /> <label for="img-b65e129e" class="image-zoom-label" > <img src="images/WX20241013-231556@2x.png" alt="" loading="lazy" class="zoomable-image" /> </label> <label for="img-b65e129e" class="image-zoom-overlay" > <img src="images/WX20241013-231556@2x.png" alt="" class="zoomable-image" /> </label> <figcaption></figcaption> </figure> </p> <p>其他保持默认即可，该项目还提供了其他环境变量可供配置，可以在部署之后自行添加。</p> <p><figure class="image-caption image-zoom-container" > <input type="checkbox" id="img-f1fd4b08" class="image-zoom-toggle" aria-label="放大图片：" /> <label for="img-f1fd4b08" class="image-zoom-label" > <img src="images/WX20241013-231743@2x.png" alt="" loading="lazy" class="zoomable-image" /> </label> <label for="img-f1fd4b08" class="image-zoom-overlay" > <img src="images/WX20241013-231743@2x.png" alt="" class="zoomable-image" /> </label> <figcaption></figcaption> </figure> </p> <p>只需一眨眼的功夫，该项目成功在 CloudFlare Pages 上部署，可以访问默认域名，也可以添加自定义域名。</p> <p>后续只需要在 Telegram Channel 更新内容，即可自动同步并部署至 CloudFlare Pages，无需动手。</p> <p>我在该项目开源之后第一时间部署了 @FindBlog 的微博客，效果很惊人，不仅界面美观，SEO 友好，还提供了 RSS，对于想简单写点博客的人来说，是一种简单、快捷的体验方式。</p> <p>地址：<a href="https://broadcastchannel.pages.dev/" rel="noopener noreferrer">https://broadcastchannel.pages.dev/</a></p> <p><figure class="image-caption image-zoom-container" > <input type="checkbox" id="img-43207750" class="image-zoom-toggle" aria-label="放大图片：" /> <label for="img-43207750" class="image-zoom-label" > <img src="images/lcheiO8aJYdBgtau.png" alt="" loading="lazy" class="zoomable-image" /> </label> <label for="img-43207750" class="image-zoom-overlay" > <img src="images/lcheiO8aJYdBgtau.png" alt="" class="zoomable-image" /> </label> <figcaption></figcaption> </figure> </p> <p>其他变量：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-php" data-lang="php"><span style="display:flex;"><span><span style="color:#75715e">## Telegram 频道用户名，必须配置。 t.me/ 后面那串字符 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">CHANNEL</span><span style="color:#f92672">=</span><span style="color:#a6e22e">FindBlog</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">## 语言和时区设置，语言选项见[dayjs](https://github.com/iamkun/dayjs/tree/dev/src/locale) </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">LOCALE</span><span style="color:#f92672">=</span><span style="color:#a6e22e">zh</span><span style="color:#f92672">-</span><span style="color:#a6e22e">cn</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">TIMEZONE</span><span style="color:#f92672">=</span><span style="color:#a6e22e">Asia</span><span style="color:#f92672">/</span><span style="color:#a6e22e">Shanghai</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">## 社交媒体用户名 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">TELEGRAM</span><span style="color:#f92672">=</span><span style="color:#a6e22e">huhexian</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">TWITTER</span><span style="color:#f92672">=</span><span style="color:#a6e22e">huhexian</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">GITHUB</span><span style="color:#f92672">=</span><span style="color:#a6e22e">huhexian</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">## 下面两个社交媒体需要为 URL </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">DISCORD</span><span style="color:#f92672">=</span><span style="color:#a6e22e">https</span><span style="color:#f92672">://</span><span style="color:#a6e22e">DISCORD</span><span style="color:#f92672">.</span><span style="color:#a6e22e">com</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">PODCASRT</span><span style="color:#f92672">=</span><span style="color:#a6e22e">https</span><span style="color:#f92672">://</span><span style="color:#a6e22e">PODCASRT</span><span style="color:#f92672">.</span><span style="color:#a6e22e">com</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">## 头部尾部代码注入，支持 HTML </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">FOOTER_INJECT</span><span style="color:#f92672">=</span><span style="color:#a6e22e">FOOTER_INJECT</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">HEADER_INJECT</span><span style="color:#f92672">=</span><span style="color:#a6e22e">HEADER_INJECT</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">## SEO 配置项，可不让搜索引擎索引内容 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">NO_FOLLOW</span><span style="color:#f92672">=</span><span style="color:#66d9ef">false</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">NO_INDEX</span><span style="color:#f92672">=</span><span style="color:#66d9ef">false</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">## Sentry 配置项，收集服务端报错 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">SENTRY_AUTH_TOKEN</span><span style="color:#f92672">=</span><span style="color:#a6e22e">SENTRY_AUTH_TOKEN</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">SENTRY_DSN</span><span style="color:#f92672">=</span><span style="color:#a6e22e">SENTRY_DSN</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">SENTRY_PROJECT</span><span style="color:#f92672">=</span><span style="color:#a6e22e">SENTRY_PROJECT</span> </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#75715e">## Telegram 主机名称和静态资源代理，不建议修改 </span></span></span><span style="display:flex;"><span><span style="color:#a6e22e">HOST</span><span style="color:#f92672">=</span><span style="color:#a6e22e">telegram</span><span style="color:#f92672">.</span><span style="color:#a6e22e">dog</span> </span></span><span style="display:flex;"><span><span style="color:#a6e22e">STATIC_PROXY</span><span style="color:#f92672">=</span> </span></span></code></pre></div>