摘要：用和創(chuàng)建一個(gè)靜態(tài)博客翻譯和自己探索過(guò)程中的經(jīng)驗(yàn)總結(jié)原文參閱或本篇主要是對(duì)其精華內(nèi)容進(jìn)行翻譯以及實(shí)操過(guò)程中遇到的問(wèn)題解決和探索一些具體的操作步驟和細(xì)節(jié)我將忽略結(jié)合原文一起閱讀效果更佳注本文操作環(huán)境是介紹這是一個(gè)包含很多靜態(tài)內(nèi)容頁(yè)面的站點(diǎn)從技術(shù)

原文參閱: Building a static blog using Gatsby and Strapi或https://blog.strapi.io/buildi.... 本篇主要是對(duì)其精華內(nèi)容進(jìn)行翻譯, 以及實(shí)操過(guò)程中遇到的問(wèn)題解決和探索. 一些具體的操作步驟和細(xì)節(jié), 我將忽略, 結(jié)合原文一起閱讀效果更佳!
注: 本文操作環(huán)境是Linux VPS, CentOS 6 64bit

這是一個(gè)包含很多靜態(tài)內(nèi)容頁(yè)面的站點(diǎn), 從技術(shù)上來(lái)說(shuō)就如同一系列HTML文件, 展示給訪問(wèn)者. 與動(dòng)態(tài)網(wǎng)站不同的是, 他不需要后端開(kāi)發(fā)或者數(shù)據(jù)庫(kù)支撐. 發(fā)布靜態(tài)站點(diǎn)之所以容易, 是因?yàn)槲募恍枰蟼鞯椒?wù)器或者存儲(chǔ)器. 沒(méi)有額外的渲染頁(yè)面的請(qǐng)求, 也沒(méi)有數(shù)據(jù)庫(kù)被黑的風(fēng)險(xiǎn), 所以它既安全也快速.

為了快速建站, 其實(shí)很多開(kāi)源的靜態(tài)頁(yè)面生成框架可用, 比如前陣子我搞的Jekyll, Hugo, 好似國(guó)人偏愛(ài)的Hexo等等, 他們的工作原理相似, 內(nèi)容都是通過(guò)靜態(tài)文件(比如Markdown)或者帶有內(nèi)容的API, 通過(guò)獲取這些內(nèi)容, 注入到開(kāi)發(fā)者做好的模板, 最后生成一大堆HTML文件.

Progressive Web Apps (PWA)實(shí)際上是網(wǎng)頁(yè)應(yīng)用, 幾乎基于Javascript, 并且可靠, 快速, 有吸引力的. 這幾年比較火的Angular, Vue, React都是類(lèi)似的前端框架.

靜態(tài)站點(diǎn)遇見(jiàn)了PWA就產(chǎn)生了Gatsby

將這兩點(diǎn)組合起來(lái)的最佳選擇看起來(lái)就是Gatsby了, 但是同樣需要一個(gè)內(nèi)容接口, 這就是我將要展示的, 通過(guò)Strapi創(chuàng)建一個(gè)內(nèi)容API提供給Gatsby, 然后打包發(fā)布出一個(gè)靜態(tài)站點(diǎn).

這個(gè)并不是型男熟知的杰士派, 雖然我也用過(guò)這個(gè)發(fā)泥, 好像不是很好用. Gatsby是基于React的快速靜態(tài)網(wǎng)站框架, 有了它, 你就可以感覺(jué)飄飄然的開(kāi)發(fā)React網(wǎng)站了.

Strapi是一個(gè)基于高級(jí)的Nodejs API內(nèi)容管理框架. 聽(tīng)起來(lái)有點(diǎn)繞口, 通俗來(lái)說(shuō)就是讓你能簡(jiǎn)單, 安全, 高效的開(kāi)發(fā)出強(qiáng)大API的開(kāi)源的內(nèi)容管理框架. 它是免費(fèi)的, 人們都愛(ài)免費(fèi)的, 可以隨意在你的服務(wù)器上使用, 也非常具有可個(gè)性化, 可擴(kuò)展性的玩意.

我真想不到國(guó)內(nèi)幾乎沒(méi)有人用Gatsby和Strapi, 百度上查不到任何資料...

見(jiàn)證奇跡的時(shí)刻即將到來(lái), 我們快創(chuàng)建個(gè)Strapi API, 添加點(diǎn)內(nèi)容吧!

Requirements: please make sure Node 8 (or higher) and MongoDB are installed and running on your machine.

