Calling http.FileServer in an http.HandlerFunc - html

so I've had some trouble with this lately... Here is my code:
https://gist.github.com/anonymous/af1e6d922ce22597099521a4b2cfa16f
My problem: I'm trying to serve up some HTML files from a folder: ./docs/html. My folder structure:
.
├── docs
│ └── html
│ ├── index.html
│ └── rest.html
└── main.go
You'll notice in the gist I am calling the ServeHTTP method on the http.HandlerFunc ServeDocs, which is then going through a router (mux.Router). The problem I'm having is for some reason the only file being served up at localhost:8080/ is index.html, and when I navigate to localhost:8080/rest.html I get a 404.
The really odd part is that when I remove all the router code and do something like the following:
fs := http.FileServer(http.Dir("./docs/html"))
http.Handle("/", fs)
log.Println("Listening...")
http.ListenAndServe(":3000", nil)
Everything works as it should. Anybody know what's going on? I've spent hours trying to figure this out and I've finally given up.

It works if you use mux.Router's Path method
r.Methods(route.Method).Name(route.Name).Handler(handler)
r.Path(route.Pattern)
instead of mux.Route's Path method (strikethrough'd below)
r.Methods(route.Method).Path(route.Pattern).Name(route.Name).Handler(handler)
I am not much familiar with gorilla/mux so couldn't find exact reason behind this.

Related

Why is my image specified by img src not shown on my webpage?

