专栏首页landv[golang][hugo]使用Hugo搭建静态站点

[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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • C# 百钱买百鸡

    landv
  • centos查看系统/硬件信息及运维常用命令

    [root@yan-001 ~] # uname -a # 查看内核/操作系统/CPU信息的linux系统信息命令

    landv
  • 安利一个github上面的一个神级库thefuck,Linux命令敲错了,没关系,自动纠正你的命令

    没错就是这么神奇,名字相当噶性,thefuck。当你命令输入错误不要怕,直接来一句fuck,自动纠正你输入的命令。

    landv
  • 活动预告 | 3306π深圳站年会嘉宾专访-刘迪

    专访 3306π深圳站 数据库专场嘉宾 刘迪 会议时间:12月14日无人值守时代,数据库智能运维 会议提点:深圳 腾讯滨海大厦北塔3F多功能厅 欢迎至文末查看...

    腾讯云数据库 TencentDB
  • 1212 最大公约数

    1212 最大公约数  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题目描述 Description 求两个数A和...

    attack
  • 算法:Solutions for the Maximum Subsequence Sum Problem

    The maximum subarray problem is the task of finding the contiguous subarray wit...

    s1mba
  • (c#解法)题解洛谷P1004(c++解法)方格取数

    ①先看一下出题日期(毕竟是NOIP的题目,有一定的水准),然后发现是2000年的普及第四题

    w4979的博客
  • github发布开源项目代码教程

    先介绍一下github,github是一个为程序开发者提供项目代码保存的一个平台,程序开发人员可以将代码发布在上面,可以为共享的,即开源的项目,或者私有的。

    SmileNicky
  • minigui:基于GetTabbedTextExtentPoint 计算多行文本显示的矩形尺寸

    版权声明:本文为博主原创文章,转载请注明源地址。 https://blog.csdn.net...

    用户1148648
  • [原创] 利用前端+php批量生成html文件,传入新文本,输出新的html文件

    本人因为要想自己写个小说网站练练手,在其中遇到的一些问题,将其解决方法总结出来,例如: 1:小说网站存储了大量的小说,每个小说主页都很相似,url不同,不是使用...

    SpiritLing

扫码关注云+社区

领取腾讯云代金券