想快速拥有个人网站？来试试这个...

一、简介

Hugo 是Go语言实现的一款静态网站生成器。它简单、易用、高效、易扩展、快速部署。相比较其他静态网站生成器，它的优点有这几点：

  • 项目构建特别快

  • 主题目录与站点目录结构一样

  • 配置文件为*.toml 格式，语法常简单易懂，没有缩进的要求

二、快速搭建

2.1 安装 Hugo

下载地址：https://github.com/gohugoio/hugo/releases
根据自己的操作系统下载不同的版本。并将 hugo 添加到环境变量。

2.2 生成站点

执行下面这些命令就可以创建自己的站点了。

cd d:/myWebSite  #切换目录
hugo new site website-demo #创建站点

站点目录结构如下:

+------------
│  config.toml
├─archetypes
│      default.md
├─content
├─data
├─layouts
├─static
└─themes

2.3本地运行

2.3.1 创建文章

1.创建一个 aboutme.md 文件，命令行执行

hugo new aboutme.md

项目根目录 content 文件夹下会生成 aboutme.md文件，用文本编辑打开文件，编辑保存即可。内容如下：

---
title: "Aboutme"
date: 2020-03-28T23:36:36+08:00
draft: true
---
大家好，我叫不安分的猿人！

2.创建一篇 firstArticle.md,执行下面命令会在项目根目录post 文件夹下生成 firstArticle.md文件。

hugo new post/firstArticle.md

2.3.2 添加主题

执行下面命令，就可以下载主题到本地，运行项目就可以查看自己的静态网站了。

cd themes
git clone https://github.com/spf13/hyde.git

2.3.3 运行项目

执行如下命令，就可以本地运行站点了。

hugo server --theme=hyde --buildDrafts

效果如下图：是不是超级简单，3分钟就可以构建自己的站点。有的伙伴可能会问这样的网站也太low了，谁会用？其实上面将的这些内容只是让搭建感受一下最原始的方式搭建自己的站点，接下来就讲讲高阶一些的方法。

三、切换主题

官方网站有很多主题，任由我们选择。官方网站地址：https://themes.gohugo.io/
也可以直接在Github下载主题，地址：https://github.com/gohugoio/hugoThemes
主题大体可以分为三类：

  • 个人网站/博客：https://themes.gohugo.io/hugo-theme-dream/

  • 商业网站：https://themes.gohugo.io/resto-hugo/

  • 在线简历：https://themes.gohugo.io/theme/hugo-devresume-theme/

快速体验

  1. 使用 git clone url 下载相应的题，注意最好将主题下载到 themes 目录。

  2. 找到主题下的 exampleSite 目录，拷贝目录下的config.toml文件内容到站点根目录的config.toml中。

  3. 找到主题下的 exampleSite 目录，拷贝 content目录下的所有文件到站点根目录 content文件夹。

  4. 执行 hugo server 就可以运行了。

运行效果如下图：有了主题就是能好看一下哈！如果你还不满意这样的显示效果，那么就开启自定设计之路吧。每个主题都有 layouts 目录，这里就是一些静态模板，上手改就对了。模板的内容如下：

{{ $paginator := .Paginate (where .Data.Pages "Section" "in" .Site.Params.mainSections) }}
{{ range $paginator.Pages }}
<article class="article article-type-post" itemscope="" itemprop="blogPost"><div class="article-inner">{{ if and (isset .Params "banner") (not (eq .Params.banner "")) }}<a href="{{ .Permalink }}" itemprop="url"><img src="{{ .Params.banner | absURL }}" class="article-banner">{{ end }}</a>{{ partial "article_header" . }}<div class="article-entry" itemprop="articleBody"><p>{{ .Description | default .Summary }}</p><p class="article-more-link"><a href="{{ .Permalink }}">{{with .Site.Data.l10n.articles.read_more}}{{.}}{{end}}</a></p></div>{{ partial "article_footer" . }}</div>
</article>
{{ end }}
{{ partial "pagination" . }}

