我想用gatsbyjs搞一个静态网站

最近想弄一个生活、办公技巧分项的静态网站,为什么要用静态的呢?成本啊兄dei。静态网页生成有很多工具,hexohugonuxt等等,很多的。这次呢我想试试gatsbyjs,所以才有了此文,盆友们可以去https://www.gatsbyjs.org/看详细介绍。

gatsbyjs安装

在安装gatsbyjs之前,首先得确保NodeGit的环境已经正确安装,未安装的,可以看我之前的博文,或者自行百度,在此不再详述。我直接安装gatsbyjs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
C:\Users\lenovo>npm install -g gatsby-cli
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
C:\Users\lenovo\AppData\Roaming\npm\gatsby -> C:\Users\lenovo\AppData\Roaming\npm\node_modules\gatsby-cli\lib\index.js

> core-js@2.6.11 postinstall C:\Users\lenovo\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> gatsby-telemetry@1.1.46 postinstall C:\Users\lenovo\AppData\Roaming\npm\node_modules\gatsby-cli\node_modules\gatsby-telemetry
> node src/postinstall.js || true

╔════════════════════════════════════════════════════════════════════════╗
║ ║
║ Gatsby collects anonymous usage analytics ║
║ to help improve Gatsby for all users. ║
║ ║
║ If you'd like to opt-out, you can use `gatsby telemetry --disable` ║
║ To learn more, checkout https://gatsby.dev/telemetry ║
║ ║
╚════════════════════════════════════════════════════════════════════════╝

> gatsby-cli@2.8.22 postinstall C:\Users\lenovo\AppData\Roaming\npm\node_modules\gatsby-cli
> node scripts/postinstall.js

╔════════════════════════════════════════════════════════════════════════╗
║ ║
║ Gatsby collects anonymous usage analytics ║
║ to help improve Gatsby for all users. ║
║ ║
║ If you'd like to opt-out, you can use `gatsby telemetry --disable` ║
║ To learn more, checkout https://gatsby.dev/telemetry ║
║ ║
╚════════════════════════════════════════════════════════════════════════╝
Success!

Welcome to the Gatsby CLI! Please visit https://www.gatsbyjs.org/docs/gatsby-cli/ for more information.

Usage: gatsby <command> [options]

