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.ymlurlroot修改如下:
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的,很容易出错。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值