摘要：用和創建一個靜態博客翻譯和自己探索過程中的經驗總結原文參閱或本篇主要是對其精華內容進行翻譯以及實操過程中遇到的問題解決和探索一些具體的操作步驟和細節我將忽略結合原文一起閱讀效果更佳注本文操作環境是介紹這是一個包含很多靜態內容頁面的站點從技術

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

這是一個包含很多靜態內容頁面的站點, 從技術上來說就如同一系列HTML文件, 展示給訪問者. 與動態網站不同的是, 他不需要后端開發或者數據庫支撐. 發布靜態站點之所以容易, 是因為文件只需要上傳到服務器或者存儲器. 沒有額外的渲染頁面的請求, 也沒有數據庫被黑的風險, 所以它既安全也快速.

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

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

靜態站點遇見了PWA就產生了Gatsby

將這兩點組合起來的最佳選擇看起來就是Gatsby了, 但是同樣需要一個內容接口, 這就是我將要展示的, 通過Strapi創建一個內容API提供給Gatsby, 然后打包發布出一個靜態站點.

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

Strapi是一個基于高級的Nodejs API內容管理框架. 聽起來有點繞口, 通俗來說就是讓你能簡單, 安全, 高效的開發出強大API的開源的內容管理框架. 它是免費的, 人們都愛免費的, 可以隨意在你的服務器上使用, 也非常具有可個性化, 可擴展性的玩意.

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

見證奇跡的時刻即將到來, 我們快創建個Strapi API, 添加點內容吧!

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

此時, 暗喜前陣子已經琢磨出來了并裝好了Node 8, 不過裝MongoDB就沒有了. 因此這里就要插入一段關于MongoDB的內容了. 如果已經有了請自動跳過此內容.

果斷找到文檔Install MongoDB Community Edition on Red Hat Enterprise or CentOS Linux, 這個redhat和centOS應該是通用的吧- -! 看到Configure the package management system (yum)., 發現原來還有這種操作, 創建repo文件, 來安裝對應版本的軟件. 閑話少說, 直接上代碼:

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

將以下內容copy進去保存

