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

一、简介

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，一经查实，立即删除！

相关文章

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

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

作者 l Hollis来源 l Hollis&#xff08;ID&#xff1a;hollischuang&#xff09;Java作为一种面向对象的&#xff0c;跨平台语言&#xff0c;其对象、内存等一直是比较难的知识点&#xff0c;所以&#xff0c;即使是一个Java的初学者&#xff0c;也一定或多或少的对JVM有一些了…
阅读更多...
服务器运行容器工具大盘点！

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

服务器到底是什么&#xff1f;服务器的硬件好理解&#xff0c;其实就是一台性能、稳定性、扩展性等等比我们普通个人PC强的一台机器而已&#xff0c;它也需要搭载操作系统&#xff0c;比如有专门的Windows Server或者各种Linux发行版系统。只不过咱这里很多小伙伴可能还是处于学…
阅读更多...
想读Spring源码？先从这篇「 极简教程」开始吧...

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

为什么要阅读源码&#xff1f;这是一个有趣的问题&#xff0c;类似的问题还有&#xff0c;为什么要看书&#xff1f;为什么要爬山&#xff1f; 这也是一个哲学问题&#xff0c;我想每个人都有不同的答案&#xff0c;下面我是对阅读源码好处的一些思考。 &#xff08;PS&#x…
阅读更多...
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;这种通过将数据封闭在线程中而避免使用同步…
阅读更多...
单域MPLS ***数据转发实验分析

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

MPLS 数据详细转发流程示意图&#xff1a;配置思路&#xff1a;在自治系统AS100中配置IGP&#xff0c;使得两台PE路由器的lo 0接口路由可达&#xff1b;两台PE路由器路由可达后&#xff0c;在两台PE路由器之间建立MP-iBGP邻居关系&#xff0c;用来传输V4路由&#xff1b;AS100中…
阅读更多...
IDEA 终于支持中文版和 JDK 直接下载了（太方便了）附新版介绍视频

IDEA 终于支持中文版和 JDK 直接下载了（太方便了）附新版介绍视频

这是我的第 48 篇原创文章。IDEA 2020.1 经过了漫长的打磨终于发布正式版了&#xff0c;而这次的版本不止直接支持 Java 14&#xff0c;还带来了两个重量级的功能&#xff1a;官方中文版支持和 JDK 直接下载。在之前的开发中&#xff0c;当我们需要下载 JDK 时&#xff0c;通常…
阅读更多...
【BO】WEBI文件打开时提示Illegal access错误

【BO】WEBI文件打开时提示Illegal access错误

在infoview中打开WEBI文件时&#xff0c;提示如下错误。 通过查看SCN&#xff0c;找到错误原因是CMC中有一个服务没有启动。 启动这个服务即可&#xff1a; WebIntelligenceProcessingServer转载于:https://www.cnblogs.com/uzipi/p/3905513.html
阅读更多...
华为交换机链路聚合使用ENSP模拟器进行实验

华为交换机链路聚合使用ENSP模拟器进行实验

一、简介 链路聚合（Eth-Trunk）是将多个物理接口捆绑为一个逻辑接口，实现增加链路带宽，提高可靠性，提供负载分担的目的。 二、华为ENSP模拟器仿真图 华为交换机LSW1和LSW2端口G0/0/2、G0/0/3实现链路聚合，这2个交换机通过静态路由实现2个不同网段V10、V20互通。 三、华…
阅读更多...
为什么工作很卖力，最后还晋升不了？

为什么工作很卖力，最后还晋升不了？

作者 | 军哥来源 | 军哥手记&#xff08;公众号ID&#xff1a;zxhy_cj&#xff09;最近写文章多了一些思考&#xff0c;要写对大家有价值的、有启发、有思考的东西&#xff0c;希望读者朋友们enjoy&#xff01;为什么自我感觉良好&#xff0c;可是晋升没我&#xff1f;感觉老板…
阅读更多...
基于Java的数据采集（终结篇）