此時(shí), 暗喜前陣子已經(jīng)琢磨出來(lái)了并裝好了Node 8, 不過(guò)裝MongoDB就沒(méi)有了. 因此這里就要插入一段關(guān)于MongoDB的內(nèi)容了. 如果已經(jīng)有了請(qǐng)自動(dòng)跳過(guò)此內(nèi)容.

果斷找到文檔Install MongoDB Community Edition on Red Hat Enterprise or CentOS Linux, 這個(gè)redhat和centOS應(yīng)該是通用的吧- -! 看到Configure the package management system (yum)., 發(fā)現(xiàn)原來(lái)還有這種操作, 創(chuàng)建repo文件, 來(lái)安裝對(duì)應(yīng)版本的軟件. 閑話少說(shuō), 直接上代碼:

# cd /etc/yum.repos.d/
# touch mongodb-org-3.6.repo
# vi mongodb-org-3.6.repo

將以下內(nèi)容copy進(jìn)去保存

[mongodb-org-3.6]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.6/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.6.asc

再進(jìn)行安裝

# sudo yum install -y mongodb-org

如果有特殊需求, 請(qǐng)參閱上文提到的官方文檔, 我這里裝的是MongoDB Community Edition

按以上步驟很快就裝好了. 接下來(lái)啟動(dòng)mongod(如果沒(méi)有啟動(dòng)的話), 如下命令:

# service mongod start

完成后, 我們接著創(chuàng)建Strapi項(xiàng)目的主題, 推薦安裝strapi@alpha版本:

# npm i strapi@alpha -g

完成后, 去到你要?jiǎng)?chuàng)建本文項(xiàng)目的目錄, 比如我這里的路徑是/home/web/, 我在這里創(chuàng)建一個(gè)gatsby-strapi-tutorial目錄:

# mkdir gatsby-strapi-tutorial

在這里面搭一個(gè)API腳手架

# cd gatsby-strapi-tutorial
# strapi new api

進(jìn)入項(xiàng)目目錄, 并運(yùn)行Node.js服務(wù)器

# cd api
# strapi start

這里突然時(shí)不時(shí)卡住了, 如果你很順利, 那么可以跳過(guò)此內(nèi)容, 頻繁報(bào)錯(cuò)如下

[root@whidy api]# strapi start
DEBUG (24910 on whidy): Server wasn"t able to start properly.
ERROR (24910 on whidy): (hook:mongoose) takes too long to load

大概是網(wǎng)絡(luò)原因, 我聯(lián)通網(wǎng)絡(luò)出問(wèn)題, 換了電信幾番嘗試就好了.

操作過(guò)程中頻繁出現(xiàn)剛才的問(wèn)題, 我覺(jué)得不是網(wǎng)絡(luò)問(wèn)題那么簡(jiǎn)單, 我打算從數(shù)據(jù)庫(kù)方面著手完善一下試試, 當(dāng)然后來(lái)證明, 一切問(wèn)題都與MongoDB無(wú)關(guān), 所以下面縮進(jìn)內(nèi)容可以選擇性閱讀
大多數(shù)情況下我是不愿意理睬WARNING信息的, 只要不是ERROR就好, 但是這次我有點(diǎn)不爽, 后來(lái)折騰了半天發(fā)現(xiàn)有的很難處理, 好吧我錯(cuò)了, 我想我還是不死磕了吧?.

soft rlimits too low

WARNING: soft rlimits too low. rlimits set to 1024 processes, 64000 files. Number of processes should be at least 32000 : 0.5 times number of files.

參閱:

MongDB 啟動(dòng)警告 WARNING: soft rlimits too low

How to set ulimits for mongod?

versions of RHEL older than RHEL6

WARNING: You are running in OpenVZ which can cause issues on versions of RHEL older than RHEL6.

服務(wù)器硬件限制? 可以安全忽略.

參閱: WARNING: You are running in OpenVZ which can cause issues on versions of RHEL older than RHEL6.

Access Control
以為要搞賬戶什么的, 然后運(yùn)行mongo命令, 創(chuàng)建了一個(gè)admin賬戶:

# mango
> use admin
> db.createUser(
    {
      user: "username",
      pwd: "userpassword",
      roles: [ { role: "userAdminAnyDatabase", db: "admin" } ]
    }
  )
# mongo --port 27017 -u "username" -p "userpassword" --authenticationDatabase "admin"

