How did you build this site?

As a graduate student, marketing myself will be critical to growing my professional circle, enhancing my research, and naturally helping me prepare for the next steps in my career. After presenting at a conference I realized I needed somewhere for colleagues to find me and my work. I have previously built websites using Wix or other services and recognized the inherent limitations in these sites to capture what I need as an academic. With a brief Tweet, David Wilson pointed me to Dan Quintana’s tutorial - which is what I followed to build this. Take this as additional motivation to not just build this website, but to also create and actively use a Twitter account. I have found it immensely rewarding. You can follow me @Wyatt_Bensken , and I’ll happily follow back. I believe the investment in setting up a site will be well worth it in the long-run. I have uploaded a short YouTube video that talks briefly about what I see as the advantages to building a site and using the blogdown package!

In this post I want to walk you through how I built this site and a few tips/tricks I picked up along the way. Take this as me revealing that much of this site was largely a template, and I’m not as savvy as you may have thought when you first saw it.

What you’ll to get your website up and running:

• R/RStudio/Markdown installed
• A Github account, to connect with Netlify . This will host your site.
• A domain name, if you want something beyond the generic name.netlify.com that is free. I purchased mine through Google Domains which was $12 a year. There are many sites that can do this.

Items you should have open:

• Your CV/resume/papers/talks/etc.
• Dan Quintana’s tutorial
• This link for available icons
• The theme documentation
• I found this specific site particularly helpful at times as well

Let’s build it!

Follow Dan’s tutorial to do the following (this is an abbreviated list, Dan’s post has nice gifs and a little more detail):

1. Install the “blogdown” package using install.packages("blogdown")
2. Start a new project (File -> New Project -> New Directory -> Website Using Blogdown), with the Hugo theme as: “gcushen/hugo-academic”. There are many theme options you can explore here
3. Load library(blogdown), install the “hugo” framework, using blogdown::install_hugo(force = TRUE), and build the site using blogdown::build_site() followed by blogdown::serve_site().
   • This should create the mobile version of the site in the ‘Viewer’ tab.

Time to customize it:

You’ll notice that the great template also sets up your site with a lot of ‘junk’ you may not need. While I am still exploring all of these facets, the list below is a great place to get started. A simple fix will be in the ‘config.toml’ in the main directory is where you’ll want to update any copyright information, or delete it off.

The more customization the better. If you really are up for it, change the colors and theme. The more unique your site is, while maintaining functionality, the more you’ll stand out to employers.

“config” folder

1. Within ‘_default’ you’ll see three .toml files. The two most important are
   • params: here’s where you’ll want to update your contact details, such as address and phone number, that appear at the bottom of the page.
   • menus: this sets the floating links at the top as well as the actual widgets, both which ones and their order. You can also use this as an opportunity to change the displayed name of them to fit better. This is also where you can point to a PDF file of your CV which you put in the ‘files’ folder. Think about the order you want to display your work in for the viewer.

“content” folder

“authors”

‘admin’: this is you! In the _index.md you’ll want to update with your information. You can follow the above link I recommended for “icon packs” for your social sites (copy/paste as needed). Additionally the formatting follows normal Markdown guidelines for say italics or bold.

The ‘avatar.jpg’ is the photo of you. It has to be a fairly small file (just a few MB), and you have to get the shape right. The trick here is to get your photo formatted then rename it ‘avatar.jpg’ and just replace the file that is in there.

“courses”

There are some templates here for courses. I have not used these. Explore as you wish.

“home”

This is the heart of the site! There’s various files in here that are self explanatory, I’m not going to walk through one by one, as reading the files it’ll become evident what they do, but will give a few pointers:

