Hugo 快速搭静态网站
一、简介
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/
快速体验
- 使用
git clone url
下载相应的题,注意最好将主题下载到themes
目录。 - 找到主题下的
exampleSite
目录,拷贝目录下的config.toml
文件内容到站点根目录的config.toml
中。 - 找到主题下的
exampleSite
目录,拷贝content
目录下的所有文件到站点根目录content
文件夹。 - 执行
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 #拷贝容器的配置文件到宿主机制定目录
五、 最后
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
基本操作有兴趣的伙伴也可以学习一下。如果能把这些项技能或者知识串联起来,就可以产生不可思议的结果,就如本篇自动化构建部署前端项目一样。哈哈开个玩笑,下期再见!
Hugo 快速搭静态网站相关推荐
- 快速搭建静态网站生成器
快速搭建静态网站生成器 下面有许多静态页面生成器,大家可以根据需求学以致用. 快速搭建静态网站:https://www.staticgen.com/
- 创建hugo博客_Hugo + Firebase:如何在几分钟内免费创建自己的静态网站
创建hugo博客 by Aravind Putrevu 通过Aravind Putrevu Hugo + Firebase:如何在几分钟内免费创建自己的静态网站 (Hugo + Firebase: H ...
- html托管源码,产品经理用腾讯云静态网站免费托管自己的Axure原型html
产品经理用腾讯云静态网站托管自己的Axure原型html. 产品经理免费托管自己的axure原型来了,历史文章请自行搜索关键词. 静态网站托管简介 静态网站托管(Website Hosting,WH) ...
- 1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站,部署vue静态网站
今天来教大家部署一个属于自己的第一个静态网站,因为这里借助小程序云开发的静态服务器资源,所以可以轻松的实现自己网站的部署,部署完以后可以在电脑浏览器,手机浏览器,微信公众号里面展示. 老规矩,先看效果 ...
- 拼图登陆拼图二维码验证_如何使用拼图快速轻松地构建静态网站
拼图登陆拼图二维码验证 by Rick West 由里克·韦斯特(Rick West) 如何使用拼图快速轻松地构建静态网站 (How to use Jigsaw to quickly and easi ...
- 28款静态网站快速搭建生成器
1.Jekyll(个人推荐) Jekyll 是一个简单的免费的Blog生成工具,类似WordPress.但是和WordPress又有很大的不同,原因是jekyll只是一个生成静态网页的工具,不需要数据 ...
- 利用 Github Pages 和 Hugo 快速搭建免费的个人网站
点击上方"程序猿技术大咖",关注并选择"设为星标" 回复"加群"获取入群讨论资格! 你有个人网站吗? 在自媒体时代,人人都在不断向互联网等不 ...
- 花一块钱----快速部署一个自己的静态网站(京东云服务器)
最近参加了公司的前端后台团队帮忙,小白一枚,一直在学习,学习的都是基础,所以一个多月没有写博客. 前几天在大神郭林的公众号文章里发现了一片福利文章. 京东服务器搞活动,我花了一块钱买了两个月的(嘿嘿嘿 ...
- Hugo快速搭建Blog
2019独角兽企业重金招聘Python工程师标准>>> Hugo快速搭建Blog 2017-07-03 14:27 by 虫师, 2362 阅读, 0 评论, 收藏, 编辑 以往我们 ...
最新文章
- 谷歌AI涉足艺术、太空、外科手术,再强调AI七原则
- CI框架表单提交数据接收乱码
- 【正一专栏】从中超走向世界领先的保利尼奥
- php委托模式,PHP设计模式 - 委托模式
- 小米手机安装https证书报错:无法安装该证书 因为无法读取该证书文件
- Qt 并行计算 Concurrent Run的翻译
- 文本挖掘(part6)--共现矩阵
- 安卓小课堂之:读写文件(内部存储)
- [导入]【翻译】WF从入门到精通(第二章):workflow运行时
- [Flex]Flex3.0 Beta3下载地址
- DDR2与DDR的区别
- 送走2007 ^_^ 迎来2008
- c语言数码管按下k1显示1,单片机C语言程序的设计实训100例_基于8051+PROTEUS仿真1.docx...
- 乌鲁木齐市建筑物矢量数据(Shp格式+带高度)
- 电脑在桌面点击鼠标右键反应慢
- adi翻译_ADI是什么意思_ADI的翻译_音标_读音_用法_例句_爱词霸在线词典
- 剑指Offer题目:从扑克牌中随机抽 5 张牌,判断是不是顺子,即这 5 张牌是不是连续的。 2-10 为数字本身,A 为 1,J 为 11,Q 为 12,K 为 13,而大小王可以看成任意的 数字。
- 简单的golang游戏服务器框架《railgun》的文档目录索引
- 【QT开发笔记-基础篇】| 第五章 绘图QPainter | 5.13 抗锯齿
- 收购德邦,京东物流打的什么算盘?