title: Hugo简单搭建博客
tags:

Hugo
博客教程
categories:
Hugo
keywords: ‘Hugo,博客教程’
description: 简单的Hugo搭建博客教程，以及一些坑。主题采用的是Even。
cover: ‘https://unpkg.zhimg.com/youthlql@1.0.8/Hugo/logo.jpg’
abbrlink: 9c420976
date: 2020-10-01 21:15:00

Hexo和Hugo

1、Hexo我个人认为最大的优点目前就是主题多，缺点就是生成静态文件 (hexo g) 速度慢。Hexo是基于Nodejs的，有很多插件，但是加载费时。并且当md文档成百的时候，可能hexo g一次几分钟，体验感不好（不过几分钟也还好，不是特别长），Hexo目前貌似也是在进行优化

2、Hugo使用自带的Go html模板实现，速度快，基本上在 Hexo 上面几分钟，使用 Hugo 只需要十几秒钟。然而Hugo目前主题太少，找不到什么满意的主题。

3、我个人搭建博客比较喜欢漂亮的主题，所以目前用的Hexo。

安装Hugo（Windows）

二进制安装（推荐：简单、快速）

到 Hugo Releases 下载对应的操作系统版本的Hugo二进制文件（hugo或者hugo.exe）

Mac下直接使用 Homebrew 安装：

brew install hugo

配置环境变量

1、二进制下载完成后是一个hugo.exe文件，然后配置到PATH环境变量中

2、hugo version验证是否安装成功

创建站点

hugo new site Hugo_blog

第四个命令自定义，就是生成的hugo文件夹名字。自此Hugo站点生成完毕，后面的主题配置我都会以我的Hugo_Blog为例说明。切记Hugo_Blog就是我的站点目录，路径千万别搞错了

主题安装（以Even为例）

1、在生成的Hugo_blog目录下执行以下命令。没有用过Git的可以先去简单安装一下，很简单。

git clone https://github.com/olOwOlo/hugo-theme-even themes/even

重要: 在主题的 exampleSite 目录下有一个 config.toml 文件，将这个 config.toml 文件复制到你的站点目录下覆盖即可，根据自己的需求更改。

重要: 本主题用到了 Hugo Pipes 功能。如需修改 assets 目录下的文件，请安装 extended 版。

注意: 对于这个主题，你应该使用 post 而不是 posts，即 hugo new post/some-content.md。

2、测试一下是否成功

站点目录下git命令输入 hugo new post/some-content.md ，站点目录下此时会出现一个post文件夹。然后hugo server运行，浏览器地址栏输入localhost:1313，查看主题是否安装成功

3、坑

主题的文件路径是这样的Hugo_blog\themes\even，路径不要弄错了

文章显示

巨坑!!!

在Hugo_Blog目录下创建一个content文件夹，content文件夹下再创建一个post文件夹。post文件夹里才是真正放md文档的地方。如果路径放错了，文章显示不出来。

语言设置

languageCode = "zh-cn"
defaultContentLanguage = "zh-cn"

这两行配置改一下就行了。注意就是小写，不是大写

关于作者【菜单】

在这个目录下Hugo_blog\content直接创建md文档编写即可，文档里的title就是菜单名。even这个主题里的exampleSite文件夹里有示例。

社交链接

  [params.social]                                         # 社交链接a-email = "mailto:youthlql@foxmail.com"b-stack-overflow = "http://localhost:1313"c-twitter = "http://localhost:1313"d-facebook = "http://localhost:1313"e-linkedin = "http://localhost:1313"f-google = "http://localhost:1313"g-github = "http://localhost:1313"h-weibo = "http://localhost:1313"i-zhihu = "http://localhost:1313"j-douban = "http://localhost:1313"k-pocket = "http://localhost:1313"l-tumblr = "http://localhost:1313"m-instagram = "http://localhost:1313"n-gitlab = "http://localhost:1313"o-bilibili = "http://localhost:1313"

填入自己的链接即可

定制logo

为了定制 favicon，你需要在站点根目录的 static 文件夹下放置下述所有文件，这将覆盖 themes/even/static/ 文件夹下的那些文件。

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
browserconfig.xml
favicon.ico
favicon-16x16.png
favicon-32x32.png
manifest.json
mstile-150x150.png
safari-pinned-tab.svg

favicon generator (Google) 能够帮助你生成这些文件。

中文导航栏

虽然说在前面设置了中文，但是导航栏任然要手动改成中文的。

文章可以配置的属性

你可以通过 front-matter 针对每一篇文章单独进行设置。themes/even/archetypes/default.md 文件陈列了所有可用的参数。将该文件复制到站点根目录的 archetypes 文件夹下将会有所帮助。

部署到gitee

这部分网上可以搜到一堆，就不细讲了。注意几个问题就行

