8

玩遍博客网站，我整理了 Hugo 及其流行的风格主题

 3 years ago
source link: https://www.yulisay.com/d/nkpvy.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

搭建博客网站是个人进入互联网世界的最常见方式之一。伴随着网站技术的发展，如何搭建博客网站已经变得非常容易了。当然，你可以选择诸如 新浪博客、CSDN、博客园 之类的大型网站，快速创建依赖于大平台的个人博客，不过这种方式的不足是言论受限太多、无法触及网站底层技术。所以，对于想要自由发挥创意、又期望对网站拥有更多主动权的话，最好还是选择自己去亲手搭建一个网站。

202102240425206964.jpg

本主题将围绕博客网站的搭建流程、不同的博客搭建技术及其流行的风格主题展开，整个系列由以下三个文章部分组成：

Hugo 是使用 Go 编写的快速而现代的静态站点生成器，旨在使网站创建变得有趣。特点是简单、易用、高效、扩展性好、快速部署。其官网是：https://gohugo.io。

安装 Hugo

安装 Hugo 相当简单，但是需要先安装 Go 运行环境。以 Mac 操作系统为例，安装 Hugo 的命令：brew install hugo。

初始化一个名字为 hugo-blog 的项目：hugo new site hugo-blog，此时将生成如下 Hugo 项目目录：

.
├── config.toml     # 网站的配置信息
├── archetypes      # 存放 .md 文件的模板
├── content         # 存放 .md 文件
├── data            # 存放 Hugo 数据
├── layouts         # 存放布局文件
├── public          # 公共文件夹，用于存放生成的站点文件
├── static          # 存放静态文件，比如图片、CSS、JS
└── themes          # 存放主题

快速操作 Hugo

查看版本：hugo version

新建一篇文章： hugo new post/my-first-blog.md

生成静态文件： hugo -t even

启动服务器： hugo server

正常启动服务后，在浏览器打开 http://localhost:1313/ 看到我们的网站。

流行的 Hugo 主题

使用 Hugo 博客时，我们最希望的是找到适合自己的一款主题，下面将图文结合介绍一些流行的 Hugo 主题。此外，关于写作的方法和 Hugo 主题修改，可以查阅本文参考中的 Hugo 官方文档，这里不再赘述。

找到、安装和配置 Hugo 主题

最好的搜索方式是在 https://github.com/ 中，搜索关键词：hugo theme。或者使用搜索引擎，搜索：hugo theme site:github.com。

202102240418146138.jpg
图：在 Github 上搜索 Hugo 主题

然后进入到项目目录中，下载安装我们需要的主题（theme-demo 只是一个示例资源，请注意替代为实际的资源）：

git clone https://github.com/theme-demo.git themes/theme-demo
cp -r themes/theme-demo/_source/* source

希望使用下载的主题，添加 themes/theme-demo/exampleSite/config.toml 中的配置，还需要在 config.toml 中配置主题：

theme = "theme-demo"

此外，在有些 theme-demo 文件夹中会有 demo 或 example 目录，文件结构与新建的 Hugo 项目的文件结构几乎是一样的，这样设置是为了用户的配置可以覆盖掉主题的配置。

Hugo 流行主题之 1：MemE

MemE 是一个强大且可高度定制的 GoHugo 博客主题，专为个人博客设计。MemE 主题专注于优雅、简约、现代，以及代码的正确性。Github 地址：https://github.com/reuixiy/hugo-theme-meme。

202102240419277186.jpg
图：MemE 风格主题

Hugo 流行主题之 2：Clarity

基于 VMware 的开源 Clarity 设计系统，具有丰富的代码支持、暗/光模式、移动支持等特点，为 Hugo 设计了一个具有技术意识的主题。Github 地址：https://github.com/chipzoller/hugo-clarity。

202102240420066019.jpg
图：Clarity 风格主题

Hugo 流行主题之 3：Even

一个很简洁的主题，移植自 hexo-theme-even。Github 地址：https://github.com/olOwOlo/hugo-theme-even。

202102240420274140.jpg
图：Even 风格主题

Hugo 流行主题之 4：Octopress

从 Octopress 博客移植过来的经典主题。Github 地址：https://github.com/parsiya/Hugo-Octopress。

202102240420457582.jpg
图：Octopress 风格主题

Hugo 流行主题之 5：Tokiwa

一个极简的博客主题，对汉字进行了显示优化。Github 地址：https://github.com/heyeshuang/hugo-theme-tokiwa。

202102240421042897.jpg
图：Tokiwa 风格主题

除了以上几种，还有更多不错的 Hugo 风格主题供你选用，可以前往 Hugo 主题网站 找到。如果你有好的想法和设计，也可以创建并发布自己制作的 Hugo 主题，到时候欢迎给我的网站 魚立说 留言。

① Hugo 官方文档

② Hugo Themes

本文作者：于立。欢迎关注本站公众号：「于立为文」。
本文链接：https://www.yulisay.com/d/nkpvy.html
版权声明：本网站所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 国际协议，转载或引用请署名作者并注明出处。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK