Powered by Hugo

I moved my website from Jekyll to Hugo. Hugo is not only fast to generate but also easy to customize, thanks to its compresensive documentation. My site is adjusted from Academic Theme, deployed from GitHub and hosted at netlify. This workflow seems amazing (and even free!!). I can simply push new .md to GitHub and Netlify will automatically generate the website.

I made numerous changes to the theme. Probably one of the most obvious is the navigation bar. I also let it scroll up in posts, with the help of this Medium article.

Jaan Altosaar’s website teaches me how to make the header image responsive to window size, considering a huge amount of reading online is throught mobile. This Github gist let me know how to add a button to show Disqus comments.

What inspires me most is the website of Kieran Healy. I borrowed the basic structure of his publications and blog posts. Although the theme he used is completely different from mine, the transformation is still not that painful.

Blogdown or not?

I’ve been struggling with whether or not to use blogdown to render the website, which compiles *.Rmd and *.md through knitr and pandoc (instead of *.md only through Blackfriday). In that sense I can generate post and figures (throught R) automatically.

However, I find I’m not that satisfied with that workflow. I will have to compile the website first, blogdown::hugo_build(), and push the public/ folder for deployment. I also find the figure path configuration still not quite stable. This may be not that surprising since blogdown is still at its early stage. I believe perhaps netlify will soon provide ways to run blogdown::hugo_build() in their server automatically after user’s pushing to GitHub so that users do not need to compile the website in advance. This would make blogdown much more appealing.

Below I will show some setting in my adjustments.

Code

Highight is done by hilight.js. This example is due to Kieran Healy.

library(extrafont)
library(ggplot2)
library(gapminder)
loadfonts()

p = ggplot(data = gapminder,
           mapping = aes(x = gdpPercap,
                         y = lifeExp,
                         color = continent,
                         fill = continent)) +
  geom_point() +
  geom_smooth(method = "loess") +
  scale_x_log10() + 
  xlab("GDP per capita (log)") + 
  ylab("life expectancy") + 
  theme_minimal() +
  theme(legend.position = "top")

svg("~/plot/life-gdp.svg", width=6, height=4,
    family="Myriad Web Pro Condensed")
print(p)
dev.off()

Figure

The above R code will generate the following figure:

Figure caption is done by shortcodes:

{{< figure 
    src="/img/post/powered-by-hugo/life-gdp.svg" 
    title="Life Expectancy and Log GDP per Capita" >}}

Table

Code:

| Command           | Description                    |
| ------------------| ------------------------------ |
| `hugo`            | Build your website.            |
| `hugo serve -w`   | View your website.             |

Result:

Math

Of course you can type $\rm \LaTeX$ with the help of MathJax:

$$ \lim_{ n \to \infty } {\rm Pr} \left ( \sqrt{n} \left ( \frac{ \bar{ X_n } - \mu }{ \sigma } \right ) \leq x \right ) = \int^x_{ -\infty } \frac{ 1 }{ \sqrt{ 2 \pi } } e^{ -y^2 / 2 },{\rm d}y $$

$$ 
\lim_{ n \to \infty } {\rm Pr} 
\left ( 
    \sqrt{n} \left ( \frac{ \bar{ X_n } - \mu }{ \sigma } 
             \right ) \leq x 
\right ) 
= \int^x\_{ -\infty } \frac{ 1 }{ \sqrt{ 2 \pi } } e^{ -y^2 / 2 }\,{\rm d}y 
$$

Also inline mode: $ \mathbf{ \hat{ \beta } } = \left ( \mathbf{X}’ \mathbf{X} \right )^{-1} \mathbf{X}’ \mathbf{y} $.

Also inline mode: $ \mathbf{ \hat{ \beta } }
 = \left ( \mathbf{X}' \mathbf{X} \right )^{-1} \mathbf{X}' \mathbf{y} $.

Alerts

You just saw a warning alert. Here is a note alert.

{{% alert note %}}
I have only last thing to show...
{{% /alert %}}

Shortcodes

Hugo supports quite a few other types of shortcodes, including tweet, YouTube, GitHub gist, and Speaker Deck. Let us conclude this post in one of them.

{{< youtube UWR7_Z7YThA >}}

Wish I can generate some interesting things from this new start.