时间：2023-08-08 20:33:02 | 来源：网站运营
时间：2023-08-08 20:33:02 来源：网站运营
Hugo快速搭建静态网站：
在线咨询
Hugo 是Go语言实现的一款静态网站生成器。它简单、易用、高效、易扩展、快速部署。相比较其他静态网站生成器，它的优点有这几点：*.toml 格式，语法常简单易懂，没有缩进的要求hugo 添加到环境变量。cd d:/myWebSite #切换目录hugo new site website-demo #创建站点站点目录结构如下:+------------│ config.toml├─archetypes│ default.md├─content├─data├─layouts├─static└─themesaboutme.md 文件，命令行执行hugo new aboutme.md项目根目录 content 文件夹下会生成 aboutme.md文件，用文本编辑打开文件，编辑保存即可。内容如下：---title: "Aboutme"date: 2020-03-28T23:36:36+08:00draft: true---大家好，我叫不安分的猿人！2.创建一篇 firstArticle.md,执行下面命令会在项目根目录post 文件夹下生成 firstArticle.md文件。hugo new post/firstArticle.mdcd themesgit clone https://github.com/spf13/hyde.githugo server --theme=hyde --buildDrafts效果如下图： Github下载主题，地址：https://github.com/gohugoio/hugoThemesgit 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" . }}上面的这段代码的大概意思是文章分页展示。基本语法可以在网上搜一搜。source 分支提交项目源码，将打包好的项目通过 CI 工具自动提交的 master 分支，使用Github Pages 部署我们的静态项目。注:基于 Github 创建静态项目，需创建仓库名为 username.github.io 的仓库。.travis.yml 文件，配置文件内容如下：dist: bioniclanguage: python # 默认是rubypython: 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*.debscript: - hugo# 构建完成后会自动更新Github Pagesdeploy: provider: pages skip-cleanup: true local-dir: public target-branch: master github-token: $GITHUB_TOKEN keep-history: true on: branch: source文件内容很明确:指定代码构建的工具为python3.7，安装最新的hugo 工具，代码构建是基于 source 分支构建的，将构建好的项目提交到 master 分支。这里注意 github-token: $GITHUB_TOKEN这行内容，需要手动创建一个 Personal access tokens，Github账号授权登录 Travis CI，https://travis-ci.org/settings，在 Environment Variables 中添加NAME填 GITHUB_TOKEN，VALUE填上一步生成的 Token source 分支提交代码，打包后的项目就会自动提交到 master 分支，使用 Github Pages 就可以实现自动部署我们的项目了。 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端口启动nginxdocker cp nginx_tmp:/etc/nginx/nginx.conf /nginx/conf/nginx.conf #拷贝容器的配置文件到宿主机制定目录Hugo很优秀，如果你也正好需要建网站，可以考虑一下 Hugo。本文讲了很多东西都不太详细，代码自动构建工具 Travis CI、Jenkins 值得深入一下。 Docker 基本操作有兴趣的伙伴也可以学习一下。如果能把这些项技能或者知识串联起来，就可以产生不可思议的结果，就如本篇自动化构建部署前端项目一样。哈哈开个玩笑，下期再见！关键词：静态
