hugo,静态页面编辑神器,外行人的福音(一文详解)

首语

之前做那个程序监控的程序,苦于不会前端,最后只能用模板生套,十分费劲,后来在看开源项目的时候注意到hugo,感觉自己还可以拯救一下。

HUGO简介

hugo是一个通用网站框架,从技术上来说,Hugo是一个静态站点生成器。也就是说,不像WordPress,Ghost和Drupal之类的系统,会奢侈地为每一次访问都生成一次新页面,在你创造出内容时Hugo就已经把页面建好了。由于站点被访问的次数远远大于被编辑的次数,Hugo优化了网站访问的同时,提供了优异的写作体验。

使用Hugo建站极其快速且非常安全。Hugo站点可以部署在任何地方,包括Heroku、GoDaddy、DreamHost、GitHub Pages、Google Cloud Storage、Amazon S3和CloudFront,也能在CDN群上工作的很好。Hugo站点的运行不依赖昂贵的运行环境,如Ruby、Python或者PHP,也不依赖任何数据库。

我们想让Hugo作为网站的创建工具。近乎秒建的速度,能够随时重新生成被修改的地方,Hugo为此提供了一个非常快的反馈环路。此反馈环路当你设计网站时非常简便,而当创建内容时也非常实用。

安装

官网:https://gohugo.io/
Git地址:https://github.com/gohugoio/hugo
发行版快速链接:https://github.com/gohugoio/hugo/releases

我下载的windows版的,解压,配置环境变量,或者放到配置过环境变量的文件夹中,golang大法好,光秃秃的执行文件真香。

在任意cmd中执行,表示安装成功

hugo version
Hugo Static Site Generator v0.62.0-6608F155 windows/amd64 BuildDate: 2019-12-23T10:26:18Z

基本用法

任意目录下执行这个命令

//hugo new site [name]  新建一个名字为博客的站点
hugo new site blog

会在当前目录下生成这个blog目录,结构后如下图
hugo,静态页面编辑神器,外行人的福音(一文详解)_第1张图片
content 目录是放置内容的目录,通常是网页显示的东西,为markdown文件,
staitc 目录放静态文件,
themes 放主题模块

同时在命令行中还会出现如下提示

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme " command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new \.".
3. Start the built-in live server via "hugo server".

意思是

  1. 下载或者新建一个主题
  2. 添加一些内容
  3. 运行这个服务

首先可以去hugo的官网下载一些主题,网址:https://themes.gohugo.io/
选择一个主题下载,主题页也一般会说明使用方法,注意事项。
将下载好的主题解压,放到前面截图的themes目录中
hugo,静态页面编辑神器,外行人的福音(一文详解)_第2张图片
拷贝themes/xxx你下载的主题xxxx/exampleSite目录下的内容到blog目录
命令行cd blog 在blog目录下执行命令,启动服务

hugo server
Error: module "introduction" not found; either add it as a Hugo Module or store it in "D:\\hugo\\project\\test\\blog\\themes".: module does not exist

这里报错,错误是说theme目录下的hugo-theme-introduction-4.0文件夹名字错误,将其改为introduction,然后在命令行中重新输入hugo server

PS D:\hugo\project\test\blog> hugo server
Building sites … WARN 2020/01/01 16:07:12 Page.RSSLink is deprecated and will be removed in a future release. Use the Output Format's link, e.g. something like:
    {
     {
      with .OutputFormats.Get "RSS" }}{
     {
      .RelPermalink }}{
     {
      end }}

                   | ES | DE | EN
+------------------+----+----+----+
  Pages            | 28 | 28 | 28
  Paginator pages  |  0 |  0 |  0
  Non-page files   |  7 |  7 |  7
  Static files     | 49 | 49 | 49
  Processed images | 16 | 18 | 18
  Aliases          |  1 |  0 |  0
  Sitemaps         |  2 |  1 |  1
  Cleaned          |  0 |  0 |  0

Built in 54 ms
Watching for changes in D:\hugo\project\test\blog\{
     archetypes,content,data,layouts,static,themes}
Watching for config changes in D:\hugo\project\test\blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)

站点启动成功。
在浏览器中输入 127.0.0.1:1313 就可以访问到站点
hugo,静态页面编辑神器,外行人的福音(一文详解)_第3张图片

Markdown简单用法

我这里使用vscode ,下载markdownlint插件
经常写博客应该对markdown语法非常熟悉,具体的联系方法就是
注册一个csdn账号,点写博客,点markdown编辑器,点帮助,
然后勤加练了就可以了,我这里就不细讲了。

未完待续。。。

你可能感兴趣的:(Golang,golang,hugo,网页,个人博客)