其實(shí)我自己當(dāng)時(shí)也不知道是搞啥, 其實(shí)完全沒(méi)關(guān)系的操作. 很多人甚至官方文檔Start MongoDB without access control.也提到:

mongod --port 27017 --dbpath /data/db1

可是我一直報(bào)錯(cuò), 要么說(shuō)不存在, 搞半天才明白, 要手動(dòng)創(chuàng)建, 創(chuàng)建好了, 又說(shuō)服務(wù)被占用, service mongod stop停了服務(wù), 連上去了, show dbs發(fā)現(xiàn)跟之前的又不一樣, 沒(méi)有找到我之前看到的strapi庫(kù), 才恍然大悟, 原來(lái)其實(shí)我創(chuàng)建了一個(gè)跟之前無(wú)關(guān)的庫(kù)...

事實(shí)上, 啟動(dòng)mongod服務(wù)的時(shí)候, 它連接了一個(gè)默認(rèn)配置庫(kù), 這個(gè)庫(kù)的路徑時(shí)早就創(chuàng)建好的, 通過(guò)查看/etc/mongod.conf這個(gè)文件就知道了. 因此刪了那個(gè)沒(méi)用的db目錄. 接著操作.

后來(lái)第二天早上, 再次執(zhí)行strapi start很順利. 我也沒(méi)辦法再研究昨天究竟是為什么總是連不上了. 反正就是渣渣網(wǎng)絡(luò)經(jīng)常會(huì)帶來(lái)各種坑!?, 這段沒(méi)什么作用的內(nèi)容就過(guò)去了.

回到剛才strapi start, 成功之后, 我們?nèi)绻潜镜夭僮鞯? 帶有界面的操作系統(tǒng)的話就可以直接訪問(wèn)http://localhost:1337/admin了, 如果也是遠(yuǎn)程操作, 就改成IP就好了.

接下來(lái)的操作是創(chuàng)建用戶, 原文已經(jīng)圖文并茂, 傻子都能看懂的步驟了, 由于篇幅過(guò)大, 我就簡(jiǎn)單翻譯一下, 不詳細(xì)復(fù)述了嘿嘿~

按照原文操作:

創(chuàng)建管理員賬號(hào)(Create your first User)

創(chuàng)建內(nèi)容類(lèi)型(Create a Content Type)
名為article的內(nèi)容類(lèi)型有三個(gè)字段: title(字符串), content(文本), author(關(guān)系, 多文章對(duì)應(yīng)一個(gè)用戶).

添加幾項(xiàng)內(nèi)容到數(shù)據(jù)庫(kù)

訪問(wèn)文章列表頁(yè)

點(diǎn)擊Add New Article

插入值, 連接對(duì)應(yīng)的作者并保存

重復(fù)以上操作, 創(chuàng)建額外兩篇文章

允許API權(quán)限, 依原文對(duì)應(yīng)勾選保存

完成后, 就可以訪問(wèn)http://localhost:1337/article了.

到目前, 你的API搞定了, 我們要搞靜態(tài)網(wǎng)站啦

首先, 全局安裝Gatsby CLI:

# npm install --global gatsby-cli

回到之前提到的gatsby-strapi-tutorial目錄, 創(chuàng)建一個(gè)新博客:

# gatsby new blog

事情總是不是那么順利.

報(bào)錯(cuò), 需要git. 然而我的這臺(tái)嶄新的服務(wù)器還沒(méi)裝, 那就裝一個(gè)吧.

如果你的git已經(jīng)部署OK, 并且上面這個(gè)操作沒(méi)有問(wèn)題, 以下內(nèi)容可忽略:

參考Download for Linux and Unix執(zhí)行:

# yum install git

再次執(zhí)行后依舊報(bào)錯(cuò)(當(dāng)前git版本1.7.1)

error Command failed: git clone git://github.com/gatsbyjs/gatsby-starter-default.git blog --single-branch

推測(cè)是版本問(wèn)題. 只好手動(dòng)安裝了. 于是又找到這個(gè)安裝 Git

# yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel
# wget https://www.kernel.org/pub/software/scm/git/git-2.16.1.tar.gz
# tar -zxf git-2.16.1.tar.gz
# cd git-2.16.1
# make prefix=/usr/local all
# sudo make prefix=/usr/local install

漫長(zhǎng)的make prefix=/usr/local all之后, 提示:

    SUBDIR perl
