热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

运用Gatsby.js搭建静态博客5博客上线

原文链接:https:ssshooter.com2018-12…这真的是最简朴的一步啦~运用netlifydeploy你的网站netlify是一个能够协助你自动布置网站的平台。你能

原文链接:https://ssshooter.com/2018-12…

这真的是最简朴的一步啦~

运用 netlify deploy 你的网站

netlify 是一个能够协助你自动布置网站的平台。你能够挑选本身买效劳器,运转 build 然后推送到本身效劳器(或许直接运用 gh-pages),然则运用 netlify 你只需要一般推送项目到 GitHub,netlify 就会自动给你 deploy,这项效劳是免费的。

引荐直接用 GitHub 上岸

netlify 猎取权限

《运用 Gatsby.js 搭建静态博客 5 博客上线》

设置指令

《运用 Gatsby.js 搭建静态博客 5 博客上线》

都肯定今后实在体系已最先自动 build 你的项目了。你能够在 deploy 页面检察 build 进度。

《运用 Gatsby.js 搭建静态博客 5 博客上线》

细致设置能够在 settings 检察,能够举行构建、环境变量、hook 等相干设置。除了 deploy 功用外,netlify 另有许多其他效劳,比方能够为你供应上岸体系,或是表单效劳。

域名购置

许多人引荐在 GoDaddy 购置域名,然则,实在你直接看到售价是很廉价,不过续费就完整比其他网站都贵了。

轻微查了一下发明 namesilo 口碑貌似不错,最主要的是廉价,虽然这家网站的款式真的很老 😂

netlify 自定义域名设置

由于我已加了域名所以回不去了,细节步骤记得不是很清晰…

简朴来讲,点击谁人大大的 Set up a custom domain,在 netlify 提交你已购置的域名,然后 netlify 还供应了 DNS 效劳,按指引操纵即可。

关于 DNS

原本,你要接见一个网页是必需晓得网页的 IP 地点,然则数字不好记,所以涌现了域名。然则域名怎样跟 IP 关联呢?DNS 就像一个电话本,你能够拿着网站的域名问 DNS:这个网站的 IP 是什么?他通知你了,便能接见了。(不负责任推想)印象中很久很久之前,改 DNS 能够接见谷歌,也许是由于那时刻的墙只是破坏了域名效劳这一步吧?

所以,你具有域名了,就可以在 DNS 把你的域名“关联”到某个 IP,效果,接见你的域名,就可以如愿接见你的效劳器了。

关于 TTL

TTL(Time to live)是你修正域名效劳器以后旧数据保存的时刻,namesilo 的最低 TTL 也得是 3600,所以不要焦急,等一小时摆布就 OK 了。

天生 sitemap

有了本身的网站,你一定会想向谷歌等搜索引擎提交网址,然则总不能一条条手输吧?这个时刻就需要用到 sitemap 了。

Gatsby 当然是有天生 sitemap 的插件的——gatsby-plugin-sitemap

装置,然后在设置文件加上即可,sitemap 会输出在根目录。

// In your gatsby-config.js
siteMetadata: {
siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`]

下一步

批评体系的完成,要领多样,任君挑选。


推荐阅读
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • GreenDAO快速入门
    前言之前在自己做项目的时候,用到了GreenDAO数据库,其实对于数据库辅助工具库从OrmLite,到litePal再到GreenDAO,总是在不停的切换,但是没有真正去了解他们的 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • ps:写的第一个,不足之处,欢迎拍砖---只是想用自己的方法一步步去实现一些框架看似高大上的小功能(比如说模型中的toArraytoJsonsetAtt ... [详细]
  • 大坑|左上角_pycharm连接服务器同步写代码(图文详细过程)
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了pycharm连接服务器同步写代码(图文详细过程)相关的知识,希望对你有一定的参考价值。pycharm连接服务 ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • 1.移除consol.log()的babel插件安装:npmibabel-plugin-transform-remove-console-D配置:babel.config.js:这 ... [详细]
  • npminstall-Dbabelcorebabelpreset-envbabelplugin-transform-runtimebabelpolyfillbabel-loader ... [详细]
  • .babelrc是用来设置转码规则和插件的,这种文件在window上无法直接创建,也无法在HBuilder中创建,甚至无法查看,但可以在sublimetext中创建、查看并编辑。当 ... [详细]
  • 1、问题?项目打包报错;程序包com.sun.image.codec.jpeg不存在;2、原因尚不明确;由于jdk升级问题。才出现的,可能jdk6就不会出现;初步怀疑jdk的问题; ... [详细]
  • Sublime Text 3 + LiveReload + Chrome
    安装LiveReload在SublimeText3中安装LiveReload。macOS快捷键⌘+⇧+P,输入InstallPackage,搜索LiveReload并回车安装。(W ... [详细]
  • 第8章 使用外部和内部链接
    8.1使用web地址LearnAboutafricanelephants. ... [详细]
author-avatar
红酒醉红颜2702937481
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有