Launch personal website
A small note on my website launch
The idea of a blog or personal website is out of my comfort zone. However, I do like to create, write and develop new ideas. So what will this digital space be? Probably it will neither be a blog or a single static page. I like the idea of a creative digital garden, where things grow and evolve. This means I will be adding or modifying posts on the go.
For this first post, I decided to start with a few notes and resources I used to build this site.
Some technical notes.
It seemed that Hugo (a static website generator) and the academic theme (now Wowchemy) has advanced a lot. So I started from scratch to change my static ‘CV’ page to more dynamic pages with thoughts and documentation.
- In addition to the wowchemy documentation, I found several excellent tutorials setting up a website using Hugo, blogdown, and netlify. One is a very extensive (& fun to read) post by Alison Hill. Apparently, things just can be both informative and fun to read. For a bit more brief and to the point tutorial, check out the steps written by Emmanuel Teitelbaum. Excited to set this up, and great to see soo much good documentation out there on how to do this! Thanks!
- I’m thinking to also share some notes on analysis or data visualization/art. I don’t want to knit all code in my markdown files at every site rendering, as this will take a while when using large datasets. I found a workaround here: ‘How to write a blogdown post that will still render in a hundred years from now’.
Did I just spend too much time on creating this custom-styled div? Yes, I did! First, create a folder and file as described by wowchemy:customize style with css. Then follow the tutorial by Desiree de Leon. Note the additional box that describes Blogdown weirdness to make it work with this wowchemy theme.
This is the fyi div. I have created 3 more divs, used below to illustrate the options.
After some googling, I found how to automatically update the last modified date in each post: within the config.yaml file, set enableGitInfo: true.
This is the demo div.
I am employing my website via Netlify (with repo on my GitHub account). I’m editing my website via Rstudio (note to make it work the config.yaml has to be moved from the config/_default folder to the project directory). Also to push and pull from GitHub, I had to setup a SSH connection as the password login is not allowed anymore. How to set this up is documented at GitHub Docs connecting with SSH.
This is the puzzle div.
I was thinking of displaying multiple plots generated from R. Maybe even an animated graph at some point (+1 for the advantage of digital visualization) Apparently, there is a way to generate gif from Rplot. It also mentions how to embed a gif in Rmarkdown.
This is the note div.
What if some photography is relevant to show? Just in case, a small note on how to get a link from my Instagram account and embed a picture in the markdown page using HTML. A lazy way to findthe post’s embed code (or any media for that matter) is through iframely. Note to future self: Don’t forget to align to center using <div align="center"> the copied code </div>.
Jessie van Buggenum
Scientist | Photographer | Bikepacker
Developing single-cell multi-omics tools to quantify dynamics of cellular response.