/usr/bin/perl Makefile.PL PREFIX="/usr/local" INSTALL_BASE="" --localedir="/usr/local/share/locale"
Can"t locate ExtUtils/MakeMaker.pm in @INC (@INC contains: /usr/local/lib64/perl5 /usr/local/share/perl5 /usr/lib64/perl5/vendor_perl /usr/share/perl5/vendor_perl /usr/lib64/perl5 /usr/share/perl5 .) at Makefile.PL line 3.
BEGIN failed--compilation aborted at Makefile.PL line 3.
make[1]: *** [perl.mak] Error 2
make: *** [perl/perl.mak] Error 2

蛋疼, 等了半天, 又要解決這個(gè)問(wèn)題, 好在看起來(lái)比較容易處理, 參考git fails to build in Fedora 14, 然后繼續(xù)執(zhí)行最后兩條make命令, 雖然最后出來(lái)很多看起來(lái)很奇怪的內(nèi)容, 不過(guò)似乎是成功了. 執(zhí)行:

# git --version
git version 2.16.1

接下來(lái)我們?cè)僖淮螆?zhí)行gatsby new blog, 我擦還提示剛才的...single-branch的error, 這就坑爹了- -. 經(jīng)過(guò)簡(jiǎn)短的排查. 原來(lái)似乎他還是跑的舊版git, 需要?jiǎng)h掉之前yum自動(dòng)安裝的git 1.7.1, 我單純的以為直接自動(dòng)升級(jí)了. 于是:

# yum remove git

按照提示刪除成功后, 再次檢測(cè)git還是ok的, 這次我第三次執(zhí)行gatsby new blog, 終于成功了!

我這小白也不知道linux軟件管理是咋整的. 反正能繼續(xù)執(zhí)行卡了我半天的gatsby就好了吧...
每次創(chuàng)建速度很慢, 執(zhí)行gatsby new blog完成的時(shí)候提示added 1398 packages in 137.652s, 大概就是2分鐘多, 可能是安裝依賴(lài)包費(fèi)時(shí)吧

創(chuàng)建成功后, 接著操作, 進(jìn)入博客目錄

# cd blog

啟動(dòng)服務(wù)器

# gatsby develop

理論上你就可以通過(guò)http://localhost:8000訪問(wèn)到默認(rèn)的效果博客站點(diǎn)了.

然而又一次出現(xiàn)小插曲, 如果你是和我一樣遠(yuǎn)程訪問(wèn), 也許以下內(nèi)容對(duì)你有用
每次執(zhí)行gatsby develop的時(shí)間甚至更長(zhǎng), 完成時(shí)提示如下:
info bootstrap finished - 334.876 s

DONE  Compiled successfully in 90373ms 21:15:06


You can now view gatsby-starter-default in the browser.

http://localhost:8000/

View GraphiQL, an in-browser IDE, to explore your site"s data and schema

http://localhost:8000/___graphql

Note that the development build is not optimized.
To create a production build, use gatsby build
大概用了6分鐘左右, 糟糕的是并不能通過(guò)遠(yuǎn)程IP來(lái)訪問(wèn)! 查看了目錄下的配置文件和官方文檔, 也沒(méi)查到. 絕望之時(shí), 突然在大量資料中看到webpack也有這樣的問(wèn)題, 想起來(lái)之前webpack的server默認(rèn)配置也是無(wú)法通過(guò)ip訪問(wèn), 但是webpack的devServer配置host: "0.0.0.0"即可, 試了下:
# gatsby develop --host 0.0.0.0
又經(jīng)過(guò)4分鐘左右漫長(zhǎng)等待, 這次成功了! 不過(guò)我嘗試搜索Gatsby究竟用的什么服務(wù)器啟動(dòng), 為何不能像webpack那樣加一段配置呢, 卻沒(méi)有找到. 后來(lái)湊巧找到了一篇webpack下的issue, Server can"t be accessed via IP, 有人提到過(guò)這條命令.

因此, 從小插曲中來(lái)看, 遠(yuǎn)程訪問(wèn)控制的開(kāi)發(fā)者, 需要加個(gè)參數(shù), 具體命令:

# gatsby develop --host 0.0.0.0

這樣, 至此開(kāi)發(fā)模式服務(wù)器搞定.

Gatsby understands this pretty well. So its creators decided to build a specific and independent layer: the data layer. This entire system is strongly powered by GraphQL.

前面有一些插件介紹不多說(shuō)了, 執(zhí)行安裝:

# npm install --save gatsby-source-strapi