上面的这段代码的大概意思是文章分页展示。基本语法可以在网上搜一搜。

四、服务器部署

4.1 Github 配置自动打包

创建分支source

source 分支提交项目源码，将打包好的项目通过 CI 工具自动提交的 master 分支，使用Github Pages 部署我们的静态项目。注:基于 Github 创建静态项目，需创建仓库名为 username.github.io 的仓库。

创建文件.travis.yml

在项目根目录创建 .travis.yml 文件，配置文件内容如下：

dist: bionic
language: python # 默认是ruby
python: 3.7install:# nuo主题需要extended版本的hugo，其他主题可以用最新的普通版本就行- wget https://github.com/gohugoio/hugo/releases/download/v0.58.3/hugo_extended_0.58.3_Linux-64bit.deb- sudo dpkg -i hugo*.deb
script:- hugo# 构建完成后会自动更新Github Pages
deploy:provider: pagesskip-cleanup: truelocal-dir: publictarget-branch: mastergithub-token: $GITHUB_TOKENkeep-history: trueon:branch: source

文件内容很明确:指定代码构建的工具为python3.7，安装最新的hugo 工具，代码构建是基于 source 分支构建的，将构建好的项目提交到 master 分支。这里注意 github-token: $GITHUB_TOKEN这行内容，需要手动创建一个 Personal access tokens，
地址: https://github.com/settings/tokens/new
操作如下图:点击生成之后，复制生成的 Token（注意：关闭页面后就找不到了），留作下一步Travis CI设置用。

Travis CI配置

通过Github账号授权登录 Travis CI，https://travis-ci.org/
添加需要自动构建的项目，如下图:点击后面的settings，在 Environment Variables 中添加NAME填 GITHUB_TOKEN，VALUE填上一步生成的 Token

提交代码接下来在 source 分支提交代码，打包后的项目就会自动提交到 master 分支，使用 Github Pages 就可以实现自动部署我们的项目了。我搭建的博客地址:https://hellorestlessman.github.io/

4.2 docker 部署

如果你有自己的服务，那么也可以部署项目到自己的服务，最好的方式是在自己的服务器上跑一个像Jenkins 的自动化构建工具，当提交代码后，自动打包，打包完成后自动部署。服务器安装 Jenkins 有很多方式，这里就不细说了。我就大概将一下服务器上如何部署前端项目。
这里以 Docker 容器为例，服务器安装好 Docker 后，执行如下命令即可部署前端项目:

docker run --name nginx_test1 -d -p 3000:80 -v /usr/web/html/:/usr/share/nginx/html nginx #指定宿主机静态资源路径
docker run --name nginx_test2 -d -p 80:80 -v /nginx/html:/usr/share/nginx/html -v /nginx/conf/nginx.conf:/etc/nginx/nginx.conf  nginx #指定宿主机静态资源，挂在外部配置文件

这里注意，先临时启动一个nginx容器，获取一下 nginx.conf，执行如下命令：

docker run -d -p 8088:80 --name nginx_tmp nginx #宿主机8080端口启动nginx
docker cp nginx_tmp:/etc/nginx/nginx.conf /nginx/conf/nginx.conf #拷贝容器的配置文件到宿主机制定目录

五、 最后

一句话 Hugo很优秀，如果你也正好需要建网站，可以考虑一下 Hugo。本文讲了很多东西都不太详细，代码自动构建工具 Travis CI、Jenkins 值得深入一下。Docker 基本操作有兴趣的伙伴也可以学习一下。如果能把这些项技能或者知识串联起来，就可以产生不可思议的结果，就如本篇自动化构建部署前端项目一样。哈哈开个玩笑，下期再见！

END

想读Spring源码？先从这篇「 极简教程」开始

没用过这些IDEA插件？怪不得写代码头疼

99%的程序员都在用Lombok，原理竟然这么简单？我也手撸了一个！|建议收藏！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/546280.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

android 类ios actionsheet效果

android 类ios actionsheet效果

