Heroku: Creating a simple, static one page website on Cedar - heroku

I'm attempting to upload a simple one page web page using Heroku.
I was previously using the Play! Framework but it seems overkill for a single page with some javascript.
+ project/
+ public/
+ css/
...
+ img/
...
+ js/
...
index.html
How do I upload a basic set of static files to Heroku? There seems to be no documentation on their website on how to do this.

It is not the purpose of Heroku to host static websites. However, you still can do it but you have to create either a Ruby on Rails, Play, etc. project, add the HTML in the folders.

Heroku doesn't really support static web pages, it supports Apps. However, a static web page can trivially be 'enhanced' to be a PHP application by adding a dummy index.php.
So if you want to host a file foo.html as a Heroku app Foo, then:
1. Create Foo on Heroku.
2. [Clone empty repository to local directory] git clone git#heroku.com:Foo.git -o heroku
3. touch index.php
4. [add foo.html]
5. git add .
6. git commit -m 'test'
7. git push heroku master

Heroku has a guide to doing this with Rack: https://devcenter.heroku.com/articles/static-sites-ruby
Basically, create a simple Rack app with a config.ru file:
use Rack::Static,
:urls => ["/images", "/js", "/css"],
:root => "public"
run lambda { |env|
[
200,
{
'Content-Type' => 'text/html',
'Cache-Control' => 'public, max-age=86400'
},
File.open('public/index.html', File::RDONLY)
]
}
a Gemfile:
source "https://rubygems.org"
gem 'rack'
and a public folder with an index.html file and folders for other assets, structured like this:
my_site/config.ru
my_site/Gemfile
my_site/public/index.html
my_site/public/css
my_site/public/images
my_site/public/js
And someone has made a site that will generate all the necessary files for you: http://herokustaticmagico.herokuapp.com/

Related

Assets loading issue on Rails 5 app with Heroku