Commands:
gatsby develop Start development server. Watches files, rebuilds, and hot reloads if something
changes
gatsby build Build a Gatsby project.
gatsby serve Serve previously built Gatsby site.
gatsby info Get environment information for debugging and issue reporting
gatsby clean Wipe the local gatsby environment including built assets and cache
gatsby repl Get a node repl with context of Gatsby environment, see
(https://www.gatsbyjs.org/docs/gatsby-repl/)
gatsby new [rootPath] [starter] Create new Gatsby project.
gatsby plugin Useful commands relating to Gatsby plugins
gatsby telemetry Enable or disable Gatsby anonymous analytics collection.

Options:
--verbose Turn on verbose output [boolean] [default: false]
--no-color, --no-colors Turn off the color in output [boolean] [default: false]
--json Turn on the JSON logger [boolean] [default: false]
-h, --help Show help [boolean]
-v, --version Show the version of the Gatsby CLI and the Gatsby package in the current project [boolean]
npm WARN ink@2.6.0 requires a peer of @types/react@>=16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN auto-bind@3.0.0 requires a peer of @types/react@>=16.8.0 but none is installed. You must install peer dependencies yourself.

+ gatsby-cli@2.8.22
added 376 packages from 164 contributors in 76.778s

可以看看我本机的环境:

1
2
3
4
5
6
7
8
9
10
11
12
C:\Users\lenovo>gatsby info

System:
OS: Windows 10 10.0.18362
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Binaries:
Node: 13.5.0 - D:\Program Files\nodejs\node.EXE
npm: 6.13.4 - D:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.8.1
Browsers:
Edge: 44.18362.449.0

新建网站

首先在本机创建一个文件夹用于存放网页,然后执行新建命令gatsby new [sitename] [模版路径],gatsbyjs会通过git去下载模版并创建项目。创建完成后会自动安装,但是可能会安装失败,因为默认npm的镜像地址会被我们的大型局域网屏蔽,我们可以借助nrm来管理镜像地址。我在安装过程中,遇到了

1
unbuild: sill gentlyRm target.inParent =  false  

简单粗暴的方式就是直接删除node_modules目录,重新安装。如果是windows的话,请事先安装:

1
npm install windows-build-tools -g

gatsby-transformer-sharp编译时用,否则会提示编译失败。最后安装成功:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
E:\gatsbyjs\happylife>npm install

> sharp@0.23.4 install E:\gatsbyjs\happylife\node_modules\sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.8.1/libvips-8.8.1-win32-x64.tar.gz
info sharp Creating E:\gatsbyjs\happylife\node_modules\sharp\build\Release
info sharp Copying DLLs from E:\gatsbyjs\happylife\node_modules\sharp\vendor\lib to E:\gatsbyjs\happylife\node_modules\sharp\build\Release
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 41 packages from 91 contributors in 252.487s

27 packages are looking for funding
run `npm fund` for details

我们来试试gatsbyjs的初步呈现效果,我们通过cmd进入到网站目录执行gatsby develop即可运行

我们来换个主题吧,在https://www.gatsbyjs.org/starters/?v=2可以看到很多风格非常漂亮的模版。我这里选择的是gatsby-starter-hero-blog,进入到gatsby-starter-hero-blog的页面,可以看到如何下载模版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
E:\gatsbyjs>gatsby new happylife https://github.com/greglobinski/gatsby-starter-hero-blog
info Creating new site from git: https://github.com/greglobinski/gatsby-starter-hero-blog.git
Cloning into 'happylife'...
remote: Enumerating objects: 197, done.
remote: Counting objects: 100% (197/197), done.
remote: Compressing objects: 100% (159/159), done.
remote: Total 197 (delta 16), reused 150 (delta 11), pack-reused 0 eceiving objects: 100% (197/197), 8.79 MiB | 71.00 KiReceiving objects: 100% (197/197), 8.83 MiB | 58.00 KiB/s, done.

Resolving deltas: 100% (16/16), done.
success Created starter directory layout
info Installing packages...
npm WARN deprecated postcss-cssnext@3.1.0: 'postcss-cssnext' has been deprecated in favor of 'postcss-preset-env'. Read more at https://moox.io/blog/deprecating-cssnext/
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated md5-file@3.2.3: This module is looking for a new maintainer.
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated joi@11.4.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated core-js@1.2.7: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated hoek@4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated topo@2.0.2: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated @types/vfile-message@2.0.0: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.

> deasync@0.1.19 install E:\gatsbyjs\happylife\node_modules\deasync
> node ./build.js

`win32-x64-node-13` exists; testing
Binary is fine; exiting

> sharp@0.23.4 install E:\gatsbyjs\happylife\node_modules\sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached C:\Users\lenovo\AppData\Roaming\npm-cache\_libvips\libvips-8.8.1-win32-x64.tar.gz
info sharp Creating E:\gatsbyjs\happylife\node_modules\sharp\build\Release
info sharp Copying DLLs from E:\gatsbyjs\happylife\node_modules\sharp\vendor\lib to E:\gatsbyjs\happylife\node_modules\sharp\build\Release

> sharp@0.23.3 install E:\gatsbyjs\happylife\node_modules\sharp-cli\node_modules\sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached C:\Users\lenovo\AppData\Roaming\npm-cache\_libvips\libvips-8.8.1-win32-x64.tar.gz
info sharp Creating E:\gatsbyjs\happylife\node_modules\sharp-cli\node_modules\sharp\build\Release
info sharp Copying DLLs from E:\gatsbyjs\happylife\node_modules\sharp-cli\node_modules\sharp\vendor\lib to E:\gatsbyjs\happylife\node_modules\sharp-cli\node_modules\sharp\build\Release

> core-js@2.6.11 postinstall E:\gatsbyjs\happylife\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> core-js-pure@3.6.2 postinstall E:\gatsbyjs\happylife\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall E:\gatsbyjs\happylife\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> gatsby-telemetry@1.1.46 postinstall E:\gatsbyjs\happylife\node_modules\gatsby-telemetry
> node src/postinstall.js || true


> cwebp-bin@5.1.0 postinstall E:\gatsbyjs\happylife\node_modules\cwebp-bin
> node lib/install.js

√ cwebp pre-build test passed successfully

> mozjpeg@6.0.1 postinstall E:\gatsbyjs\happylife\node_modules\mozjpeg
> node lib/install.js

√ mozjpeg pre-build test passed successfully

> pngquant-bin@5.0.2 postinstall E:\gatsbyjs\happylife\node_modules\pngquant-bin
> node lib/install.js

√ pngquant pre-build test passed successfully

> gatsby-cli@2.8.23 postinstall E:\gatsbyjs\happylife\node_modules\gatsby\node_modules\gatsby-cli
> node scripts/postinstall.js


> gatsby@2.18.18 postinstall E:\gatsbyjs\happylife\node_modules\gatsby
> node scripts/postinstall.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN gatsby-plugin-styled-jsx@3.1.17 requires a peer of styled-jsx@^3.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN react-addons-perf@15.4.2 requires a peer of react-dom@^15.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-react-app@5.1.0 requires a peer of babel-eslint@10.x but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-react-app@5.1.0 requires a peer of eslint@6.x but none is installed. You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.2.1 requires a peer of bufferutil@^4.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ws@7.2.1 requires a peer of utf-8-validate@^5.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN react-instantsearch-native@5.7.0 requires a peer of react-native@>= 0.32.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-graphql@2.1.1 requires a peer of graphql@^0.12.0 || ^0.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN gatsby-starter-hero-blog@2.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 3046 packages from 1481 contributors in 1263.674s

56 packages are looking for funding
run `npm fund` for details

info Initialising git in happylife
Initialized empty Git repository in E:/gatsbyjs/happylife/.git/
info Create initial git commit in happylife
info
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

cd happylife
gatsby develop


我们可以看到其目录结构:

可以在content\meta\config.js修改网站的一些基本属性,需要新建文章的话,就按content\posts下面的结构类似就可.
详情可以访问https://dev.greglobinski.com/install-blog-starter/查看。
我们的菜单可以再src\components\Menu\Menu.js修改:

1
2
3
4
5
6
7
this.items = [
{ to: "/", label: "Home", icon: FaHome },
{ to: "/category/", label: "Categories", icon: FaTag },
{ to: "/search/", label: "Search", icon: FaSearch },
...pages,
{ to: "/contact/", label: "Contact", icon: FaEnvelope }
];

这里的pages是只想content\pages目录,可以自己按照/No--title/的格式新增菜单。
编译上传到七牛云:

1
gatsby build && qshell qupload2 --overwrite=true --rescan-local=true --src-dir=E:\gatsbyjs\happylife\public --bucket=eyiadminxxxxx

最后献上地址:https://live.52fx.biz/

参考

https://www.gatsbyjs.org/docs/gatsby-on-windows/

我想用gatsbyjs搞一个静态网站

https://blogs.52fx.biz/posts/2363611189.html

作者

eyiadmin

发布于

2020-01-08

更新于

2024-05-31

许可协议

评论