Open logankilpatrick opened 3 years ago
I should probably add a note in the docs on how to do this. The rough steps are as follows:
_layout
and adding the correct javascript and css in _libs
and_css
)This is usually what takes the most time depending on how complex the website is as CSS and HTML can often be a bit finicky.
Usually there's two layouts to port (one when you're lucky): (1) the landing page and (2) the blog post pages. The procedure is identical and the main idea is to identify the repeated design elements in those pages and put those in the relevant _layout/*
files.
To begin with the cover page
Franklin.newsite("name-of-new-site")
, this uses the "basic" layout which we'll completely replaceindex.md
file, possibly simplify its content to just have a title and some text.<body>
in _layout/head
. You might want to keep a few things from the default (e.g. the insert of katex/highlight)</body>
as well as the loaders for javascript etc in _layout/foot
(again you might want to keep a few things)_layout/page_foot
_css/
and make sure the import statements in the head.html
are now /css/thecss.css
_libs
(if you want to serve it, if it's a CDN or whatever, keep as is)__site/index.html
and look at the produced HTML there, compare it with the desired HTML; adjust things so that these two converge eventuallyThat's basically it, same procedure for the posts page. If you want to load different blocks of layout for some pages, just use {{ispage /index.html}} ... {{end}}
or {{isnotpage ...}} ... {{end}}
etc.
One note: by default a Franklin page will look like this:
<!-- usual top stuff doctype etc, head -->
<body>
<div class="franklin-content">
<!-- here all the content transformed from the source markdown -->
<!-- here whatever is in page_foot -->
</div>
<!-- here whatever is in foot -->
</body>
</html>
if you do not want the content to be wrapped in a div
with class franklin-content
(this would be the case for instance if you're using bootstrap), then you can disable this by putting the following in your config.md
:
+++
content_tag = ""
+++
the content_tag = ""
will disable the wrapping into a <div class="franklin-content">
and you can do this wrapping manually into whatever div you want or a <main>
or whatever by putting that explicitly in your _layout/head
This is an easy step. Usually most of it can just be copy pasted. The only thing is that if there's Jekyll specific commands (e.g. front matter or whatever) used in those pages, it should be commented out for now and replaced by something Franklin-admissible later.
This will depend on the scenario. The most standard one is to have a list of either all blogposts in chronological order or the x-most recent blogposts, possibly paginated. The pagination can be handled by Franklin, so the main thing to consider is to generate a list and you could do this many ways, as long as it can easily be coded in Julia, you're fine. An example for this is the one used for the Julia website blog:
I hope this kind of makes sense, ping me from one of these repos when you have questions and I'll eventually put stuff together into a doc page
This helps a ton! Thank you.
This proved to be quite difficult. I tried to do this for https://github.com/FluxML/fluxml.github.io and ran into some issues with the navigation bar. The CSS does not seem to load. It looks like the CSS file from before was a SCSS file, would that matter?
the SCSS can usually just be ignored. If you have a draft on a repo somewhere, add me as contributor and I'll have a look (ideally from specific issues I can try to address one by one async)
Hey @tlienart are there any specific steps or the like that one would take to migrate from Jekyll (for example) to Franklin? I have some websites I want to help move over but don't want to start down the wrong path.