当您完成创建一个网站的设计和开发后,您需要将其部署到互联网上以供访问。今天着重介绍在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到该目录下,输入以下命令。
1 2 3
| 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)
如果不按照这样设置就会出现下面的错误:
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
| 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 - 4:02:23 PM: ruby-3.1.3 - 4:02:23 PM: No checksum for downloaded archive, recording checksum in user configuration. 4:02:23 PM: ruby-3.1.3 - 4:02:28 PM: ruby-3.1.3 - 4:02:30 PM: ruby-3.1.3 - 4:02:30 PM: ruby-3.1.3 - 4:02:30 PM: ruby-3.1.3 - 4:02:30 PM: ruby-3.1.3 - 4:02:31 PM: ruby-3.1.3 - 4:02:31 PM: ruby-3.1.3 - 4:02:31 PM: ruby-3.1.3 - 4:02:31 PM: ruby-3.1.3 - 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到该目录下,输入以下命令。
1 2 3
| bundle init bundle install git add Gemfile.lock
|
5.成功过后把这两个文件git到仓库。重新部署即可。
下面是成功的日志:
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 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217
| 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 - 4:11:48 PM: ruby-3.1.3 - 4:11:49 PM: No checksum for downloaded archive, recording checksum in user configuration. 4:11:49 PM: ruby-3.1.3 - 4:11:54 PM: ruby-3.1.3 - 4:11:56 PM: ruby-3.1.3 - 4:11:56 PM: ruby-3.1.3 - 4:11:57 PM: ruby-3.1.3 - 4:11:57 PM: ruby-3.1.3 - 4:11:57 PM: ruby-3.1.3 - 4:11:57 PM: ruby-3.1.3 - 4:11:57 PM: ruby-3.1.3 - 4:11:58 PM: ruby-3.1.3 - 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/