日记:记一次在netlify上部署jekyll失败到成功的经历

当您完成创建一个网站的设计和开发后,您需要将其部署到互联网上以供访问。今天着重介绍在Netlify将您的网站部署到云端服务器,从失败到成功的案列,有经历的可以借鉴参考下。

首先我先介绍下本地部署的环境:

1.安装ruby环境,选择rubyinstaller-devkit-3.1.3版本,添加环境变量。

官方地址:https://rubyinstaller.org/downloads/

2.安装RubyGems,解压后直接cmd到目录,输入命令:

ruby setup.rb 

官方地址:https://rubygems.org/pages/download

3.安装jekyll

gem install jekyll 

4.新建博客

jekyll new Blog

5.启动项目,测试是否可以正常运行。

jekyll server 

完成之后重启电脑

接着就开始选择主题

1.到jekyllthemes.org或者github.com找主题,最后选择了Hydeout这个主题。主题地址:https://github.com/fongandrew/hydeout

2.新建一个网站,把主题全部复制进去,定位到站点目录,比如我的就是C:\Users\Administrator\Desktop\jekyll目录下。

3.命令行cd到该目录下,输入以下命令。

bundle init 
bundle install
git add Gemfile.lock

4.启动项目

jekyll server 

5.成功运行网站。输入地址http://127.0.1.1:4000也正常访问。

下面开始git到仓库

这步我就不细讲了,上传同步到github仓库就可以了

然后开始部署到netfily

1.登录到netfily网站,选择add my site

2.导入github库

3.在Build command选项中填入jekyll build

4.在Publish directory选项中填入_site

5.打开Environment variables选项,填入RUBY_VERSION 值为3.1.3

(这步最好在本地新建一个.ruby-version文件,里面填入3.1.3,官方文档有记载。)

6.开始部署

7.等待完成,会显示成功的字样即可。

这里着重介绍一下几个坑点

上面的步骤看似简单,一步成功到位,其实是踩了不少的坑。