1.http://blog.csdn.net/zhaoxy_thu/article/details/17733389 2. https://github.com/ojhariddhish/actionsheetdemo
阅读更多...
带有Python示例的math.cos（）方法

带有Python示例的math.cos（）方法

Python math.cos()方法 (Python math.cos() method) math.cos() method is a library method of math module, it is used to get the cosine of the number radians, it accepts a number returns the cosine of the given number radians. math.cos()方法是数学模块的库方法&…
阅读更多...
Linux Debian下突然所有命令未找到，显示bash: xxxxx: command not found的解决办法

Linux Debian下突然所有命令未找到，显示bash: xxxxx: command not found的解决办法

出现这个问题是因为系统的环境变量没有正确配置造成的。 在终端内执行下面命令&#xff0c;确实可以解决办法&#xff0c;但是当关掉当前的shell窗口或者重启Linux的时候&#xff0c;我就发现又出现了找不到命令的错误。 export PATH/bin:/usr/bin:$PATH下面分享下彻底解决方…
阅读更多...
Java对象都是在堆上分配空间吗？答案竟然是...

Java对象都是在堆上分配空间吗？答案竟然是...

作者 l Hollis来源 l Hollis&#xff08;ID&#xff1a;hollischuang&#xff09;Java作为一种面向对象的&#xff0c;跨平台语言&#xff0c;其对象、内存等一直是比较难的知识点&#xff0c;所以&#xff0c;即使是一个Java的初学者&#xff0c;也一定或多或少的对JVM有一些了…
阅读更多...
c+pow函数的头文件_pow（）函数以及C ++中的示例

c+pow函数的头文件_pow（）函数以及C ++中的示例

cpow函数的头文件C pow()函数 (C pow() function) pow() function is a library function of cmath header (<math.h> in earlier versions), it is used to find the raise to the power, it accepts two arguments and returns the first argument to the power of th…
阅读更多...
正则表达式 使用分支

正则表达式 使用分支

正则表达式是非常有用的文本检索工具&#xff0c;这是一个非常简单而全面的教程正则表达式30分钟入门教程。这一篇教程&#xff0c;可以作为快速学习的工具。正则表达式&#xff0c;可能用的不是非常多&#xff0c;只是在Linux下&#xff0c;分析代码时候&#xff0c;用的比较多…
阅读更多...
Python pandas读取csv txt excel和mysql数据库文件方法

Python pandas读取csv txt excel和mysql数据库文件方法

# _*_coding:utf-8_*_ import os import pandas as pd import pymysql# Press the green button in the gutter to run the script. if __name__ __main__:strFilePath1 os.getcwd() "/天气.csv"df1 pd.read_csv(strFilePath1)print(df1)strFilePath2 os.getcwd…
阅读更多...
服务器运行容器工具大盘点！

服务器运行容器工具大盘点！

服务器到底是什么&#xff1f;服务器的硬件好理解&#xff0c;其实就是一台性能、稳定性、扩展性等等比我们普通个人PC强的一台机器而已&#xff0c;它也需要搭载操作系统&#xff0c;比如有专门的Windows Server或者各种Linux发行版系统。只不过咱这里很多小伙伴可能还是处于学…
阅读更多...
python函数示例_使用Python中的示例的input（）函数

python函数示例_使用Python中的示例的input（）函数

python函数示例Python input()函数 (Python input() function) input() function is a library function, it is used to get the user input, it shows given message on the console and wait for the input and returns input value in string format. input()函数是一个库函…
阅读更多...
Python pandas DateFrame查询数据df.loc的5种方法

Python pandas DateFrame查询数据df.loc的5种方法

# _*_coding:utf-8_*_ import pandas as pd# 自定义函数 def func(df):return df[temperature] < 32# Press the green button in the gutter to run the script. if __name__ __main__:data {date: [2022-08-21, 2022-08-22, 2022-08-23],weather: ["晴", &quo…
阅读更多...
想读Spring源码？先从这篇「 极简教程」开始吧...

想读Spring源码？先从这篇「 极简教程」开始吧...

