hugo博客html创建目录,Hugo创建个人博客指南

最近准备建立一个个人博客网站，对比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

创建并配置站博客

创建博客hugo new site myblog

cd myblog/themes

git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git tranquilpeak

修改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 = ""

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

创建第一篇博客hugo new post/first_blog.md文件顶部设置，其余配置请参考tranquilpeak

title: "本篇博客名称"

date: 2019-05-26T17:44:53+08:00

categories:

- 父类

- 子类

tags:

- 标签

keywords:

- 关键字

​

more标签上方的内容会在列表页显示内容简介

toc标签会生成本篇文章的目录

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

安装Valine评论系统

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

安装教程参考smslit

修改主题文件

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

部署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

引入图片有两种方式

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

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

图床

以GitHub图床为例。

在github上新建repository如picbed

git clone

将需要上传的图片放到本地目录picbed下

git commit    git push

图片链接格式为：https://raw.githubusercontent.com///master/，比如：https://raw.githubusercontent.com/841809077/blog-img/master/win-github.jpg

或者可以使用PicGo

最后附上我的博客。