.htaccess file location?

[scott.bouch]

Hi,

I'm hosting www.scottbouch.com (http://www.scottbouch.com) from an Ubuntu Server 14.04 (Apache 2) server in my garage.

I need to create (if it doesn't exist) / modify (if it exists) an .htaccess file for a couple of reasons (enabling gzip for speed, and webfonts) but don't know where to find it if it exists, or where to place it if it doesn't.

My website html files are held in /var/www/html/ - is this where the .htaccess file should go? or should it go in an Apache config file directory?

is .htaccess just read by the clients browser, or does Apache read it?

Most online guidance is for non-self-hosted websites, and mostly says to place it in the root of the website - is this still valid for someone like me with their own server, domain and ddns?

Thanks, Scott.

[Lars Noodén]

If you have access to the web server's configuration files, you should avoid using .htaccess. You don't need it in that case and your changes can go directly in the appropriate vhost's configuration file. If you are farming out partial responsibility for the site to people you won't give write access to the configuration files, then you can use .htaccess to get around that, but otherwise they should be avoided.

What changes are you planning on making to the server? Compresssion and other settings changes can be made in the configuration file itself for either the whole site or specific directories.

[scott.bouch]

Hi Lars,

Thansk for picking this up..

I'm looking into this for two reasons:



I'd like to use http://www.font-face.com/'s CSS @font-face for custom fonts on my website, but most guidance out there says to add lines to the .htaccess file. These guides are aimed at people who rent space from somebody elses server. However, I have my own server, so can use the config file as you suggested instead... but I'll need a little guidance on this - as in which config file to change, (and where i'll find it), and do I just enter the same lines that I would have put into the .htaccess file? Below you'll see code I've found online that's recommended dto go into the .htaccess file.
I'd also like to enable compression, due to my home internet upload speed being around 0.7 to 0.8 Mb/s (living in a sleepy village away form the big cities), this really makes my pages appear very slowly at the client end - example slow page with a few images is here: https://www.scottbouch.com/britscifi_2015.html - Having this speed limitation has really led me to try and build an my website as efficient as possible, by keeping my file sizes (images etc..) as small as possible, and minimising externally loaded content / scripts etc...


I have the fonts stored on my server in a directory within the html directory alongside my website image files etc..

@font-face .htaccess code snippets:

I've found a few variations on a theme... Being a bit of a beginner in this, it's hard to know what's correct / best to use, and if I can just place this into an Apache config file, rather than a .htaccess file without modification.

From: http://wnas.nl/font-face-not-working-with-faulty-otf


<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>


From: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems



<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Or even better, since the above code will allow anyone to leach:

