动机

使用Markdown撰写博客,并以静态页面形式发布。

选择hugo

现在jekyll似乎更加流行,但是jekyll是基于Ruby的,在windows下安装很繁琐。
而hugo是用go写的,windows版本只有一个exe,安装起来非常方便。
因此决定使用hugo作为站点生成器。

系统环境

  • Windows 8.1 x64(主流Windows系统应该都没有问题)
  • git(用来下载皮肤)

安装hugo

下载

通过Github的下载页面获得最新版本的hugo。

解压并配置PATH

  1. 解压到任意文件夹,例如:D:\soft\hugo
  2. 将该文件夹追加到系统环境变量的PATH变量下。

检验

在命令行下输入如下命令:

hugo version

如果配置成功,会显示当前hugo的版本号。

建立hugo工程

建立工作文件夹

例如:D:\soft\hugo\blog

进入该文件夹:

D:\>cd D:\soft\hugo\blog
D:\soft\hugo\blog>

建立站点

例如:blog.mute-g.com

D:\soft\hugo\blog>hugo new site blog.mute-g.com

确认目录结构已经建立

blog.mute-g.com├─archetypes├─content├─data├─layouts├─static└─themes

安装皮肤

选择皮肤

可以在官方皮肤市场选择皮肤,点进去后可以看到皮肤下载地址,一般都是一个git链接。
本次选择的皮肤是Cactus Plus

进入themes文件夹

D:\soft\hugo\blog\blog.mute-g.com>cd themes
D:\soft\hugo\blog\blog.mute-g.com\themes>

下载皮肤到此文件夹

git clone https://github.com/nodejh/hugo-theme-cactus-plus.git

定制皮肤

拷贝配置文件

在此款皮肤下有一个exampleSite文件夹,将里面的config.toml文件拷贝到hugo目录下。

修改配置项

打开config.toml,更改里面的配置项。

例如:“知名搜索公司”的Analytics服务ID、Disqus的shortname等等。

有些服务国内无法使用,不过此款皮肤内置提供了国内可以使用的替代品。
注意: 如果不是想托管在S3下,则皮肤定制到此就可以结束了。


设置页面生成形式

默认状态下,静态页面会以主题文件夹下带一个index.html的形式生成,但是由于我希望将静态网站托管在Amazon的S3服务下,需要页面以主题.html的形式生成,因此需要在配置文件内加入配置项:

uglyurls = true

修改页面模板

基于上诉理由,需要对页面模板进行一些修正。

  • 首先将themes\hugo-theme-cactus-plus\layouts\partials\nav.html
    themes\hugo-theme-cactus-plus\layouts\taxonomy\tag.terms.html拷贝到
    blog.mute-g.com\layouts下的对应文件夹内,拷贝完成后的目录结构应该如下:
blog.mute-g.com└─layouts├─partials|   └─nav.html└─taxonomy└─tag.terms.html
  • nav.html中三个链接的末尾加上.html,如下:
<a href='{{ .Site.BaseURL }}post.html'>
<a href='{{ .Site.BaseURL }}tags.html'>
<a href='{{ .Site.BaseURL }}about.html'>
  • tags的链接的末尾加上.html,如下:
<a href="/tags/{{ $name | urlize }}.html" rel="{{ len $taxonomy }}">

初始化

  • 回到站点根目录
D:\soft\hugo\blog\blog.mute-g.com>
  • 生成“关于”页
hugo new about/_index.md
  • 生成“标签”页
hugo new tags/_index.md
  • 启动服务器确认成果
hugo server

通过http://localhost:1313/访问

写一篇文章

新建一篇文章

hugo new post/hugo/get-start.md

编辑文章内容

打开post\hugo\get-start.md,可以看到如下内容:

+++
categories = ["博客搭建"]
date = "2017-07-14T15:52:54+09:00"
description = "从零开始搭建属于自己的静态网站"
tags = ["hugo"]
title = "利用hugo生成静态站点"
+++

在这一部分设置“分类”、“标题”、“标签”等等内容。
在下面的空白部分,就可以遵循Markdown语法撰写文章了。

发布站点

自动生成静态页面

在站点根目录下执行如下命令:

hugo

执行完毕后,会在hugo文件夹下自动生成一个public文件夹,里面就是自动生成好的站点了。

上传到托管服务器

public下面的所有内容上传到托管服务器,就可以访问自己的博客站点啦。

转载于:https://www.cnblogs.com/gaoyunpeng/p/7217222.html

