Routing in static html landing page - html

I have a small portfolio landing page based on js/css/html. No frameworks/CMS, just pure static html. Entry point is index.html file with content on English language.
I want to use translations on my site: index.ru.html, index.ua.html, but I don't want to see any *.html or index.ua in the address bar. User can change a language by buttons on top of my page.
How can I route:
http://mysite/en to display index.html - first enter to site
http://mysite/ru to display index.ru.html
http://mysite/ua to display index.ua.html
?
Also can I route to specific div/section html tag: user enter http://mysite/ru/contacts to display contacts section in index.ru.html? Scrolling page also must change url... is it real or not?
Maybe I need to use micro-framework for my small needs?
EDIT:
Found good example on this site - http://www.even.lv/

Try adding this to your Root/.htaccess :
RewriteEngine On
RewriteBase /
RewriteRule ^en/?$ index.html [NC,L]
RewriteRule ^(ru|ua)$ index.$1.html [NC,L]
This will redirect "/en" to "/index.html" and "/ru" to "index.ru.html".

Might be using bootstrap scroll spy you can take user to sepecific section. if you don't want url to be change in that case ajax will help you. with use of jQuery you can trigger select change function jQuery("#language-select").change(function(){ // your logic try ajax here to change portion on page. })

Make directories for each language and put the relevant pages inside.
The only mechanism you have that allows you to omit a full url is the ability of the web server to serve a "default" page, which in your case is an index.html
By the same token to support mysite/ru/contacts you would need a directory structure of:
mysite/
ru/
contacts/
index.html
In other words, with pure html pages and without using rewrites, you can accomplish your structure with directories off the webroot and creating many individual index.html pages.
The other option is to use rewrite rules like those available using mod_rewrite and the apache web server.
Those rules require a good working understanding of regular expressions.

Related

Use history.pushState while ignoring/bypassing .htaccess (alternative solution welcome)

What I'm trying to do is have a single dynamic file that takes a parameter to affect content (/view.html?k=about) but uses history.pushState to change the URL to something more user-friendly (ki/about). In addition, anytime an AJAX call is made on content.html to load new content, it updates the URL according, (e.g. if products are loaded via AJAX, change URL to keywords/products).
My current solution is any path requested from ki is redirected via .htaccess to the view.html page. view.html then uses history.pushState to change the URL. As links are clicked, the URL updates. The problem with this, however, is it causes a infinite loop.
Here is my .htaccess file, residing in the /ki/ folder.
RewriteEngine on
RewriteRule ^(.*)$ /concept/view.html?k=$1 [R=permanent,L]
What can I do to get my desired result? If there's a way to achieve the same thing without the .htaccess file then that's acceptable too.
You are going to want to rewrite any url that goes in the form of ki/about to the /view.html?k=about behind the scenes.
history.pushState is only really meant to be used for web applictions like Spotify that don't reload the page but would still make sense to have the back button have some functionality.
That way, urls can be shared without giving 404 pages.
I have not tested this but I am sure you want something like this
RewriteRule ^ki/([A-Za-z]+)/$ /view.html?ki=$1
If the user types in the ugly url, they will still get to the same page no problem. But the pretty urls will direct users to the right webpage.
For more info you can go here.
http://www.yourhtmlsource.com/sitemanagement/urlrewriting.html

Hiding page names in the browser

When we launch a website, we usually see webpage name (menu.php or admin.aspx) but I would like to hide that name and show only virtual path or just website name. I don't want it for the first page because I did that with default.aspx but I want to implement it for the whole website.
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
Note: My code is not MVC code and server is Apache.
Use .htaccess to rewrite the URL. Millions of tutorials are out there for that ;)
What you are asking is achieved using (for xampp, wamp, lamp or any other apache powered webserver setup) htaccess rewriterules. The rules take the URL and break it into parts that can be modified or used as variables to feed other pages - whilst still keeping the URL you typed. Neat huh!
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
call the file placed into the folder faq simply index.html (not faq.html) and then www.abcd.com/faq/
will display the page without the filename. (Make sure, you have defined index.html as a valid Directory index.)
There are more options with using mod_rewrite etc - but since you seem to use a prety static directory based navigation layout, that would be the easiest way.

htaccess ajax call and hide html from search engine

so i developed a simple website which is using ajax call to html files to display.
the issue is that the search engine like google find the html file, and when we click on the link we see a poor html file out of context of the website of course.
so im guessing i have some work to do with htaccess file to handle this but how ?
my idea is to use htaccess rewriterule to redirect any .html file to the main index.php file.
something like that :
- www.my.com/team.html will call www.my.com/index.php which will detect the query-string team.html and will proceed to ajax loading the corresponding html file.
how is that possible please ?
Generally all search engines respect the terms set in the robots.txt file. If you wish that files in a particular folder in your site should not be crawled, the robots.txt can instruct the search engine to obey.
If you wish to lern about it, here is the link: http://www.robotstxt.org/robotstxt.html
You may see http://www.google.co.in/robots.txt for example.

Can we block opening CSS, JS files?

It is very common we link CSS and JS files in out HTML, PHP pages. Can we block opening of the CSS and JS files directly from a browser. Since the source code can be viewed by anyone, he/she can open those files by understanding the path. How can we achieve blocking these files?
You need to setup your web server to server the static content (js, img, css) only if refered by your host (looking at the http headers), but it won't totally prevent user from doing it. as for the php users won't see it, it runs on the server, and will output most of the times inert html.
A basic block would force the browser to send a valid Referer header when accessing the files. This can be done with some simple .htaccess:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !your\.domain\.here [NC]
RewriteCond %{REQUEST_FILENAME} \.(css|js) [NC]
RewriteRule .* - [L,F]
However this is not a great idea because it's easy enough to fake the referrer, or add a link to the page so that the browser naturally sends it. Also, some browsers just don't show the referrer header.
The browser has to be able to access those files in order to properly display the page. You can obfuscate the JS, either through something basic like minification, or something more complex like How can I obfuscate (protect) JavaScript?
With CSS, you can try something similar.
Look into the following resource, they might help.
http://www.iwebtool.com/html_encrypter
http://www.catswhocode.com/blog/3-ways-to-compress-css-files-using-php
http://refresh-sf.com/yui/
http://www.n1studios.net/tutorials/php/css-file-protection.html
all of them are somehow way around, and there is always a way to read them. you can only make them hard to read

Load same page with different URLs?

I want to create a single page such as this:
http://www.mywebsite.com/special/index.html
But anything in the /special/ folder should be able to load the index.html page. For example, if you go to
http://www.mywebsite.com/special/another-page.html
It should still load the index page but not change the URL in the browser or to search engines. Basically, you should be able to go to any page in the /special/ folder, keep the URL the same as you enter, but always load the index.html page. Any ideas?
A 404 or 301 redirect wouldn't work because that changes the URL in the browser and to search engines...
Thanks in advance!
A 404 redirect would not help, but a custom 404 handler would:
error404.php:
<?php
include('path/to/special/index.html');
?>
Assuming .html is a static or PHP page. If it is something else, youse the equivalent construct of that environment.
Using apache mapping it should be possible. I don't how to exactly do that but this doc http://httpd.apache.org/docs/2.0/urlmapping.html probably has the answer.
It is possible to use patterns to map URL to filesystem locations.
I think (untested) something like this would work in an .htaccess file in the special directory if you have the ability to use rewrite rules:
RewriteRule ^.*$ index.html
You would have to symlink index.html in the special directory to the real index.html.
The ^.*$ just means (beginning of line)(any amount of anything)(end of line) - basically a wildcard; there might be a better way of writing it.