基于Java的数据采集（终结篇）

关于写过关于JAVA采集入库的三篇文章&#xff1a; 基于Java数据采集入库&#xff08;一&#xff09;&#xff1a;http://www.cnblogs.com/lichenwei/p/3904715.html 基于Java数据采集入库&#xff08;二&#xff09;&#xff1a;http://www.cnblogs.com/lichenwei/p/3905370.ht…
阅读更多...
华为交换机、路由器配置单臂路由实现不同网段通信

华为交换机、路由器配置单臂路由实现不同网段通信

一、eNSP模拟器仿真图 二、华为交换机配置 //批量创建VLAN [Huawei]vlan batch 10 20 //PC1电脑与交换机连接端口配置 [Huawei]interface GigabitEthernet0/0/2 [Huawei-GigabitEthernet0/0/2]port link-type access [Huawei-GigabitEthernet0/0/2]port default vlan 10 [Huaw…
阅读更多...
IDEA 正式版终于支持中文版和 JDK 直接下载了（太方便了）附介绍视频

IDEA 正式版终于支持中文版和 JDK 直接下载了（太方便了）附介绍视频

IDEA 2020.1 经过了漫长的打磨终于发布正式版了&#xff0c;而这次的版本不止直接支持 Java 14&#xff0c;还带来了两个重量级的功能&#xff0c;官方中文版支持和 JDK 直接下载。 在之前的开发中&#xff0c;当我们需要下载 JDK 时&#xff0c;通常的步骤是这样的&#xff1…
阅读更多...
HoughLine变换

HoughLine变换

对于HoughLine变换&#xff0c;有两种方法&#xff0c;标准霍夫变换&#xff08;SHT&#xff09;用的矩阵是CV_32FC2&#xff0c;用极坐标法记录直线,而累积概率霍夫变换&#xff08;PPHT&#xff09;用的是CV_32FC核心函数&#xff1a;cvCvtColor&#xff0c;cvHoughLines2&am…
阅读更多...
华为交换机、路由器配置静态路由实现不同网段通信

华为交换机、路由器配置静态路由实现不同网段通信

一、eNSP模拟器仿真图 二、目标要求 在主核心交换机上配置vlanif10 192.168.10.254/24，vlanif20 192.168.20.254/24，vlanif100 192.168.100.1/24，PC1:192.168.10.1能ping通PC2:192.168.20.1，也能ping通PC3:192.168.30.1，交换机和路由器使用静态路由。 三、华为交换机配置…
阅读更多...
答读者问：学历不高，要如何破局？

答读者问：学历不高，要如何破局？

今天读者群在激烈讨论学历是否重要&#xff0c;有的朋友说非常重要&#xff0c;也有人说并没有那么重要。有读者问&#xff1a;“我是专科毕业&#xff0c;我需要读在职本科或者研究生吗”&#xff0c;也有读者问&#xff1a;“洋哥&#xff0c;三本毕业几年&#xff0c;想辞职…
阅读更多...
华为路由器配置OSPF实现不同网段通信

华为路由器配置OSPF实现不同网段通信

一、简介 PC1、PC2、LSW1和AR1配置单臂路由，实现PC1能够ping通PC2，具体实现请参考：华为交换机、路由器配置单臂路由实现不同网段通信。下面实现AR1和AR2通过配置OSPF，实现PC1能ping通PC3。 二、华为路由器配置 AR1新增配置： [Huawei]int g0/0/1 [Huawei-GigabitEthernet…
阅读更多...
史上最全的 SQL 优化方案！建议收藏

史上最全的 SQL 优化方案！建议收藏

在进行MySQL的优化之前&#xff0c;必须要了解的就是MySQL的查询过程&#xff0c;很多查询优化工作实际上就是遵循一些原则&#xff0c;让MySQL的优化器能够按照预想的合理方式运行已。图-MySQL查询过程1优化的哲学 注&#xff1a;优化有风险&#xff0c;涉足需谨慎a优化可能带…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023