Code Monkey home page Code Monkey logo

lulawebsite's Introduction

LulaWebsite

<!-- Can't decide which statement annoys me more in tweeps' profiles:
1) "views are my own" -> bc duh!
2) "my preferred pronoun is ..." -> bc "veritas est adaequatio rei et intellectus"
 -->

What this is

My new personal website created with R pckg distill

Where it lives

  • Local Repo - in /Users/luisamimmi/Github/LulaWebsite
  • Github Repo - at github
  • Deployed via Github Pages website - at https://github.com/Lulliter/LulaWebsite
  • ...re-directed to custom domain registered with AWS Route 53 - at lulliter.com + How to configure AWS Route 53 to use your custom vanity domain (see instructions here) + Set up AWS Cloudfront Distributions to link github.io/xxx to custom vanity domain (see instructions here) + (*) QUIRK: I had to add CNAME otherwise in every push, the domain gets cancelled ....

Structure

  • The file ./index.Rmd == the main landing page of your website | fill it with the content you want on your main page.
  • The file ./_site.yml == (called a YAML file) contains the main settings for your site that control the overall look.
    • this include what files are included and excluded from the site
  • The ./docs/* (or _site/*) folder == created and updated when you build the website. It contains the html files that are created from your Rmd files. Those files will be used by Github to display your website
  • more content.... all you need to do is edit existing or create new R Markdown (.Rmd) files (or,)if you don't use R code in your file, you could just use plain Markdown/md files)

How to generate local version

  1. From the Build pane, clicking on Build Website hammer icon
  2. Type rmarkdown::render_site(encoding = 'UTF-8') into the R console. This will:
    • Render all .Rmd and ,md files in the root dir into HTML (EXCEPT markdown files beginning with "_" )
    • Regenerate Blog posts\
    • copy the generated HTML files in the output dir (_site/* or docs/*) along with supporting files (e.g. CSS and JavaScript)

How to add a blog post

  1. create it distill::create_post(title = "prova", collection = "posts", author = "auto", slug = "auto", date = Sys.Date(), draft = TRUE)
  2. knit it or run rmarkdown::render("_posts/2022-04-13-prova/prova.Rmd") (posts are considered standalone documents that are not re-rendered when the site is built)
  3. build site

Publication page

  • I imitate the smart model of Joel Nitta. To make it work, I had to figure out a few tweaks:
    • Some type of my bib entries from Zotero were not being exported, but you can add in Zotero an "extra" field. see instructions here.
      1. Adding in in Extra tex.referencetype: proceedings --> makes the bibtex key become @proceedings{g20-italy_g20_2021, ...
      2. Adding in in Extra tex.type: conference Proceedings --> makes the bibtex key become @proc ..., type = {conferenceProceedings},....
    • In the functions I had to replace if (is.na (url)) return(NULL) (error when knit ) with -> if (anyNA(url)) return(NULL)\
    • adding ./header.html allows to use the Academicons icons (only fontawesome ones are inthe distill website by default)

Acknowledgements

This is possible thanks to the fantastic R package distill. I started from this tutorial. Here's another nice tutorial. Then I 'borrowed' the solution of Quang Nguyen to design the Project page and from Joel Nitta's website for the theme and publication page. Here's another nice example possibly for later (plus tutorial blog).

TO DO

✅ debug Publications.Rmd [some issues witt function] --> simplify the icons like in portfolio.Rmd

  • actually I re-wrote the functions and moved to R/... but only for publications, for talks I do manual icon_links

☑️ write a make file to automate the update/re-rendering..

lulawebsite's People

Contributors

lulliter avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.