Template not applied to site generated by Franklin.jl

wsshin · September 14, 2022, 3:25pm

I am trying to host a static site created by Franklin.jl using GitHub Pages of my job’s GitHub Enterprise Server. The hosting part seems working fine because I can access the website through my job’s private network.

However, the template is not applied to the website. The website shows index.html as

whereas the localhost shows the same file as

I don’t know much about web programing, so I’m not sure if this is a CSS issue or JavaScript issue or something else. Any suggestions on trouble-shooting this issue?

A few things that might be relevant:

My job’s GitHub Enterprise Server is not offering GitHub Actions, so the publishing process cannot be automatized.
I created a repository named pages in my job’s GitHub, and pushed the contents of the __site directory locally created by Franklin.serve().
Then in GitHub > pages repository > Settings > Code and automation > Pages, I indicated the main branch as the source of the GitHub pages. Then the link to the website was displayed. Going to the link showed the first screenshot above where the template was not applied.

kellertuer · September 14, 2022, 4:25pm

To me that looks like the css file is not found on sever
Can you check with inspection tools (of your browser) which URL the html page is looking for the css file and where it actually is? Also for deployment the css file is usually copied by Franklin if I remember correctly so this copying should happen on the deployed folder as well.

wsshin · September 14, 2022, 8:28pm

The first part of index.html reads

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="/libs/katex/katex.min.css">
   
   <link rel="stylesheet" href="/libs/highlight/styles/github.min.css">

The name of the GitHub repository for the GitHub Pages is `pages`
   

  <link href="/css/franklin.css" rel="stylesheet">
<link href="/css/vela.css" rel="stylesheet">

I think the location of the CSS file indicated in the last line, href="/css/vela.css", is correct, if it is a relative path w.r.t. the directory of index.html. Specifically, the name of the GitHub repository for the GitHub Pages is pages as mentioned in OP. The link to the website displayed in “GitHub > pages repository > Settings > Code and automation > Pages” is

https://pages.<my job's GitHub domain>/<my ID>/pages/

so I think the above href value points to

https://pages.<my job's GitHub domain>/<my ID>/pages/css/vela.css

If I access this location in the web browser, I see

/*
small alterations for Franklin
*/
h1.page.title,
hr {
  position relative
  padding-left: 12.5%;
  padding-right: 12.5%;
  line-height: 1.35em;
}

@media (min-width: 940px) {
  h1.page.title,
  hr {
    width: 705px;
    margin-left: auto;
    margin-right: auto;
  }
}
...

which seems the correct CSS for the "vela" template…

kellertuer · September 15, 2022, 8:35am

I think with the / upfront the css might actually point to the base directory, that is, the browser looks at

pages.<GitHubDomain>/css/vela.css so maybe remove the first / in the <link>tag? See also Starting with a forward slash in html for "href" - Stack Overflow

tlienart · September 15, 2022, 10:02am

In your config.md, what did you set the prepath to? (or did you set it).

Here are some cases of where you expect your landing page to be and what the prepath should be:

https://www.foo.bar/ → prepath = "" (or unset)
https://www.foo.bar/baz/ → prepath = "baz"
https://www.foo.bar/baz/biz/ → prepath = "baz/biz"
https://username.github.io/ → prepath = "" (or unset)
https://username.github.io/Project/ → prepath = "Project"

from what you describe (local ok, remote not ok) I’m fairly sure that’s your issue. I suspect you should set it to

# https://pages.<my job's GitHub domain>/<my ID>/pages/
prepath = "<my ID>/pages"

Edit: you may actually have set the prepath properly but didn’t apply it (given you’re pushing things manually). To push things manually, either:

call optimize(...) (e.g. optimize(minify=false, prerender=false) to keep things simple)
push the content of __site/

or call publish(...) (which is a wrapper for 1+2).

If you push the content of __site directly after a local serve(...), the prepath will be un-set, even if you specified it.

optimize will “apply” the prepath that you specified. (You can see this in __site afterwards where paths will be like href="/$prepath/css/main.css" .