Yu Vision

Hugo建站和Blogdown插件

 learning/life  3366  7 分钟

遇到一个问题，目前尚未解决，先放出来：通过Rstudio中的BlogDown插件，采用Hugo网站生成器建站，网站是采用的Meme主题。但是将这一套移到另外一台电脑时，由于Hugo还在更新，而Meme主题已经不更新，就出现了错误：ERROR deprecated，ERROR TOCSS。

1
2
3
4
5
6
7
8
9

> blogdown::build_site()
Start building sites … 
hugo v0.143.1-0270364a347b2ece97e0321782b21904db515ecc+extended windows/amd64 BuildDate=2025-02-04T08:57:38Z VendorInfo=gohugoio

ERROR deprecated: resources.ToCSS was deprecated in Hugo v0.128.0 and subsequently removed. Use css.Sass instead.
ERROR deprecated: .Site.IsMultiLingual was deprecated in Hugo v0.124.0 and subsequently removed. Use hugo.IsMultilingual instead.
ERROR TOCSS: failed to transform "en/styles/main-rendered.scss" (text/x-scss): "C:\Users\think\Documents\hugo1\assets\scss\main.scss:247:17": Invalid CSS after "$fofPoster: url(": expected expression (e.g. 1px, bold), was "<no value>);"
Total in 116 ms
Error: error building site: TOCSS: failed to transform "en/styles/main-rendered.scss" (text/x-scss): "C:\Users\think\Documents\hugo1\assets\scss\main.scss:247:17": Invalid CSS after "$fofPoster: url(": expected expression (e.g. 1px, bold), was "<no value>);"

Hugo介绍

Hugo 是一款基于 Go 语言开发的静态网站生成器，以其快速的构建速度、灵活的模板系统和丰富的主题库而闻名。

Hugo 的特点

  1. 极速构建：Hugo 是同类产品中最快的静态网站生成器，平均每个页面构建时间小于1毫秒，即使是大型网站也能在几秒钟内完成构建。
  2. 强大的模板系统：Hugo 内置预制模板，支持自定义模板和主题，可快速实现 SEO、评论、统计等功能。
  3. 多语言支持：原生支持多语言，为多语言站点提供了完整的国际化（i18n）支持。
  4. 丰富的主题库：拥有300多个主题，涵盖多种风格和功能，用户可以根据自己的需求选择合适的主题。
  5. 安全性高：生成的网页是静态的，无需依赖数据库或复杂的运行时环境，降低了安全风险

Hugo Meme主题介绍

Hugo Meme 是一款专为个人博客设计的强大且高度可定制的 Hugo 主题。以下是关于它的详细介绍：

主题特点

  1. 优雅简约的设计理念 MemE 以优雅、简洁、现代的设计为核心，专注于提供最佳的用户体验。
  2. 高度可定制 主题提供了丰富的自定义选项，用户可以通过修改 _custom.scss 文件来调整样式，甚至可以覆盖主题的任何模板。
  3. 现代技术支持 MemE 使用了 CSS 变量和 SCSS，通过 Hugo Pipes 动态生成 CSS 文件，而不是静态的 CSS 文件，这使得主题的样式更加灵活且易于维护。
  4. 快速启动与易用性 安装和配置过程非常简单，即使是 Hugo 的新手也能快速上手。通过简单的命令行操作，用户可以快速搭建起自己的博客。
  5. 持续更新与文档支持 MemE 团队持续更新主题，添加新功能并修复已知问题。同时，主题提供了详细的文档和示例配置文件，帮助用户快速上手并进行自定义。
  6. 兼容性良好 MemE 支持现代浏览器，包括 Chrome 49+、Firefox 44+、Edge 15+、Opera 36+ 和 Safari 10+。

使用场景

MemE 适用于各种个人博客场景，无论是技术博客、生活随笔还是专业领域的深度文章，都能提供优雅且功能丰富的展示平台。

Blogdown介绍

blogdown 是一个基于 R 语言的静态网站生成工具，主要用于创建个人博客、学术网站或项目文档。它结合了 R Markdown 和静态网站生成器（如 Hugo）的功能，允许用户通过 RStudio 编辑器轻松管理和发布内容。

