利用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快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
随机推荐
- python --正则学习
re的正则表达式语法 正则表达式语法表如下: re.match re.match 尝试从字符串的开始匹配一个模式,匹配成功返回match object,否则返回None. 如:下面的例子匹配第一 ...
- Python sql注入 过滤字符串的非法字符
#coding:utf8 #在开发过程中,要对前端传过来的数据进行验证,防止sql注入攻击,其中的一个方案就是过滤用户传过来的非法的字符 def sql_filter(sql, max_length= ...
- java调试打断点和不打断点执行结果不一致问题解决
java程序在调试的时候需要debug来跟踪一下结果,有一种情况是这样的,正常执行java程序就会出现问题,而断点debug跟踪此方法的时候却是正常的,不断测试结果都是这样,由此判断有可能是因为此方法 ...
- 用于检测进程的shell脚本代码小结
本文介绍一段shell脚本,它可以检测某进程或某服务是否正在运行,然后以邮件通知.有需要的朋友参考下 一个简单的shell脚本,用来找出关键的服务是否正在运行,适用于Linux操作系统或Unix操作系 ...
- c#取得post和get的数据和模拟发送
可以放在控制器的入口函数中,这样载入就会被调用 asp.net mvc,get+post: public ActionResult Index() { ) { foreach (var item in ...
- Python3中使用HTMLTestRunner报No module named 'StringIO'解决方法
今天在学习使用HTMLTestRunner生成测试报告时遇到一个报错,如图所示: 网上搜索了下“No module named 'StringIO'”解决方法,原来我用的是Python 3.X版本,而 ...
- libvirt网络过滤规则简单总结
libvirt网络过滤规则, 一个过滤规则定义的示例: < filter name='no-ip-spoold'chain='ipv4' > < uuid >fce8ae33 ...
- solr 简单搭建 数据库数据同步(待续)
原来在别的公司负责过文档检索模块的维护(意思就是不是俺开发的啦). 所以就略微接触和研究了下文档检索. 文档检索事实上是全文检索.是通过一种技术把N多文档进行一定规律的分割归类,然后创建易于搜索的索引 ...
- python 使用urllib.urlopen超时问题的解决方法
准备写一个python脚本抓取网页数据,前面抓了几个都没有什么问题,但总会抓取不完整,在中间过程中没有反应,发现执行urlopen的地方总是提示超时,百度了一下,因为我使用的是urllib不是urll ...
- MySQL编程API
1.MySQL API数据结构 MySQL API中用到了很多结构体类型,下面就简单说一下常用的结构体. MYSQL 连接数据库前,必须先创建MYSQL变量,此变量在很多MySQL API函数中会用到 ...