1、如何创建一个首页访问地址不带二级目录的 pages，如ipvb.gitee.io？

答：如果你想你的 pages 首页访问地址不带二级目录，如ipvb.gitee.io，你需要建立一个与自己个性地址同名的仓库，如 https://gitee.com/ipvb 这个用户，想要创建一个自己的站点，但不想以子目录的方式访问，想以ipvb.gitee.io直接访问，那么他就可以创建一个名字为ipvb的仓库 https://gitee.com/ipvb/ipvb 部署完成后，就可以以 https://ipvb.gitee.io 进行访问了。

2、当要部署的项目与自己的个性地址不一致时，部署完成后存在一些资源访问404？

答：当需要部署的仓库和自己的个性地址不一致时，如：https://gitee.com/ipvb/blog ，生成的pages url 为 https://ipvb.gitee.io/blog ，而访问的资源404，如 https://ipvb.gitee.io/style.css 。这是因为相应配置文件的相对路径存在问题导致的，生成的资源 url 应该为 https://ipvb.gitee.io/blog/style.css 才对。对于不同的静态资源生成器，配置如下：

Hugo 配置文件config.toml的baseURL修改如下

baseURL = "https://ipvb.gitee.io/blog"

Hexo 配置文件_config.yml的url和root修改如下：

url: https://ipvb.gitee.io/blog
root: /blog

3、编译静态文件

在Hugo_blog目录下执行hugo命令进行编译，此时会出现一个public目录。然后在Hugo_blog\public 目录下进行 git commit

几个大坑

报错error: failed to transform resource: SCSS

Building sites … ERROR 2019/08/27 16:56:32 error: failed to transform resource: SCSS processing failed: file "stdin", line 3, col 1: File to import not found or unreadable: bulma/bulma.
Total in 13 ms
Error: Error building site: logged 1 error(s)

这个错误耗费的时间比较长，最后找到了hugo一个英文社区。大神说把hugo换成扩展版就可以了，然后就成功了。

普通版：hugo_0.75.1_Windows-64bit.zip

扩展版：hugo_extended_0.75.1_Windows-64bit.zip

地址：https://github.com/gohugoio/hugo/releases

页面加载不出来

1、hexo是在站点目录，比如Hexo_blog下进行git commit等类似操作的。

2、hugo是首先在Hugo_blog进行hugo编译，然后生成一个public文件夹。然后在Hugo_blog\public 目录下进行 git commit的，很容易出错。

hugo搭建博客教程-简单搭建相关推荐

Hexo搭建博客教程-基于Butterfly主题
title: Hexo搭建博客教程 tags: Hexo 博客教程 categories: Hexo keywords: 'Hexo,博客教程' description: Hexo搭建博客,以及主题b ...
hexo搭建博客教程(matery主题)
hexo搭建博客教程(matery主题) 写在前面这篇教程是我搭建个人博客的路程经历和经验总结,matery主题挺多人用,网上也有各种详细教程,没时间我就不出详细教程了,这里给出其他大佬的教程链接, ...
手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置
前言前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...
VuePress搭建博客教程(六)、vuepress配置head和自定义样式
VuePress搭建博客教程(六).vuepress配置head和自定义样式小景哥哥博客一.创建public文件夹在.vuepress目录下创建public文件夹,在public文件夹下存入两个 ...
hexo最全搭建博客教程
目录前言入门安装 Node.js 安装 Git 检验Git是否安装成功安装Hexo Hexo 初始化配置本地查看效果将博客部署到 Gitee Pages 上注册 Gitee 账户创建项 ...
Hexo+NexT（零）：最全Hexo+Next搭建博客教程
欢迎访问博主博客www.guide2it.com 快速.简洁且高效的博客框架有位大神说,喜欢写博客的人的人,折腾博客会经历三个阶段.找到一个免费空间,搭建一个博客,很欣喜,很有成就感,此为一阶段:受 ...
【django】搭建博客教程(2)——Template的使用
测试Template 前面我们只是将后端的数据显示到页面上而已,这并不能满足我们的需求,实际上,我们需要用到html,css,js,jquery等等来构建我们的博客.在界面设计方面,我们使用Boots ...
python搭建博客系统_Mezzanine 搭建 BLOG 系统
Mezzanine 搭建 BLOG 系统 1. 创建 python 虚拟环境查看虚拟环境列表: conda info --envs 创建虚拟环境 mezzenv: conda create -n m ...
hexo博客本地服务器显示正常,Hexo 搭建博客本地运行常见报错及解决办法
作为一名在hexo方面的新手,我在使用hexo编辑文档时遇到了很多问题,hexo generate编译的时候遇到了各种错误. 在此将这些错误及其解决方案记录下来,以便日后查证之用,同时,也可给各位在遇 ...

hugo搭建博客教程-简单搭建