利用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
下面的所有内容上传到托管服务器,就可以访问自己的博客站点啦。
转载于:https://www.cnblogs.com/gaoyunpeng/p/7217222.html
利用hugo生成静态站点相关推荐
- 博客生成静态站点工具 Top 30
文章目录 1.Next.js 2.Hugo 3.Gatsby 4.Jekyll 5.Nuxt 6.Docusaurus 7.Hexo 8.GitBook CLI 9.Docsify 10.VuePre ...
- 使用hugo生成静态页面,并部署到腾讯云的云开发环境。
使用hugo生成静态页面,并部署到腾讯云的云开发环境.使用云开发的静态页面功能提供网页支持.并做好ssl.这个比github和coding的好处就是在国内加载速度快.简单方便快捷. 安装基础环境(Wi ...
- 利用Java生成静态HMTL页面的方法收集
利用Java生成静态HMTL页面的方法收集 生成静态页面技术解决方案之一 转载者前言:这是一个全面的jsp动态页面静态化方案,本站的帖子静态化方案将借鉴这篇帖子中方法.向[url]http://www ...
- 使用hugo生成静态博客并部署在GitHub上
使用hugo生成静态博客并部署在GitHub上 hugo是一个用Go语言编写的静态网页生成器,只需要一个命令 hugo 就可以在几秒钟内生成一个静态的博客页面,被称为世界上最快的网站构建框架,使hug ...
- PHP利用smarty生成静态页详解
一,PHP脚本与动态页面 PHP脚本是一种服务器端脚本程序,可通过嵌入等方法与HTML文件混合,也可以类,函数封装等形式,以模板的方式对用户请求进行处理.无论以何种方式,它的基本原理是这样的.由客户端 ...
- 记一次在nuxt中使用generate批量生成静态站点页面
做过seo的同学都知道,一些不是实时变化的页面(比如一个星期更新一次内容)我们可以生成静态的站点去让爬虫去爬去,这样就无需一次次地调用接口了. 那么在nuxt中我们怎么去做呢? nuxt为我们提供了一 ...
- 利用smarty生成静态页的关键代码
smarty中有一个获取模板页内容方法fetch(), 它的声明原形是这样的: <?php function fetch( $resource_name, $cache_id=null, $co ...
- 苹果cms利用定时任务生成静态执行操作
苹果cms定时任务目前内置了 定时采集资源.定时生成静态 2个执行操作 1,定时采集资源库 执行文件:选择 采集资源库collect 附加参数:可从联盟资源库,自定义资源列表中获取(在采集今日,采集本 ...
- 解析网站发布系统利用ASP生成静态页面的方法
1.WITH TEMPLET意思是,生成的页面架构将采用某个已设定的模板,在此之前我的一篇教程中介绍过,希望各位在看本教程之前对ASP采用模板应熟悉下. 2.ASP转变为HTML.不要我再说ASP转变 ...
- vue生成静态js文件_如何立即使用Vue.js生成静态网站
vue生成静态js文件 by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website w ...
最新文章
- 你只使用到了 VS Code 20% 的功能?让 VS Code 首著作者带你玩转 VS Code!
- .NET Remoting中的通道注册
- powerbuilder+2个dw联动_千元级小众表,只知道DW就out了,这5个英国品牌一样精致百搭...
- 在联盛德W600 SDK上添加C文件并实现GCC编译
- PAT甲级1073 Scientific Notation:[C++题解]字符串处理、科学计数法
- UEFI+GPT安装Windows8和CentOS双系统
- 相机+激光雷达重绘3D场景
- 1054. 距离相等的条形码
- 利用C/C++实现较完整贪吃蛇游戏
- ulli*3 实现翻书动画效果
- [JLOI2014]松鼠的新家
- 简单的Session案例 —— 一次性验证码
- Redis面试 - Redis 主从架构
- 解决Chrome浏览器中使用showModalDialog返回值为undefined
- 微信小程序2:网易云音乐(完整版)
- java连接hsql数据库_hsql数据库使用详解(入门)及快速使用
- 12款精品网盘资源搜索网站,只有你想不到没有它搜不到的
- 我的世界服务器怎么设置自动拾取,自动拾取Auto Pickup Mod
- 程序员数学(17)–勾股定理
- xx.h和xx.c的奥妙
热门文章
- python+selenium 自动化测试环境搭建
- onkeydown-onkeypress-onkeyup
- WCF NetTcpBinding Transport安全模式(7) ClientCredentialType证书验证模式---- ChainTrust验证模式...
- JSONObject简单测试使用
- python 环境准备_virtualenvwrapper
- BZOJ1588(HNOI2002)营业额统计
- win7 64位MMC管理控制台使用“远程桌面”
- 分享推荐业务后的收获
- mac上利用minikube搭建kubernetes(k8s)环境
- native字体尺寸自适应 react_React Native之图片/宽高/字体平台适配