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

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

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

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

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

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

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

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

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

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

見證奇跡的時(shí)刻即將到來, 我們快創(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)琢磨出來了并裝好了Node 8, 不過裝MongoDB就沒有了. 因此這里就要插入一段關(guān)于MongoDB的內(nèi)容了. 如果已經(jīng)有了請(qǐng)自動(dòng)跳過此內(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)原來還有這種操作, 創(chuàng)建repo文件, 來安裝對(duì)應(yīng)版本的軟件. 閑話少說, 直接上代碼:

# 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

按以上步驟很快就裝好了. 接下來啟動(dòng)mongod(如果沒有啟動(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í)卡住了, 如果你很順利, 那么可以跳過此內(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ò)出問題, 換了電信幾番嘗試就好了.

操作過程中頻繁出現(xiàn)剛才的問題, 我覺得不是網(wǎng)絡(luò)問題那么簡單, 我打算從數(shù)據(jù)庫方面著手完善一下試試, 當(dāng)然后來證明, 一切問題都與MongoDB無關(guān), 所以下面縮進(jìn)內(nèi)容可以選擇性閱讀
大多數(shù)情況下我是不愿意理睬WARNING信息的, 只要不是ERROR就好, 但是這次我有點(diǎn)不爽, 后來折騰了半天發(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í)完全沒關(guān)系的操作. 很多人甚至官方文檔Start MongoDB without access control.也提到:

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

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

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

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

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

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

按照原文操作:

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

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

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

訪問文章列表頁

點(diǎn)擊Add New Article

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

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

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

完成后, 就可以訪問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ù)器還沒裝, 那就裝一個(gè)吧.

如果你的git已經(jīng)部署OK, 并且上面這個(gè)操作沒有問題, 以下內(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è)是版本問題. 只好手動(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

漫長的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è)問題, 好在看起來比較容易處理, 參考git fails to build in Fedora 14, 然后繼續(xù)執(zhí)行最后兩條make命令, 雖然最后出來很多看起來很奇怪的內(nèi)容, 不過似乎是成功了. 執(zhí)行:

# git --version
git version 2.16.1

接下來我們?cè)僖淮螆?zhí)行gatsby new blog, 我擦還提示剛才的...single-branch的error, 這就坑爹了- -. 經(jīng)過簡短的排查. 原來似乎他還是跑的舊版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分鐘多, 可能是安裝依賴包費(fèi)時(shí)吧

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

# cd blog

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

# gatsby develop

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

然而又一次出現(xiàn)小插曲, 如果你是和我一樣遠(yuǎn)程訪問, 也許以下內(nèi)容對(duì)你有用
每次執(zhí)行gatsby develop的時(shí)間甚至更長, 完成時(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分鐘左右, 糟糕的是并不能通過遠(yuǎn)程IP來訪問! 查看了目錄下的配置文件和官方文檔, 也沒查到. 絕望之時(shí), 突然在大量資料中看到webpack也有這樣的問題, 想起來之前webpack的server默認(rèn)配置也是無法通過ip訪問, 但是webpack的devServer配置host: "0.0.0.0"即可, 試了下:
# gatsby develop --host 0.0.0.0
又經(jīng)過4分鐘左右漫長等待, 這次成功了! 不過我嘗試搜索Gatsby究竟用的什么服務(wù)器啟動(dòng), 為何不能像webpack那樣加一段配置呢, 卻沒有找到. 后來湊巧找到了一篇webpack下的issue, Server can"t be accessed via IP, 有人提到過這條命令.

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

# gatsby develop --host 0.0.0.0

這樣, 至此開發(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.

前面有一些插件介紹不多說了, 執(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ù)器

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

路徑: 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查詢會(huì)請(qǐng)求文章列表, 我們只需要將需要查詢的字段添加進(jìn)去就好了~

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

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

首頁有了列表之后, 我們還要訪問文章頁面呢, 接下來寫一個(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ù).

首先, 我們寫個(gè)makeRequest函數(shù)來處理GraphQL請(qǐng)求. 然后通過createPage函數(shù)使我們?cè)讷@取的文章列表后為它們創(chuàng)建一個(gè)頁面, 路徑為文章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)在你就能通過點(diǎn)擊首頁的文章進(jìn)入到文章內(nèi)容頁面了.

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

添加作者頁和創(chuàng)建文章頁很相似, 我們還是先創(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來創(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ù)器, 刷新頁面, Wow! 大功告成! 時(shí)不時(shí)很酷!!!

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

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

作者列表

文章分類

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

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

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

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

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

相關(guān)參閱匯總

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

Strapi文檔

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


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