2022-03-14  2022-03-14    2530 字  6 分钟

效果图预览:

image-20220301193053263

大家好,最近重搭了个人博客,之前用 Hexo,WordPress 也搭建过,但是总是很不理想,最近用 hugo 感觉还不错,接下来将我搭建的过程记录下来,方便大家自己尝试;

本地搭建

因为我用的是 MacBook,所以接下来也将基于此环境做演示;

安装 hugo

brew install hugo #安装hugo
hugo version  #查看版本

这里注意下,安装的是拓展版本,方便以后做拓展,如何查看自己安装的是不是拓展版本,hugo v0.89.2+extended darwin/amd64 BuildDate=unknown查看版本显示这个就是拓展版本(带 extended 的);

新建站点

hugo new site site-name #自行定义站点名

添加主题

cd site-name #切换到站点根目录
git init #初始化git仓库
git clone https://github.com/dillonzq/LoveIt.git ./themes #这里我安装的是LoveIt主题
cp themes/loveit/exampleSite/config.toml ./config.toml #直接将主题的配置文件复制过来替换成站点配置

站点配置

设置站点默认语言

defaultContentLanguage = "zh-cn"

禁用主题目录

#themesDir = "../../"

设置站点名称

title = "语梦谈"

设置语言项

注意:这个主题默认是支持多语言的,如果使用多语言,需要分别创建对应的文章,不然会报错,我这里只用到了中文;

languages项中,默认有三个语言大项,我删除了其余两个,下面主要展示的是中文的配置内容,同理,只粘贴出我修改过的项:

[languages.zh-cn]
    weight = 2
    # 网站语言, 仅在这里 CN 大写
    languageCode = "zh-CN"
    # 语言名称
    languageName = "简体中文"
    # 是否包括中日韩文字
    hasCJKLanguage = true
    # 默认每页列表显示的文章数目
    paginate = 12
    # [UA-XXXXXXXX-X] 谷歌分析代号
    googleAnalytics = ""
    # 版权描述,仅仅用于 SEO
    copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License."
    # 菜单配置
    [languages.zh-cn.menu]
      [[languages.zh-cn.menu.main]]
        identifier = "posts"
        # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
        pre = ""
        # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
        post = ""
        name = "文章"
        url = "/posts/"
        title = ""
        weight = 1
         [[languages.zh-cn.menu.main]]
        identifier = "thinks"
        pre = ""
        post = ""
        name = "思考"
        url = "/thinks/"
        title = ""
        weight = 2
      [[languages.zh-cn.menu.main]]
        identifier = "tags"
        pre = ""
        post = ""
        name = "标签"
        url = "/tags/"
        title = ""
        weight = 3
      [[languages.zh-cn.menu.main]]
        identifier = "categories"
        pre = ""
        post = ""
        name = "分类"
        url = "/categories/"
        title = ""
        weight = 4
      [[languages.zh-cn.menu.main]]
        identifier = "about"
        pre = ""
        post = ""
        name = "关于"
        url = "/about/"
        title = ""
        weight = 5
      [[languages.zh-cn.menu.main]]
        identifier = "github"
        pre = "<i class='fab fa-github fa-fw'></i>"
        post = ""
        name = ""
        url = "https://github.com/jouzeyu"
        title = "GitHub"
        weight = 6
    [languages.zh-cn.params]
      # 网站描述
      description = "盛年不重来,一日难再晨"
      # 网站关键词
      keywords = ["blog", "Jouzeyu"]
      # 应用图标配置
      [languages.zh-cn.params.app]
        # 当添加到 iOS 主屏幕或者 Android 启动器时的标题, 覆盖默认标题
        title = "语梦谈"
        # 是否隐藏网站图标资源链接
        noFavicon = false
        # 更现代的 SVG 网站图标, 可替代旧的 .png 和 .ico 文件
        svgFavicon = ''
        # Android 浏览器主题色
        themeColor = "#ffffff"
        # Safari 图标颜色
        iconColor = "#5bbad5"
        # Windows v8-10 磁贴颜色
        tileColor = "#da532c"
      # 搜索配置
      [languages.zh-cn.params.search]
        enable = true
        # 搜索引擎的类型 ("lunr", "algolia")
        type = "algolia"
        # 文章内容最长索引长度
        contentLength = 4000
        # 搜索框的占位提示语
        placeholder = ""
        # 最大结果数目
        maxResultLength = 10
        # 结果内容片段长度
        snippetLength = 50
        # 搜索结果中高亮部分的 HTML 标签
        highlightTag = "em"
        # 是否在搜索索引中使用基于 baseURL 的绝对路径
        absoluteURL = false
        [languages.zh-cn.params.search.algolia]
          index = "index.zh-cn"
          appID = ""
          searchKey = ""
      # 主页信息设置
      [languages.zh-cn.params.home]
        # RSS 文章数目
        rss = 10
        # 主页个人信息
        [languages.zh-cn.params.home.profile]
          enable = true
          # Gravatar 邮箱,用于优先在主页显示的头像
          #gravatarEmail = "jouzeyu@outlook.com"
          # 主页显示头像的 URL
          avatarURL = "https://avatars.githubusercontent.com/u/56755229?v=4"
          # 主页显示的网站标题 (支持 HTML 格式)
          title = "语梦谈"
          # 主页显示的网站副标题
          subtitle = "盛年不重来,一日难再晨"
          # 是否为副标题显示打字机动画
          typeit = true
          # 是否显示社交账号
          social = true
          # 免责声明 (支持 HTML 格式)
          disclaimer = ""
        # 主页文章列表
        [languages.zh-cn.params.home.posts]
          enable = true
          # 主页每页显示文章数量
          paginate = 6
      # 主页的社交信息设置
      [languages.zh-cn.params.social]
        GitHub = "jouzeyu"
        Linkedin = ""
        Twitter = ""
        Instagram = ""
        Facebook = ""
        Telegram = "jouzeyu"
        Medium = ""
        Gitlab = ""
        Youtubelegacy = ""
        Youtubecustom = ""
        Youtubechannel = ""
        Tumblr = ""
        Quora = ""
       Keybase = ""
        Pinterest = ""
        Reddit = ""
        Codepen = ""
        FreeCodeCamp = ""
        Bitbucket = ""
        Stackoverflow = ""
        Weibo = ""
        Odnoklassniki = ""
        VK = ""
        Flickr = ""
        Xing = ""
        Snapchat = ""
        Soundcloud = ""
        Spotify = ""
        Bandcamp = ""
        Paypal = ""
        Fivehundredpx = ""
        Mix = ""
        Goodreads = ""
        Lastfm = ""
        Foursquare = ""
        Hackernews = ""
        Kickstarter = ""
        Patreon = ""
        Steam = ""
        Twitch = ""
        Strava = ""
        Skype = ""
        Whatsapp = ""
        Zhihu = ""
        Douban = ""
        Angellist = ""
        Slidershare = ""
        Jsfiddle = ""
        Deviantart = ""
        Behance = ""
        Dribbble = ""
        Wordpress = ""
        Vine = ""
        Googlescholar = ""
        Researchgate = ""
        Mastodon = ""
        Thingiverse = ""
        Devto = ""
        Gitea = ""
        XMPP = ""
        Matrix = ""
        Bilibili = ""
        Email = "jouzeyu@outlook.com"
        RSS = true

