Notes on making a website with Emacs and orgmode

Here lies some general things, big and small (although mostly small) that I learned while making my website.

The root dir

When hosting a website, we can add links (e.g. links to some css or jacascript files) in the header. The path used can be relative to the document. This becomes a trouble when the html pages are in complicated directory structure.

/-  project
|---css
|    |---style.css
|---page1.html
|---folder1
|    |---page2.html
|---folder2
|     |---folder3
|     |      |---page3.html

In the above tree structure, page1.html will can have relative path for stylesheet as ./css/style.css, while page2.html will have ./../css/style.css and page3.html will have ./../../css/style.css. Then it is easier to put absolute path ~/abs/path/to/project/css/style.css and this stays constant in all of the html files.

The root dir for http server is the folder where it is started. If the web server is started in the project directory, each html can hace /css/style.css as the path to stylesheet. Now, our life is much simpler than it was.

Github pages caveat

On github, we can host static html sites. The root dir for the http server hosting our site is [username].github.io. If we have another repo called blog-post with github pages enabled, then all the content of this repo will be added to root/blog-post i.e. [username].github.io/blogpost. The html file (say page1.html which in in working dir of blog-post repo), which has /css/style.css/ in its head will look for the css file in [username].github.io/css/style.css. Therefore, if the html page repo is not [username].github.io, then it will no be able to load resources. So we can either keep our resources in [username].github.io repo or keep the resources path absolute according to where the http server is hosted.