<FilesMatch "\.(eot|otf|woff|ttf)$">
SetEnvIf Origin »
"^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>
Just swap out your calling domains for the ones above. Credit for this method goes to Brooke Elgie (http://www.lowest-common-denominator.com/2010/01/http_access_control_to_multipl.php)




From: https://gist.github.com/kaerast/843983


# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------

# allow access from all domains for webfonts
# alternatively you could only whitelist
# your subdomains like "sub.domain.com"

<FilesMatch "\.(ttf|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

# webfont mime types
AddType application/vnd.ms-fontobject eot
AddType font/truetype ttf
AddType font/opentype otf
AddType application/x-font-woff woff

# webfonts and svg:
<IfModule mod_deflate.c>
<FilesMatch "\.(ttf|otf|eot|svg)$" >
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>



Many thanks again for the help, Scott.

[mastablasta]

how about reading the official docs first instead of guides? Apache has very good documentation it would be a shame not to use such a resource:


In general, .htaccess files use the same syntax as the main configuration files.
http://httpd.apache.org/docs/current/howto/htaccess.html



The main configuration file is usually called httpd.conf
http://httpd.apache.org/docs/current/configuring.html#syntax

[scott.bouch]

Thank you MastaBlasta! The documentation is great! Thanks.

Now it's just an issue of deciding which code snippets are the best / most secure to use.. which while I know this is an Ubuntu Server forum, not really a web design forum, there is some crossover at this point. As I don't want to harm my OS or leave my system open accidentally, I'd love some help in getting the right code into the right place.

Thanks, Scott

[mastablasta]

well for compression it's mod deflate: http://httpd.apache.org/docs/2.2/mod/mod_deflate.html

for the other one I do not know. but if they have any instruction on their website it is best to follow those.

you can then test the speed on google : https://developers.google.com/speed/pagespeed/insights/
and they will tell you what else needs to be fixed and sometimes even how.

[SeijiSensei]

Compression made sense in the days of dialup; it's not very useful on today's Internet. Still the overhead of gzip compression is pretty small, so if you feel compelled to use it, it won't impose much of a performance hit.

The default Apache installation works well for a wide range of content. I wouldn't bother with any of the stuff you've posted unless you know for certain a specific application requires a particular configuration. Take fonts, for instance. Rather than having the server manage fonts, use CSS in the associated web page like this:


@font-face {
font-family: Arial ;
src: url( /arial.ttf ) format("truetype");
}

and put arial.ttf in the website root.

[scott.bouch]

Hi Mastablasta: That's funny, the Google speed test is what pointed me in the direction of compression in the first place! I'll read up on mod_deflate and try to implement it.

But thanks, You have helped me with the apache config file situation - I'll do some more research into the @font-face code (ie: which is most secure etc..) and get it into the apache config file.


Hi SeijiSensei:
Thank you, I'll have a go at your suggestion and see how I get on!

Cheers, Scott.

[scott.bouch]

Ah! Ah! Ah!!! I've just fixed the @font-face issue :lolflag: - I'd make a CSS mistaker and missed a "}" closing the previous declaration... dimwit :rolleyes:..

So now my website has some custom fonts! Oh, this opens the door to plenty more!!

My first custom font is about 1/4 the way down this page: https://www.scottbouch.com/britscifi_2015.html

My CSS that worked (I have eot, woff, ttf and svg installed):


* ---- FontFace ----*/

@font-face{
font-family: dalek;
src: url(/common/fonts/dalek-webfont.eot?#iefix) format("embedded-opentype"),
url(/common/fonts/dalek-webfont.woff) format("woff"),
url(/common/fonts/dalek-webfont.ttf) format("truetype"),
url(/common/fonts/dalek-webfont.svg#webfont) format("svg");
}


.dalekfont {
font-family: dalek;
font-size: 1.5em;
}

and HTML:



<p class ="dalekfont">"Are you in charge of the device?? Are you in charge of the device??? - Turn it on <b>NOWWW...</b>"</p>
<p class ="dalekfont">"<b>OBEY... OBEYYY...</b>"</p>

No changes made to any config files or Apache settings, as soon as my CSS was fixed, it just worked like a charm!

The end result is exactly what I was aiming for...in FireFox.. and IE10. Yet to check Safari etc...

Thanks again for the help and tips!!

I'll mark the thread now as solved, and will have a go at independently implementing the compression due to my poor upload speed.


Cheers, Scott.

[SeijiSensei]

What editor are you using? Most Linux text editors have routines that check for matching brackets, etc., on-the-fly as you write.

By the way, compression won't help at all with uploading. It only compresses files as they are downloaded from the site to the browser. You'd be better off with creating a compressed tar archive, uploading that, then extracting the archive. Here's the method using bzip2, which has better compression than gzip:


cd /path/to/some/files
tar cjvpf myfiles.tar.bz2 *

Upload that file to the server and place it in the proper directory. Then use


cd /path/to/target/location
tar xjvf myfiles.tar.bz2

The "j" parameter selects bzip2. To use gzip instead, replace "j" with "x". The "v" parameter is optional; it provides a "verbose" listing of the files being archived or unarchived. The "p" ("preserve") option retains file ownerships and permissions.