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

本文来源:魚立说。本文链接:https://www.yulisay.com/d/nkpvy.html,支持微信浏览器打开。

更多精彩文章,请移步 魚立说个人网站 翻看。欢迎欣赏,吐槽不足之处。


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

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。

然后进入到项目目录中,下载安装我们需要的主题(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。

Hugo 流行主题之 2:Clarity

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

Hugo 流行主题之 3:Even

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

Hugo 流行主题之 4:Octopress

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

Hugo 流行主题之 5:Tokiwa

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

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

参考链接

① Hugo 官方文档

② Hugo Themes

玩遍博客网站,我整理了 Hugo 及其流行的风格主题的更多相关文章

  1. 玩遍博客网站,我整理了 Hexo 及其流行的风格主题

    搭建博客网站是个人进入互联网世界的最常见方式之一.伴随着网站技术的发展,如何搭建博客网站已经变得非常容易了.当然,你可以选择诸如 新浪博客.CSDN.博客园 之类的大型网站,快速创建依赖于大平台的个人 ...

  2. CentOS 7 yum安装LAMP,LNMP并搭建WordPress个人博客网站

    本次实验要进行的是在CentOS7.2,内核版本3.10.0-327.el7.x86_64的环境下搭建LAMP和LNMP,并在此之上做一个WordPress博客网站. [root@Shining ~] ...

  3. 分享我做Dotnet9博客网站时积累的一些资料

    从2019年使用WordPress搭建Dotnet9网站,到现在手撸代码开发,介绍中间使用的一些资源,绝无保留,希望对大家有用. 1. 申请域名.搭建WordPress网站 时间点:2019年11月 ...

  4. WordPress博客网站fonts.useso加载慢解决办法

    WordPress博客网站fonts.useso加载慢解决办法 之前WordPress博客因为google字体库访问不了替换成360的useso,最近WordPress博客网站一直等待fonts.us ...

  5. 如何搭建个人博客网站(Mac)

    一直以为自己记忆力很好,毕业之后才发现,之前需要看一遍就能记住的东西,现在看两三遍才能有印象.而搞技术的,如果不及时的记录下当时的情景,过后很容易就忘记.所以,再次萌生了搭博客.写文章的想法(之前用D ...

  6. Django搭建博客网站(三)

    Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用 ...

  7. 博客网站-Hexo+GitHub+Netlify

    Hexo+GitHub+Netlify一站式搭建属于自己的博客网站 https://www.cnblogs.com/kerbside/p/10130606.html https://hhongwen. ...

  8. Hexo+GitHub+Netlify一站式搭建属于自己的博客网站

    喜欢的话请关注我的个人博客我在马路边https://hhongwen.cn/,此文为博主原创,转载请标明出处. 更好的阅读体验请点击查看:Hexo+GitHub+Netlify一站式搭建属于自己的博客 ...

  9. Hexo+Github: 博客网站搭建完全教程(看这篇就够了)

    本篇教程首次发布在个人博客:sunhwee.com,想要获得最佳阅读体验,欢迎前往,建议用电脑查看教程文档. # 阅读须知 注意,这篇文章篇幅较长,主要针对新手,每一步很详细,所以可能会显得比较啰嗦, ...

随机推荐

  1. 区域之间PA、FortiGate内网互联专线、IPSec互备方案

    网络拓扑: 现状描述: 办公区和IDC之间有防火墙互联的点对点专线实现内网互通,现需要两地防火墙构建IPSec VPN作为专线的热备链路. 解决方案: 飞塔侧 1.按照阶段一.阶段二建立IPSec V ...

  2. php小程序-文章发布系统

    php小程序-文章发布系统 一 项目相关视图 二 项目经验 主要用于熟悉php与mysql的相关操作 三 源码下载地址 http://files.cnblogs.com/files/qiujun/ar ...

  3. DEDECMS:将dedecms系统的data目录迁移到web以外目录

    dedecms系统的data目录是系统缓存和配置文件的目录,一般都有可以读写的权限,只要是能够写入的目录都可能存在安全隐患,很多站长甚至给予这个目录可执行的权限,更是非常危险,所以我们建议将这个dat ...

  4. 整理我的Git常见问题和命令

    整理我的Git常见问题和命令 目录 整理我的Git常见问题和命令 提交注释规范 合并分支 clone & 切换分支 支持中文路径显示 账户及密码 基于远程分支创建本地分支 提交注释规范 举例: ...

  5. 《进击吧!Blazor!》第一章 4.数据交互

    <进击吧!Blazor!>是本人与张善友老师合作的Blazor零基础入门系列视频,此系列能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力. 视频地址:https://s ...

  6. Codeforces Global Round 7 D2. Prefix-Suffix Palindrome (Hard version)(Manacher算法)

    题意: 取一字符串不相交的前缀和后缀(可为空)构成最长回文串. 思路: 先从两边取对称的前后缀,之后再取余下字符串较长的回文前缀或后缀. #include <bits/stdc++.h> ...

  7. 【poj 2976】Dropping tests(算法效率--01分数规划 模版题+二分){附【转】01分数规划问题}

    P.S.又是一个抽时间学了2个小时的新东西......讲解在上半部分,题解在下半部分. 先说一下转的原文:http://www.cnblogs.com/perseawe/archive/2012/05 ...

  8. 【noi 2.5_1789】算24(dfs)

    最开始我想的是全排列+枚举符号和括号的方法,但是我自己倒腾了很久还是打不对,只好向他人请教.正解很机智--直接随意将几个数"捆绑"在一起,值存在其中一个数上,其他数标记不可再选,直 ...

  9. C. Table Decorations

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  10. Codeforces Round #682 (Div. 2) C. Engineer Artem (构造)

    题意:给你一个\(n\)x\(m\)的矩阵,你可以任意位置的元素+1,只能加一次,问你如何使得任意位置的元素不等于它四周的值.输出操作后的矩阵. 题解:构造,矩阵中某两个下标的和的奇偶性一定和四周的都 ...