[golang][hugo]使用Hugo搭建静态站点

使用Hugo搭建静态站点

hugo下载地址：https://github.com/gohugoio/hugo

模板列表：https://github.com/gohugoio/hugoThemes

开始搭建

1、下载和初始化

• 安装包

wget https://github.com/gohugoio/hugo/releases/download/v0.60.0/hugo_0.60.0_Linux-64bit.tar.gz
tar -zxvf hugo_0.60.0_Linux-64bit.tar.gz
chmod +x hugo

cp hugo /usr/bin/

hugo new site abc.red

  ▸ archetypes/ #包括内容类型，在创建新内容时自动生成内容的配置
  ▸ content/    # 网站内容，全部使用markdown格式
  ▸ layouts/    # 网站模板文件，决定内容如何呈现
  ▸ static/     # 图片、css、js 等静态资源
  ▸ themes/     # 存放主题
    config.toml   # 是网站的主配置文件

• 源码编译

#emm首先你服务器环境得有golang的环境，这里就不阐述了

go get -u -v github.com/spf13/hugo
go build -o hugo main.go
mv hugo $GOPATH/bin

在命令行下执行hugo命令，如果得到类似下面结果，则说明你已经成功安装了Hugo：

hugo version

Hugo Static Site Generator v0.60.0-F2DEA9B0 linux/amd64 BuildDate: 2019-11-27T10:10:48Z

 

 

2、皮肤模板

git clone --recursive https://github.com/spf13/hugoThemes themes下载全部主题

cd theme
git clone https://github.com/coderzh/hugo-pacman-theme

 

#这个皮肤也不错
git clone https://github.com/spf13/hyde.git

 

我使用的皮肤

cd themes
 wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip

unzip master.zip
mv hugo-strata-theme-master hugo-strata-theme
cat hugo-strata-theme/exampleSite/config.toml > ../config.toml
vim ../config.toml

#Update the base URL as shown below:
baseurl = "/"
#Also add the following lines to include your new about page:
 [[menu.main]]
  name = "About"
  url  = "about"
  weight = 5

 

修改layouts/index.html；

vim layouts/index.html
#添加如下内容
{{ define "main" }}
        {{ if not .Site.Params.about.hide }}
                {{ partial "about" . }}
        {{ end }}

        {{ if not .Site.Params.portfolio.hide }}
                {{ partial "portfolio" . }}
        {{ end }}

        {{ if not .Site.Params.recentposts.hide }}
                {{ partial "recent-posts" . }}
        {{ end }}

        {{ if not .Site.Params.contact.hide }}
                {{ partial "contact" . }}
        {{ end }}
{{ end }}

 

3、修改config.toml配置

baseurl = "/" #站点的名称
languageCode = "zh-CN" #使用的编码
title = "landv" #大标题
theme = "hugo-strata-theme"#模板
disqusShortname = "spf13" #Disqus评论
# Enable Google Analytics by inserting your tracking code
googleAnalytics = ""
# Define how many posts should appear on a site
paginate = 10

