Hugo搭建博客和部署全流程—Congo主题和优化

欢迎来到我的全新博客：探索科研、创业和日常——Hugo搭建博客、部署和优化全流程

blogging

🌏 Demo site: https://sylvanding.online/
⭐️ Repo: https://github.com/sylvanding/sylvanding.github.io

我的博客使用Hugo搭建，选择Congo主题，以便为你提供更流畅舒适的阅读体验。推荐您先阅读Hugo文档和Congo文档。

为什么选择Hugo和Congo主题？

As a passionate blogger, the choice of platform and theme is crucial in shaping the reader experience and managing content efficiently. After evaluating several platforms and themes, I settled on Hugo with the Congo theme. Here’s why:

为什么选择Hugo？

Hugo 比 Hexo 更加轻量级和快速。

Hugo is renowned for its incredible speed and efficiency. As a static site generator, it compiles pages almost instantaneously, making it perfect for bloggers who value quick build times. Furthermore, Hugo’s flexibility in handling various content types effortlessly has allowed me to structure my blog without the complexities often found in dynamic CMS platforms.

Key Features of Hugo:

Speed: Hugo generates pages at lightning-fast speeds.
Customizability: Extensive themes and tools for customization.
Security: Being static, Hugo reduces common security risks associated with dynamic websites.

为什么选择Congo？

Congo is designed to be a powerful, lightweight theme for Hugo. It’s built using Tailwind CSS with a clean and minimalist design that prioritises to your content.

Choosing the Congo theme was a straightforward decision once I understood the advantages of Tailwind CSS. Tailwind CSS version 3 offers an intuitive and powerful framework for designing unique and responsive layouts. Its utility-first approach means that almost any design is possible without leaving the comfort of your HTML.

Benefits of the Congo Theme:

Responsive Design: Adjusts beautifully across all devices.
Customizable: Easy to modify with utility classes.
Modern Aesthetics: Sleek and clean design that keeps the focus on content.

安装

Install Hugo

If you haven’t used Hugo before, you will need to install it onto your local machine. You can check if it’s already installed by running the command hugo version.

Make sure you are using Hugo extended version 0.87.0 or later as the theme takes advantage of some of the latest Hugo features.

You can find detailed installation instructions for your platform in the Hugo docs.

Clone my repo

git clone --recurse-submodules https://github.com/sylvanding/sylvanding.github.io.git mywebsite

Running server

cd mywebsite
hugo serve -D

Creating a new post

hugo new content posts/your-post-title.md

确保在发布内容前设置文章的Front Matter中的draft为false.

Deployment

Deploying Hugo on Netlify can be a simple and efficient process, especially when integrating with GitHub for continuous deployment.

Before connecting to Netlify, ensure your site’s source code has been pushed to GitHub repo:

git push origin main

❗️ 注意：将origin修改为你自己仓库的地址！

Then Netlify tend to build the website automatically according to configuration file netlify.toml.

That’s it! Your Hugo blog is now live on Netlify. You can customize it with different themes, add plugins, and optimize your content as desired. Netlify also offers advanced features like custom domains, HTTPS, and continuous deployment, which make your blogging experience secure and efficient.

In summary: Never directly edit the theme files. Only make customisations in your Hugo project’s sub-directories, not in the themes directory itself.

Congo is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overridden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.

In order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your themes/ directory, you should always leave these files intact.

The correct way to adjust any theme behaviour is by overriding files using Hugo’s powerful file lookup order. In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.

For example, if you wanted to override the main article template in Congo, you can simply create your own layouts/_default/single.html file and place it in the root of your project. This file will then override the single.html from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.

As long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.

优化Congo主题

⚠️ 所有优化代码均可在根目录的layouts和assets文件夹中找到，并未直接修改themes/congogit子模块下的任何文件。和优化有关的配置项可在config/_default/params.toml文件中找到。

如果你对技术层面感兴趣，想了解更多关于本博客的最新特性、搭建过程、配置和部署等细节，强烈推荐你查看Welcome to My New Blog: Powered by Hugo and Styled with Congo。

图片灯箱效果

“图片灯箱效果”使用Fancybox实现：

Fancybox is the ultimate JavaScript lightbox alternative that sets the standard for premium user experience in multimedia display. Supports images, videos, maps, inline content, iframes and any other HTML content.

图片灯箱效果