完成后, 需要做些配置, 修改gatsby-config.js文件, 替換成以下內(nèi)容:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-strapi`,
      options: {
        apiURL: `http://localhost:1337`,
        contentTypes: [ // List of the Content Types you want to be able to request from Gatsby.
          `article`,
          `user`
        ]
      },
    },
  ],
}

保存后, 重啟Gatsby服務(wù)器

為了在首頁(yè)顯示文章列表, 我們需要修改首頁(yè)代碼如下:

路徑: src/pages/index.js

import React from "react"
import Link from "gatsby-link"
const IndexPage = ({ data }) => (
  

    
Hi people
    
Welcome to your new Gatsby site.
    
Now go build something great.
    

      {data.allStrapiArticle.edges.map(document => (
        

          

            {document.node.title}
          
          
{document.node.content}
        
      ))}
    
    Go to page 2
  
)
export default IndexPage
export const pageQuery = graphql`
  query IndexQuery {
    allStrapiArticle {
      edges {
        node {
          id
          title
          content
        }
      }
    }
  }
`

這里就應(yīng)用到了GraphQL啦, 好激動(dòng)呢. 我們導(dǎo)出pageQuery, 一個(gè)GraphQL查詢(xún)會(huì)請(qǐng)求文章列表, 我們只需要將需要查詢(xún)的字段添加進(jìn)去就好了~

然后我們傳遞{ data }這個(gè)結(jié)構(gòu)對(duì)象作為IndexPage參數(shù), 遍歷它的allStrapiArticles對(duì)象, 來(lái)展示數(shù)據(jù).

GraphQL查詢(xún)可以快速生成, 你可以嘗試在http://localhost:8000/___graphql修改, 并測(cè)試.

首頁(yè)有了列表之后, 我們還要訪問(wèn)文章頁(yè)面呢, 接下來(lái)寫(xiě)一個(gè)模板:

路徑: src/templates/article.js

import React from "react"
import Link from "gatsby-link"
const ArticleTemplate = ({ data }) => (
  

    
{data.strapiArticle.title}
    
by {data.strapiArticle.author.username}
    
{data.strapiArticle.content}
  
)
export default ArticleTemplate
export const query = graphql`
  query ArticleTemplate($id: String!) {
    strapiArticle(id: {eq: $id}) {
      title
      content
      author {
        id
        username
      }
    }
  }
`

你需要手動(dòng)創(chuàng)建這個(gè)目錄和文件, 當(dāng)然Gatsby并不知道模板何時(shí)展示. 每篇文章都需要一個(gè)特別的URL, 感謝Gatsby提供的createPage函數(shù).

首先, 我們寫(xiě)個(gè)makeRequest函數(shù)來(lái)處理GraphQL請(qǐng)求. 然后通過(guò)createPage函數(shù)使我們?cè)讷@取的文章列表后為它們創(chuàng)建一個(gè)頁(yè)面, 路徑為文章id的URL, 回到blog目錄, 修改gatsby-node.js文件

const path = require(`path`);
const makeRequest = (graphql, request) => new Promise((resolve, reject) => {
  // Query for nodes to use in creating pages.
  resolve(
    graphql(request).then(result => {
      if (result.errors) {
        reject(result.errors)
      }
      return result;
    })
  )
});
// Implement the Gatsby API “createPages”. This is called once the
// data layer is bootstrapped to let plugins create pages from data.
exports.createPages = ({ boundActionCreators, graphql }) => {
  const { createPage } = boundActionCreators;
  const getArticles = makeRequest(graphql, `
    {
      allStrapiArticle {
        edges {
          node {
            id
          }
        }
      }
    }
    `).then(result => {
    // Create pages for each article.
    result.data.allStrapiArticle.edges.forEach(({ node }) => {
      createPage({
        path: `/${node.id}`,
        component: path.resolve(`src/templates/article.js`),
        context: {
          id: node.id,
        },
      })
    })
  });
  // Query for articles nodes to use in creating pages.
  return getArticles;
};

再次重啟Gatsby服務(wù)器.

現(xiàn)在你就能通過(guò)點(diǎn)擊首頁(yè)的文章進(jìn)入到文章內(nèi)容頁(yè)面了.

雖然這個(gè)似乎并不重要, 不過(guò)還是加上學(xué)習(xí)一下吧?

添加作者頁(yè)和創(chuàng)建文章頁(yè)很相似, 我們還是先創(chuàng)建個(gè)模板:

路徑: src/templates/user.js