1. When you open the Markdown file you’ll see “active: true”. If you change this to “active: false” this will ‘turn off’ that widget, removing it from your site. You’ll likely want to do this with a number of them. However, data contained within the widget will still be visible. If I turn off ‘posts’, which I have, this blog post still shows up. I cannot emphasize enough the need to remove the sample files or they will appear in a search.
2. You’ll also want to adjust the “weight” to ensure it alligns with what you have previously decided in your menus.toml.
3. You can also change the title and subtitle of sections, within each one.
4. Some contain their own data (experience, for example) whereas others reference other data (publications and posts). Note: for the experience piece, you will need to enter in day, in addition to month and year or it will not work.
5. The ‘content’ markdown page lets you set how the form works (I have it set to the formspree default)

“post”

This is the blog post feature, and where I crafted these instructions. What I did was create a new folder called “building-website” and typed all of this. As I want to add more blog posts, I can just create new folders and it will automatically reference. A note here: I actually set “active: false” for my site for posts. This means the widget won’t show up, but my post is up. For this purpose I didn’t need my tome of instructions being on my personal “front page”.

“project”

This is where you’ll want to spend the most time, in my opinion. As students highlighting the projects we’ve done is critical, here you will create a new folder for each project (can name it anything), and within the Markdown type a title, subtitle, date, and brief narrative. As noted above in ‘home’ these will be automatically compiled. Have a new folder for each project. Note here: when it asks for authors, if you add more in list format their names will become searchable on your site. This may be nice so visitors can see all projects you’ve done with a colleague, and make your colleagues feel nice along the way. Win-win.

“publication”

This is similar to the ‘project’ piece in that each folder is a publication. Personally, I think it’s worth highlighting a few papers here but if you have many (certainly double digits) think about what people want to see. The more information you put into these Markdown files, the more options people will have to interact with the paper (DOI, URL, etc.), and the more information that it will display. Consider copying your abstracts. You’ll see the sample files are built for various publication types.

“slides”

This, I believe, you can highlight your talks you’ve built in RMarkdown. I have not used it, but it certainly seems like a good way to show off your previous projects.

“talk”

Similar to projects and publications you’ll want a new folder for each talk. I turned this idea of ‘talk’ to capture both my poster and oral conference presentations, including highlighting when and where they are. Formats can be copied and repeated as many times as needed.

Again, throughout these folders there may be example folders (publications, for example), I’d recommend moving them to a different folder, because if you do not they will appear on your webpage.

Okay, I’m ready to launch it:

1. Setup your Netlify account, which you can automatically link from Github.
2. You will have the option to either a) link a Github repository which will then automatically update or b) drag and drop the “public” folder from the project directory.
   • Personally, I chose the latter as I don’t use Github all that often and for me it created another step in the process which was likely to fail at some point.
3. This will compile and launch your site. Congratulations!
4. But you’ll be stuck with some odd name Netlify gives you. I went ahead and changed mine to “wyattbensken.netlify.com” and then followed their instructions to link the domain (which I purchased via Google) to this.
   • A note here, I also allowed Netlify’s certificates to secure my site, which can be done via: Settings > Domain management > HTTPS. You will have to modify your DNS options via Google Domains as well. If your site won’t load at this point, it is likely because your browser does not believe it is secure. Give it some time, perhaps a few hours, to communicate with Google Domains and secure your site.
5. Once this has gone through you’re all set! Anytime you need to deploy your site, you can do so by modifying via R/Markdown and dragging and dropping the “public” folder. You’ll want to make sure you re-run blogdown::serve_site() and blogdown::build_site each time before uploading the public folder. This is also what you can run to get the ‘live’ view in Viewer back.

In closing, I hope the above has helped you get started with your own personal and professional website. Clearly my instructions are not fully exhaustive and much will be learned via trial, error, and of course lots of Google searches. If you’ve gotten this far I’d encourage you to shamelessly promote your new webpage on Twitter, and tag @dsquintana and me, @Wyatt_Bensken. I’d be happy to amplify your name and site. My final piece of advice is:

You’ve put in the work to set it up, keep up the work to maintain it. Don’t let the content fall too far out of date. It’s easy to take it down, temporarily, if it becomes too inaccurate and you don’t have the capacity to maintain it. Use the features when you can. Write blog posts about your work, detail your projects, and share slides when appropriate.