I am facing asset loading issue in Rails 5 application deployed on Heroku.
App Configuration is,
ruby => ‘2.3.1’
rails => '~> 5.0.1'
When image is stored on path,
app/assets/home/image1.jpg
I am accessing it in view as,
= image_tag('/assets/home/image1.jpg’)
which is working properly in Development ENV, but not in Production ENV.
As per Heroku log,
ActionController::RoutingError (No route matches [GET]
"/assets/home/image1.jpg")
If I am moving image directly to
app/assets/image1.jpg
then its working on Production ENV.
Please guide about it.
Thanks
It looks like you assets are not compile on heroku.
Follow below code:
config/environments/production.rb
config.assets.compile = true
then run commands:
RAILS_ENV=production rake assets:precompile
then push all compiled files with menifest file to heroku.

Deploy path doesn't work for Git Deploy Method in middleman-deploy

I am using middleman-blog and middleman-deploy.
What I would like to do, is within the branch I am deploying to, I want the static files to be deployed to a subfolder within the repo (i.e. not the root folder).
I tried doing this in my config.rb:
activate :deploy do |deploy|
deploy.build_before = true
deploy.deploy_method = :git
deploy.branch = 'gh-pages-2'
deploy.remote = 'github'
deploy.path = 'blog'
end
But that doesn't work, it still deploys to the root directory. In fact, it doesn't even create the /blog folder I am looking for.
When I visit the config settings locally, these are the settings I see under :deploy:
:deploy
:branch = "gh-pages"
:build_before = true
:clean = false
:commit_message = nil
:deploy_method = :git
:flags = nil
:host = nil
:password = nil
:path = "blog"
:port = 22
:remote = "github"
:strategy = :force_push
:user = nil
This indicates to me that the path attribute is being set correctly.
I also tried doing deploy.path = '/blog' and that still doesn't work.
So how can I get this to deploy to \blog\ subfolder within my repo rather than the root directory?
The versions of the different gems are as follows:
middleman (4.1.10)
middleman-blog (4.0.1)
middleman-cli (4.1.10)
middleman-deploy (2.0.0.pre.alpha)
Note: I am purposely using gh-pages-2 because I don't want to overwrite my current gh-pages without being certain that it will deploy to the correct subfolder.
I think the easiest thing you could do is write an extension with an after build step: https://middlemanapp.com/advanced/custom-extensions/#after_build. That way you move the files during your build process and middleman-deploy just can push the whole build folder.
If the root of your site is also deployed on Github Pages you can create another repo called blog and deploy your middleman site there. Then by enabling GitHub Pages for the blog repo, you will actually have it deployed on yoursite.com/blog.
It is not the techiest solution you 'd expect but it works well for me

Ruby Rack Heroku: Serving Static Files

I have followed the Heroku guide on deploying static files using Ruby Rack (https://devcenter.heroku.com/articles/static-sites-ruby), but I was unable to access any HTML file in \public apart from index.html. Namely, localhost:9292/test.html still maps to index.html. (All my style and js files serve correctly).
Below is my config.ru file. I know what's wrong, but not sure about a valid solution?
use Rack::Static, :urls => ["/images", "/js", "/css"], :root => "public"
run lambda { |env| [
200,
{
'Content-Type' => 'text/html',
'Cache-Control' => 'public, max-age=86400'
},
File.open('public/index.html', File::RDONLY) ] }
For your config.ru file, try:
use Rack::Static,
:urls => ["/images", "/js", "/css"],
:root => "public"
run Rack::File.new("public")
You could also replace the last line with run Rack::Directory.new("public") which would serve up all your files, but would give a file browser like interface if someone went to the url of a directory (like the root directory)
I have no Ruby experience and I found this boilerplate project helpful when trying to deploy a static website to Heroku:
heroku-static-site
Particularly, make sure you also have Gemfile and Gemfile.lock files besides the config.ru.
Author's project structure hosts everything in the root directory but you can easily move everything to public/ and correct the config.ru as #looby suggested.

Using Heroku for static site: Assets won't show

I've just loaded up a static app to Heroku using this tutorial and everything works quite well, except my images aren't showing up. When the same site is hosted on my own server as a plain static site (not through Heroku), all of the assets load up without a problem.
Currently, I have a Gemfile, Gemfile.lock, app.rb, config.ru and public (static site directory) in my repository that I'm loading to Heroku through git push heroku master to push to Heroku.
My images are in public/img and even the assets directly referenced from html aren't showing up. When I use firebug lite in Chrome to check the asset directory, it seems as though the image files are there, but they don't seem to have the image data (from what I could tell).
I do not have any further ruby/rails files. Should I have a production.rb file somewhere? Am I missing out on something?
Currently, my setup on Heroku is the free package. Will I need to upgrade to a paid package to see my assets (I only have 2MB of assets)? I've tried creating an "assets" directory inside the "public" directory and placing the img directory in there, but still no luck.
Here is my config.ru
use Rack::Static,
:urls => ["/img", "/js", "/css"],
:root => "public"
run lambda { |env|
[
200,
{
'Content-Type' => 'text/html',
'Cache-Control' => 'public, max-age=86400'
},
File.open('public/index.html', File::RDONLY)
]
}
To diagnose issues like this where you believe the file contents on your dyno don't match the ones in your source, use heroku run bash to login into a remote, on-off dyno. This will drop you into a bash shell where you can explore the file system as seen by your dyno (although the dyno your shell is attached to is not the one actively serving your requests it will have the same filesystem contents).
$ heroku run bash
Running `bash` attached to terminal... up, run.4065
~ $ ls
pubic Gemfile Gemfile.lock app.rb config.ru
~ $ cd public/img
~/public/img $ ls -l
total 40
-rw------- 1 u36831 36831 2743 2013-02-15 18:54 facebook-1652d049.png
-rw------- 1 u36831 36831 2291 2013-02-15 18:54 feed-e8d78a2f.png
From here you should be able to see:
If the image files even exist on the dyno
If their contents are what you expect (do the file sizes match what you see in your local env?)

Assets in espresso breaks my app

Here is my simple app:
class Blog < E
map '/'
# actions goes here
end
app = EApp.new do
# assets_url '/', true
mount Blog
end
app.run server: :Thin, Port: 6040
It works well until i uncomment assets_url '/', true.
If i do so, all my routes returning 404 and only routes pointing to files in assets folder works.
Any ideas?
Everything looks correct except assets URL.
You are mounting your app and assets server on same URL - /
Assets server has precedence, thus your app routes wont work.
Simply mount your assets on a corresponding URL, /assets, /static, /etc
app = EApp.new do
assets_url '/assets', true
mount Blog
end
UPDATE: as of version 0.4.6, assets server moved to Espresso Lungo
So install el gem - $ gem in el - or add it to Gemfile - gem "el"

Resources