使用Hugo搭建网站最完整的教程

powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"

# 设置环境变量
SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

# 墙内安装可能较慢
choco install hugo -confirm

brew install hugo

snap install hugo

dpkg -i <package.deb>

#go 版本
go version go1.11.5 linux/amd64

#版本和环境详细信息
hugo env

Hugo Static Site Generator v0.54.0 linux/amd64 BuildDate: 2019-02-22T08:11:04Z
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.11.5"

#新建一个新的工程
hugo new site myblogName

#这个命令会创建一个名为myblog 的目录，这就是博客的根目录。目录结构如下：
├── archetypes
│   └── default.md
├── config.toml			# 博客站点的配置文件
├── content				# 博客文章所在目录
├── data				
├── layouts				# 网站布局
├── static				# 一些静态内容
└── themes				# 博客主题


#下载官网主题放到 …/blog/themes/目录下
cd themes
git clone https://github.com/vjeantet/hugo-theme-casper.git casper

#下载下来的主题会放在themes目录中：
└── hugo-theme-bootstrap4-blog
    ├── CHANGELOG.md
    ├── LICENSE.txt
    ├── README.md
    ├── archetypes
    ├── assets
    ├── exampleSite         # 本主题示例内容
    |      ├── content		# 示例博客文章
    │      |-- static
    │      |-- config.toml	# 本主题配置
    ├── i18n
    ├── images
    ├── layouts
    ├── package-lock.json
    ├── package.json
    ├── screenshot.png
    ├── source
    ├── theme.toml		
    └── webpack.config.js

.
└── my-first.md 

# Hugo 属性设置

# 网站地址
baseurl = "https://localhost:1313/"	

# 网站语言
languageCode = "en-us"				

# 网站title
title = "我的博客"					 

# 主题的名字，这个要跟myblog/themes 目录中的子目录的目录名一致
theme = "hugo-theme-bootstrap4-blog"	

# home/category/tag 页面显示的文章数 (Default: 10)
paginate = 5

# home/category/tag 页面用于摘要的字数 (Default: 70)
summaryLength = 50

# optionally override the site's footer with custom copyright text
# copyright = "Except where otherwise noted, content on this site is licensed under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by-sa/4.0/)."
#googleAnalytics = "UA-123-45"
#disqusShortname = "XYW"

# 博客链接的路径格式
[permalinks]
  posts = "/:year/:month/:title/"
  page = "/:slug/"
  
# 顶部栏
[[menu.navbar]]
  name = "首页"
  url = "http://localhost:1313"

# 侧边栏，可以写多个
[[menu.sidebar]]
  name = "新浪"
  url = "https://www.sina.com"

[[menu.sidebar]]
  name = "Github"
  url = "https://github.com"

# Theme 属性设置
#
[params]
  # Site author
  author = "作者名"

  # homepage 页描述信息
  description = "我的博客站点"

  # Show header (default: true)
  #header_visible = true

  # Format dates with Go's time formatting
  date_format = "Mon Jan 02, 2006"

  # verification string for Google Webmaster Tools
  #google_verify_meta = "BAi57DROASu4b2mkVNA_EyUsobfA7Mq8BmSg7Rn-Zp9"

  # verification string for Bing Webmaster Tools
  #bing_verify_meta = "3DA353059F945D1AA256B1CD8A3DA847"

  # verification string for Yandex Webmaster Tools
  #yandex_verify_meta = "66b077430f35f04a"

  # Optionally display a message about the site's use of cookies, which may be
  # required for your site in the European Union. Set the parameter below to a
  # page where the user can get more information about cookies, either on your
  # site or externally, for example:
  #cookie_consent_info_url = "/cookie-information/"
  #cookie_consent_info_url = "http://cookiesandyou.com"

  # show sharing icons on pages/posts (default: true)
  #sharingicons = true

  # Display post summaries instead of content in list templates (default: true)
  #truncate = true

  # Disable the use of sub-resource integrity on CSS/JS assets (default: false)
  # Useful if you're using a CDN or other host where you can't control cache headers
  #disable_sri = false

  [params.sidebar]
    # Optional about block for sidebar (can be Markdown)
    about = "我的博客[简单示例](http://localhost:1313/)."

    # 侧边栏显示最近几条文章 (Default: 5)
    #num_recent_posts = 2

  [params.social]
    # Optional, used for attribution in Twitter cards (ideally not a person
    # for example: nytimes, flickr, NatGeo, etc).
    # See: https://dev.twitter.com/cards/types/summary-large-image
    twitter = "username"

