如何使用React + Markdown创建快速,安全且可扩展的开源博客

内容营销已经流行了很多年,并且有充分的理由, 它行之有效

创建博客内容是公认的可持续有机流量来源,也是吸引合格潜在客户的绝佳方法。

大多数公司都将WordPress,SquareSpace或Medium用作他们的公司博客。 虽然这些网站用于托管博客内容,但它们也有许多缺点,尤其是如果您的目标受众是开发人员。

典型公司博客设置存在的问题:

  • 贡献的障碍
  • 速度和安全性问题( 咳嗽, WordPress 咳嗽
  • 流量吞噬(中)
  • 定制和重复使用产品UI的能力有限
  • 面向开发人员的内容的创作经验差

我认为这篇文章提出了一种不同的方法,该方法比传统的博客设置更好。

让我们探索您正在阅读的100%由开源,Markdown和React支持的博客

无服务器博客

Serverless.com的博客是由GitHub存储库和Markdown文件驱动的100%开源内容。

博客内容被馈送到我们的网站,并通过我们选择的Phenomic静态网站生成器呈现。

让我们探讨博客设置的好处以及它们如何解决上述问题。

1.易于投稿和编辑帖子

首先,拥有GitHub帐户的任何人都可以提交博客文章更新,错字修复和新内容,而无需我们网站的用户帐户。

在每个帖子上,用户都可以单击“编辑此帖子”链接,任何人都可以向该帖子提交更新。

这对于简化对我们博客的贡献非常有用。

PS我们一直在寻找新鲜的内容。 如果您有兴趣参与,请给我们留言

2.更好的针对开发人员的帖子

如果您曾经不得不在WordPress中编写以开发人员为中心的代码密集型博客文章,那将是一次相当痛苦的体验。 所见即所得的编辑器非常擅长处理代码片段。

另一方面,使用GitHub风格的Markdown进行编写使编写和(更重要的是)维护有关代码MUCH的博客文章更加容易。

Markdown FTW! 🎉

旁注:如果您坚持使用WordPress,我写了一个插件让您可以在 GitHub上支持Markdown 编写

3.统一的产品体验

我们使用React作为我们创建无服务器应用程序(如仪表板)的首选前端框架。 与其他博客设置无关。

如果我们决定使用WordPress撰写博客,则需要维护2个独立的样式/组件库,因为WordPress无法在服务器端呈现React组件。 在多个平台上保持样式同步非常痛苦,最终会导致不一致的用户体验。

幸运的是,我们的网站和博客均由Phenomic提供支持,因此我们可以使用产品中使用的所有相同React组件。

代码重用和品牌一致性FTW ! 🎉

4.开箱即用

与WordPress之类的动态博客平台不同,使用静态网站使我们可以直接使用原始规模。

我们的静态网站的构建方式:

  1. npm run build使用React的服务器端渲染功能来构建站点的所有静态HTML文件
  2. 而已。 该网站已为所有访客预渲染🔥

如果我们在《纽约时报》的首页或贾斯汀·比伯关于Serverless的推文中获得关注,那么我们坐得很漂亮,因为我们的网站是通过Netlify内容交付网络静态提供的。

5.速度像哇a

因为我们使用的是Phenomic,在后台使用了React + React Router,所以页面获取和转换很快。

导航到serverless.com站点时,无需重装硬页,而在站点链接中导航时,您可以获得单页应用程序体验。

单击的每个链接仅从.json文件中获取所需的数据,而不是像其他静态站点生成器一样从完整的HTML页面中获取数据。

Phenomic的另一个开箱即用的好处是乐观的页面渲染。

这是获取博客轻量级json数据时博客帖子的加载状态外观的示例

如您所见,当导航到任何给定页面时,访问者会得到即时反馈,因此感知到的网站性能感觉很敏锐。

React + Phenomic + Static网站是未来

超可扩展,快速,动态的静态网站是前端网站的未来,我强烈建议您查看我们的网站回购,以了解所有方式!

您可以通过以下方式在本地运行我们的网站:

  1. git clone git@github.com:serverless/site.git
  2. npm install
  3. npm start

如果我还没有说服您。 @DavidWells向我鸣叫,我会对你大喊大叫。

我正在计划一系列的帖子,说明该网站的构建方式。

现在,请查看GitHub存储库。