Installation

The software and services that were used to set up this website are listed below. They are all free.

Software list:

  • Visual Studio Code | Text editor with a nice integrated terminal and git integration. I will abbreviate this to vscode because of its awkward name.
  • R | Required for the blogdown package which simplifies many of the steps
    • Hugo | For building a local preview of the website. This will be installed with R so it does not have to be installed manually.
  • RStudio | For supporting software, i.e. pandoc. Alternatively, pandoc could just be installed separately.
  • git | For version control and triggering updates
  • Node.js | [Optional] Only needed for making custom changes to the CSS

Services list:

  • Netlify | To build the website from source and host it
  • Github or GitLab or Bitbucket | Can be any place that will host a git repository and is supported by netlify

Initial set up with R

Most of the heavy lifting will be done with R. To start an R session, launch the terminal and type R on MacOS/Linux or R.exe on Windows. This should work on systems with MacOS or Linux but will likely fail on Windows PC as the latter requires adding R to the system path which is described next.

Adding R to the system path (for Windows PC)

  • Start/Windows menu -> search for system environment -> select Edit the system environment variables
  • A new window will open. Push the Environment Variables... button.
  • Another window will open with two lists. Select the Path entry from the upper list, and then push the Edit... button.
  • Push the New button and type the path pointing to directory containing R.exe. For a default installation, the directory should resemble C:\Program Files\R\R-X.X.X\bin
  • Save all changes. Open a powershell/command prompt and verify that entering R.exe starts an R session. Type q() to end the R session, and exit to close the terminal.

Installing R Packages

This part can be done using any terminal, but I prefer using the integrated terminal in vscode.

  • Make blank folder, open it in vsCode.
  • Launch terminal (or use the one inside vscode), and start an R session by typing R on Linux/MacOS or R.exe on Windows
  • Follow blogdown instructions to install blogdown and hugo
    • install.packages('blogdown')
    • blogdown::install_hugo()
  • Run blogdown::new_site(theme="jbub/ghostwriter") to make new site. It should automatically launch the web browser and show the generated website

Modifying the theme

  • Modify/configure config.toml with
  • Create a copy of themes/ghostwriter/layouts/partials/header.html into layouts/partials/header.html
    • The copy in layouts/ will take precedence over the default one in themes/
    • Example of a change: I removed the part after &middot on line 6 because I didn’t want the title to contain the author name
    • Same can be done with other elements, e.g. the above change was also made in post-header.html to remove the ‘by Author Name’ part
  • The CSS has to changed in order to make changes to the visual appearance and it’ll be easier to do this by first installing node-sass
    • Install by running npm install -g node-sass less in the terminal
      • On linux, you might need to sudo chown YourUserName /usr/lib/node_modules (or whichever directory contains node_modules) before being able to install node-sass
    • Make a new task in vscode by: ctrl+shift+P -> Tasks: Configure Task -> New task from a shell template, and then paste the following
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Sass Compile styleSCSS",
            "type": "shell",
            "command": "node-sass themes/ghostwriter/static/styles/style.scss themes/ghostwriter/static/dist/styles.css",
            "group": "build",
            "problemMatcher": []
        }
    ]
}
  • Now we can make changes to the CSS by modifying the file themes/ghostwriter/static/styles/style.scss and apply them via CtrlShiftP -> RunTask -> Sass Compile styleSCSS in vscode. A few of the changes that I did were:
    • Hover over the $primary color in vscode and a pop-up will show up to select colour. Set a new primary colour, and then
    • Modify footer - remove padding and add a border line
      • border line was a mistake but whatever, I like it now
    • Remove the bottom border from post-header
    • Change max body/html height to 99% (removes scroll bar)

Sections on the website, such as ‘Research’, ‘Code’, and ‘About, can be added by making a markdown file in content/page/. Most themes will make example pages on their own, so use them as an example to make your own. If the website has a menu and you want those pages to show up there, then update the [[menu.main]] entries in config.toml.

The above process can be used to add posts too by making a new markdown document in content/post. By default, the main page should automatically update with new posts, but this might vary between themes.

Conclusion

This was a rough recap of my initial steps for setting up this website. For mode in-depth details, check out the blogdown documentation.