Gatsby Blog 博客 Starter: Gatsby-Blog-Starter-Dyuzz

写在前面

由于学习和工作的需要，要不断学习各种新技术或工具过，学的快，但是忘的也快。因此，早在数年以前，就有了写Blog的想法，一方面是为了记录、总结学习过程以防遗忘，另一方面希望分享自己浅薄的知识，或许可为他人带来一点思路。目前，常见的Blog平台，如CSDN、博客园、新浪、简书等，页面均包含大量广告，臃肿、丑陋且个性化程度低，这一点让我无法接受。当前，我也不是针对哪个平台，但是为什么要自己总结的知识为这些无良平台创造广告流量呢？前一段时间，用简书写过几篇Blog，不到一个月就因敏感词被永久封禁，这愈加坚定了我自建Blog网站的想法。

最近一段时间由于新冠的原因，在家里有闲暇时间，且未来一段时间的学习中，可能需要使用Javascript，故打算基于Javascript搭建自己Blog站点，以学习和了解JS。经过一顿搜索后，目前，应用最广的是Hexo静态网站生成器，但是本人一贯原则是，在Optional下无论什么工具都用开源的和最新的，因此选中了基于React和GraphQL的GatsbyJS网站生成器。

由于我之前从事的C++桌面三维可视化应用的开发，并无任何前端开发经验，因此，以calpa的gatsby-starter-calpa脚手架为基础，对其进行了约一个星期的小刀窄斧地改造，添加部分新功能，修改布局，以迎合本人低俗的审美，最终形成的Blog网站见这里

开源之道，有取有还，现将可以一键部署、启动的Gatsby Blog Starter Dyuzz博客框架开源，欢迎大家通过这个Starter搭建与Dyuzz's Blog相同或相似的Blog平台。

Github 地址：github.com/Dyuzz/Gatsb…
若喜欢此框架，请给个star，starer多的话将会是一种动力促使我持续更新。

功能特性

框架特性

基于GatsbyJS v2
支持Google Analytics
Web App Manifest
可托管部署在Netlify（可参考前一篇Blog: 常见静态网站托管平台简介）
评论区 (powered by Gitalk)
高速解析 Markdown (有两个版本：Remarkable和MDX,目前开源版本为Remarkable)
自动SiteMap,可在Google和Baidu搜索资源管理中提交站点地图链接
Netlify CMS支持，可通过在线CMS添加、编辑、发布Blog（可参考前一篇Blog: 为Gatsby网站增添Netlify CMS）
右侧TOC（TableOfContexts）目录支持。

UI特性

响应式设计适配手机浏览器、和PC浏览器。
懒加载（图片） (基于lozad.js)
自动加载 Font Awesome (基于react-fontawesome)
流畅滑动设计 (基于smooth-scroll)
pagination设计

使用该Blog的前提条件

Git
Nodejs
Gatsbyjs CLI

安装与配置

安装

安装gatsby cli

npm install --global gatsby-cli
复制代码

安装该Starter

方法一：使用Gatsby创建新 Gatsby项目，xxxxx为自定义项目名称

gatsby new xxxxx https://github.com/Dyuzz/Gatsby-Blog-Starter-Dyuzz
复制代码

方法二：若方法一安装失败，可以尝试使用以下命令安装。

从github将本项目下载到本地

git clone https://github.com/Dyuzz/Gatsby-Blog-Starter-Dyuzz.git
复制代码

进入改目录，并安装依赖的js模块，注意由于国内网速的原因可能会失败，多安装几次，或者挂代理或者更换npm国内镜像源。

cd Gatsby-Blog-Starter-Dyuzz
npm install
复制代码

建立blog,输入以下命令，之后在Chrome或者Firefox中输入127.0.0.1:8000，便可看到一键部署的Blog

gatsby develop
复制代码

配置

大部分需要修改的内容如网站标题、Gitalk api、图标等，在 data/template/config.json中更改：

{
  "url": "https://www.dyuzz.club",
  "meta": {
    "favicon": "/favicons/android-chrome-512x512.png",
    "keyword": "Dyuzz, blog, C++",
    "description": "Dyuzz 的开发随笔",
    "theme_color": "#384f7c",
    "google_site_verification": "W1hBc-xxxxxxxxxxxxxxx_-G3ZY78q6PVBI"
  },
  "name": "Dyuzz",
  "about": "/2020/03/28/about-Dyuzz/",
  "email": "706940134@qq.com",
  "stats": {
    "image": "/favicons/android-chrome-512x512.png",
    "title": "之前一个月",
    "description": "之前一个月"
  },
  "title": "Dyuzz 的开发随笔",
  "gitalk": {
    "repo": "GiTalkofBlog",
    "admin": ["Dyuzz"],
    "owner": "Dyuzz",
    "clientID": "b00xxxxxxxxx6cdx",
    "clientSecret": "30df6fxxxxxxxxxxxxxd",
    "pagerDirection": "first",
    "distractionFreeMode": true
  },
  "License": "by",
  "friends": [
    {
      "href": "http://adcfj.cn/",
      "title": "数字中国研究院"
    }
  ],
  "iconUrl": "/favicons/android-chrome-512x512.png",
  "wordings": ["C++, 地理信息工程", "非专业开发者"],
  "gaTrackId": "UA-84737574-3",
  "navbarList": [
    {
      "href": "/guestbook/",
      "title": "留言板"
    },
    {
      "href": "/tags/",
      "title": "Tags"
    },
    {
      "href": "/2020/03/28/about-Dyuzz/",
      "title": "关于作者"
    }
  ],
  "redirectors": [
    {
      "toPath": "/2020/03/28/about-Dyuzz/",
      "fromPath": "/about/"
    }
  ],
  "gaOptimizeId": "GTM-WHP7SC5",
  "carouselItems": [
    {
      "src": "/favicons/android-chrome-512x512.png",
      "target": "/stats/"
    }
  ],
  "zhihuUsername": "dyuzz",
  "githubUsername": "Dyuzz",
  "maxPostsInPage": 10,
  "facebook": "Dyuzz"
}

复制代码

若需要使用Google Analytics，则在gatsby-config.js中更改Tracking ID ：

    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // replace "UA-XXXXXXXXX-X" with your own Tracking ID
        trackingId: "xxxxxxxxxx",
      },
    },  
复制代码

致谢

感谢GatsbyJS开源社区和Calpa的开源代码，以使零基础的我快速搭建一个心怡的Blog

联系

如果您遇到什么问题，可在留言板留言

作者：Dyuzz
链接：https://juejin.im/post/5e9824dc6fb9a03c3a089158
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

posted @ 2020-04-16 17:37 Dyuzz 阅读(122) 评论(0) 收藏举报

刷新页面返回顶部

Dyuzz