New Website Development

Start with the Why #

I’m in my thirties and, obviously, I like creating websites. I’ve been doing it since high school using Macromedia Dreamweaver back then, Mediawiki, phpBB, WordPress… and now Hugo that helped me actually deliver a few websites for friends and family.

I deep dived into Data Science while locked down for Covid by starting a MOOC on Statistics with R, which led me to take on several projects. Now, I want to go further and start learning Rust, mainly for GTK app development for the GNU/Linux ecosystem (I’ve been a Debian / Gnome, for around 5 years).

Also, I’ve just quit my job. For almost 10 years I’ve been as relationship manager for leading banks in France. Now I envision a fresh start as a freelancing Product Owner/Project Manager targeting software engineering. I want to take some time to reflect on this transition.

Finally, I’d like to leverage these experience into a research project on accounting and personal finances (relying primarily on ledger and R).

So, for the next few years, I’d like to let myself write at least one post per month related to these topics. And this why I open this webpage.

About the website #

The content of the website will be written in 🇬🇧 English, the linga franca for technical writing ut also in 🇫🇷 French, my mother tong. In this respect, I’ll implement polyglot, a feature to let user choose whether missing translations should be hidden or filled with original content.

The content will be stored in flat files, rendered by Hugo through blogdown and deployed to my own VPS powered by yunohost. All resources shall be self-hosted (no CDN, no webfonts etc.)

The website should have a polished minimal interface, be accessible (understandable by text readers), low on javascript (so visitor’s can have it disabled). We will maximize the use of semantic HTML tags and classless styling declarations.

This website is not intended as making money so no analytics will be used. In further development, we might embed a payment form for tips. We would then probably use stripe with peppettes and/or liberapay.

At some point, we might as well introduce a comment engine (like commento), and even a newsletter (like listmonk) but let’s be honest we don’t really need that.

Sections #

The home page will actually be a splash linking to the main section, and the only page allowing indexation by search engines.

home <= splash

main <= mainSections

posts
projects

docs <= pkgdown::build_site()

coverage <= covr::report()
articles/report <= pkgnet::CreatePackageVignette()






tags <= Taxonomy term (posts only)
mentions

The main section will have a short bio and an unpagnited list of posts ordered by date and grouped by year, with apparent title, date of publication, associated tags and description (when available).

In posts, there should be some context before the actual content with date of publication and estimated reading time.

The code should be highlighted by chroma and autolinked (cross package linking with downlit for R code).

The projects section will map to the documentation of projects I’ve been working on. As these are expected to have their own repository and websites, the actual content will be imported as git submodules.

For R Packages, I will be using pkgdown with a custom theme allowing nice integration of the documentation with the website as well as covr reports.

Layouts #

• index => splash to the main section
• 404 => page not found error
• main section
  • HTML content:
    • list => unpagniated chronological order grouped by year
    • single for individual posts
  • XML RSS feeds
  • JSON search index
• _default for other sections
  • list for other lists including taxonomy of tags and terms for each tag)
  • single for other pages (legal mentions etc.)

Styles #

We will start with pico, a minimal and semantic CSS framework which uses simple native HTML tags as much as possible. It will help us get going faster, minimize the number of declarations (we target around 350-400 declarations per pages) as well as having a clean DOM.

As minimal as it is, we will strip the extra stuff but it is actively maintain and CSS do evolve fast so we should take care to allow for later upgrades.

Note that are are not going to use any dependencies management systems (npm or alike) but rather build our own updater which will be called upon publishing.

Styles will be written in SCSS and transpiled using libsass a deprecated library written in C/C++ which is perfectly integrated in Hugo. Maybe in further development we will migrate to Dart.

All styles will be contained in the stylesheets (no inline CSS so we can have strict CSP).

Styles (for each language)

main (global: common for whole website)

base (cherry-picked from vendored pico)
overrides
partials


extra (local: based on page’s kind - home, list, single)

8 style sheets exported in total (2 per pages):

• main: 1 per site/language (2)
• <custom>: 1 per site and kind/type (2 * 3)

Themes #

The theme should follow the user’s preference (based on prefers-color-scheme) and fallback on light.

When visitors have JS enabled, they should be able to manually change their preference and we should remember it (through localStorage) for their next visits. See how we implemented this feature.

Inspiration #

Here’s a list of some websites that have a look and feel

• garrickadenbuie.com
• gunibert.de
• sarahdayan.dev
• frandroid.com
• river.me
• mdBook
• Go Make Things
• joshwcomeau.com
• hilaryparker.com/
• tpiros.dev/
• w