为艺术而技术

Hello World

May 04, 2019

前情提要

两年前(2017)搞了一个, 也就是这里,采用的当时流行的Jekyll,它是基于Ruby语言的。但是它有个很诱人的特点就是可以很方便的免费使用Github Pages来做静态网站。步骤如下:

  • 选择一个theme,Jekyllthemes里有很多,我采用的是Minimal Mistakes

  • 创建一个域名,没啥说的。我使用的GoDaddy,但并不推荐。

  • 配置DNS,一个是A,指向github pages的。 一个是CNAME,指向你github的网站。

  • 当时的github pages还没有支持SSL,所以中间又转了一层,加了Cloudflare,这里有教程

简单来说: Github Pages + Cloudflare/ Godaddy + Jkeyll

目前动机

上面网站我写了一些文章后发现,主要都是生活方面的。 还是想打算找个地方专门写技术文章。所以转到这里为艺术而技术

这次采用的平台是Gatsby。本来还是享用Github Pages来做,结果不支持,也就是说你必须每次手动把生成的东西放上去。还好Netlify支持,也就是自动发现Github Repo的更新并发布。另外还有个bonus:SSL,不用再麻烦Cloudflare,其实现在的Github Pages也已经支持SSL了.

简单来说: Netlify + Godaddy + Gatsby

目的就是写 有趣有用 的文章

语法高亮显示

def foldRight[A, B](as: List[A], z: B)(f: (A, B) => B): B = 
  as match {
    case Nil => z
    case Cons(x, xs) => f(x, foldRight(xs, z)(f))
var s = "JavaScript syntax highlighting";
alert(s);
s = "Python syntax highlighting"
print s
class Test{
  public static void main(String args[]){
    System.out.println("Java syntax highlighting");
  }
}

默认starter blog 不支持上面的语言高亮显示,根据这篇文章需要在 gatsby-browser.js 里面加上下面这行:

require("prismjs/themes/prism-solarizedlight.css")

加上google Analysitics

使用gatsby-plugin-google-analytics

在gatsby-config.js 加上下面:

{
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "UA-XXXXXXXXX-X",
      },
    },

加上Disqus评论

  • Disqus注册而获得一个shortname

  • 增加包

    yarn add disqus-react

    或者

    npm install disqus-react --save
  • 修改src/templates/blog-posts.js

    import { DiscussionEmbed } from "disqus-react";

    在render()方法里添加

    const disqusShortname = "yourdisqusshortname";
    const disqusConfig = {
      identifier: post.id,
      title: post.frontmatter.title,
    };

    在UI部分添加

    <DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />

增加adsense

采用gatsby-plugin-google-adsense

// In your gatsby-config.js file
plugins: [
    {
      resolve: `gatsby-plugin-google-adsense`,
      options: {
        publisherId: `ca-pub-xxxxxxxxxx`
      },
    },
]

致谢

https://daveceddia.com/start-blog-gatsby-netlify/

https://daveceddia.com/how-to-blog/

https://mk.gg/add-disqus-comments-to-gatsby-blog/


Qingfei Yuan

Written by Qingfei Yuan who builds useful things.

© 2019 - 2020 yuanqingfei
Creative Commons License