Franklin.jl and Github

I installed Franklin.jl and created a website, which is in a subfolder. I know I can deploy the generated website to Github. But does this deploy just the generated code, or also the source code?

2 Likes

If you push your code to a well-named repo, Franklin has setup a GitHub action for you that will deploy the website. You put all your code on the repo, but the action manages a separate branch with only the website.

I wrote this quick tutorial when I did it; it’s not great but it’s a start.

(you can also go to my website’s repo if you want to check the structure.)

1 Like

Thanks!

I have the following folder structure:

ufechner@framework:~/repos/websites$ tree -L 2
.
β”œβ”€β”€ climatejusticesolidarity
β”‚   β”œβ”€β”€ 404.md
β”‚   β”œβ”€β”€ _assets
β”‚   β”œβ”€β”€ config.md
β”‚   β”œβ”€β”€ _css
β”‚   β”œβ”€β”€ floods.md
β”‚   β”œβ”€β”€ index.md
β”‚   β”œβ”€β”€ _layout
β”‚   β”œβ”€β”€ _libs
β”‚   β”œβ”€β”€ menu2.md
β”‚   β”œβ”€β”€ menu3.md
β”‚   β”œβ”€β”€ Project.toml
β”‚   β”œβ”€β”€ README.md
β”‚   β”œβ”€β”€ _rss
β”‚   β”œβ”€β”€ _sass
β”‚   β”œβ”€β”€ __site
β”‚   └── utils.jl
β”œβ”€β”€ Manifest.toml
└── Project.toml

9 directories, 11 files

Shall I push the folder websites to git, or the folder climatejusticesolidarity ?

I’d say you can put only climatejusticesolidarity, I don’t think Project.toml is actually used by Franklin.

And if I deploy it on github for testing, is there a way to delete it?

Well, Project.toml can freeze the version of Franklin.jl that is used, which might be relevant.

And if I deploy it on github for testing, is there a way to delete it?

For sure !

Well, Project.toml can freeze the version of Franklin.jl that is used, which might be relevant.

Indeed, my bad! Just took a look at .github/workflows/Deploy.yml, where there is:

    - run: julia -e '
            using Pkg; Pkg.activate("."); Pkg.instantiate();
            using NodeJS; run(`$(npm_cmd()) install highlight.js`);
            using Franklin;
            optimize()'

So it uses the Project.toml indeed.

OK, I tried to deploy to github, something happened, no error message, but it does not look the way it looks when I test it locally: https://aenarete.github.io/

Any idea what is going wrong?

This is how it should look:

Build log: initial files Β· aenarete/aenarete.github.io@0b8182f Β· GitHub

(I’m no expert, so take everything I say with a grain of salt)

I see that you have two deprecation warnings on the action. Not sure why though, I don’t get these and my Deploy.yml, Project.toml and Manifest.toml are identical to yours…

Could you make a Franklin.serve() locally, and compare the files you have in your __site directory locally with the files on the remote ghè-pages branch?
(take just one odd-looking page as comparison point)

1 Like

Check the path to your CSS, that might currently still be wrong, since you work in a subfolder. I can check that more closely somewhen tomorrow, but it seems the path to your css in the main html theme is not correct (probably either due to the subfolder or due to the subdomain).

I think Frankling setup even has a section about it, but I will check tomorrow more closely if you have not solved it by that (was a long day with travels and such).

1 Like

Is it suggested to install Franklin in the global Julia environment?

Normally I never install packages there apart from TestEnv and Revise…

Indeed you don’t want it in the global environment, you can just launch Franklin from the repo’s project (since it has to be installed there)

I am sometimes lazy and install Franklin globally, but I would recommend setting up an environment for that.

I checked your code and why the CSS is not found. Your rendered HTML has a code line

/assets/css/style.css?v=9999407b91cb53fb3aee8b1f3afede4e6257aab8

so that is an existing file and seems to work, so could you check the same for the other CSS you load? I would assume that the subdomain might be the problem, because on localhost you do not have that.