为什么要阅读源码&#xff1f;这是一个有趣的问题&#xff0c;类似的问题还有&#xff0c;为什么要看书&#xff1f;为什么要爬山&#xff1f; 这也是一个哲学问题&#xff0c;我想每个人都有不同的答案&#xff0c;下面我是对阅读源码好处的一些思考。 &#xff08;PS&#x…
阅读更多...
Python pandas DateFrame新增数据列

Python pandas DateFrame新增数据列

下面代码在Linux下运行 # _*_coding:utf-8_*_ import os import pandas as pd# 自定义函数 def func(x):if x[temperature] > 30:return 高温if x[temperature] < 10:return 低温return 常温# Press the green button in the gutter to run the script. if __name__ __…
阅读更多...
python函数示例_带Python示例的float（）函数

python函数示例_带Python示例的float（）函数

python函数示例Python float()函数 (Python float() function) float() function is a library function in Python, it is used to get a float value from a given number or a string. It accepts either a string (that should contain a number) or a number and returns …
阅读更多...
ALP规则的验证

ALP规则的验证

实验1&#xff1a;ALP规则的验证实验目标创建本地用户jack、tom、mike,创建本地组group1&#xff0c;并把所建的用户加入到group1中&#xff0c;通过ALP规则实现以上用户对e:\share\1.txt 文件内容读取和写入权限实验环境略实验步骤一、 创建本地用户jack、tom、mike右击计算机…
阅读更多...
6大分布式定时任务对比

6大分布式定时任务对比

作者 | sharedCode来源 | blog.csdn.net/u012394095/article/details/79470904分布式定时任务简介 把分散的&#xff0c;可靠性差的计划任务纳入统一的平台&#xff0c;并实现集群管理调度和分布式部署的一种定时任务的管理方式&#xff0c;叫做分布式定时任务。常见开源方案 e…
阅读更多...
Python利用pandas获取每行最大值和最小值

Python利用pandas获取每行最大值和最小值

知识点 1.找出每一行最大值和对应的列索引&#xff1a; #找出每行最大值对应的索引 df[max_idx]df.idxmax(axis1) #取出该最大值 df[max_val]df.max(axis1)2.找出每一行最小值和对应的列索引&#xff1a; # 找出每行最小值对应的索引 df[min_idx]df.idxmin(axis1) # 取出该最…
阅读更多...
一文搞懂 ThreadLocal 原理

一文搞懂 ThreadLocal 原理

当多线程访问共享可变数据时&#xff0c;涉及到线程间同步的问题&#xff0c;并不是所有时候&#xff0c;都要用到共享数据&#xff0c;所以就需要线程封闭出场了。数据都被封闭在各自的线程之中&#xff0c;就不需要同步&#xff0c;这种通过将数据封闭在线程中而避免使用同步…
阅读更多...
python中assert_在Python中带有示例的assert关键字

python中assert_在Python中带有示例的assert关键字

python中assertPython断言关键字 (Python assert keyword) assert is a keyword (case-sensitive) in python, it is used to debug the code. Generally, it can be used to test a condition – if a condition returns False – it returns an Assertion Error (AssertionEr…
阅读更多...
单域MPLS ***数据转发实验分析

单域MPLS ***数据转发实验分析

MPLS 数据详细转发流程示意图&#xff1a;配置思路&#xff1a;在自治系统AS100中配置IGP&#xff0c;使得两台PE路由器的lo 0接口路由可达&#xff1b;两台PE路由器路由可达后&#xff0c;在两台PE路由器之间建立MP-iBGP邻居关系&#xff0c;用来传输V4路由&#xff1b;AS100中…
阅读更多...
python中list函数_list（）函数以及Python中的示例

python中list函数_list（）函数以及Python中的示例

python中list函数Python list()函数 (Python list() function) list() function is a library function, it is used to create a list, it accepts multiple elements enclosed within brackets (because list() takes only one argument. Thus, the set of elements within b…
阅读更多...
最新文章

Copyright @ 2022~2023