# Default content language for Hugo 0.17's multilingual support (default is "en")
# See: https://github.com/spf13/hugo/blob/master/docs/content/content/multilingual.md
#DefaultContentLanguage = "en"

# Languages to render
#[languages.en]
#[languages.bg]
  # Bulgarian date format is dd.mm.yyyy
  #date_format = "02.01.2006"

# vim: ts=2 sw=2 et

>>> hugo
                   | EN  
-------------------+-----
  Pages            | 14  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  0  
  Aliases          |  6  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 74 ms

# 初始化仓库
git init

# 将所有内容添加到git
git add .

# 提交到git 本地
git commit -m "我的博客第一次提交"

# 关联到远程git，注意这里需要写你自己的git 地址
git remote add origin https://github.com/yourname/yourname.github.io.git

# 推送到远程git
git push origin master

https://yourname.github.io

https://yourname.github.io/

<!DOCTYPE html>
<html>

<head>
    <title>Valine 评论测试</title>
    <!-- 引入Valine js 脚本 -->
    <script src='https://unpkg.com/valine/dist/Valine.min.js'></script>
</head>

<body>
    <h2>下面就是Valine 评论系统</h2>
    <hr />
    <div id="vcomments"></div>
    <script>
    new Valine({
        el: '#vcomments',
        appId: 'xxx',	// 这里填写 10.2 节我们得到的App Id
        appKey: 'yyy',	// 这里填写 10.2 节我们得到的App Key
        notify: false,
        verify: true,
        avatar: 'robohash',
        placeholder: '在这里评论'
    })
    </script>
</body>

</html>

[params.valine]
    enable = true	# 打开评论功能
    appId = 'xxx'
    appKey = 'yyy'
    notify = false  
    verify = true 
    avatar = 'robohash' 
    placeholder = '评论一下，说明你来过~'
    visitor = true

{{ if and .IsPage (ne .Params.comment false) -}}

  <!-- valine -->
  {{- if .Site.Params.valine.enable -}}
  <!-- id 将作为查询条件 -->
    {{- if .Site.Params.valine.visitor -}}
	  <span id="{{ .RelPermalink | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
		<span class="post-meta-item-text">文章阅读量 </span>
		<span class="leancloud-visitors-count">0</span>
		<p></p>
	  </span>
    {{- end }}
  <div id="vcomments"></div>
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
  <script type="text/javascript">
    new Valine({
        el: '#vcomments' ,
        appId: '{{ .Site.Params.valine.appId }}',
        appKey: '{{ .Site.Params.valine.appKey }}',
        notify: {{ .Site.Params.valine.notify }},
        verify: {{ .Site.Params.valine.verify }},
        avatar:'{{ .Site.Params.valine.avatar }}',
        placeholder: '{{ .Site.Params.valine.placeholder }}',
        visitor: {{ .Site.Params.valine.visitor }}
    });
  </script>
  {{- end }}

{{- end }}

{{ partial "comments.html" . }}

[params.valine]
    enable = true	# 打开评论功能
    appId = 'xxx'	# 填写正确的appId
    appKey = 'yyy'	# 填写正确的appKey
    notify = false  
    verify = true 
    avatar = 'robohash' 
    placeholder = '评论一下，说明你来过~'
    visitor = true	# 开启计数功能

git add .
//添加所有修改或更新的文件到 Git 仓库

git commit -m "Update"
//提交你的更改

git push origin master
//推送你的更改到 GitHub 仓库

git init
//初始化一个仓库：这将在当前目录创建一个新的Git仓库。

git clone <仓库URL>
//克隆仓库：这将复制远程仓库的内容到本地。

git add <文件名>
//添加文件到暂存区：将指定的文件添加到暂存区，准备提交。

git commit -m "提交信息"
//提交更改：将暂存区的更改提交到版本历史中。

git status
//查看状态：查看工作目录和暂存区的状态。

git log
//查看提交历史：显示提交历史记录，包括作者、日期和提交信息。

git checkout <分支名>
//切换分支：切换到指定的分支。

git branch <新分支名>
//创建分支：创建一个新的分支。

git merge <目标分支名>
//合并分支：将目标分支的更改合并到当前分支。

git pull
//拉取远程更改：从远程仓库拉取最新更改并合并到当前分支。

git push
//推送更改：将本地提交推送到远程仓库。

git rm <文件名>
//删除文件：从版本控制中删除文件。

git mv <旧文件名> <新文件名>
//重命名文件：对文件进行重命名，并将更改提交到版本控制。

git remote -v
//查看远程仓库：查看与本地仓库关联的远程仓库。

git tag <标签名>
//创建标签：创建一个标签，通常用于标记版本。