利用hugo生成静态站点
动机
使用Markdown撰写博客,并以静态页面形式发布。
选择hugo
现在jekyll似乎更加流行,但是jekyll是基于Ruby的,在windows下安装很繁琐。
而hugo是用go写的,windows版本只有一个exe,安装起来非常方便。
因此决定使用hugo作为站点生成器。
系统环境
- Windows 8.1 x64(主流Windows系统应该都没有问题)
- git(用来下载皮肤)
安装hugo
下载
通过Github的下载页面获得最新版本的hugo。
解压并配置PATH
- 解压到任意文件夹,例如:
D:\soft\hugo
。 - 将该文件夹追加到系统环境变量的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
下面的所有内容上传到托管服务器,就可以访问自己的博客站点啦。
利用hugo生成静态站点的更多相关文章
- [golang][hugo]使用Hugo搭建静态站点
使用Hugo搭建静态站点 hugo下载地址:https://github.com/gohugoio/hugo 模板列表:https://github.com/gohugoio/hugoThemes 开 ...
- SpringBoot 利用freemaker生成静态页面
1. <!-- freemarker模板 --> <dependency> <groupId>org.springframework.boot</groupI ...
- react-static 基于react 渐进式静态站点生成框架
react-static 是一个不错的基于react 开发的静态站点生成框架,可以用来替代create-react-app 包含的特性 100% react 很快的构建以及性能 自动代码以及数据分离 ...
- cmake利用toolchain.cmake生成makefile之后,make生成静态库失败问题
问题描述 利用toolchian.cmake设置好编译器后,利用make指令生成静态库,出现以下问题 Error running link command: No such file or direc ...
- 利用PHP的ob函数实现生成静态化页面
之前用过一些开源的CMS管理系统,当时就很好奇后台中的生成HTML静态文件是怎么实现的.今天和同事讨论了下,没想到同事之前做过这类的生成静态页面的功能,果断向他请教了下. 经他讲解后,才知道其实生成静 ...
- ASP.NET MVC 利用Razor引擎生成静态页
实现原理及步骤: 1.通过ViewEngines.Engines.FindView查找到对应的视图,如果是部分视图,则用:ViewEngines.Engines.FindPartialView: 2. ...
- 浅谈php生成静态页面
一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
- PHP代码为什么不能直接保存HTML文件——>PHP生成静态页面教程
1.server会依据文件的后缀名去进行解析,假设是HTML文件则server不会进行语法解析.而是直接输出到浏览器. 2.假设一个页面中所有都是HTML代码而没有须要解析的PHP语法,则没有必要保存 ...
- 减少服务器压力php生成静态xml文件
一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
随机推荐
- Android权限注解
Android应用程序在使用很多功能的时候必须在Mainifest.xml中声明所需的权限,否则无法运行.下面是一个Mainifest.xml文件的例子: <?xml version=" ...
- EL表达式中fn函数
JSTL 使用表达式来简化页面的代码,这对一些标准的方法,例如bean的getter/setter方法,请求参数或者context以及 session中的数据的访问非常方便,但是我们在实际应用中经常需 ...
- MPEG-4 压缩编码标准
文章转自:http://www.cnblogs.com/CoderTian/p/8477021.html 1.MPEG-4标准概述 与MPEG1和MPEG2标准相比,MPEG-4 更加注重多媒体系统的 ...
- 转mosquitto auth plugin 编译配置
配置使用 mysql 作为 be (back end) 使用config.mk 配置编译参数 cp config.mk.in config.mk 修改 安装 mysql sudo apt-get in ...
- webpack One CLI for webpack must be installed. These are recommended choices, delivered as separate(webpack报错)
用webpack 打包项目的时候:webpack js.js bundle.js 报错. 最近在安装好webpack后,使用时,提示 One CLI for webpack must be insta ...
- php回调函数call_user_func和call_user_func_array详解
call_user_func($fun); call_user_func 函数类似于一种特别的调用函数的方法,使用方法如下: 1.调用 普通函数: <?php function a($b, $c ...
- [原]MS SQL表字段自增相关的脚本
--查询表是否有自增字段 SELECT OBJECTPROPERTY(OBJECT_ID('[表名]'), 'TableHasIdentity') --查询表的自增字段 SELECT COLUMN_N ...
- putty自带工具plink自动登陆ssh
PLINK.EXE -C -N -D 127.0.0.1:7000 root@111.111.111.111 -pw 123456 解释成中文: PLINK.EXE -启用数据压缩 -不要shell ...
- Atitit.js javascript异常处理机制与java异常的转换 多重catc hDWR 环境 .js exception process Vob7
Atitit.js javascript异常处理机制与java异常的转换 多重catc hDWR 环境 .js exception processVob7 1. 1. javascript异常处理机制 ...
- 【Tips】【UE】总结自己常用的UltraEdit使用技巧
如果您问我每天都要打开的软件是什么,那毫无疑问是UltraEdit!作为一位DBA,每天都要写各种脚本,尤其是在对具有超多行行的大文件进行精心编辑时,没有一个好的文本编辑器是不成的.掐指一算,哇塞,自 ...