说明:

  1. 菜单配置中标签和分类会自动获取,其他分类需要创建对应的文件夹来存放文章,比如文章对应的是posts,那么创建新文章的时候就是hugo new posts/my-first-post.md;
  2. 搜索配置建议选algolia,需要其他额外配置,放在下面讲;
  3. 主页的社交信息设置中,是那一项有内容首页就会显示那一项;

线上相关准备

如果想要部署到线上,那么下面的准备工作是必不可少的,另外还需要你有一个备案过的域名(国内的话)

设置搜索

需要去algolia官网去注册一个账号,可以参考这篇文章:Hugo Algolia 搜索及 Netlify 自动化处理

设置评论系统

hugo 默认用的是 Valine 评论系统,需要完成这项需要做以下几步:

注册账号

网址是:https://console.leancloud.cn/

创建应用

image-20220301201041362

数据存储创建 class

image-20220301201135080

配置安全域名

image-20220301201224536

如果不配置,会提示 Code 403: 访问被 API 域名白名单拒绝,请检查你的安全域名设置.

绑定域名

image-20220301201329057

这里稍微注意下,这个域名可以用别的二级域名,不用使用原本解析访问的域名。另外如果提示正在部署中,不用着急,它需要等待一会,如果提示 dns 未解析,那按照说明解析就可以了。

配置到 hugo
 appId = "fa7mRg1BGQdKUEs5b5c42rah-gzGzoHsz" #从应用凭证中获取的
 appKey = "ekeMLbPcNnMXGj9w30Ehadcj" #从应用凭证中获取的
 serverURLs = "https://valine.unlazy.run" #就是上一步你填写的域名

部署到服务器

简单讲下原理,我们写出 markdown 文章,通过 hugo -D 将文章打包成 html 之类的静态访问资源,所以如果你和我一样想部署到服务器时,你只需要将打包生成的 public 文件夹上传到服务器就可以了,不需要在服务器上搭建 hugo,也不需要上传其他的文件;

这一块有很多中方法,我简单说下我的方法:

第一步:通过hugo -D 命令生成静态资源,即public目录
第二步:将public上传到github仓库,这里用了一个本地自己写的脚本
第三步:服务器安装nginx,域名绑定,指向网站所在目录
第四步:生成https证书
第五步:通过定时任务,在服务器上定时运行脚本-将github仓库的内容同步到服务器

相关问题答疑

  1. 如果是本地的话,截止到线上相关准备前就已经结束了,你可以本地运行hugo server -D然后访问http://localhost:1313预览网站;

  2. 如果想要部署到github page可能你还需要看看其他文章,因为我还没试过;

  3. 如果你的文章不显示,那需要将 md 文件中的draft选项改为false,这个选项的意思是,该文章是否草稿;

  4. 如果需要加标签,你可以这样写:

    draft: false
    tags: ["MySQL"]
    
  5. 如果需要加分类,你可以这样写:

    draft: false
    categories: ["MySQL学习"]
    
  6. 如果文中包含照片,可以先放到任意图床中,拿到链接放到文中,当然你也可以用本地文件;

939cafeb-d06b-53c1-8163-fb84e575a03b