Bridgetown 사이트를 업그레이드하는 방법

Bridgetown 사이트를 업그레이드하는 데 문제가 있는 경우 이것이 도움이 될 수 있습니다.

한동안 Bridgetown으로 소규모 사이트를 구축해 왔습니다. 때때로 Rails는 특정 프로젝트에 적합하지 않으며 Bridgetown은 작업을 완료하고 프로세스를 즐기기에 충분합니다. 또한 Ruby를 사용합니다. 가장 좋은 부분.

야심차게 진화했지만 Bridgetown은 여전히 ​​정적 사이트 생성기로 남아 있습니다.

정적 사이트 생성기란 무엇입니까?

프레임워크, Javascript 빌드 도구 및 임의 컴파일 오류 이전에는 웹 사이트가 서버와 짜잔 FTP로 연결되는 유일한 폴더였습니다. 귀하의 웹사이트가 활성화되었습니다.

이제 상황이 달라졌습니다. 더 발전된 요구 사항이 있지만 저와 같은 사람들은 Webpack 오류 201이 하루를 망치기 전에 그 시절을 그리워합니다.

Tangent aide, 저는 이 사이트에서 약 2년 동안 Bridgetown을 사용해 왔으며 최근 Jared Whyte에서 Bridgetown Version 1이(가) 준비되었다고 발표했습니다. 너무 감동해서 Jared on Github 후원까지 했습니다 .

나는 아일랜드 농부로 자랐기 때문에 이것은 큰 일입니다. 아일랜드 농부를 아는 사람이라면 누구나 돈을 쓰는 것이 생소한 개념이라는 것을 알고 있습니다. 나는 아일랜드 농부들이 그들의 우체통으로 가는 청구서를 들을 수 있다고 확신합니다.

최신 버전으로 업그레이드해서 에스빌드를 사용하고 싶었습니다. 나는 몇 가지 문제에 부딪쳤으므로 같은 문제를 가진 사람에게 도움이 되기를 바랍니다.

the upgrade guide 및 running the script을 따라 webpack을 esbuild로 전환한 후 몇 가지 오류가 발생했습니다.

config/esbuild.defaults.js:68:10: note: This error came from the "onLoad" callback registered here
   68 │ build.onLoad({ filter: /\.(css)$/ }, async (args) => 
     ╵ ~~~~~~

결국 TailwindCSS를 업데이트하고 이전 버전tailwind.config.js의 형식이 잘못되었기 때문인 것으로 밝혀졌습니다.

내 tailwind.config.js 파일을 수정한 후 모든 것이 작동했습니다.

내가 따랐던 모든 단계는 다음과 같습니다.

이것을 방문했습니다 site

Gemfile에 gem puma를 추가하고 bundle update를 실행했습니다.

런 번들 binstubs bridgetown-core

별도의 브리지타운 사이트를 만들고 config.ru , Rakefile , config/puma.rb 및 server/* 아래의 모든 파일을 복사했습니다.

란bin/bridgetown esbuild migrate-from-webpack 작성자Andrew Mason

제거됨 start.js , sync.js

내package.json에서 브라우저 동기화 및 동시 제거

Rakefile를 esbuild을 사용하도록 변경

# Rakefile
require "bridgetown"

Bridgetown.load_tasks

# Run rake without specifying any command to execute a deploy build by default.
task default: :deploy

#
# Standard set of tasks, which you can customize if you wish:
#
desc "Build the Bridgetown site for deployment"
task :deploy => [:clean, "frontend:build"] do
 Bridgetown::Commands::Build.start
end

desc "Build the site in a test environment"
task :test do
 ENV["BRIDGETOWN_ENV"] = "test"
 Bridgetown::Commands::Build.start
end

desc "Runs the clean command"
task :clean do
 Bridgetown::Commands::Clean.start
end

namespace :frontend do
 desc "Build the frontend with esbuild for deployment"
 task :build do
  sh "yarn run esbuild"
 end

 desc "Watch the frontend with esbuild during development"
 task :dev do
  sh "yarn run esbuild-dev"
 rescue Interrupt
 end
end

#
# Add your own Rake tasks here! You can use `environment` as a prerequisite
# in order to write automations or other commands requiring a loaded site.
#
# task :my_task => :environment do
# puts site.root_dir
# automation do
# say_status :rake, "I'm a Rake tast =) #{site.config.url}"
# end
# end


bin/bridgetown configure bt-postcss


bin/bridgetown configure stimulus


bin/bridgetown configure tailwindcss

그 후 esbuild가 CSS를 생성하지 않는 오류가 발생했습니다. 스택 추적이 잘못되어 디버그하기가 어려웠습니다. 그러나 tailwind 구성을 수정하여 모든 것이 작동하기 시작했습니다. 이것은 운동하는 데 몇 시간이 걸렸습니다.

다음으로 컬렉션이 다르게 작동하기 때문에 액체 템플릿을 업데이트해야 했습니다.

# Before
for post in site.posts %}
#After
{% for post in collections.posts.resources %}

In one of my components, I did the following to keep the same a tag href
# Before
post.url
# After
post.relative_url

그런 다음 원사 배포 대신 Netlify를 실행bridgetown deploy하도록 변경했습니다.

그 후 resource title 대신 page.title 를 사용하도록 머리를 업데이트해야 했습니다.

<!-- src/_components/head.liquid -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{% capture resource_title %}{{ title | strip_html | strip_newlines }}{% endcapture %}
<title>{% if resource_title != "Index" %}{{ resource_title | escape }} | {{ metadata.title | escape }}{% else %}{{ metadata.title | escape }}: {{ metadata.tagline | escape }}{% endif %}</title>

<meta name="description" content="{{ metadata.description }}" />
<link rel="stylesheet" href="{% asset_path css %}" />
<script src="{% asset_path js %}" defer></script>

마지막으로 사이트맵의 경우 이전에 내 코드에서 수행한 작업을 수행하는 이 handy gem ( https://github.com/ayushn21/bridgetown-sitemap )을 방금 설치했습니다.

Bridgetown 사이트를 버전 1로 업데이트하는 데 문제가 있는 사용자에게 도움이 되기를 바랍니다.

브리지타운 만세.