The next thing that I find surprising is the @def title on the GitHub page – are you sure Frankling runs correctly on CI? Ah it seems Franklin runs according to Update Β· aenarete/aenarete.github.io@9999407 Β· GitHub – so then I am surprised.
So final thing I see, maybe the last line here aenarete.github.io/.github/workflows/Deploy.yml at main Β· aenarete/aenarete.github.io Β· GitHub might need adaption? Do you locally get a __site folder when rendering Franklin? (it seems the CI script is a bit newer than the one I use).

or in short: We mainly have to find out which fancy CSS you get locally but not in CI :slight_smile:

edit: For the first point with the path, see also Template not applied to site generated by Franklin.jl - #5 by kellertuer

Yes, I do.

I checked that, but it should not apply in my case. The webpage is deployed to

https://aenarete.github.io/

so an empty prepath should be fine. And optimize() is called by Update Β· aenarete/aenarete.github.io@9999407 Β· GitHub

Then we have to find out why the rendered version on CI still has this line

@def title = β€œClimate Justice and Solidarity Kenya/NL” @def tags = [β€œsyntax”, β€œcode”]

in its HTML and your local version does not. For me that nearly looks like Franklin not running correctly – and might also be the cause for the missing CSS (which seems to be your custom part?).

Could you maybe compare the locally rendered and the published HTML code and look for more differences?

Locally rendered head section:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
   <link rel="stylesheet" href="/libs/highlight/styles/github.min.css">
   
  <link rel="stylesheet" href="/css/franklin.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic|Source+Code+Pro:400,700" type="text/css">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/celeste.min.css">

<link rel="icon" type="image/png" sizes="192x192" href="/assets/favicon.png">
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/assets/apple-touch-icon.png">

   <title>Climate Justice and Solidarity Kenya/NL</title>  
</head>

Head section of published code:

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Begin Jekyll SEO tag v2.8.0 -->
<title>aenarete - Smart Wind | website</title>
<meta name="generator" content="Jekyll v3.9.5" />
<meta property="og:title" content="aenarete - Smart Wind" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="website" />
<meta property="og:description" content="website" />
<link rel="canonical" href="https://aenarete.github.io/" />
<meta property="og:url" content="https://aenarete.github.io/" />
<meta property="og:site_name" content="aenarete - Smart Wind" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="aenarete - Smart Wind" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","description":"website","headline":"aenarete - Smart Wind","name":"aenarete - Smart Wind","url":"https://aenarete.github.io/"}</script>
<!-- End Jekyll SEO tag -->

    <link rel="stylesheet" href="/assets/css/style.css?v=63b187bf429ba8910cd84b1cc3f3447a4d9d91f2">
    <!-- start custom head snippets, customize with your own _includes/head-custom.html file -->

<!-- Setup Google Analytics -->



<!-- You can set your favicon here -->
<!-- link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" -->

<!-- end custom head snippets -->

  </head>

What is Jekyll? Is it supposed to be used?
see: Setting up a GitHub Pages site with Jekyll - GitHub Docs

Github is running four jobs:

Is this to be expected?

To me that looks like GitHub (basically internally with Jekyll) rendering your index.md and not Franklin, as if the gh-pages/deploy from GitHub dies not take the __site folder but the markdown files from the main folder. Can you check which branch GitHub publishes?

So one settings β†’ Pages should look something like this (from my Franklin page GitHub - kellertuer/kellertuer.github.io: My science profile page. Written in Franklin.jl)

So no Jekyll would be an alternative to Franklin, so you do not want to follow any Jekyll tutorial here.

OK, I changed that to use the gh-pages branch instead.

UPDATE: This fixed the issue. Thanks a lot for your help!

2 Likes

As far as I can tell that should help, you might have to retriever it (pushing a commit to master for example). But the default is to render all md-files on master with Jekyll (and what you want is to basically copy gh-pages to deploy instead)

1 Like