Hi. I have been using Middlemac to develop an Apple Helpbook and I now want to set up a website using Middleman. I seem to have come across a bug. I started by running middleman init mm_project followed by middleman serve and the site displayed at http://localhost:4567 was as I expected from the Giraffe Academy demo. However, when I built (rather than served) mm_project and double clicked on the mm_project/build/index.html file that was generated, the site that appeared in Safari was unformatted. The background was white, the Middleman icon was full size and the contents were not centred. I believe that the link to site.css is broken in the built version. I replaced
<link href="/stylesheets/site.css" rel="stylesheet" />
with
<link href="file:///Users/cpahull/Sites/mm_project/build/stylesheets/site.css" rel="stylesheet" />
in mm_project/build/index.html, saved the file and reloaded it in Safari. The site displayed is now fully formatted and the same as the one produced by middleman serve. I suspect the same issue could apply with other links (to images and to site.js) that are generated by ‘middleman build’ but I have not checked. Am I doing something wrong? Does middleman deploy address this? I am planning to build my site locally, check it and then upload it to a web hosing service so it would be better for me if middleman build produces a final version!
PS. Oops! I have just discovered that removing the ‘/’ before the link also solves the problem. I also am starting to suspect that, if the localhost version works OK, the web server version will be OK too and my ‘bug’ is a not a ‘bug’. Maybe I should simply trust that, if the middleman build version is OK when viewed on localhost, it will be just fine when deployed to a web server; viewing my site in localhost is enough of a check?
Starting / means that the browser should look for linked file at the root of the local-server filesystem. When you remove / from your URL then the browser looks for the file in the same (current) directory, where the index.html lives. This should work fine on the final web-server too, although common workflow is to use absolute URLs (i.e.: with starting /).
I can see you’re using a Mac (file:///Users/cpahull/Sites/mm_project/build/…) so why not use build-in Apache server to test local builds? Try http://localhost/~ cpahull/mm_project/build/). Oh, most recent macOS versions require you to manually activate Apache, if I correctly recall. Try to google it, but sudo apachectl start should do.
Thanks for the prompt response and some good advice. I now have my localhost configured for development (thanks to the instructions at https://discussions.apple.com/docs/DOC-250003138). I copied my Middleman project to my Sites folder, navigated to the build folder and the site loaded as expected (with the starting / left in place). Hurrah! The web version of my helpbook (made with Middlemac, which is based on Middleman) also works on localhost (but not if opened as a file in Safari). I am now happy that I can check builds locally to be sure they work before I upload them to a web hosting service, which is great. I used Everweb in a previous life, when I had a company website, and the web file sets that Everweb builds can be opened directly in Safari; I thought Middleman would do the same - hence my concerns. I am concerned no more! Thanks again.