利用hugo生成静态站点相关推荐

  1. 博客生成静态站点工具 Top 30

    文章目录 1.Next.js 2.Hugo 3.Gatsby 4.Jekyll 5.Nuxt 6.Docusaurus 7.Hexo 8.GitBook CLI 9.Docsify 10.VuePre ...

  2. 使用hugo生成静态页面,并部署到腾讯云的云开发环境。

    使用hugo生成静态页面,并部署到腾讯云的云开发环境.使用云开发的静态页面功能提供网页支持.并做好ssl.这个比github和coding的好处就是在国内加载速度快.简单方便快捷. 安装基础环境(Wi ...

  3. 利用Java生成静态HMTL页面的方法收集

    利用Java生成静态HMTL页面的方法收集 生成静态页面技术解决方案之一 转载者前言:这是一个全面的jsp动态页面静态化方案,本站的帖子静态化方案将借鉴这篇帖子中方法.向[url]http://www ...

  4. 使用hugo生成静态博客并部署在GitHub上

    使用hugo生成静态博客并部署在GitHub上 hugo是一个用Go语言编写的静态网页生成器,只需要一个命令 hugo 就可以在几秒钟内生成一个静态的博客页面,被称为世界上最快的网站构建框架,使hug ...

  5. PHP利用smarty生成静态页详解

    一,PHP脚本与动态页面 PHP脚本是一种服务器端脚本程序,可通过嵌入等方法与HTML文件混合,也可以类,函数封装等形式,以模板的方式对用户请求进行处理.无论以何种方式,它的基本原理是这样的.由客户端 ...

  6. 记一次在nuxt中使用generate批量生成静态站点页面

    做过seo的同学都知道,一些不是实时变化的页面(比如一个星期更新一次内容)我们可以生成静态的站点去让爬虫去爬去,这样就无需一次次地调用接口了. 那么在nuxt中我们怎么去做呢? nuxt为我们提供了一 ...

  7. 利用smarty生成静态页的关键代码

    smarty中有一个获取模板页内容方法fetch(), 它的声明原形是这样的: <?php function fetch( $resource_name, $cache_id=null, $co ...

  8. 苹果cms利用定时任务生成静态执行操作

    苹果cms定时任务目前内置了 定时采集资源.定时生成静态 2个执行操作 1,定时采集资源库 执行文件:选择 采集资源库collect 附加参数:可从联盟资源库,自定义资源列表中获取(在采集今日,采集本 ...

  9. 解析网站发布系统利用ASP生成静态页面的方法

    1.WITH TEMPLET意思是,生成的页面架构将采用某个已设定的模板,在此之前我的一篇教程中介绍过,希望各位在看本教程之前对ASP采用模板应熟悉下. 2.ASP转变为HTML.不要我再说ASP转变 ...

  10. vue生成静态js文件_如何立即使用Vue.js生成静态网站

    vue生成静态js文件 by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website w ...

最新文章

  1. 你只使用到了 VS Code 20% 的功能?让 VS Code 首著作者带你玩转 VS Code!
  2. .NET Remoting中的通道注册
  3. powerbuilder+2个dw联动_千元级小众表,只知道DW就out了,这5个英国品牌一样精致百搭...
  4. 在联盛德W600 SDK上添加C文件并实现GCC编译
  5. PAT甲级1073 Scientific Notation:[C++题解]字符串处理、科学计数法
  6. UEFI+GPT安装Windows8和CentOS双系统
  7. 相机+激光雷达重绘3D场景
  8. 1054. 距离相等的条形码
  9. 利用C/C++实现较完整贪吃蛇游戏
  10. ulli*3 实现翻书动画效果
  11. [JLOI2014]松鼠的新家
  12. 简单的Session案例 —— 一次性验证码
  13. Redis面试 - Redis 主从架构
  14. 解决Chrome浏览器中使用showModalDialog返回值为undefined
  15. 微信小程序2:网易云音乐(完整版)
  16. java连接hsql数据库_hsql数据库使用详解(入门)及快速使用
  17. 12款精品网盘资源搜索网站,只有你想不到没有它搜不到的
  18. 我的世界服务器怎么设置自动拾取,自动拾取Auto Pickup Mod
  19. 程序员数学(17)–勾股定理
  20. xx.h和xx.c的奥妙

热门文章

  1. python+selenium 自动化测试环境搭建
  2. onkeydown-onkeypress-onkeyup
  3. WCF NetTcpBinding Transport安全模式(7) ClientCredentialType证书验证模式---- ChainTrust验证模式...
  4. JSONObject简单测试使用
  5. python 环境准备_virtualenvwrapper
  6. BZOJ1588(HNOI2002)营业额统计
  7. win7 64位MMC管理控制台使用“远程桌面”
  8. 分享推荐业务后的收获
  9. mac上利用minikube搭建kubernetes(k8s)环境
  10. native字体尺寸自适应 react_React Native之图片/宽高/字体平台适配