[params]
    # To provide some metadata for search engines feel free to add a few
    # information about you and your website.
    name = "Your name"
    description = "Describe your website"

    # Format dates with Go's time formatting
    date_format = "2006-01-02"

    # Add read time estimates in the format "X min read"
    show_read_time = false

    # Add custom assets with their paths relative to the static folder
    custom_js   = []
    custom_css  = []


    [params.sidebar]
        # Replace the avatar with a picture of your own under static/images
        avatar = "avatar.jpg"
        # Use Markdown to format the string. This works nearly all over the theme
        bio = "**I'm Strata**, a super simple<br> responsive site template freebie<br> crafted by [HTML5 UP](//html5up.net)."
        # The icons will be shown if you enter your username
        twitter = "spf13"
        github = "spf13"
        gitlab = "spf13"
        dribbble = ""
        facebook = ""
        googleplus = ""
        flickr = ""
        linkedin = ""

        copyright = [
            "&copy; John Doe",
            "Design: [HTML5 UP](//html5up.net)",
            "Demo Images: [Unsplash](//unsplash.com/)"
        ]


    [params.about]
        hide  = false
        title = "Ipsum lorem dolor aliquam ante commodo magna sed accumsan arcu neque."
        content = "Accumsan orci faucibus id eu lorem semper. Eu ac iaculis ac nunc nisi lorem vulputate lorem neque cubilia ac in adipiscing in curae lobortis tortor primis integer massa adipiscing id nisi accumsan pellentesque commodo blandit enim arcu non at amet id arcu magna. Accumsan orci faucibus id eu lorem semper nunc nisi lorem vulputate lorem neque cubilia."


    [params.portfolio]
        hide  = false
        title = "Recent Work"

        # The images and thumbnails are stored under static/images
        # Create and change subfolders as you like
        [[params.portfolio.gallery]]
            image = "fulls/01.jpg"
            thumb = "thumbs/01.jpg"
            title = "Lorem ipsum dolor."
            description = "Lorem ipsum dolor sit amet."

        [[params.portfolio.gallery]]
            image = "fulls/02.jpg"
            thumb = "thumbs/02.jpg"
            title = "Lorem ipsum dolor."
            description = "Lorem ipsum dolor sit amet."

        [[params.portfolio.gallery]]
            image = "fulls/03.jpg"
            thumb = "thumbs/03.jpg"
            title = "Lorem ipsum dolor."
            description = "Lorem ipsum dolor sit amet."

        [[params.portfolio.gallery]]
            image = "fulls/04.jpg"
            thumb = "thumbs/04.jpg"
            title = "Lorem ipsum dolor."
            description = "Lorem ipsum dolor sit amet."

        [[params.portfolio.gallery]]
            image = "fulls/05.jpg"
            thumb = "thumbs/05.jpg"
            title = "Lorem ipsum dolor."
            description = "Lorem ipsum dolor sit amet."

        [[params.portfolio.gallery]]
            image = "fulls/06.jpg"
            thumb = "thumbs/06.jpg"
            title = "Lorem ipsum dolor."
            description = "Lorem ipsum dolor sit amet."

    [params.recentposts]
        hide  = false
        title = "Recent blog posts"

    [params.contact]
        hide  = false
        title = "Get In Touch"
        content = "Accumsan pellentesque commodo blandit enim arcu non at amet id arcu magna. Accumsan orci faucibus id eu lorem semper nunc nisi lorem vulputate lorem neque lorem ipsum dolor."

        # This can be exact coordinates or a searchable address in google maps
        gmaps_address = "39.7889055,-120.5443524"
        address = [
            "1234 Somewhere Rd.",
            "Nashville, TN 00000",
            "United States"
        ]
        phone = "000-000-0000"

        # Since this template is static, the contact form uses www.formspree.io as a
        # proxy. The form makes a POST request to their servers to send the actual
        # email. Visitors can send up to a 1000 emails each month for free.
        #
        # What you need to do for the setup?
        #
        # - set your email address under 'email' below
        # - upload the generated site to your server
        # - send a dummy email yourself to confirm your account
        # - click the confirm link in the email from www.formspree.io
        # - you're done. Happy mailing!
        email = "hello@example.com"

        [params.contact.form]
            # Set custom strings for the form if your native
            # language isn't English
            name = "Name"
            email = "Email"
            message = "Message"
            submit = "Send message"


# Menu links that appear on the left sidebar
[[menu.main]]
    name = "Home"
    url  = "/"
    weight = 10

[[menu.main]]
    name = "Blog"
    url  = "/post/"
    weight = 0

 

4、重建静态

在站点根目录输入hugo

hugo

                   | EN  
+------------------+----+
  Pages            |  7  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  2  
  Sitemaps         |  1  
  Cleaned          |  0  

 

常用命令

#使用方法:
  hugo
  hugo [flags]
  hugo [command]
  hugo [command] [flags]

#查看版本
hugo version

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

#创建新站点
hugo new site "$mysite"

#创建文章
hugo new index.md  

