我拥有了我的博客

博客由来

开通博客的目的

这两天在家挺闲的,也没好好学习,在逛B站的时候看coodsheep的视频,发现了搭博客的教程,启发了自己想写博客的心情。平时没事可以随便写写文字,练习练习算法什么的,做做笔记,或者记录新学到的一些知识。本来看着视频挺短的,没想到自己一弄时间就久了,不知不觉在电脑面前坐了一天,也不知道时间晚了。主要是有些坑,自己踩进去,一时半会没出来。记录下来,以后不会犯错。

Hugo

1.简介:

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

2.安装(windows):

第一步:下载Windows各个版本下载

第二步:新建Hugo文件夹,在其目录下新建子文件夹bin和子文件夹sites,并将上一步下载的文件解压到bin目录下,配置环境变量。控制台hugo -version得到反馈。

第三步:创建站点名为test的新站点

hugo new site test

得到如下目录结构

.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

第四步:设置主题 进入主题下载网址,选择合适主题下载

方法一:git直接下载(例如主题名为:m10c)

cd themes/
git clone https://github.com/vaga/hugo-theme-m10c.git themes/m10c

方法二:手动下载并解压到themes目录下

第五步:部署本地,配置相关config.toml文件

#我的配置文件
# 由于hugo是静态博客,需要自己指定博客的url,hugo会渲染进博客页面
baseurl = "https://memechen.github.io"
# 设置网站默认的语言,所有的语言翻译文件在i18n目录下,文件名于此处配置的语言代码相同
languageCode = "en"
defaultContentLanguage = "en"

# 博客标题
title = "Memechen's blog"
# 博客的样式
theme = "beautifulhugo"

metaDataFormat = "yaml"
pygmentsStyle = "trac"
# 取消默认的代码高亮,我们使用prism代码高亮
pygmentsUseClasses = false
pygmentCodeFences = true
pygmentsCodefencesGuessSyntax = true
#pygmentsUseClassic = true
#pygmentOptions = "linenos=inline"
#disqusShortname = "XXX"
#googleAnalytics = "XXX"

# 每页显示的文章数量用于分页
paginate = 10

[Params]
  #主页标题
  homeTitle = "Memechen's blog" 
  #副标题
  subtitle = "Get busy living or get busy dying."
  #头像
  logo = "img/avatar-icon.png" 
  #小图标
  favicon = "img/TRON.ico"
  dateFormat = "January 2, 2006"
  commit = false
  rss = true
  comments = true
  readingTime = true
  wordCount = true
  useHLJS = true
  socialShare = true
  delayDisqus = true
  showRelatedPosts = true
  enableGitalk = true # gitalk 评论系统
#  gcse = "012345678901234567890:abcdefghijk" # Get your code from google.com/cse. Make sure to go to "Look and Feel" and change Layout to "Full Width" and Theme to "Classic"

#[[Params.bigimg]]
#  src = "img/triangle.jpg"
#  desc = "Triangle"
#[[Params.bigimg]]
#  src = "img/sphere.jpg"
#  desc = "Sphere"
#  # position: see values of CSS background-position.
#  position = "center top"
#[[Params.bigimg]]
#  src = "img/hexagon.jpg"
#  desc = "Hexagon"

[taxonomies]
  tag = "tags"
  series = "series"
  category = "categories"

#博客作者信息
[Author]
  name = "Fu chen"
  website = "_我要成为你的小太阳"
  email = "1633244077@qq.com"
  github = "Memechen"
  xing = "Fc1633244077"
 

[[menu.main]]
    name = "Blog"
    url = ""
    weight = 1

[[menu.main]]
    name = "Tags"
    url = "tags"
    weight = 2

[[menu.main]]
    name = "About"
    url = "about"
    weight = 3

3.Hugo一些常用命令

#建立站点test命令
hugo new site test

#建立博客firstmd命令
hugo new post/first.md

#建立aboutme命令
hugo new about.md

#热部署本地启动
hugo server -D

#本地访问地址
http://localhost:1313

4.注意事项(坑):

目录结构

博客hugo会将content/目录下的结构反映到生成的静态网站中,如下

.
└── content
    └── about
    |   └── _index.md  // <- https://test.com/about/
    ├── post
    |   ├── _index.md   // <- https://test.com/post/
    |   ├── firstpost.md   // <- https://test.com/post/firstpost/
    |   ├── happy
    |   |   └── ness.md  // <- https://test.com/post/happy/ness/
    |   └── secondpost.md  // <- https://test.com/post/secondpost/
    └── quote
        ├── first.md       // <- https://test.com/quote/first/
        └── second.md      // <- https://test.com/quote/second/

需要注意的是_index.md是一个比较特殊的文件,如果你只是需要一个about页面,你只需要hugo new about.md即可。

Front Matter

以下列出一份完整的YAML格式的Front Matter,除了必要的datatitle参数外,可以有选择性的使用其他参数。

title: "文章标题"
description: "文章的描述信息"
# 如果下方menu.main中name = Tag页面开启,则分类页以标签为标准进行分类,同时可以对文章添加标签
tags: [ "标签1", "标签2", "标签3" ]
categories: [ "分类1", "分类2" ]
keywords: [ "Hugo", "keyword" ]
date: 2012-04-06
lastmod: 2015-12-23
# CJKLanguage: Chinese, Japanese, Korean
isCJKLanguage: true

# 如果draft为true,除非使用 --buildDrafts 参数,否则不会发布文章
draft: false

# 设置文章的过期时间,如果是已过期的文章则不会发布,除非使用 --buildExpired 参数
expiryDate: 2020-01-01

# 设置文章的发布时间,如果是未来的时间则不会发布,除非使用 --buildFuture 参数
publishDate: 2020-01-01

# 排序你的文章
weight: 40

# 使用这两个参数将会重置permalink,默认使用文件名
url: 
slug: 

# 后面的属性还没有实现过
# 别名将通过重定向实现
aliases:
  - 别名1
  - /posts/my-original-url/
  - /2010/01/01/another-url.html

# type 与 layout 参数将会改变 Hugo 寻找该文章模板的顺序,将在下一节细述
type: review
layout: reviewarticle

# 三个比较复杂的参数
taxonomies:
linkTitle: 
outputs:
# 实验性的参数
markup: "md"

# 你还可以自定义任何参数,这些参数可以在模板中使用
include_toc: true
show_comments: false

总结

一开始看视频觉得挺简单,后面做着做着发现有点难,坚持一直解决问题下去,完成最基本的一些东西以后也算对自己一天有所交代,也收获到了不少知识。最后将博客部署到github上,还有点小开心,加油。 最后是我的博客:Memechen’s blog,欢迎访问~