I'm setting up pages on my personal website(hugo academics by wowchemy) and here is the structure of one of the folders I have:
.
├── ABF.md
├── EXE.md
├── Figures
│ ├── sampling.gif
│ └── sampling_compressed.gif
├── HREMD.md
├── MetaD.md
├── REUS.md
├── TREMD.md
├── US.md
├── _index.md
├── alchemical_MetaD.md
├── appendix.md
├── intro.md
└── test.gif
In _index.md, I have the following lines to read in a GIF file:
<center>
<img src="Figures/sampling_compressed.gif">
</center>
In intro.md, which is in the same folder as _index.md, I also have the same lines to read in the same GIF file. However, in localhost, the GIF file is shown in the page made by _index.md, but not the one built by intro.md. How can I solve the problem and why is this happening? Thanks in advance!
Your assumptions about the output structure are wrong. Hugo builds _index.md in the root of you folder, while the intro.md file (when processed with pretty URL's) is built in a subfolder: intro/index.html.
That being said... I tested your setup and an image in a Section directory (which is a directory with an _index.md file) is not processed by default. I would solve this by moving the image to the static directory so you can reference it from any file in the same way (with an absolute path), especially because this image does not belong to just one page.
If it WERE to be used by just one page, you could have turned the intro.md into intro/index.md and make that directory a Page bundle in which you could put your image and reference it by using the resources variable.

How does the browser resolve the relative location of './'?

I am combining many small semi-static, single-page webapps into one larger web site. The backend is a lot of proxies, but the forward facing server basically just make it look like the app was moved from the root filepath to a more specifics one. IE:
/
├── css
│   └── app1.css
├── index.html
└── js
└── app1.js
would be moved to
/apps/app1/
├── css
│   └── app1.css
├── index.html
└── js
└── app1.js
This migration has been relatively painless mainly due to the use of ./ in the apps' html files, such that most apps just load their resources relative to their new location. The problem I am having is that some apps are resolving ./ differently. For these trouble cases, the primary html file gets loaded; however, the ./ in the script and style elements are resolving to a higher file-path (IE: I would expect ./ to resolve to /apps/app1 but am getting /apps). It may be a coincidence, but the troubled apps often have additional, non-index HTML files.
What are the rules for how ./ is resolved?
Determine the base URL
This is usually the URL of the HTML document
It might be overridden by the base element
For CSS it is the URL of the stylesheet
JS is always with respect to the HTML document
Remove everything after the last / in the path section of the URL
e.g. the base URL for https://example.com/example/foo?bar=baz#fragment is https://example.com/example/
Keep in mind that an HTML document might be visible at the path /example and /example/ and you should avoid this by making one path canonical (I prefer the one that ends in a /) and redirecting to it from the other
Strip the ./ from the front of the relative path
Append the result of step 3 to the result of step 2
A common gotcha is to confuse URLs with file paths. While a simple static site will usually have a direct 1:1 mapping between them, many modern sites will use routing code (e.g. for Express for HTML documents and a separate static route for static files like images, js and css.

I cannot deploy static site to Netlify

I am trying to deploy some ui components on Netlify. However, it is not recognizing my index.html files inside the subfolders. Hence nothing is showing up on my deployed site. Also, all 3 index files have links to each other. This is my file structure
├── ui-components
├── blog-cards
│ └── index.html
├── login
│ └── index.html
├── ads-manager
│ └── index.html
Do I have to delete my subfolders and bring out my index files for it to deploy on Netlify or is there any way around it?
Edit:
I made some progress by doing this instead by putting a _redirects file in the root of my app as suggested
/ /blog-cards/index.html 200
/login /login/index.html 200
/ads-manager /ads-manager/index.html 200
It's finding my index.html inside the blog-cards folder however it's not loading my css file now. Full folder structure
├── ui-components
├── blog-cards
│ └── index.html
│ └── style.css
│ └── images
Here's a link to the netlify site
You don't have a main index.html file, which is why nothing is showing up on your deployed site. You should add something there, even just a blank page or a placeholder with links to the other projects.
You probably don't have to though, just browse to <siteurl>/ui-components/blog-cards and that should work.
Update after further comments.
If there is a subfolder you want the site to automatically go to upon landing, then you can use Redirects.
For example, putting the below in a file called _redirects in the root of your app will do what I think you need:
/ /ui-components/blog-cards 200
/login /ui-components/login 200
/ads /ui-components/ads-manager 200
(the 200 status code means that it will be a redirect under-the-hood, which makes the URL stay clean as you have said.)
Update
Yeah, so the forwarding is making the .css files to fail to load.
<link rel="stylesheet" href="style.css"> will look at the current URL and add style.css to it, which is obviously not what you want.
You could change to forwarding it with a 302, which would mean the new (not nice) URL would show up, but then the css path would resolve correctly.
Alternatively, you could add a second stylesheet link that looks for ./blog-cards/style.css.
Or if the css is small enough you could inline it, making it all simpler.

Background image is not showing in html because of path problem

Background image is not showing because of image path problem.
css code
background-image: url("images/menu_home_icon.png");
My actual image path is EZ_MOVERS/images/menu_home_icon.png.
But it shows EZ_MOVERS/css/images/menu_home_icon.png while I checking through Inspect Element.
I can't find from where /css comes.
Anybody help please ?
Probably because the stylesheet is located in the /css folder. Remember that the paths in the file are relative to the stylesheet's path. Based on my understanding, your directory structure looks a little like this:
EZ_MOVERS
│
├── css
│ └── <stylesheet>.css
└── images
└── menu_home_icon.png
So if you want to traverse a directory up and then select the /images sibling folder, use ../images/menu_home_icon.png.

Displaying a short URL for a website

I am not clear on how to frame my question. I am making the website for my college fest, and although I know HTML, CSS, I don't know anything of PHP. I just want to display my URLs like this:-
www.somesite.com/somepage (something like that)
instead of :-
www.somesite.com/somepage/index.html
How do I do that? Thanks for any help. I am new to all this
edit: I have tried something like this, just removed the constraint-
<script>
setTimeout (function () {
if (typeof history.pushState === "function") {
var width = window.innerWidth || screen.width;
if (width < 768) {
history.pushState(null, null, "/short-url");
}
}
}, 10 );
</script>
Didn't work. The console gave an error "Failed to load resource" for a lot of files.
What you are looking for is called URL Rewriting. If you have an access to the .htaccess file
you can define some rewrite rules in it, for example:
RewriteEngine On # Turn on the rewriting engine
RewriteRule ^www.somesite.com/somepage/?$ www.somesite.com/somepage/index.html [NC,L]
The first part is the address the user will enter and the second part is the actual address he will be referring to, the third part is an array that contains some flags regarding the rewriting.
NC - the rule should be case-insensitive
L - don't process any more rules if this one is used
Note that you don't have to use the full URL, for example:
RewriteRule ^blog/first-post/?$ /blog/posts/myFirstPost.html [NC,L]
Here's a nice beginners guide.
The answer depends on a particular web server configuration. Usually request url corresponds to a particular directory path relative to site root directory. Some web servers allow to omit such resource names as index.hml, index.php in request url. They will associate implicitly /some/path with /some/path/index.html.
See link
You will want to have a directory structure similar to this:
website/
├── blog
│   └── index.php
├── contact
│   └── index.php
├── index.php
├── projects
│   └── index.php
└── resume
└── index.php
where within each folder (these being the different sections of your website), you have the .php or .html files being named index.extension. This will give you the desired effect.
A really easy and silly way would be to encompass the url you want in an anchor tag and have the anchor tag point to the url you want. for example:
www.somewebsite.com/webpage
Also, depending on the server's OS (I know this is true for apache because it's what I learned on), you don't need to explicitly indicate index.html, it'll load the index of the directory automatically. In some cases, if you exclude the trailing / as you did with www.somesite.com/somepage then it'll redirect to www.somesite.com/somepage/. This happened with my school's website and I don't think they've fixed it.