文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

一杯茶的时间，上手 Gatsby 搭建个人博客

这就是搭建 Gatsby 博客的基本结构了，可以看到非常简单，且因为其丰富的生态，其它底层接口基本不需要用到。但接下来还是会有一些小坑，第一个便是 GraphQL，我们将马上来分析。...难道还要部署服务器？ 其实这里 GraphQL 并不是作为服务器端部署，而是作为 Gatsby 在本地管理资源的一种方式。...Gatsby 主流的两个 CMS 是 Contentful 和 Netlify CMS。...我们当然不希望迁移后原有的链接无法访问，这不仅影响到 SEO ，更带来了不好的用户访问体验。本文将聊聊怎么让 Gatsby 兼容 Jekyll 式路径。...通过实现自定义路径基本上可以了解 Gatsby 页面生成的方式了。下节中我会继续谈谈其它个性化的配置，如草稿模式和显示上下篇博文。 草稿模式 草稿模式即可以将文章保存为草稿而不被渲染出来。

3.2K20

Gatsby 博客部署到腾讯云教程

WordPress 搭建起来，与传统服务端语言 + 数据库的架构相比，近年流行的静态编译博客，如 Hexo、Jekyll、Hugo 显然更容易部署和维护，这里我选择了 Gatsby，并用 wp-gatsby-markdown-exporter...因工作原因我选择在腾讯云上部署自己的个人网站，你也可以在 GitHub Pages 或国内的 Coding 上托管 Gatsby 项目，然后 CNAME 绑定到指定的域名就可以，更加方便。...云服务器环境 Gatsby 最终会编译成静态站点，这里云服务器环境需要 Web 服务器存放静态网页，另外需要 Git 环境使用 git hook 钩子同步本地推送的文件到 Web 服务器，这里我以 CentOS...--bare blog.git vim /www/git/blog.git/hooks/post-receive 在 vim 里 i 键进入插入模式，指定 Web 站点目录和 Git 目录的关联关系（将下面两行代码粘贴进去...本地编译后部署到服务器 前面已经提到本地和服务器同步的机制，这里我们可以用 gh-pages ，很方便的把 Gatsby 编译后的静态文件同步至仓库。