import React from "react"
import Link from "gatsby-link"
const UserTemplate = ({ data }) => (
  

    
{data.strapiUser.username}
    

      {data.strapiUser.articles.map(article => (
        

          

            {article.title}
          
          
{article.content}
        
      ))}
    
  
)
export default UserTemplate
export const query = graphql`
  query UserTemplate($id: String!) {
    strapiUser(id: { eq: $id }) {
      id
      username
      articles {
        id
        title
        content
      }
    }
  }
`

然后再次修改gatsby-node.js來(lái)創(chuàng)建作者URLs:

const path = require(`path`);
const makeRequest = (graphql, request) => new Promise((resolve, reject) => {
  // Query for article nodes to use in creating pages.
  resolve(
    graphql(request).then(result => {
      if (result.errors) {
        reject(result.errors)
      }
      return result;
    })
  )
});

// Implement the Gatsby API “createPages”. This is called once the
// data layer is bootstrapped to let plugins create pages from data.
exports.createPages = ({ boundActionCreators, graphql }) => {
  const { createPage } = boundActionCreators;
  const getArticles = makeRequest(graphql, `
    {
      allStrapiArticle {
        edges {
          node {
            id
          }
        }
      }
    }
    `).then(result => {
    // Create pages for each article.
    result.data.allStrapiArticle.edges.forEach(({ node }) => {
      createPage({
        path: `/${node.id}`,
        component: path.resolve(`src/templates/article.js`),
        context: {
          id: node.id,
        },
      })
    })
  });
  const getAuthors = makeRequest(graphql, `
    {
      allStrapiUser {
        edges {
          node {
            id
          }
        }
      }
    }
    `).then(result => {
    // Create pages for each user.
    result.data.allStrapiUser.edges.forEach(({ node }) => {
      createPage({
        path: `/authors/${node.id}`,
        component: path.resolve(`src/templates/user.js`),
        context: {
          id: node.id,
        },
      })
    })
  });
  // Queries for articles and authors nodes to use in creating pages.
  return Promise.all([
    getArticles,
    getAuthors,
  ])
};

重啟服務(wù)器, 刷新頁(yè)面, Wow! 大功告成! 時(shí)不時(shí)很酷!!!

恭喜, 你成功的創(chuàng)建了一個(gè)超快的很好維護(hù)的博客! 然后各種夸獎(jiǎng)Blabla

接下來(lái)做什么呢? 你可以去更多的挖掘Gatsby和Strapi的各種優(yōu)點(diǎn), 你可以試著增加這些功能:

作者列表

文章分類(lèi)

用Strapi API創(chuàng)建評(píng)論系統(tǒng), 或者直接用Disqus

當(dāng)然你也可以試著搞其他站點(diǎn), 例如電商站, 企業(yè)站等等

當(dāng)然為了進(jìn)一步方便開(kāi)發(fā), 你可能需要一個(gè)方便的發(fā)布在網(wǎng)上的存儲(chǔ)載體, Blablabla...

本教程GitHub源碼地址, 你可以clone下來(lái), 運(yùn)行npm run setup, blablabla... 我是個(gè)愛(ài)研究的人, 我要一步步操作, 才不要clone.

這次通過(guò)Gatsby和Strapi搭建一個(gè)簡(jiǎn)單的博客站點(diǎn), 還是挺不容易的, 總共花了將近兩天的時(shí)間. 不過(guò)個(gè)人感覺(jué)還是值得的! 其中有很多地方是可以更加深入的學(xué)習(xí)和了解的, 這也算初步接觸了react, mongodb, graphQL等相關(guān)知識(shí)實(shí)操, 同時(shí)也可以在后期完善更多的功能, 了解并學(xué)習(xí)一些ES6, 模板的寫(xiě)法技巧等等. 也希望通過(guò)此次研究以后能更進(jìn)一步熟悉其他框架, 數(shù)據(jù)庫(kù), 后端等思想~

相關(guān)參閱匯總

本文操作參考Building a static blog using Gatsby and Strapi或https://blog.strapi.io/building-a-static-website-using-gatsby-and-strapi/(如果前面的那個(gè)無(wú)法訪問(wèn))
Gatsby官方使用手冊(cè)和開(kāi)發(fā)教程

Strapi文檔

MongoDB 3.6官方手冊(cè)和runoob上的MongoDB 教程


最后打個(gè)小廣告, 我有個(gè)GitHub項(xiàng)目, 用于記錄我每天學(xué)習(xí)或者瞎折騰的技術(shù), 范圍不限, 有興趣可以star我的whidy daily