開始搭建

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)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用hugo搭建靜態網站利用hugo生成靜態站點用 Hugo + Coding 搭建靜態博客使用Hugo框架搭建博客的過程 - 部署 Hugo + github 搭建個人博客用hugo搭建個人博客 Hugo快速搭建Blog Ubuntu搭建hugo博客 hugo搭建個人博客利用git+hugo+markdown 搭建一個靜態網站