Blogdown主要功能

  1. 结合 R Markdown 和 Hugo blogdown 将 R Markdown 的强大功能与 Hugo 的快速渲染能力相结合。用户可以在 RStudio 中编写 R Markdown 文件，然后通过 blogdown 自动转换为 HTML 页面并发布到网站。
  2. 支持多种静态网站生成器 除了 Hugo，blogdown 还支持 Jekyll 等其他静态网站生成器。
  3. 版本控制与自动化部署 用户可以将网站内容存储在 GitHub 上，并通过 Netlify 等服务实现自动化部署。这种方式无需搭建数据库，且网站加载速度快。
  4. 丰富的检查功能 blogdown 提供了多种检查命令（如 check_config()、check_hugo() 等），帮助用户在发布前发现潜在问题。
  5. 本地预览与快速更新 用户可以在本地通过 blogdown::server_site() 预览网站，确认无误后使用 blogdown::build_site() 生成最终的静态文件。

Blogdown使用流程

  1. 安装 在 RStudio 中安装 blogdown 包：
1

install.packages("blogdown")

然后安装 Hugo：

1

blogdown::install_hugo()

如果在线安装失败，可以手动下载并安装。

  1. 创建网站 使用 blogdown::new_site() 创建新网站，并选择合适的主题。
  2. 编写内容 在 content 文件夹中创建 R Markdown 文件，编写博客文章或页面。
  3. 部署网站 将生成的 public 文件夹内容上传到 GitHub 或其他托管服务，并通过 Netlify 等平台进行自动化部署。

Blogdown社区支持

blogdown 拥有活跃的社区和丰富的文档资源。用户可以参考官方文档、博客教程（如谢益辉的《blogdown: Creating Websites with R Markdown》）以及 YouTube 和 B 站视频教程。

Blogdown其它：

Blogdown函数查阅

blogdown::new_site()

new_site(): Create a new site (skeleton) via hugo new site. The directory of the new site should be empty

blogdown::build_site()

Build the site through Hugo, and optionally (re)build R Markdown files

dir() 函数用于获取指定目录中的文件和文件夹名称。它返回一个字符向量，包含目录中的所有文件和文件夹名称。

Blogdown Usage

You may create a new site via the function blogdown::new_site() under an empty directory. It will create a skeleton site, download a Hugo theme from Github, add some sample content, launch a web browser and you will see the new site. The sample blog post hello-world.Rmd should be opened automatically, and you can edit it. The website will be automatically rebuilt and the page will be refreshed after you save the file.

If you use RStudio, you can create a new RStudio project for your website from the menu File -> New Project -> New Directory -> Website using blogdown.

The function blogdown::serve_site() may be the most frequently used function in this package. It builds the website, loads it into your web browser, and automatically refreshes the browser when you update the Markdown or R Markdown files. Do not use the command line hugo server to build or serve the site. It only understands plain Markdown files, and cannot build R Markdown.

You may not be satisfied with the default site created from new_site(). There are two things you may want to do after your first successful experiment with blogdown:

  1. Pick a Hugo theme that you like from https://themes.gohugo.io. All you need is its Github user and repository name, to be passed to the theme argument of new_site().
  2. Add more content (pages or posts), or migrate your existing website.

Blogdown: 1.7 Other themes

https://bookdown.org/yihui/blogdown/other-themes.html

In Hugo, themes control the entire appearance and functionality of your site. A Hugo theme is made with the following elements:

  1. Configuration files. This may be a single config.yaml or config.toml file in the root of your website project. Some themes also use a configuration directory, located in config/_default/. Read more about these files in Chapter 2.2.
  2. Layout files, located for example in themes/hugo-lithium/layouts/. Hugo is a templating system, so layout files are *.html files, with a specific file and naming structure. Read more about these files in Section 2.5.
  3. Style asset files like fonts and CSS.
  4. HTML dependencies like JavaScript files.

All of these files are contained in the themes/ folder, and are kept separate from your website content/. However, all Hugo themes rely on specific content/ and YAML frontmatter, so do not be fooled into thinking that themes and content are not dependent on each other—they are! In this section, we provide some opinionated advice on choosing themes, as well as recommended workflows for working with Hugo themes using blogdown.

Blogdown: 1.7.1 Choosing themes