4.3K111
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    构建快速、安全、可扩展的静态站点：终极指南

    它可以提供快速加载、安全可靠、易于扩展的网站，而不需要服务器端代码。本文将深入探讨静态站点构建的关键概念，为您提供一份全面的指南，并提供带有实际代码示例的技巧，以帮助您创建卓越的静态网站。...1.2 静态站点生成器 介绍静态站点生成器，如Jekyll、Hugo和Gatsby，以及它们的工作原理。...# 示例代码：使用Gatsby创建新的静态站点 npm install -g gatsby-cli gatsby new my-site 第二部分：内容管理和数据源 2.1 内容管理系统（CMS） 如何选择和集成内容管理系统...部署到静态托管服务 讲解如何将静态站点部署到托管服务，如Netlify、Vercel和GitHub Pages。...# 示例代码：使用Netlify部署静态站点 netlify deploy --prod 4.2 CDN加速 如何配置CDN（内容分发网络）以提高网站的性能和可用性。 <!

    32670

    如何将 Jekyll 部署到云开发静态网站托管

    Use --watch to enable. ➜ blog git:(master) ✗ 如果构建没有报错，你就可以选择将构建结果 _site 部署到你的服务器。...然后在浏览器打开 Server address 中显示的地址即可查看效果 将静态站点使用腾讯云静态网站托管 创建静态网站托管服务 1、创建腾讯云云开发环境 打开腾讯云「云开发 https://console.cloud.tencent.com...2、初始化静态网站托管服务 点击进入「静态网站托管 https://console.cloud.tencent.com/tcb/hosting」 服务的页面。...静态网站服初始化一般需要约 3 分钟 qcloud_jekyll_hosting.png 将静态页面部署到托管服务 你阔以直接选择将构建好的静态页面上传到托管服务，但是考虑到博客的更新频率，还是选择使用官方提供的工具来上传...cloudbase functions:deploy ​ – 查看命令使用介绍 ​ $ cloudbase -h ​ Tips：可以使用简写命令 tcb 代替 cloudbase 使用 hosting 命令 将本地已经编译的静态文件部署到托管服务

    3.6K105

    如何将代码部署到腾讯云网站静态托管

    但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号（ID：itclanCoder） (上) (下) 前言 之前将网站代码部署到...03 将本地打包的代码放置到根目录 当你创建好坏境后,并且添加成功自定义域名(需要备案),并且解析成功后,可以配置 ssl 证书,以 https 安全访问 你就可以将本地打包后的代码扔到你创建好的坏境当中去了的...云开发 cli 提供了直接部署网站文件的命令,在需要部署的文件夹目录下,直接运行hosting:deploy命令即可 将当前目录下所有文件部署到静态网站中，如下所示 $ cd dist $ cloudbase...(本地路径) cloudpath(云坏境目录的路径) -e envId 如下示例所示 # 将当前目录的文件部署到根目录,即将 hosting 目录下的所有文件部署到根目录,如果不指明hosting本地目录...-e envId # 将 static 目录下的 index.js 文件部署到 static/index.js cloudbase hosting deploy .

    12.2K20

    如何将 Hexo 快速部署到云开发静态网站托管

    云开发静态托管提供一个具有免费额度的环境, 1GB 容量和每月 5GB 流量, 这对大部分的个人博客是完全足够的, 这篇文章将教你如何方便的把你的 Hexo 部署到云开发静态网站....托管到云开发静态网站 我们希望我们的博客被更多的人看到, 这个时候你就需要把你的博客部署到云端, 让所有人都能访问它....hexo-deployer-tcb 是我为了方便托管部署编写的一款 Hexo 插件,你可以使用它来更方便进行 Hexo 部署....AKIDy72vb123isqCRhYSzqzdw3XGF9XY2oAu secretKey: iz47dbHBCJwSHIRQQNyerK1pDmaGslKZ envId: blog-1b08ba 此时你就可以尽情的食用了 生成静态文件并且部署到云开发的静态网站...hexo d -g [生成静态文件并且部署到云开发的静态网站] 如果你的配置正确, 此时你应该可以在腾讯云的 云开发控制台-静态网站托管 查看到你博客的相关文件.

    1.5K21

    如何将 Hexo 博客部署到云开发静态网站托管

    除了在 Github Pages 部署以外，现在你有了一个新的选择，那就是使用云开发静态网站功能来部署啦！...了解云开发静态网站托管 静态网站托管（Website Hosting，WH）是由云开发提供的便捷、稳定、高拓展性的托管服务，您无需自建服务器，即可一键部署网站应用，将静态网站发布到全网节点，轻松为您的业务增添稳定...此外，您还可以结合云开发的云函数、数据库等能力，将静态网站扩展为带有后台服务端的全栈网站，让您可极速提供网站应用。...你可以尽情试试云开发静态网站托管带来的高速体验，简单部署即可访问。 好了，接下来就是教你如何将 Hexo 博客部署到云开发静态网站托管。...接下来，就可以进入到最后一个环节，上传部署 Hexo 了。 构建 Hexo 并上传 回到你的 Hexo 目录中，执行 Hexo g 来生成文件，Hexo 会默认将文件生成在 Public 目录下。

    4K137

    如何利用机器学习和Gatsby.js创建假新闻网站​

    基本上，Gatsby.js将帮你创建一个有完整的骨架的网站，你可以调整和重新配置，而不是从头开始构建整个东西。...[警告:此过程将花费很长时间] 一些虚假的文章将完全从我们之前创建的假标题中生成，一些将从《华尔街日报》网站上刮下来，并使用我们的参数进行调整。...我们可以使用名为Gatsby -source-drive的插件将文件直接导入到Gatsby的本地文件系统中。这需要在谷歌api中设置一个服务帐户。...部署 让我们使用Netlify将我们的站点部署到互联网上。Netlify是一个建立和部署网站的平台。它将你的本地资源存储在云上以便部署。 我们现在需要做的是更新GitHub库。...Netlify站点。

    4.5K60

    2023 年，这 9 个项目助你成为前端高手

    你将学到什么 这个项目将教你从零开始创建应用程序时的宝贵技能——从设计到开发，一直到生产就绪的部署。...相反，你将了解整个开发过程——从设计到最终部署。 你真的应该尝试一下这个项目。...你将学到什么 这个示例项目将教你如何使用 Nuxt.js 构建一个成熟的网站——从初始搭建到最终部署。 它使用了 Nuxt 提供的许多很酷的功能，比如页面和组件，以及 SCSS。...我并不是说 WordPress 是一个糟糕的选择，但有了 Gatsby，你可以使用 React 构建一个高性能的网站——这是一个很棒的组合。...你将学到什么 这个项目将教你如何使用 Gridsome、GraphQL 和 Markdown 构建一个简单的博客。 它还介绍了如何通过 Netlify 来部署应用程序。

    3.1K20

    如何将 Angular 项目部署到云开发静态网站托管

    云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持 在云开发静态托管中...，你同样可以托管一个 Angular 项目，接下来，我就介绍一下应该如何将一个 Angular 项目部署到云开发静态网站托管服务中。...[xcvh9.png] 等待环境初始化完成后，点击刚刚创建好的环境，进入到详情页，点击左侧的环境设置，可以看到环境的 ID， 记住这里的环境 ID，后续上传文件的时候会用到。...[4io2i.png] 再次选择左侧列表的「静态网站托管」 [eqpgf.png] 在静态网站托管页面选择立即开通。 [f85zg.png] 等待静态网站托管服务开通后，你就可以看到这样的界面。...首先，进入到 Angular 项目的 dist 目录: cd dist/cloudbase，然后，执行命令来上传文件 tcb hosting:deploy -e envId 这里你需要将 envId 替换为你自己的环境

    2.2K30

    如何将 github pages 迁移到 vercel 上托管

    github pages,后来迁移到 coding,最近又放到腾讯云网站静态托管,无论是 coding 的 cos 存储桶,还是静态网站托管 他们都是收费的,那有没有免费的托管商呢,既不影响网站的访问速度还免费...,于是,找了一下,还真有,vercel和Netlify,就是免费的 其中大名顶顶的Next.js,create-react-app,Nuxt.js等就是部署在部署托管在vercel的,而vuejs,reactjs...等就是托管在Netlify上的 想必经常打开这些鼎鼎大名官网的时候,访问速度还是可以的 今天说一下这个vercel,Vercel 可以部署任何前端应用程序的最佳场所。...号称以零配置部署到我们的全球边缘网络,动态扩展到数百万个页面而不会费力 一键导入(支持 github,gitlab,BitBucket),自己的存储库，然后推送。...⒊ 支持自定义域名以及配置 ssl 证书,https. ⒋ 简单友好,个人账户免费,可以部署 next.js,Nuxt.js,Gatsby.js,Angular,Ember.js,Hexo,Eleventy

    2.4K20

    怎么将golang部署到docker

    我们都知道go能够这么火是因为他是docker官方标准语言，当然了docker也将go的性能发挥到了极致，可谓是相辅相成，交相辉映。...后续查阅知道这个是将项目部署到docker的自动化配置引导文件。于是今天上班没事干花了一天时间吧周末的小项目给添加了个dockerfile……下面给大家分享一下艰辛的历程吧。...`代表就是把我们dockerfile所在的作为当前目录的所有文件，命令的意思就是将当前目录下的所有文件复制到镜像指定的/go/src/Fang目录下 关于Dockerfile部署时精简系统大小 1 采用...COPY将必要文件复制，不要采用ADD 2 采用curl git等联网数据请求，这样可以部署时从网络请求资源，从而减少自制镜像的大小（如lz项目中需要一些GitHub上的开源库 即 开勇go get -...u xxx 而不是选择将对应的库打包到镜像中） 下面把lz自己今天蹩脚的第一个Dockerfile分享给大家 FROM golang RUN ls -al RUN mkdir /go/src/Fang

    1.6K20

    你的博客用不着什么JavaScript框架

    不再需要整页重新加载的问题在于，浏览器和辅助技术将页面加载用作触发某些有用行为的信号，包括宣布新页面的标题或将键盘焦点重置到文档的开头。...我确实不太满意 Gatsby 的宣传手法，他们说 Gatsby 适合任何类型的网站。客户端 JavaScript 是有成本的，开发人员应该意识到这一点。...所幸 Gatsby 社区内做出了很多努力来构建更、，更轻量级的网站： 首先，使用 gatsby-plugin-preact 将 React 换成 Preact 可以节省几千字节。...Eleventry 还有一些让我感到困惑的事情：我有一阵子一直搞不懂它的分页功能，认为它只是将帖子分页到指定大小的一些组中，之后才意识到它可以动态生成全新的页面；我还发现自己在同一文件中混用了模板语言：...它甚至预配置了 Netlify CMS，因此你无需编写任何代码即可编辑网站内容。 我学到了什么呢？

    4.1K10

    如何将 Vue.js 项目部署到云开发静态网站托管

    ，你同样可以托管一个 Vue.js 项目，接下来，我就介绍一下应该如何将一个 Vue.js 项目部署到云开发静态网站托管服务中。...[xcvh9.png] 等待环境初始化完成后，点击刚刚创建好的环境，进入到详情页，点击左侧的环境设置，可以看到环境的 ID， 记住这里的环境 ID，后续上传文件的时候会用到。...[4io2i.png] 再次选择左侧列表的「静态网站托管」 [eqpgf.png] 在静态网站托管页面选择立即开通。 [f85zg.png] 等待静态网站托管服务开通后，你就可以看到这样的界面。...首先，进入到 vue 项目的 dist 目录: cd dist，然后，执行命令来上传文件 tcb hosting:deploy -e envId 这里你需要将 envId 替换为你自己的环境 ID，比如我的替换为...Router 的 History Mode 来做更好的 URL，但如果你不做任何配置，在云开发的 Hosting 上就会导致访问时出现 404 错误 [yigv6.png] 这个问题可以通过在云开发静态网站托管的设置页面将索引文档和错误文档均设置为

    5.3K50
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券