外贸网站建设的败笔,东坑网站建设公司,三六五网做网站吗,专业企业app开发制作欢迎来到我的全新博客#xff1a;探索科研、创业和日常——Hugo搭建博客、部署和优化全流程 #x1f30f; Demo site: https://sylvanding.online/ ⭐️ Repo: https://github.com/sylvanding/sylvanding.github.io 我的博客使用Hugo搭建#xff0c;选择Congo主题#xff0…欢迎来到我的全新博客探索科研、创业和日常——Hugo搭建博客、部署和优化全流程 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 mywebsiteRunning server
cd mywebsite
hugo serve -DCreating 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. 自定义页脚
实现“网页运行时间”和“备案号”功能。 音乐模块
基于MetingJS在文章中实现音乐模块的插入。 评论
基于giscus实现评论功能。重写appearance.js使giscus可根据Congo外观模式light/dark自动切换亮暗外观。
⚠️ 请将layouts/partials/comments.html文件中的内容替换为你自己的giscus代码块。 自定义svg图标
将自定义的.svg文件放置于assets/icons目录下请以文本模式打开您的.svg修改title标签内容并为path新增属性fillcurrentColor 总结
我希望这个博客成为一个交流的平台不仅仅是我个人思考和学习的记录也是我们共同成长的社区。我期待与大家在评论区中进行互动无论是科研问题、创业建议还是生活分享我都非常欢迎大家的参与和讨论。
最后感谢你的到来和阅读希望你能常来和我一起在这个小小的网络角落找到共鸣和灵感。
期待你的参与一起成长一起探索 ⭐ ⚠️ 转载请注明文章出处©️ 2024 Sylvan Ding
