• Por Convenção sobre Configuração (CoC - Convention over Configuration), o Rails utiliza o application.html.erb como layout mestre para renderizar todas as páginas;
• O Arquivo original no Rails 8.0.0 deve ter um conteúdo igual ou parecido com o copiado abaixo:

• A parte superior dentro da tag … possuem os elementos estruturais importantes para que a página seja renderizada e funcione corretamente. a tag headé usada para incluir metadados e recursos importantes que ajudam a configurar o comportamento da página (com javascript), sua aparência (com CSS), sua relação com outros sistemas e serviços e configurações de segurança como a proteção para CSRF e CSP ;
• O conteúdo principal das páginas será renderizado dentro de , através da tag ERB . Esta tag serve como ponto de integração para incluir o conteúdo de uma view renderizada dinamicamente pelo Rails;

$ rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4
      create  app/controllers/pages_controller.rb
       route  get "pages/html_test_1"
              get "pages/html_test_2"
              get "pages/html_test_3"
              get "pages/html_test_4"
      invoke  erb
      create    app/views/pages
      create    app/views/pages/html_test_1.html.erb
      create    app/views/pages/html_test_2.html.erb
      create    app/views/pages/html_test_3.html.erb
      create    app/views/pages/html_test_4.html.erb
      invoke  helper
      create    app/helpers/pages_helper.rb

• Como durante a criação do controller e das actions acima as rotas também foram adicionadas, podendo acessar qualquer action criada a partir dos links
  • localhost:3000/pages/html_test_1
  • localhost:3000/pages/html_test_2
  • localhost:3000/pages/html_test_3
  • localhost:3000/pages/html_test_4

Abra o arquivo config/routes.rb pelo VSCode

• Inclua a linha abaixo no final do arquivo para direcionar a raiz da página para o controller pages e action html_test_1 criados anteriormente. Assim, a primeira página a ser exibida ao acessar seu site ou sistema será a página html_test_1, do controller pages. Caso contrário, iria exibir a página padrão do rails.

root "pages#html_test_1"

• Você poderia ter ignorada a adição das rotas para as actions criadas de tivesse passado o parâmetro --skip-routes ao criar o controller. O comando completo passaria a ser rails g controller pages html_test_1 html_test_2 html_test_3 html_test_4 --skip-routes

Usando o terminal, você pode exibir as rotas especificando um controller (com -c), por exemplo, do controller pages

$ rails routes -c pages
           Prefix Verb URI Pattern                  Controller#Action
pages_html_test_1 GET  /pages/html_test_1(.:format) pages#html_test_1
pages_html_test_2 GET  /pages/html_test_2(.:format) pages#html_test_2
pages_html_test_3 GET  /pages/html_test_3(.:format) pages#html_test_3
pages_html_test_4 GET  /pages/html_test_4(.:format) pages#html_test_4

Ou pode exibir todas as rotas com

$ rails routes
             Prefix Verb URI Pattern                   Controller#Action
                         /assets                       Propshaft::Server
  pages_html_test_1 GET  /pages/html_test_1(.:format)  pages#html_test_1
  pages_html_test_2 GET  /pages/html_test_2(.:format)  pages#html_test_2
  pages_html_test_3 GET  /pages/html_test_3(.:format)  pages#html_test_3
  pages_html_test_4 GET  /pages/html_test_4(.:format)  pages#html_test_4
 rails_health_check GET  /up(.:format)                 rails/health#show
              (...)

Também é possível acessar as rotas pelo navegador usando o endereço http://127.0.0.1:3000/rails/info/routes. Não esqueça de iniciar o servidor de desenvolvimento com bin/dev ou o servidor rails padrão com rails server do diretório raíz do seu projeto. O servidor de desenvolvimento fica “escutando” alterações nos arquivos de javascript e nos arquivos de css para realizar o processamento necessário para disponibilizá-los aos usuários. Para que as alterações nestes arquivos sejam realizadas e visualizadas instantaneamente no navegador, é necessário instalar uma gema como a Rails Livre Reload.

Acesse o link https://github.com/dbohdan/classless-css/blob/master/screenshot-page.html e copie todo o conteúdo da tag main, conforme abaixo

  

    





Abra o arquivo app/views/pages/html_test_1.html.erb e cole o conteúdo copiado acima

Acesse o link https://gist.github.com/tommaitland/5865229 e copie todo o conteúdo da tag