Hugo创建个人博客指南

KXMing · · 515 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

最近准备建立一个个人博客网站,对比hexo与hugo后,决定使用Hugo静态页面生成引擎,使用的主题是tranquilpeak,使用的评论系统为Valine。写这篇文章的目的是详细记录一下个人博客创建过程。

准备工作

  • Git、Golang环境
  • GitHub账户或者Gitee账户(使用免费的pages服务搭建博客)
  • Wordpress账户(提供个人头像)
  • LeanCloud账户(管理评论数据)

安装Git、golang、创建GitHub、码云(gitee)账户过程略过

安装Hugo

本篇博客安装使用Windows系统,其他系统请看Hugo官网。

  • 直接在GitHub下载最新版本zip包,并添加到环境变量。
  • 或者使用choco在命令行下载choco install hugo

安装成功后在命令行输入hugo version显示下图,说明安装成功。

Hugo Static Site Generator v0.55.6-A5D4C82D windows/amd64 BuildDate: 2019-05-18T07:57:00Z

创建并配置站博客

  1. 创建博客
    hugo new site myblog
  2. 下载hugo-tranquilpeak-theme主题

    cd myblog/themes
    git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git tranquilpeak
  3. 修改config.toml配置文件
    复制themes/tranquilpeak/exampleSite文件夹下config.toml到myblog覆盖原有config.toml。
    在GitHub查看tranquilpeak主题配置项
    以下为本博客配置文件

    baseURL = "https://your_name.github.io/your_name/"
    # Tips: 必须配置,否则上传的博客在GitHub Pages无法找到css文件,不产生样式
    languageCode = "en-us"
    defaultContentLanguage = "zh-cn"
    # Tips: 配置中文
    title = "KXMing"
    # Tips: 博客名称
    theme = "tranquilpeak"
    # Tips: 配置主题
    disqusShortname = "valine"
    # Tips: 评论系统
    paginate = 10
    # Tips: 每个页面显示的文章数
    canonifyurls = true
    publishDir = "docs"
    # Tips: 生成静态博客到docs文件夹,部署在GitHub Pages上时,一次性部署博客源码与发布博客
    
    [permalinks]
      post = "/:year/:month/:slug/"
    
    [taxonomies]
      tag = "tags"
      category = "categories"
      archive = "archives"
    # Tips: 定义的博客分类与逻辑关系
    
    [author]
      name = "your_name"
      # Tips: 博客侧边栏名字
      bio = "前端开发"
      # Tips: 博客侧边栏个人简介
      job = "Front-end"
      # Tips: 博客侧边栏职业
      location = "深圳"
      # Tips: 博客个人资料页面地址
      gravatarEmail = "964579219@qq.com"
      # Tips: 博客个人头像,取自WordPress头像
    
    # Tips: 定义的侧边栏菜单,icon取自Font-awesome
    [[menu.main]]
      weight = 1
      identifier = "首页"
      name = "首页"
      pre = "<i class=\"sidebar-button-icon fa fa-lg fa-home\"></i>"
      url = "/"
    ...
    [[menu.links]]
    ...
    [[menu.misc]]
    
    [params]
      dateFormat = "2006年1月2日"
      # Tips: 默认日期格式
      syntaxHighlighter = "highlight.js"
      # Tips: 语法高亮js库
      clearReading = true
      # Tips: 进入文章内容页面侧边栏菜单收起状态
      hierarchicalCategories = true
      sidebarBehavior = 2
      # Tips: 定义侧边栏状态(值为1-6,可自行测试显示状态)
      coverImage = "cover.jpg"
      imageGallery = true
      # Tips: 在有内容底部显示照片墙
    
      thumbnailImage = true
      # Tips: 列表页是否显示内容图片
      thumbnailImagePosition = "bottom"
      # Tips: 列表页显示内容图片在底部
      autoThumbnailImage = true
    
      favicon = "/favicon.ico"
      # Tips: 浏览器标签页本网站显示的图标,放置在static文件夹下
    
    [params.header.rightLink]
      class = ""
      icon = ""
      url = "/#about"
    # Tips: 是否显示页面头部右侧个人头像,及个人头像点击事件
    
    # 这里添加Valine评论系统的相关参数
    [params.valine]
      enable = true
      appId = 'your appid'
      appKey = 'your appkey'
      notify = false
      avatar = 'mm'
      placeholder = '说点什么吧...'
      visitor = true
  4. 创建第一篇博客
    hugo new post/first_blog.md
    文件顶部设置,其余配置请参考tranquilpeak

    title: "本篇博客名称"
    date: 2019-05-26T17:44:53+08:00
    categories:
    - 父类

tags:

  • 标签

keywords:

  • 关键字

more标签上方的内容会在列表页显示内容简介
<!--more-->
toc标签会生成本篇文章的目录
<!-- toc -->


`hugo serve`
在浏览器localhost:1313端口访问本地服务

5. 安装Valine评论系统

> Valine - 一款快速、简洁且高效的无后端评论系统。

安装教程参考[smslit](https://www.smslit.top/2018/07/08/hugo-valine/)博客。

##### 修改主题文件

打开themes/layouts/partials/post文件,将原有内容替换为valine评论代码

6. 部署GitHub Pages或者Gitee Pages

在GitHub创建新项目,上传本项目代码,打开settings/options,选择GitHub Pages Source选项为master branch/docs folder,等待部署,成功后可在https://your_name.github.io/your_folder_name 查看创建的博客。

在码云创建新项目,上传本项目代码或者导入GitHub本项目,打开服务/Gitee Pages,部署目录填写docs,等待部署,成功后可在https://your_name.gitee.io 查看创建的博客。

> 本博客内容为简单配置,更多博客主题、评论配置可在各自官网查看。



Q & A

1. 引入图片有两种方式

- 图片地址设置为config.toml中的baseUrl+static文件夹下的文件,如:

  图片路径为static/vue/test.png

  地址为https://your_name.github.io/your_name/vue/test.png.

- 图床

  以GitHub图床为例。

  - 在github上新建repository如picbed
  - git clone
  - 将需要上传的图片放到本地目录picbed下
  - git commit    git push
  - 图片链接格式为:`https://raw.githubusercontent.com/<github号>/<repository名字>/master/<图片名>`,比如:https://raw.githubusercontent.com/841809077/blog-img/master/win-github.jpg

  或者可以使用[PicGo](https://picgo.github.io/PicGo-Doc/zh/guide/)

本文来自:Segmentfault

感谢作者:KXMing

查看原文:Hugo创建个人博客指南

入群交流(和以上内容无关):Go中文网 QQ 交流群:798786647 或加微信入微信群:274768166 备注:入群;关注公众号:Go语言中文网

515 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传