# \[ANN\] PkgPage.jl build a nice webpage for your package in minutes

**URL:** <https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391>\
**Category:** Package Announcements\
**Created:** [June 14, 2020, 5:22pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391 "2020-06-14T17:22:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![tlienart](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tlienart/32/7640_2.png) [@tlienart](https://discourse.julialang.org/u/tlienart)\
**Post date:** [June 14, 2020, 5:22pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/1 "2020-06-14T17:22:20Z")

</div>

Hello!

A while back @viralbshah asked me whether it was possible to have a way to create a single-page webpage for packages “really easily” with Franklin, well, here it is.

@anon37204545 and I are happy to announce [PkgPage.jl](https://github.com/tlienart/PkgPage.jl) a package that builds on Franklin.jl with a **single-page** bootstrap 4 template that is mostly pre-arranged so that you won’t need to fiddle with HTML/CSS to get a [nice looking landing page](https://tlienart.github.io/PkgPage.jl/). The layout and colour scheme can easily be customised (e.g. use a hero, a different logo, add a link to docs, wider or narrower body etc.)

Here are a few reasons why you might want to consider this:

- it will look nicer than a GitHub README
- you can show maths (with KaTeX)
- you can use any highlightjs theme
- you can demo Julia code that gets evaluated on the fly
- easy to use, no need to tweak HTML or CSS code to get a good result (you can if you want a more custom look)

Note also that even though it uses the Bootstrap framework we:

- don’t use the Javascript that comes with it (jQuery), we only use a tiny vanilla JS script for the scrollspy (which you can disable); KaTeX maths and highlightjs code are pre-rendered by default,
- use purgecss in the deploy phase to decrease the size of the boostrap stylesheet from 160K to ±10K.

So overall the generated page is responsive and light.

**To get started** : add the package and follow [the instructions](https://tlienart.github.io/PkgPage.jl/#getting_started).

We hope you’ll find this useful!

ps: thanks to @Wikunia for beta testing and help with the code!

PPs: here’s a [screencast](https://www.youtube.com/watch?v=6kARuINUAMs) of me using PkgPage live (be nice, I’m not very good with this screencasting thing)

---

<div class="post-metadata">

**Author:** ![tbeason](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tbeason/32/15898_2.png) [@tbeason](https://discourse.julialang.org/u/tbeason)\
**Post date:** [June 14, 2020, 6:51pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/2 "2020-06-14T18:51:42Z")

</div>

Looks great! If only I had a package worthy of this treatment…

---

<div class="post-metadata">

**Author:** ![dmolina](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/dmolina/32/5246_2.png) [@dmolina](https://discourse.julialang.org/u/dmolina)\
**Post date:** [June 14, 2020, 7:24pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/3 "2020-06-14T19:24:12Z")

</div>

It looks great (I am a happy user of Franklin in [a very small website](http://pradofacil.danimolina.net/)).

It is a nice option to create a website without worrying with the HTML, or the template, good work!

---

<div class="post-metadata">

**Author:** ![christopher-dG](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher-dg/32/7387_2.png) [@christopher-dG](https://discourse.julialang.org/u/christopher-dG)\
**Post date:** [June 14, 2020, 7:37pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/4 "2020-06-14T19:37:52Z")

</div>

Great work! Putting a high-level summary at the `gh-pages` root with PkgPage and API reference on `dev`/`stable`/etc. with Documenter seems like an awesome combo.

---

<div class="post-metadata">

**Author:** ![anon37204545](https://avatars.discourse-cdn.com/v4/letter/a/439d5e/32.png) [@anon37204545](https://discourse.julialang.org/u/anon37204545)\
**Post date:** [June 14, 2020, 7:47pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/5 "2020-06-14T19:47:26Z")

</div>

If you make a page for your package with PkgPage, it will start to seem more worthy… 😉

---

<div class="post-metadata">

**Author:** ![christopher-dG](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher-dg/32/7387_2.png) [@christopher-dG](https://discourse.julialang.org/u/christopher-dG)\
**Post date:** [June 14, 2020, 7:54pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/6 "2020-06-14T19:54:01Z")

</div>

Quick question: Is it required that the Bootstrap CSS be committed to the repo? That would have the unfortunate side effect of turning any repo that uses this into a CSS repo according to GitHub.

---

<div class="post-metadata">

**Author:** ![tbeason](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tbeason/32/15898_2.png) [@tbeason](https://discourse.julialang.org/u/tbeason)\
**Post date:** [June 14, 2020, 8:06pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/7 "2020-06-14T20:06:15Z")

</div>

Not necessarily. There will likely be more HTML than CSS (because the CSS is minified), so it would be HTML. But if there are Julia examples on the page, then it might have more Julia. I have a couple of Franklin repos, they display as HTML or Julia.

---

<div class="post-metadata">

**Author:** ![christopher-dG](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher-dg/32/7387_2.png) [@christopher-dG](https://discourse.julialang.org/u/christopher-dG)\
**Post date:** [June 14, 2020, 8:08pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/8 "2020-06-14T20:08:49Z")

</div>

Ideally I’d like to keep both HTML and CSS that I didn’t write myself out of my repo. Perhaps a build process similar to that of Documenter could be used?

---

<div class="post-metadata">

**Author:** ![tbeason](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tbeason/32/15898_2.png) [@tbeason](https://discourse.julialang.org/u/tbeason)\
**Post date:** [June 14, 2020, 8:13pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/9 "2020-06-14T20:13:51Z")

</div>

In that case, you just need to replace the CSS that is in there will the CDN-served versions. You could maybe do the same with any custom CSS they have for this package (haven’t looked at the source).

---

<div class="post-metadata">

**Author:** ![tlienart](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tlienart/32/7640_2.png) [@tlienart](https://discourse.julialang.org/u/tlienart)\
**Post date:** [June 14, 2020, 8:43pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/10 "2020-06-14T20:43:15Z")

</div>

Hmm that’s true 🤔 I wonder if this can just be specified with .gitattributes and via GitHub linguist, does anyone know?

It looks like setting a `.gitattributes` specifying the path of the page as vendored should work; I’ll play with this tomorrow and see what we can get

Ps: CDN is not ideal bc it won’t be purged

---

<div class="post-metadata">

**Author:** ![piever](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/piever/32/1815_2.png) [@piever](https://discourse.julialang.org/u/piever)\
**Post date:** [June 14, 2020, 10:00pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/11 "2020-06-14T22:00:31Z")

</div>

Looks really nice!

> [@tlienart](#):
>
> Note also that even though it uses the Bootstrap framework we:
> 
> - don’t use the Javascript that comes with it (jQuery), we only use a tiny vanilla JS script for the scrollspy (which you can disable); KaTeX maths and highlightjs code are pre-rendered by default,

Probably not worth the change, but if you are interested in a “javascript free” css framework, I’ve been quite happy with [Bulma](https://bulma.io/) in the past (other than for the lack of javascript, it is at least superficially similar to Bootstrap, maybe a bit more lightweight).

---

<div class="post-metadata">

**Author:** ![tbeason](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tbeason/32/15898_2.png) [@tbeason](https://discourse.julialang.org/u/tbeason)\
**Post date:** [June 14, 2020, 10:21pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/12 "2020-06-14T22:21:24Z")

</div>

Bootstrap 5 is dropping jQuery. It should be out soon.

---

<div class="post-metadata">

**Author:** ![tlienart](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tlienart/32/7640_2.png) [@tlienart](https://discourse.julialang.org/u/tlienart)\
**Post date:** [June 15, 2020, 8:24am UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/13 "2020-06-15T08:24:10Z")

</div>

> [@tlienart](#):
>
> It looks like setting a `.gitattributes` specifying the path of the page as vendored should work; I’ll play with this tomorrow and see what we can get

Just in case people are wondering about this; @christopher-dG made a great point that things as they stand would make your repo look like it’s basically a web repo with lots of CSS and HTML instead of a Julia repo. It’s actually super simple to avoid this by adding a `.gitattributes` file where you ignore the `page/` path (or wherever the source is):

```julia
page/* linguist-vendored

```

see [the file](https://github.com/tlienart/PkgPage.jl/blob/master/.gitattributes) on PkgPage (which is now marked as 100% Julia).

I’ll add this in the instructions.

---

<div class="post-metadata">

**Author:** ![tlienart](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tlienart/32/7640_2.png) [@tlienart](https://discourse.julialang.org/u/tlienart)\
**Post date:** [June 15, 2020, 8:29am UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/14 "2020-06-15T08:29:19Z")

</div>

Yeah there’s a lot of great frameworks and themes out there; but even though Franklin makes it fairly easy to work with anything you want; it always requires a bit of time to adjust everything so that it #just-works (and that you’re not left with a bloated JS mess… like, unfortunately, a lot of Jekyll and Hugo themes… ☹ ); it’s my hope to keep adding themes and examples using frameworks in FranklinTemplates but it’s a fair bit of work (and I’m far from an expert in web dev…); help is very welcome (and kudos to those who’ve helped me with this effort!)

I’m hopeful that over time we will have more and more of these “here’s a nice template you don’t need to tweak and can directly dump content in” rather than barebone themes that currently still have to be tweaked a fair bit…

---

<div class="post-metadata">

**Author:** ![christopher-dG](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/christopher-dg/32/7387_2.png) [@christopher-dG](https://discourse.julialang.org/u/christopher-dG)\
**Post date:** [June 15, 2020, 2:25pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/15 "2020-06-15T14:25:11Z")

</div>

Good find, thank you! 🙂

---

<div class="post-metadata">

**Author:** ![jlapeyre](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jlapeyre/32/4514_2.png) [@jlapeyre](https://discourse.julialang.org/u/jlapeyre)\
**Post date:** [June 15, 2020, 5:54pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/16 "2020-06-15T17:54:06Z")

</div>

This is fantastic. Has anyone tried it already? I you have, could you post a link?

---

<div class="post-metadata">

**Author:** ![tlienart](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tlienart/32/7640_2.png) [@tlienart](https://discourse.julialang.org/u/tlienart)\
**Post date:** [June 15, 2020, 7:33pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/17 "2020-06-15T19:33:14Z")

</div>

Well PkgPage’s page is made with it (but I guess you knew that); actually when you do `newpage(); serve()` you start with PkgPage’s page; the two source files to modify (`config.md` and `index.md`) serve as both a starting point and a tutorial (they contain fairly exhaustive comments).

---

<div class="post-metadata">

**Author:** ![simeonschaub](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/simeonschaub/32/216566_2.png) [@simeonschaub](https://discourse.julialang.org/u/simeonschaub)\
**Post date:** [June 15, 2020, 11:28pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/18 "2020-06-15T23:28:25Z")

</div>

Just something I noticed looking at the landing page: Maybe it might be useful to have a more prominent link to the corresponding GitHub repo right at the top? I often find myself wanting to look at the actual code, when reading docs.

---

<div class="post-metadata">

**Author:** ![anon37204545](https://avatars.discourse-cdn.com/v4/letter/a/439d5e/32.png) [@anon37204545](https://discourse.julialang.org/u/anon37204545)\
**Post date:** [June 15, 2020, 11:36pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/19 "2020-06-15T23:36:21Z")

</div>

Star button is actually just a link to GitHub repository. Where would you put it, to make it more prominent? Or you’d rather have it replaced with just some sort of “View on GitHub” button?

---

<div class="post-metadata">

**Author:** ![dilumaluthge](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/dilumaluthge/32/29283_2.png) [@dilumaluthge](https://discourse.julialang.org/u/dilumaluthge)\
**Post date:** [June 15, 2020, 11:53pm UTC](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391/20 "2020-06-15T23:53:21Z")

</div>

I personally would like something more prominent, like a “View on GitHub” button.

It might not be obvious to people that the “Star” button is the fastest way to get to the GitHub repo.

[Next page](https://discourse.julialang.org/t/ann-pkgpage-jl-build-a-nice-webpage-for-your-package-in-minutes/41391.md?page=2)