在content/文件夹可以看到，此时多了一个markdown格式的文件index.md，打开文件可以看到时间和文件名等信息已经自动加到文件开头，包括创建时间，页面名，是否为草稿等。

#编译生成静态文件
hugo

Hugo将编译所有文件并输出到public目录     

#编译生成静态文件并启动web服务
hugo server

常用参数

 --bind="127.0.0.1"    服务监听IP地址；
  -p, --port=1313       服务监听端口；
  -w, --watch[=true]      监听站点目录，发现文件变更自动编译；
  -D, --buildDrafts     包括被标记为draft的文章；
  -E, --buildExpired    包括已过期的文章；
  -F, --buildFuture     包括将在未来发布的文章；
  -b, --baseURL="www.datals.com"  服务监听域名；
  --log[=false]:           开启日志；
  --logFile="/var/log/hugo.log":          log输出路径；
  -t, --theme=""          指定主题；
  -v, --verbose[=false]: 输出详细信息

常用参数组合

hugo server -t hyde --buildDrafts --baseURL=http://abc.red  --bind=0.0.0.0 --port=80 -w 

hugo server --baseUrl=lv.abc.red --bind="0.0.0.0" --port=80

-t hyde        使用hyde主题，如果使用-t 选择了主题会将当前默认的主题覆盖；
 --buildDrafts参数将生成被标记为草稿的页面，是否发布：hugo 会忽略所有通过 draft: true 标记为草稿的文件。必须改为 draft: false 才会编译进 HTML 文件。
 --baseURL=http://www.datals.com   站点监听域名
 --bind=0.0.0.0   监听全部网段
 --port=80        服务监听端口
 -w               如果修改了网站内的信息，会直接显示在浏览器的页面上，不需要重新运行hugo server，方便我们进行修改。  

 如何启动

hugo自承载

hugo server --baseUrl=lv.abc.red --bind="0.0.0.0" --port=80 -w

 

httpd快速静态部署

yum install httpd
#hugo 生成public目录
cp -R ./public/* /var/www/html/
Service httpd start

 发布到github

生成文件的github发布目录命令

sudo hugo server --theme=hyde --baseUrl='https://landv.github.io' --watch --port=443 -d ./public

发布文件中犹豫baseUrl需要替换为github路径，所以需要注意几点：

1.添加baseUrl，如：–baseUrl=‘https://landv.github.io'
2.url修改为https，现在github都是https的链接
3.设定对应的绑定端口，http设定port=80，https设定port=443

github相关问题

1.创建github目录文件
在github中New reository，用户名一定要用：你的注册用户名.github.io，其他无需修改，然后点击Create repository即可
2.github本地文件提交

// 1.设置配置
git config --global user.name "你的注册用户名"
git config --global user.email "你的邮箱"
git config --global color.ui auto
// 2.设置生成的ssh key
ssh-keygen -t rsa -C "你的邮箱"
要求输入存储id_rsa的目录，接着是输入密码，这个密码可以与github的不同，过程中确认即可，
最后会出现一个随机图形，说明生成SSH密匙成功，这样需要到刚刚的存储目录下打开id_rsa.pub复制里面的内容，
到你的github页面上->点击右上角头像旁三角->settings->SSH keys->add SSH key->黏贴刚刚复制的内容保存
// 3.初始化与提交github
cd public
git init
git remote add origin https://github.com/用户名/用户名.github.io.git
git add -A
git commit -m "提交注释"
git push -u origin master
// 4.修改文件提交
git add -A
git commit -m "提交注释"
git push -u origin master

hugo写markdown文件规范

文件头部格式：

+++
Categories =["github"]
Tags = ["github", "开发者", "go"]
date = "2019-12-12T18:20:42+08:00"
title = "hugo搭建github博客过程"
description = "landv"
+++

• 1.title 文章名称
• 2.description 文章详细介绍
• 3.tag 标签
• 4.categories 文章分类

在 +++ 与 +++ 中写完规范以后，然后可以添加markdown格式的正文内容(markdown格式文件暂时不介绍，可以参考https://segmentfault.com/markdown)