How to make clean url for html and javascript based sites

Question

I currently have my portfolio to work on, and I'm looking to enable links like hayofriese.com/work. On my localhost this is solved by using .htaccess files, and everything runs smoothly, but the server I host my site on doesn't allow htaccess files or doesn't support it.

How would I go about making this work instead?

The way my code works is that everything redirects to index.html. Whenever there's a sublink (like /about or /work) javascript detects that and loads the appropriate page. I simply have to enable the rerouting, as right now I get a 404 error when i have hayofriese.com/about, which means it's not redirecting to index.html despite the presence of the localhost-working .htaccess file.

Any help would be much appreciated!

<configSections>
    <sectionGroup name="system.webServer">
        <sectionGroup name="rewrite">
            <section name="rewriteMaps" overrideModeDefault="Allow" />
            <section name="rules" overrideModeDefault="Allow" />
        </sectionGroup>
    </sectionGroup>
</configSections>

<system.webServer>

    <security>
        <requestFiltering>
            <denyUrlSequences>
                <add sequence="engine" />
                <add sequence="inc" />
                <add sequence="info" />
                <add sequence="module" />
                <add sequence="profile" />
                <add sequence="po" />
                <add sequence="sh" />
                <add sequence="theme" />
                <add sequence="tpl(\.html" />
                <add sequence="Root" />
                <add sequence="Tag" />
                <add sequence="Template" />
                <add sequence="Repository" />
                <add sequence="code-style" />
            </denyUrlSequences>
            <fileExtensions>
                <add fileExtension=".sql" allowed="false" />
                <add fileExtension=".pl" allowed="false" />
            </fileExtensions>
        </requestFiltering>
    </security>
    <directoryBrowse enabled="true" />
    <caching>
        <profiles>
            <add extension=".php" policy="DisableCache" kernelCachePolicy="DisableCache" />
            <add extension=".html" policy="CacheForTimePeriod" kernelCachePolicy="CacheForTimePeriod" duration="14:00:00:00" />
        </profiles>
    </caching>
    <rewrite>
      <rules>
        <rule name="Imported Rule 1" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions>
            <add input="{HTTP_HOST}" pattern="^hayofriese\.com$" />
          </conditions>
          <action type="Redirect" redirectType="Permanent" url="http://www.hayofriese.com/{R:1}" />
        </rule>
        <rule name="Imported Rule 2" stopProcessing="true">
          <match url="^(.*)$" ignoreCase="false" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
            <add input="{URL}" pattern="^/favicon.ico$" ignoreCase="false" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.html?q={R:1}" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
    <defaultDocument>
        <files>
            <remove value="index.html" />
            <add value="index.html" />
        </files>
    </defaultDocument>
   <httpErrors>
       <remove statusCode="404" subStatusCode="-1" />
       <error statusCode="404" prefixLanguageFilePath="" path="/index.html" responseMode="ExecuteURL" />
   </httpErrors>
</system.webServer>

The error I get is the following:

The 'type' attribute must be specified on the 'section' tag. (...\web.config line 7)

The 'type' attribute must be specified on the 'section' tag. (...\web.config line 8)

Do you mean that for making a link to, for example, *yoursite.com/work* instead of having a regular link pointing there you link to *yoursite.com/index.html* and then load the appropriate page from the index using javascript? In this is true, why you do that? — Alberto Martinez, Sep 03 '17 at 18:23
I mean to enable rerouting, so in the url bar you type name.com/page and then it will go to that page. My index.html starts off loading the page in the url into the site. So i don't want name.com/page to go to name.com/index.html, but rather to mask it as /page, if that makes sense. — Basik, Sep 03 '17 at 18:26
You mean, instead of having several pages (index, work, about...) you only have a one-page site, but you want to make those other URL point to the appropriate section of the page, is that correct? In that case, why you don't simply use *yoursite.com/#work*, for example? — Alberto Martinez, Sep 03 '17 at 18:32
sort of. basically the site has multiple html pages. it's like a magnet board. If you go to /work, it will remove the magnet from the board and place a different magnet on it. it never leaves index.html, but the content inside it gets switched around. If you want to see how it operates, go to [the site here](http://hayofriese.com) — Basik, Sep 03 '17 at 18:35

score 2 · Accepted Answer · answered Sep 03 '17 at 18:57

2

Since you use .htaccess I suppose that use WAMP/Apache on your localhost installation, but your web site is hosted in a server that runs on IIS (Microsoft-IIS/7.5 as reported in the headers), which uses another file for directory configuration.

You have two options:

If possible, change your host plan to another that uses Apache (some hosting providers offers Apache on Windows, if you don't want a Linux host for some reason). IMO this would be the best option in order to make your test environment as similar as possible to the server of your web site.
Use web.config, which is more or less the equivalent of .htaccess in IIS, check this link:

.htaccess or .htpasswd equivalent on IIS?

answered Sep 03 '17 at 18:57

Alberto Martinez

2,620
4
25
28

In fact, you have a third option, instead of replacing the current URL with other URLs, rewrite it to point to the appropriate ID in question. For example, instead of http://hayofriese.com/work use http://hayofriese.com/#work, is almost the same an don't need URL redirection on the server (you can access that part of the URL using `Location.hash`). – Alberto Martinez Sep 03 '17 at 19:09
followed the tutorial you suggested, and got the /page pages to work. issue is now that the root page does not work. if i go to hayofriese.com it shows a config error – Basik Sep 03 '17 at 20:56
Could you edit the question and put the contents of the `web.config` file? – Alberto Martinez Sep 03 '17 at 21:26
done buddy. anything I should look at? so that I can know for the future? – Basik Sep 03 '17 at 22:03
I visited http://www.hayofriese.com/work and it's also failing. It seems that you just copied the sample web.config file from the link, without modifying the sample rewrite conditions with the ones that you are using in your `.htaccess`. Note that the sample file make other things like reconfiguring extensions, this was not a "standard" configuration, but a sample of how to translate the .htaccess shown in that page. You should have edited the your web.config file and put only the part related to rewriting the URL with your *own* rewrite conditions. – Alberto Martinez Sep 03 '17 at 22:44

How to make clean url for html and javascript based sites

1 Answers1