If you care a lot about the appearance of your website, you will probably spend quite a bit of time in the beginning looking for a Hugo theme that you like from the collection listed at https://themes.gohugo.io. Please note that not all themes have been tested with blogdown. If you find a certain theme does not work well with blogdown, you may report to https://github.com/rstudio/blogdown/issues, and we will try to investigate the reason, but it can be time-consuming to learn and understand how a new theme works, so we recommend that you learn more about Hugo by yourself before asking, and we also encourage users to help each other there.

There are now about 400 Hugo themes to choose from. To save you some time, we list a few themes below that match our taste:

If you do not understand HTML, CSS, or JavaScript, and have no experience with Hugo themes or templates, it may take you about 10 minutes to get started with your new website, since you have to accept everything you are given (such as the default theme); if you do have the knowledge and experience (and desire to highly customize your site), it may take you several days to get started. Hugo is really powerful. Be cautious with power.

Another thing to keep in mind is that the more effort you make in a complicated theme, the more difficult it is to switch to other themes in the future, because you may have customized a lot of things that are not straightforward to port to another theme. So please ask yourself seriously, “Do I like this fancy theme so much that I will definitely not change it in the next couple of years?”

If you choose to dig a rather deep hole, someday you will have no choice but keep on digging, even with tears.

— Liyun Chen 12

Blogdown: 1.7.2 New site, new theme

To use a Hugo theme other than hugo-lithium with a new site (which we showed in Section 1.2), we recommend the following workflow:

  1. Carefully pick a theme at https://themes.gohugo.io, and find the link to its GitHub repository,13 which is of the form https://github.com/user/repo. For example, the source of the Hugo theme Anatole is located at https://github.com/lxndrblz/anatole.
  2. Create a new project in RStudio (File -> New Project -> New Directory -> Website using blogdown) (see Figures 1.1 and 1.2).
  3. In the “Hugo theme” field, enter the user/repo from the link in Step 1. Click “Create Project.”

Alternatively, in the R console, you may type blogdown::new_site(theme = 'user/repo'):

1
2
3

# for example, create a new site with the anatole
# theme
blogdown::new_site(theme = "lxndrblz/anatole")
  1. Play with the new site for a while and if you do not like it, you can repeat the above steps, otherwise edit the options in the configuration file (config.yaml or config.toml). If you do not understand certain options, go to the documentation of the theme, which is often the README page of the GitHub repository. Not all options have to be changed.

Blogdown：1.7.3 Existing site, new theme

Generally, we do not advise you to switch themes, as each Hugo theme depends on different variables that you provide in the theme-specific configuration file (config.yaml or config.toml) and in the YAML of the content/ files. Example sites are often provided for individual themes, so we recommend using blogdown::new_site(), then editing the provided example site as a starting point. However, if you do want to test a different Hugo theme with an existing site, you can start with the following workflow:

  1. In the R console, install the theme via blogdown::install_theme().
1

blogdown::install_theme(theme = "lxndrblz/anatole")
  1. Manually move the configuration file (config.yaml or config.toml) from the themes/theme-name/exampleSite/ directory to the root directory of your website to match the newly installed theme.
  2. Carefully inspect the differences between your new theme’s exampleSite and the files inside your content/ folder. A theme’s exampleSite content is tailored to a specific theme, so changing themes without changing your content/ is a bit like wearing someone else’s clothes—they just may not fit right.

Blogdown: 1.7.4 Existing site, update theme

Updating Hugo theme files is not for the faint of heart, and we also do not recommend doing this unless you must. We also generally recommend you only do this when you integrate GIT and GitHub for version control, and that you attempt to update your theme in a branch first.

The main reason this is difficult is that Hugo theme files can require changes in your website configuration file (config.yaml or config.toml) and in the YAML of individual content files, depending on the extent of the theme update. So updating a theme can be quite a hassle.

Why do theme developers update their themes? Three reasons. One, Hugo changes. As a result, Hugo theme developers must change their themes to keep up with deprecated Hugo functions. Two, Hugo theme developers fix their themes when bugs are reported. Three, popular Hugo themes often field lots of feature requests, and some theme developers are responsive to adding new features.

If you find yourself needing to update your theme, you may do the following:

1

blogdown::install_theme(theme = "lxndrblz/anatole", force = TRUE)

Then slowly work through what changed in the site configuration files and the content/ frontmatter (YAML metadata) by comparing the updated theme’s exampleSite. As stated earlier, we recommend doing this work in a different branch (i.e., not main) before merging.

参考

updatedupdated2025-02-242025-02-24

相关文章：