可做兼职的翻译网站有哪些,网页设计html代码大全怎么改颜色,2018外贸网站排名,网站2级目录怎么做的一、简介Hugo 是Go语言实现的一款静态网站生成器。它简单、易用、高效、易扩展、快速部署。相比较其他静态网站生成器#xff0c;它的优点有这几点#xff1a;项目构建特别快主题目录与站点目录结构一样配置文件为*.toml 格式#xff0c;语法常简单易懂#xff0c;没有缩进… 一、简介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:3608: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 --themehyde --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 classarticle article-type-post itemscope itempropblogPostdiv classarticle-inner{{ if and (isset .Params banner) (not (eq .Params.banner )) }}a href{{ .Permalink }} itempropurlimg src{{ .Params.banner | absURL }} classarticle-banner{{ end }}/a{{ partial article_header . }}div classarticle-entry itemproparticleBodyp{{ .Description | default .Summary }}/pp classarticle-more-linka href{{ .Permalink }}{{with .Site.Data.l10n.articles.read_more}}{{.}}{{end}}/a/p/div{{ partial article_footer . }}/div
/article
{{ end }}
{{ partial pagination . }}
上面的这段代码的大概意思是文章分页展示。基本语法可以在网上搜一搜。四、服务器部署4.1 Github 配置自动打包创建分支sourcesource 分支提交项目源码将打包好的项目通过 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 CIhttps://travis-ci.org/添加需要自动构建的项目如下图:点击后面的settings在 Environment Variables 中添加NAME填 GITHUB_TOKENVALUE填上一步生成的 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原理竟然这么简单我也手撸了一个|建议收藏