1.首先在netfily部署时没有设置环境变量,导致部署时不知道rudy版本,报错。之后查看官方的文档才知道。(https://docs.netlify.com/configure-builds/available-software-at-build-time/)

2.Build command这行需要填入jekyll build。不知道原因,反正不填这个也一样报错。

3.删除package.json文件,否则也会报错

4.最大的坑点就是Gemfile这个文件,因为netlify部署文件时,需要识别这个文件里面的依赖包,好匹配网站部署。我最后也是在官方文档查看才知道的。(https://docs.netlify.com/configure-builds/manage-dependencies/#ruby-dependencies)

如果不按照这样设置就会出现下面的错误:


4:02:18 PM: build-image version: 7fd17ad8d79d1952d384fb389d8e787becff0260 (focal)
4:02:18 PM: buildbot version: 7fd17ad8d79d1952d384fb389d8e787becff0260
4:02:18 PM: Fetching cached dependencies
4:02:18 PM: Failed to fetch cache, continuing with build
4:02:18 PM: Starting to prepare the repo for build
4:02:19 PM: No cached dependencies found. Cloning fresh repo
4:02:19 PM: git clone --filter=blob:none https://github.com/hui122667209/test02
4:02:19 PM: Preparing Git Reference refs/heads/main
4:02:20 PM: Parsing package.json dependencies
4:02:21 PM: Starting build script
4:02:21 PM: Installing dependencies
4:02:21 PM: Python version set to 2.7
4:02:21 PM: v16.19.1 is already installed.
4:02:22 PM: Now using node v16.19.1 (npm v8.19.3)
4:02:22 PM: Enabling Node.js Corepack
4:02:22 PM: Started restoring cached build plugins
4:02:22 PM: Finished restoring cached build plugins
4:02:22 PM: Required ruby-3.1.3 is not installed.
4:02:22 PM: To install do: 'rvm install "ruby-3.1.3"'
4:02:22 PM: Attempting Ruby version 3.1.3, read from .ruby-version file
4:02:22 PM: Required ruby-3.1.3 is not installed - installing.
4:02:22 PM: Searching for binary rubies, this might take some time.
4:02:23 PM: Found remote file https://rvm_io.global.ssl.fastly.net/binaries/ubuntu/20.04/x86_64/ruby-3.1.3.tar.bz2
4:02:23 PM: Checking requirements for ubuntu.
4:02:23 PM: Requirements installation successful.
4:02:23 PM: ruby-3.1.3 - #configure
4:02:23 PM: ruby-3.1.3 - #download
4:02:23 PM: No checksum for downloaded archive, recording checksum in user configuration.
4:02:23 PM: ruby-3.1.3 - #validate archive
4:02:28 PM: ruby-3.1.3 - #extract
4:02:30 PM: ruby-3.1.3 - #validate binary
4:02:30 PM: ruby-3.1.3 - #setup
4:02:30 PM: ruby-3.1.3 - #gemset created /opt/buildhome/.rvm/gems/ruby-3.1.3@global
4:02:30 PM: ruby-3.1.3 - #importing gemset /opt/buildhome/.rvm/gemsets/global.gems........................................
4:02:31 PM: ruby-3.1.3 - #generating global wrappers........
4:02:31 PM: ruby-3.1.3 - #gemset created /opt/buildhome/.rvm/gems/ruby-3.1.3
4:02:31 PM: ruby-3.1.3 - #importing gemsetfile /opt/buildhome/.rvm/gemsets/default.gems evaluated to empty gem list
4:02:31 PM: ruby-3.1.3 - #generating default wrappers........
4:02:32 PM: Using /opt/buildhome/.rvm/gems/ruby-3.1.3
4:02:32 PM: Using Ruby version 3.1.3
4:02:32 PM: Using PHP version 8.0
4:02:32 PM: Started restoring cached corepack dependencies
4:02:32 PM: Finished restoring cached corepack dependencies
4:02:32 PM: No npm workspaces detected
4:02:32 PM: Started restoring cached node modules
4:02:32 PM: Finished restoring cached node modules
4:02:32 PM: Installing npm packages using npm version 8.19.3
4:02:33 PM: npm ERR! code ERESOLVE
4:02:33 PM: npm ERR! ERESOLVE unable to resolve dependency tree
4:02:33 PM: npm ERR!
4:02:33 PM: npm ERR! While resolving: undefined@undefined
4:02:33 PM: npm ERR! Found: stylelint@13.13.1
4:02:33 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
4:02:33 PM: npm ERR! node_modules/stylelint
4:02:33 PM: npm ERR!   dev stylelint@"^13.0.0" from the root project
4:02:33 PM: npm ERR!
4:02:33 PM: npm ERR! Could not resolve dependency:
4:02:33 PM: npm ERR! peer stylelint@"^8.3.0 || ^9.0.0 || ^10.0.0" from stylelint-config-standard-scss@1.1.0
4:02:33 PM: npm ERR! node_modules/stylelint-config-standard-scss
4:02:33 PM: npm ERR!   dev stylelint-config-standard-scss@"^1.1.0" from the root project
4:02:33 PM: npm ERR!
4:02:33 PM: npm ERR! Fix the upstream dependency conflict, or retry
4:02:33 PM: npm ERR! this command with --force, or --legacy-peer-deps
4:02:33 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
4:02:33 PM: npm ERR!
4:02:33 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
4:02:33 PM: npm ERR! A complete log of this run can be found in:
4:02:33 PM: npm ERR!     /opt/buildhome/.npm/_logs/2023-03-13T08_02_32_978Z-debug-0.log
4:02:33 PM: Error during npm install
4:02:33 PM: Build was terminated: Build script returned non-zero exit code: 1
4:02:33 PM: Failing build: Failed to build site
4:02:33 PM: Finished processing build request in 15.245s

4.你可先在本地删除Gemfile和Gemfile.lock这两个文件,之后定位到站点根目录,命令行cd到该目录下,输入以下命令。

bundle init
bundle install
git add Gemfile.lock

5.成功过后把这两个文件git到仓库。重新部署即可。

下面是成功的日志:

4:10:33 PM: Waiting for other deploys from your team to complete. Check the queue: https://app.netlify.com/teams/hui122667209/builds
4:11:44 PM: build-image version: 7fd17ad8d79d1952d384fb389d8e787becff0260 (focal)
4:11:44 PM: buildbot version: 7fd17ad8d79d1952d384fb389d8e787becff0260
4:11:44 PM: Fetching cached dependencies
4:11:44 PM: Failed to fetch cache, continuing with build
4:11:44 PM: Starting to prepare the repo for build
4:11:44 PM: No cached dependencies found. Cloning fresh repo
4:11:44 PM: git clone --filter=blob:none https://github.com/hui122667209/test02
4:11:45 PM: Preparing Git Reference refs/heads/main
4:11:45 PM: Parsing package.json dependencies
4:11:46 PM: Starting build script
4:11:46 PM: Installing dependencies
4:11:46 PM: Python version set to 2.7
4:11:47 PM: v16.19.1 is already installed.
4:11:47 PM: Now using node v16.19.1 (npm v8.19.3)
4:11:47 PM: Enabling Node.js Corepack
4:11:47 PM: Started restoring cached build plugins
4:11:47 PM: Finished restoring cached build plugins
4:11:47 PM: Required ruby-3.1.3 is not installed.
4:11:47 PM: To install do: 'rvm install "ruby-3.1.3"'
4:11:47 PM: Attempting Ruby version 3.1.3, read from .ruby-version file
4:11:48 PM: Required ruby-3.1.3 is not installed - installing.
4:11:48 PM: Searching for binary rubies, this might take some time.
4:11:48 PM: Found remote file https://rvm_io.global.ssl.fastly.net/binaries/ubuntu/20.04/x86_64/ruby-3.1.3.tar.bz2
4:11:48 PM: Checking requirements for ubuntu.
4:11:48 PM: Requirements installation successful.
4:11:48 PM: ruby-3.1.3 - #configure
4:11:48 PM: ruby-3.1.3 - #download
4:11:49 PM: No checksum for downloaded archive, recording checksum in user configuration.
4:11:49 PM: ruby-3.1.3 - #validate archive
4:11:54 PM: ruby-3.1.3 - #extract
4:11:56 PM: ruby-3.1.3 - #validate binary
4:11:56 PM: ruby-3.1.3 - #setup
4:11:57 PM: ruby-3.1.3 - #gemset created /opt/buildhome/.rvm/gems/ruby-3.1.3@global
4:11:57 PM: ruby-3.1.3 - #importing gemset /opt/buildhome/.rvm/gemsets/global.gems........................................
4:11:57 PM: ruby-3.1.3 - #generating global wrappers........
4:11:57 PM: ruby-3.1.3 - #gemset created /opt/buildhome/.rvm/gems/ruby-3.1.3
4:11:57 PM: ruby-3.1.3 - #importing gemsetfile /opt/buildhome/.rvm/gemsets/default.gems evaluated to empty gem list
4:11:58 PM: ruby-3.1.3 - #generating default wrappers........
4:11:58 PM: Using /opt/buildhome/.rvm/gems/ruby-3.1.3
4:11:58 PM: Using Ruby version 3.1.3
4:11:59 PM: Using PHP version 8.0
4:11:59 PM: Started restoring cached ruby gems
4:11:59 PM: Finished restoring cached ruby gems
4:11:59 PM: Installing gem bundle
4:11:59 PM: [DEPRECATED] The `--path` flag is deprecated because it relies on being remembered across bundler invocations, which bundler will no longer do in future versions. Instead please use `bundle config set --local path '/opt/build/cache/bundle'`, and stop using this flag
4:11:59 PM: [DEPRECATED] The --binstubs option will be removed in favor of `bundle binstubs --all`
4:12:00 PM: Resolving dependencies...Fetching gem metadata from https://rubygems.org/............
4:12:00 PM: ..............................
4:12:00 PM: Using bundler 2.3.26
4:12:00 PM: Fetching http_parser.rb 0.8.0
4:12:00 PM: Fetching faraday-net_http 3.0.2
4:12:00 PM: Using ruby2_keywords 0.0.5
4:12:00 PM: Fetching ffi 1.15.5
4:12:00 PM: Fetching forwardable-extended 2.6.0
4:12:00 PM: Fetching google-protobuf 3.22.2 (x86_64-linux)
4:12:00 PM: Fetching rouge 4.1.0
4:12:00 PM: Fetching webrick 1.8.1
4:12:00 PM: Fetching public_suffix 5.0.1
4:12:00 PM: Fetching colorator 1.1.0
4:12:00 PM: Fetching concurrent-ruby 1.2.2
4:12:00 PM: Fetching eventmachine 1.2.7
4:12:00 PM: Fetching rb-fsevent 0.11.2
4:12:00 PM: Fetching liquid 4.0.4
4:12:00 PM: Fetching mercenary 0.4.0
4:12:00 PM: Fetching safe_yaml 1.0.5
4:12:00 PM: Fetching jekyll-paginate 1.1.0
4:12:00 PM: Fetching rexml 3.2.5
4:12:00 PM: Fetching unicode-display_width 2.4.2
4:12:00 PM: Installing colorator 1.1.0
4:12:00 PM: Installing faraday-net_http 3.0.2
4:12:00 PM: Installing jekyll-paginate 1.1.0
4:12:00 PM: Installing forwardable-extended 2.6.0
4:12:00 PM: Installing unicode-display_width 2.4.2
4:12:00 PM: Installing safe_yaml 1.0.5
4:12:00 PM: Installing mercenary 0.4.0
4:12:00 PM: Installing rb-fsevent 0.11.2
4:12:00 PM: Installing webrick 1.8.1
4:12:00 PM: Installing liquid 4.0.4
4:12:00 PM: Fetching faraday 2.7.4
4:12:00 PM: Fetching pathutil 0.16.2
4:12:00 PM: Installing rexml 3.2.5
4:12:00 PM: Installing public_suffix 5.0.1
4:12:00 PM: Fetching terminal-table 3.0.2
4:12:00 PM: Installing pathutil 0.16.2
4:12:00 PM: Installing http_parser.rb 0.8.0 with native extensions
4:12:01 PM: Installing faraday 2.7.4
4:12:01 PM: Installing terminal-table 3.0.2
4:12:01 PM: Installing eventmachine 1.2.7 with native extensions
4:12:01 PM: Installing concurrent-ruby 1.2.2
4:12:01 PM: Fetching addressable 2.8.1
4:12:01 PM: Installing rouge 4.1.0
4:12:01 PM: Fetching kramdown 2.4.0
4:12:01 PM: Installing google-protobuf 3.22.2 (x86_64-linux)
4:12:01 PM: Installing addressable 2.8.1
4:12:01 PM: Installing ffi 1.15.5 with native extensions
4:12:01 PM: Installing kramdown 2.4.0
4:12:01 PM: Fetching sawyer 0.9.2
4:12:01 PM: Installing sawyer 0.9.2
4:12:01 PM: Fetching i18n 1.12.0
4:12:01 PM: Fetching octokit 4.25.1
4:12:01 PM: Fetching sass-embedded 1.59.2 (x86_64-linux-gnu)
4:12:01 PM: Installing i18n 1.12.0
4:12:01 PM: Installing octokit 4.25.1
4:12:01 PM: Fetching jekyll-gist 1.5.0
4:12:01 PM: Installing jekyll-gist 1.5.0
4:12:01 PM: Fetching kramdown-parser-gfm 1.1.0
4:12:01 PM: Installing kramdown-parser-gfm 1.1.0
4:12:01 PM: Installing sass-embedded 1.59.2 (x86_64-linux-gnu)
4:12:01 PM: Fetching jekyll-sass-converter 3.0.0
4:12:01 PM: Installing jekyll-sass-converter 3.0.0
4:12:09 PM: Fetching rb-inotify 0.10.1
4:12:09 PM: Installing rb-inotify 0.10.1
4:12:09 PM: Fetching listen 3.8.0
4:12:09 PM: Installing listen 3.8.0
4:12:09 PM: Fetching jekyll-watch 2.2.1
4:12:09 PM: Installing jekyll-watch 2.2.1
4:12:12 PM: Fetching em-websocket 0.5.3
4:12:12 PM: Installing em-websocket 0.5.3
4:12:12 PM: Fetching jekyll 4.3.2
4:12:12 PM: Installing jekyll 4.3.2
4:12:12 PM: Fetching jekyll-feed 0.17.0
4:12:13 PM: Installing jekyll-feed 0.17.0
4:12:13 PM: Using jekyll-theme-hydeout 4.2.0 from source at `.`
4:12:13 PM: Bundle complete! 2 Gemfile dependencies, 39 gems now installed.
4:12:13 PM: Bundled gems are installed into `/opt/build/cache/bundle`
4:12:13 PM: Gem bundle installed
4:12:13 PM: Started restoring cached go cache
4:12:13 PM: Finished restoring cached go cache
4:12:13 PM: go version go1.19.7 linux/amd64
4:12:13 PM: Detected 1 framework(s)
4:12:13 PM: "jekyll" at version "unknown"
4:12:13 PM: Section completed: initializing
4:12:14 PM: 
4:12:14 PM:   Netlify Build                                                 
4:12:14 PM: ────────────────────────────────────────────────────────────────
4:12:14 PM: 
4:12:14 PM:  Version
4:12:14 PM:   @netlify/build 29.6.4
4:12:14 PM: 
4:12:14 PM:  Flags
4:12:14 PM:   baseRelDir: true
4:12:14 PM:   buildId: 640eda798627570008b53ed7
4:12:14 PM:   deployId: 640eda798627570008b53ed9
4:12:14 PM: 
4:12:14 PM:  Current directory
4:12:14 PM:   /opt/build/repo
4:12:14 PM: 
4:12:14 PM:  Config file
4:12:14 PM:   No config file was defined: using default values.
4:12:14 PM: 
4:12:14 PM:  Context
4:12:14 PM:   production
4:12:14 PM: 
4:12:14 PM:   1. Build command from Netlify app                             
4:12:14 PM: ────────────────────────────────────────────────────────────────
4:12:14 PM: 
4:12:14 PM: $ jekyll build
4:12:15 PM: Configuration file: /opt/build/repo/_config.yml
4:12:15 PM: To use retry middleware with Faraday v2.0+, install `faraday-retry` gem
4:12:15 PM:             Source: /opt/build/repo
4:12:15 PM:        Destination: /opt/build/repo/_site
4:12:15 PM:  Incremental build: disabled. Enable with --incremental
4:12:15 PM:       Generating...
4:12:15 PM:        Jekyll Feed: Generating feed for posts
4:12:16 PM:                     done in 0.862 seconds.
4:12:16 PM:  Auto-regeneration: disabled. Use --watch to enable.
4:12:16 PM: 
4:12:16 PM: (build.command completed in 1.4s)
4:12:16 PM: 
4:12:16 PM:   2. Deploy site                                                
4:12:16 PM: ────────────────────────────────────────────────────────────────
4:12:16 PM: 
4:12:16 PM: Starting to deploy site from '_site'
4:12:16 PM: Calculating files to upload
4:12:16 PM: Starting post processing
4:12:16 PM: 1 new files to upload
4:12:16 PM: 0 new functions to upload
4:12:16 PM: Section completed: deploying
4:12:16 PM: Post processing - HTML
4:12:16 PM: Site deploy was successfully initiated
4:12:16 PM: 
4:12:16 PM: (Deploy site completed in 205ms)
4:12:16 PM: 
4:12:16 PM:   Netlify Build Complete                                        
4:12:16 PM: ────────────────────────────────────────────────────────────────
4:12:16 PM: 
4:12:16 PM: (Netlify Build completed in 1.6s)
4:12:16 PM: Caching artifacts
4:12:17 PM: Post processing - header rules
4:12:16 PM: Started saving ruby gems
4:12:16 PM: Finished saving ruby gems
4:12:16 PM: Started saving build plugins
4:12:17 PM: Post processing - redirect rules
4:12:16 PM: Finished saving build plugins
4:12:16 PM: Started saving pip cache
4:12:17 PM: Finished saving pip cache
4:12:17 PM: Post processing done
4:12:17 PM: Started saving emacs cask dependencies
4:12:17 PM: Finished saving emacs cask dependencies
4:12:17 PM: Started saving maven dependencies
4:12:17 PM: Section completed: postprocessing
4:12:17 PM: Finished saving maven dependencies
4:12:17 PM: Started saving boot dependencies
4:12:17 PM: Finished saving boot dependencies
4:12:17 PM: Started saving rust rustup cache
4:12:17 PM: Finished saving rust rustup cache
4:12:17 PM: Started saving go dependencies
4:12:17 PM: Finished saving go dependencies
4:12:18 PM: Site is live 
4:12:18 PM: Cached Ruby version 3.1.3
4:12:18 PM: Build script success
4:12:18 PM: Section completed: building
4:12:19 PM: Uploading Cache of size 113.3MB
4:12:20 PM: Section completed: cleanup
4:12:20 PM: Finished processing build request in 36.25s

最后说一下在netlify部署网站的优缺点:

优点:

简单易用:Netlify提供了简单易用的界面和工具,使得网站部署变得非常容易。

免费:Netlify提供了免费的基本服务,包括构建和部署网站、CDN加速、HTTPS支持等。

自动化:Netlify提供了自动化的构建和部署功能,使得网站更新和部署变得更加快速和方便。

CDN加速:Netlify使用全球分布式CDN网络,使得网站可以快速加载和访问。

HTTPS支持:Netlify提供了免费的HTTPS支持,使得网站可以安全地访问。

实时日志:Netlify提供了实时日志功能,使得您可以随时查看网站的构建和部署过程。

缺点:

限制:Netlify提供的免费服务有一些限制,例如每月只能构建和部署一定数量的网站,100g的流量和300分钟的构建时长。

定价:Netlify的收费计划相对较贵,如果您需要更多的功能和服务,可能需要支付更高的费用。

依赖GitHub:Netlify需要将您的网站文件存储在GitHub存储库中,如果您不喜欢使用GitHub,可能需要寻找其他的解决方案。

技术限制:Netlify适用于静态网站,如果您的网站需要后端服务或数据库支持,可能需要寻找其他的解决方案。

总的来说,Netlify是一个非常优秀的网站部署平台,适用于静态网站和前端开发人员。它提供了简单易用、免费、自动化、CDN加速、HTTPS支持和实时日志等优点。但是,它也有一些缺点,例如限制、定价、依赖GitHub和技术限制等。

朋友们也可以在官网论坛谈论问题,以下是你可能用得到的网站:

https://answers.netlify.com/

https://medium.com/netlify/how-netlifys-deploying-and-routing-infrastructure-works-c90adbde3b8d

https://docs.netlify.com/configure-builds/manage-dependencies/#ruby-dependencies

https://bundler.io/guides/using_bundler_in_applications.html

https://www.netlify.com/blog/2017/05/11/migrating-your-jekyll-site-to-netlify/?_ga=2.199879533.238142804.1678109082-391509379.1678109082

https://docs.netlify.com/configure-builds/available-software-at-build-time/

https://bundler.io/guides/using_bundler_in_applications.html

https://docs.netlify.com/configure-builds/manage-dependencies/#ruby-dependencies

https://docs.netlify.com/integrations/frameworks/

https://answers.netlify.com/t/support-guide-frequently-encountered-problems-during-builds/213

https://docs.netlify.com/site-deploys/overview/