动机

使用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下面的所有内容上传到托管服务器,就可以访问自己的博客站点啦。

利用hugo生成静态站点的更多相关文章

  1. [golang][hugo]使用Hugo搭建静态站点

    使用Hugo搭建静态站点 hugo下载地址:https://github.com/gohugoio/hugo 模板列表:https://github.com/gohugoio/hugoThemes 开 ...

  2. SpringBoot 利用freemaker生成静态页面

    1. <!-- freemarker模板 --> <dependency> <groupId>org.springframework.boot</groupI ...

  3. react-static 基于react 渐进式静态站点生成框架

    react-static 是一个不错的基于react 开发的静态站点生成框架,可以用来替代create-react-app 包含的特性 100% react 很快的构建以及性能 自动代码以及数据分离 ...

  4. cmake利用toolchain.cmake生成makefile之后,make生成静态库失败问题

    问题描述 利用toolchian.cmake设置好编译器后,利用make指令生成静态库,出现以下问题 Error running link command: No such file or direc ...

  5. 利用PHP的ob函数实现生成静态化页面

    之前用过一些开源的CMS管理系统,当时就很好奇后台中的生成HTML静态文件是怎么实现的.今天和同事讨论了下,没想到同事之前做过这类的生成静态页面的功能,果断向他请教了下. 经他讲解后,才知道其实生成静 ...

  6. ASP.NET MVC 利用Razor引擎生成静态页

    实现原理及步骤: 1.通过ViewEngines.Engines.FindView查找到对应的视图,如果是部分视图,则用:ViewEngines.Engines.FindPartialView: 2. ...

  7. 浅谈php生成静态页面

    一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...

  8. PHP代码为什么不能直接保存HTML文件——&gt;PHP生成静态页面教程

    1.server会依据文件的后缀名去进行解析,假设是HTML文件则server不会进行语法解析.而是直接输出到浏览器. 2.假设一个页面中所有都是HTML代码而没有须要解析的PHP语法,则没有必要保存 ...

  9. 减少服务器压力php生成静态xml文件

    一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...

随机推荐

  1. Android权限注解

    Android应用程序在使用很多功能的时候必须在Mainifest.xml中声明所需的权限,否则无法运行.下面是一个Mainifest.xml文件的例子: <?xml version=" ...

  2. EL表达式中fn函数

    JSTL 使用表达式来简化页面的代码,这对一些标准的方法,例如bean的getter/setter方法,请求参数或者context以及 session中的数据的访问非常方便,但是我们在实际应用中经常需 ...

  3. MPEG-4 压缩编码标准

    文章转自:http://www.cnblogs.com/CoderTian/p/8477021.html 1.MPEG-4标准概述 与MPEG1和MPEG2标准相比,MPEG-4 更加注重多媒体系统的 ...

  4. 转mosquitto auth plugin 编译配置

    配置使用 mysql 作为 be (back end) 使用config.mk 配置编译参数 cp config.mk.in config.mk 修改 安装 mysql sudo apt-get in ...

  5. 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 ...

  6. php回调函数call_user_func和call_user_func_array详解

    call_user_func($fun); call_user_func 函数类似于一种特别的调用函数的方法,使用方法如下: 1.调用 普通函数: <?php function a($b, $c ...

  7. [原]MS SQL表字段自增相关的脚本

    --查询表是否有自增字段 SELECT OBJECTPROPERTY(OBJECT_ID('[表名]'), 'TableHasIdentity') --查询表的自增字段 SELECT COLUMN_N ...

  8. putty自带工具plink自动登陆ssh

    PLINK.EXE -C -N -D 127.0.0.1:7000 root@111.111.111.111  -pw 123456 解释成中文: PLINK.EXE -启用数据压缩 -不要shell ...

  9. Atitit.js javascript异常处理机制与java异常的转换 多重catc hDWR 环境 .js exception process Vob7

    Atitit.js javascript异常处理机制与java异常的转换 多重catc hDWR 环境 .js exception processVob7 1. 1. javascript异常处理机制 ...

  10. 【Tips】【UE】总结自己常用的UltraEdit使用技巧

    如果您问我每天都要打开的软件是什么,那毫无疑问是UltraEdit!作为一位DBA,每天都要写各种脚本,尤其是在对具有超多行行的大文件进行精心编辑时,没有一个好的文本编辑器是不成的.掐指一算,哇塞,自 ...