[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

再進行安裝

# sudo yum install -y mongodb-org

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

按以上步驟很快就裝好了. 接下來啟動mongod(如果沒有啟動的話), 如下命令:

# service mongod start

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

# npm i strapi@alpha -g

完成后, 去到你要創建本文項目的目錄, 比如我這里的路徑是/home/web/, 我在這里創建一個gatsby-strapi-tutorial目錄:

# mkdir gatsby-strapi-tutorial

在這里面搭一個API腳手架

# cd gatsby-strapi-tutorial
# strapi new api

進入項目目錄, 并運行Node.js服務器

# cd api
# strapi start

這里突然時不時卡住了, 如果你很順利, 那么可以跳過此內容, 頻繁報錯如下

[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

大概是網絡原因, 我聯通網絡出問題, 換了電信幾番嘗試就好了.

操作過程中頻繁出現剛才的問題, 我覺得不是網絡問題那么簡單, 我打算從數據庫方面著手完善一下試試, 當然后來證明, 一切問題都與MongoDB無關, 所以下面縮進內容可以選擇性閱讀
大多數情況下我是不愿意理睬WARNING信息的, 只要不是ERROR就好, 但是這次我有點不爽, 后來折騰了半天發現有的很難處理, 好吧我錯了, 我想我還是不死磕了吧?.

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 啟動警告 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.

服務器硬件限制? 可以安全忽略.

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

Access Control
以為要搞賬戶什么的, 然后運行mongo命令, 創建了一個admin賬戶:

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

其實我自己當時也不知道是搞啥, 其實完全沒關系的操作. 很多人甚至官方文檔Start MongoDB without access control.也提到:

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

可是我一直報錯, 要么說不存在, 搞半天才明白, 要手動創建, 創建好了, 又說服務被占用, service mongod stop停了服務, 連上去了, show dbs發現跟之前的又不一樣, 沒有找到我之前看到的strapi庫, 才恍然大悟, 原來其實我創建了一個跟之前無關的庫...

事實上, 啟動mongod服務的時候, 它連接了一個默認配置庫, 這個庫的路徑時早就創建好的, 通過查看/etc/mongod.conf這個文件就知道了. 因此刪了那個沒用的db目錄. 接著操作.

后來第二天早上, 再次執行strapi start很順利. 我也沒辦法再研究昨天究竟是為什么總是連不上了. 反正就是渣渣網絡經常會帶來各種坑!?, 這段沒什么作用的內容就過去了.

回到剛才strapi start, 成功之后, 我們如果是本地操作的, 帶有界面的操作系統的話就可以直接訪問http://localhost:1337/admin了, 如果也是遠程操作, 就改成IP就好了.

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

按照原文操作:

創建管理員賬號(Create your first User)

創建內容類型(Create a Content Type)
名為article的內容類型有三個字段: title(字符串), content(文本), author(關系, 多文章對應一個用戶).

添加幾項內容到數據庫

訪問文章列表頁

點擊Add New Article

插入值, 連接對應的作者并保存

重復以上操作, 創建額外兩篇文章

允許API權限, 依原文對應勾選保存

完成后, 就可以訪問http://localhost:1337/article了.

到目前, 你的API搞定了, 我們要搞靜態網站啦

首先, 全局安裝Gatsby CLI:

# npm install --global gatsby-cli

回到之前提到的gatsby-strapi-tutorial目錄, 創建一個新博客:

# gatsby new blog

事情總是不是那么順利.

報錯, 需要git. 然而我的這臺嶄新的服務器還沒裝, 那就裝一個吧.

如果你的git已經部署OK, 并且上面這個操作沒有問題, 以下內容可忽略:

參考Download for Linux and Unix執行:

# yum install git

再次執行后依舊報錯(當前git版本1.7.1)

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

推測是版本問題. 只好手動安裝了. 于是又找到這個安裝 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

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

# git --version
git version 2.16.1

接下來我們再一次執行gatsby new blog, 我擦還提示剛才的...single-branch的error, 這就坑爹了- -. 經過簡短的排查. 原來似乎他還是跑的舊版git, 需要刪掉之前yum自動安裝的git 1.7.1, 我單純的以為直接自動升級了. 于是:

# yum remove git

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

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

創建成功后, 接著操作, 進入博客目錄

# cd blog

啟動服務器

# gatsby develop

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

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

因此, 從小插曲中來看, 遠程訪問控制的開發者, 需要加個參數, 具體命令:

# gatsby develop --host 0.0.0.0

這樣, 至此開發模式服務器搞定.

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.

前面有一些插件介紹不多說了, 執行安裝:

# npm install --save gatsby-source-strapi

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

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服務器

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

路徑: 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
        }
      }
    }
  }
`

這里就應用到了GraphQL啦, 好激動呢. 我們導出pageQuery, 一個GraphQL查詢會請求文章列表, 我們只需要將需要查詢的字段添加進去就好了~

然后我們傳遞{ data }這個結構對象作為IndexPage參數, 遍歷它的allStrapiArticles對象, 來展示數據.

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

首頁有了列表之后, 我們還要訪問文章頁面呢, 接下來寫一個模板:

路徑: 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
      }
    }
  }
`

你需要手動創建這個目錄和文件, 當然Gatsby并不知道模板何時展示. 每篇文章都需要一個特別的URL, 感謝Gatsby提供的createPage函數.

首先, 我們寫個makeRequest函數來處理GraphQL請求. 然后通過createPage函數使我們在獲取的文章列表后為它們創建一個頁面, 路徑為文章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服務器.

現在你就能通過點擊首頁的文章進入到文章內容頁面了.

雖然這個似乎并不重要, 不過還是加上學習一下吧?

添加作者頁和創建文章頁很相似, 我們還是先創建個模板:

路徑: 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來創建作者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,
  ])
};

重啟服務器, 刷新頁面, Wow! 大功告成! 時不時很酷!!!

恭喜, 你成功的創建了一個超快的很好維護的博客! 然后各種夸獎Blabla

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

作者列表

文章分類

用Strapi API創建評論系統, 或者直接用Disqus

當然你也可以試著搞其他站點, 例如電商站, 企業站等等

當然為了進一步方便開發, 你可能需要一個方便的發布在網上的存儲載體, Blablabla...

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

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

相關參閱匯總

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

Strapi文檔

MongoDB 3.6官方手冊和runoob上的MongoDB 教程


最后打個小廣告, 我有個GitHub項目, 用于記錄我每天學習或者瞎折騰的技術, 范圍不限, 有興趣可以star我的whidy daily