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

---

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的，很容易出错。