Chapter 3 Discovering your style

This chapter will help you discover a website style that inspires you, unlocks your creativity, and achieves your website goals. Choosing a style is among the most important steps of developing and operating a successful website.

Note: Though this chapter introduces a variety of styles for your consideration, all subsequent chapters will use the Hugo Anatole style to explain and implement concepts. Over the course of this book, the default Hugo Anatole style will be edited sequentially to produce the final result which can be viewed here - https://r4sites-anatole-custom.netlify.app/. If you choose to work with a different style, be prepared to adapt the information presented in later chapters to your individual use case.

3.1 How it works

The style of a website includes the general layout, look and feel, and other visual aspects that distinguish one style from another. For example, this style and this style give off noticeably different impressions.

To find your style, browse the complete list of beautiful, free, pre-built Hugo themes. Hugo themes, which are created by expert Hugo developers, are freely available for you to use in your personal website project. Using a Hugo theme as the starting point for your final website style eliminates the need to design a style from scratch. Chapter 4, Generating your website, teaches you how to create a website using a Hugo theme in three simple steps.

3.2 The 90/10 rule for choosing a theme

The 90/10 rule states that 90% or more of the look, feel, and functionality you desire for your final website should come from the default Hugo theme, while the remaining 10% or less can come from simple design tweaks such as color choices, font styles, custom images, and the addition of basic features including Google Analytics. Unless you are (or want to be) a Hugo developer, attempting too many modifications to your preferred Hugo theme increases your risk of making poor decision choices and negatively affecting your final website’s overall look and performance.

3.3 Recommended Hugo themes

Depending on your goals, you may be more or less restricted to certain Hugo themes. For example, if you intend to create content using R Markdown documents that contain code written in R, Python, or SQL, then you may find that certain themes do a poor job of rendering output produced by these languages. On the other hand, if you intend to create basic content using plain Markdown documents, you may not experience any content rendering issues with any of the themes you consider.

Tip: When browsing Hugo themes, pay attention to the date on which the theme was most recently updated (Image). It’s best to avoid themes that have not been updated in the last few months or so.

Below is a list of themes that I recommend based on performance, content rendering, and personal style preference. Note that this is not an exhaustive list of all themes that I would recommend.

Recommended themes for content created with R Markdown

If you intend to add content to your personal website featuring code written in R, Python, or SQL, consider one of the following themes:

• Anatole - My favorite theme with a rich set of features.

• Eureka - Clean, professional layout. Easy to customize. Great for portfolios and professional landing pages.

• Blackburn - Clean layout. Easy to read and navigate. Great for personal websites, blogs, and portfolios.

• Beautiful Hugo - Crisp, clean design. Great for personal websites, blogs, and portfolios.

Recommended themes for other use cases

• Hargo and Vex - Modern e-commerce themes for advertising and selling products

• Doks - Modern documentation theme

• Bigspring - Modern design for small businesses offering a particular service

• Pico - Modern design for promoting yourself and your work

• Hugo Product Launch - Simple layout for promoting an upcoming product

• Hugo Scroll - Simple, highly visual layout for promoting your services or expertise

3.4 Next steps

Proceed with generating a website in three simple steps using RStudio.