我们生活在一个真理不再是非黑即白的世界。在我们生活的世界里,媒体明白,影响人们的最佳方式不是通过逻辑,而是通过情感。他们明白我们人类不是通过有意识的思考和逻辑处理来做决定,而是通过隐藏在我们心灵中的无意识倾向来做决定。对通过媒体赚钱的人来说是好事,对像我们这样消费媒体的人来说是坏事。
StaticImage 是 gatsby-plugin-image 提供的组件,类似html 中的 img 标签,可以在页面中直接使用。
Gatsby 是一个令人难以置信的静态站点生成器,它允许使用React作为渲染引擎引擎来搭建一个静态站点,它真正具有现代web应用程序所期望的所有优点。它通过在构建时通过服务器端渲染将动态的 react 组件呈现为静态 HTML 内容。这意味着您的用户可以获得静态站点的所有好处,比如不使用JavaScript、搜索引擎友好性、非常快的加载速度等等,也并没有失去现代web所期望的活力和交互性。一旦呈现为静态 HTML,客户端站点的React和JavaScript会接管它并添加动态的内容。 Gatsby 最近发布了v1.0.0,推出了很多新特性。包括(但不限于)使用GraphQL创建内容查询的能力,与各种cms集成——包括WordPress、Contentful、Drupal等等。还有基于路由的代码分布使得用户体验更佳。在这篇文章中,我们将深入探讨 Gatsby 和一些新特性,并创建一个静态博客。让我们开始吧!
本博客系统使用GatsbyJS构建,源码来自UnrealCPP,这里修改了部分功能。
我的博客最初是用 Github Pages 默认的 Jekyll[2] 框架,其使用的 Liquid[3] 模板引擎在使用上有诸多不便。
MDX 是一种文档格式,可以在 Markdown 文档中无缝地插入 JSX 代码。
1.安装插件 我用Gatsby就是因为它支持Markdown.所以不墨迹,直接整Md支持。 <pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="c10" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, 'Liberation Mono', Courier, monospace; fo
今年年初,我终于决定将自己的网站从基于 PHP 的 CMS 移植到基于 JavaScript 的静态网站生成器(SSG)了。原因如下:
代表了一种开发功能强大的 react.js 组件的全新方式,这些组件在完全可定制的同时开箱即用。
原文发表于:https://avenirzheng.net/blog/2020/deploying-gatsby-to-tencent-cloud/
Gatsby 是在 Node.js 的基础上建立,使用 Gatsby 之前必须先安装 Node.js 且版本 ≥ 12.13。使用 Gatsby CLI 工具,三句命令就可以新建一个静态网站。详情步骤,看这里!
最近在研究JAMStack的一些相关内容,发现这的确是个好东西,所以想写一篇文章把这个概念分享给还不了解JAMStack的同学。本篇文章主要包含以下的内容:
无论您是刚开始编程还是已经是一名经验丰富的开发人员,在这个行业中,学习新的概念和语言/框架是跟上快速变化的必要条件。
微言码道的官网是我在2021年元旦三天假期的时候做的一个网站,自那以后,因为业余时间有限,除了网站内容上有所变更以外,网站本身没有任何更新。
作者 | Kurt Bittner 、Pierre Pureur 译者 | 平川 策划 | 丁晓昀 无论你是编程新手还是资深开发人员,学习新的概念和语言(或框架)都是跟上快速的技术发展节奏的必要条件。 以 React 为例,它由 Facebook 在四年前开源,现在已经成为全球 JavaScript 开发者的首选。 当然,Vue 和 Angular 也有它们自己的追随者。还有 Svelte 以及像 Next.js 或 Nuxt.js 这样的通用框架,还有 Gatsby、Gridsome,等等。 如
在过去的几年中,Vue.js 已成为 Web 应用程序开发的流行选项。用户变多后,这个框架开始将触角伸向了静态站点生成,一个曾经由 React 统治的领域。
VitePress 是 VuePress 的下一代框架 ,是支持vue 3.0 的 web 网站框架。
到此,通过gatsby就快速的搭建了一个博客网站,我们只需书写markdown文件就能生成对应的网页了。至于网页美化,那是切图的事儿,我就不在这里墨迹了。
Markdown 的好处是专注码字的同时还能兼顾排版,不用像 word 那样文本加个粗都需要移动下鼠标,体验非常好。
构建这个应用时,你将使用相对较新的Hooks API来提升你的React技能。示例项目利用了React组件、许多Hooks、一个外部api,当然还有一些CSS样式。
相信很多人都想要搭建一个自己的博客或是给项目做文档网站。本文将要推荐的静态网站生成器(Static Site Generator, SSG),它做的事情就是把你的文档、内容(通常为 Markdown 文件)生成可发布成网站(html)的工具,这样你就可以专心创作,同时也有了一块自己发表自己想法的网站。然后 GitHub、Gitee 等均支持免费 Page 服务,通过简单的配置 SSG 就可以实现一条命令发布,有一个自己小窝就是这么简单和方便~
本篇文章为大家盘点了1月份最热门的 JavaScript 项目,让我们一起来看下吧! 一、编辑器tui.editor https://github.com/nhnent/tui.editor Star 5033 tui.editor(TOAST UI Editor)是一款所见即所得的Markdown编辑器。TOAST UI Editor提供Markdown模式和WYSIWYG模式。它的功能非常强大,你可以编辑表格,UML图和图表等。 TOAST UI Editor的Markdown模式的特点有: ● 所见即
把文件导入到Gatsby项目中使用,有两种方式:import 和 static folder.
对于 gatsby-starter-blog,在 src/templates/blog-post.js 的 BlogPostTemplate 类中添加:
在本文中,您将看到三种最好的静态站点生成器的比较,它们的优点、缺点以及您应该使用它们的原因。
参考 https://github.com/rmcfadzean/gatsby-pantry/tree/master/examples/starter-blog
本文将介绍最流行的十大博客静态站点生成工具,以 Github star 数来排名。
在这里,我想给你一个新的React项目入门的简要概述。我想反思一下优点和缺点,反思一下作为一个开发者所需要的技术水平,反思一下作为一个React开发者,每个启动项目都能为你提供哪些功能。最后,你将了解到针对不同需求的3种解决方案。
回到上一篇我讲的不变前端中,我在文章中明显的指出了,前端的变化会有一个分界线,在这个分界线之前,前端有一个最大的困境,就是:
静态站点构建是现代Web开发的热门趋势之一。它可以提供快速加载、安全可靠、易于扩展的网站,而不需要服务器端代码。本文将深入探讨静态站点构建的关键概念,为您提供一份全面的指南,并提供带有实际代码示例的技巧,以帮助您创建卓越的静态网站。
Ayy yo what's up,这里是Brrruski aka. 搞程序的Gatsby👨🏻💻 作为第一篇正式对外的文章,想了很久要分享什么主题才会比较有意思,还要易上手,还要接地气🧐 那最近也是看到朋友的博客(基于Hexo搭建的),眼馋里面的markdown代码块、时间线timeline整理以及自动分类与标签词云呀🤩 (天知道我作为程序员是怎么忍受wordpress / ghost默认的markdown支持的🐶 于是我兴致勃勃地鼓捣了一番Hexo博客,在本地已经装饰的漂漂亮亮了✨ 。到了该部署的环节,我
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。
系列参考: python︱写markdown一样写网页,代码快速生成web工具:streamlit介绍(一) python︱写markdown一样写网页,代码快速生成web工具:streamlit 重要组件介绍(二) python︱写markdown一样写网页,代码快速生成web工具:streamlit 展示组件(三) python︱写markdown一样写网页,代码快速生成web工具:streamlit lay-out布局(四) python︱写markdown一样写网页,代码快速生成web工具:streamlit 缓存(五) python︱写markdown一样写网页,代码快速生成web工具:streamlit 数据探索案例(六) streamlit + opencv/YOLOv3 快速构建自己的图像目标检测demo网页(七)
就拿跑步来说,许多人都是三分钟热度,根本坚持不下来。许多程序员在电脑面前一坐就是一整天,很少去锻炼、跑步。
在 Markdown 中,```用来表示代码块,跟在后面的是语言类型,比如 js、java 和 diff 等
在数字化世界的深入探索中,我们会遇到各种各样的数据格式。这些格式有助于我们理解和操纵数据,以便实现各种复杂的功能。其中之一就是JSON(JavaScript Object Notation),这是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。
前端爱好者的知识盛宴 JavaScript渗透的范围越来越广,它能做的事情已经远不止前端开发而已。 掌握2018最新JS趋势,很有必要! 不久前stateofjs.com刚刚发布了一份2017 JavaScript现状报告,现在Ryan Chartrand非常应景地推出了2018年的JavaScript发展趋势,下面把这两份文章一起结合来看,让作为JS开发者的你少走弯路。 首先看看火爆2017的vue。 React vs. Vue.js 我们开门见山,直接上好东西吧:认为Vue可能会成为React的一大
VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
用 JavaScript 语法来写 css,主要用于两个框架:agnostic 和 React。下面是用于 React 框架的简单示例:
如今 Web 框架、CLI、脚手架工具层出不穷,为开发者们提供便利的同时,也衍生出了一些幸福的烦恼:尽管它们构建部署的流程大同小异,但记住那些琐碎细节着实有些麻烦。
观察基于 create-react-doc 搭建的文档站点, 发现网页代码光秃秃的一片(见下图)。这显然是单页应用 (SPA) 站点的通病 —— 不利于文档被搜索引擎搜索 (SEO)。
前往博主博客,获得更好的体验->https://blog.pai233.top/20210930/hexo-katex/#more
安装 Node.js; 安装 Git; Gatsby 开发环境 Gatsby 的 CLI 工具非常方便,在终端全局安装 gatsby-cli
Gatsby CLI 用于 Gatsby 项目的创建、启动、编译等。它是发布于 npm 的包,可以用npm进行安装管理 npm install -g gatsby-cli。
上周我写了一篇关于我对 Next.js 的失望的文章。不过我接下来希望写点正能量的内容,那必须是我最喜欢的 Astro 了。
gatsby 为自动修改样式组件中的className,使其具有唯一性,避免与其他名称冲突而失效。
我的这个博客站点大约始建于2010年以前,使用过 dlog、pjblog、zblog 等博客程序,也手动建立使用过纯静态 HTML 页面,大约2010年开始使用 WordPress。最近几年有感于 WordPress 过于臃肿复杂,而我的目的只是想写点什么,给自己留下些记录,于是将网站迁移到了更加简洁的hexo。
领取专属 10元无门槛券
手把手带您无忧上云