使用Hugo搭建GitHub个人博客
主题概况
Hugo 是一个用 Go 语言编写的静态网站生成器。类似的静态网站生成器还有Jekyll、hexo等等。以上生成器都使用过,但感觉要么环境麻烦,要么生成静态页面步骤繁琐以及生成缓慢。如果你正想在GitHub上搭建个静态的博客,搜索一大堆都是关于Jekyll和hexo的相关文章,使用Hugo的相关文章却很少,但是我认为使用Hugo方便一点。本着学习分享的原则,下面整理下如何使用Hugo。
Hugo官方主页:https://gohugo.io/
安装指南
安装Hugo
在 Hugo Releases上下载最新版的Release程序。没错,下下来就是一个二进制的程序。
配置环境
本例以Widows为例设置Hugo运行环境变量,如需更详细的Windows/macOSX的步骤说明,请移步至官网:
Installation on OS X /
Installation on Windows
在本地电脑上建立以下文件目录:(文件路径随意)
D:\GitHub\Hugo\bin\hugo.exe
D:\GitHub\Hugo\Sites
我已将下载下来的Hugo二进制程序重命名为hugo.exe
并放进bin
文件夹内了。
设置Windows系统环境变量,我的电脑右键-->属性-->高级系统设置-->在"高级"标签页中-->环境变量...,选中PATH变量,并编辑...,在编辑值中新添加hugo程序的路径即可,一张图说明:
运行
安装并配置Hugo环境后,打开cmd命令行,可以直接使用hugo命令了。
$ hugo version
创建本地网站
生成站点
之前创建的Sites
就是用来存放创建的网站的,创建文件夹名为blog的网站:
$ hugo new site blog
创建的站点文件目录说明:
|- archetypes :存放default.md,头文件格式
|- content :content目录存放博客文章(.markdown/.md文件)
|- data :存放自定义模版,导入的toml文件(或json,yaml)
|- layouts :layouts目录存放的是网站的模板文件
|- static :static目录存放js/css/img等静态资源
|- config.toml :config.toml是网站的配置文件
当前网站是没有任何内容的,需要下载个主题跑起来才有内容。
安装主题
这里暂时不使用git命令clone下载主题,我们通过手动下载方式进行下载。
Hugo官方主题:https://themes.gohugo.io/
Hugo官方主题GitHub:https://github.com/spf13/hugoThemes/
这里选取Hyde主题为例,从gitHub下载下来,将解压出的文件放到themes
文件夹下。主题存放的路径为:Sites\blog\themes\hyde
,包含以下文件:
|- archetypes :存放default.md,头文件格式
|- layouts :主题模板文件
|- static :静态资源
|- theme.toml :主题配置文件
运行Hugo Server
Hugo内置http server,在你的站点根目录执行hugo server
命令,即可在浏览器里输入: http://localhost:1313
访问网站。
$ hugo server --theme=hyde
(注明:需要指定主题,如果在config.toml
中配置指定主题可以省略--theme
参数)
发表文章
可以看到现在博客里没有文章,使用hugo new
命令创建文章。
$ hugo new post/test.md
可以用文本文件或markdown编辑器打开文件 post/test.md ,并增加点内容。
+++
date = "2017-02-10T15:01:33+08:00"
title = "test"
draft = false
+++
Hello Hugo!测试内容
注意:默认创建的是草稿类型,需要将draft
值改为false才能看到页面。
生成静态网站
$ hugo --theme=hyde --baseUrl="https://YOURNAME.github.io/"
所有静态页面都会生成到 public
目录下,生成静态网站后并push到你的GitHub Pages
上,就能得到一个在线的个人博客了。
本文对GitHub如何使用不做详细介绍。请参考GitHub Pages在线帮助文档。
首先在GitHub上创建个Repository,命名为:YOURNAME.github.io(YOURNAME替换为自己的用户名),然后用git
将刚才创建的YOURNAME.github.io
项目clone下来。
将生成的 public
目录下所有文件拷贝到YOURNAME.github.io
项目中,并提交版本。
OK!至此你可以打开浏览器开始访问:https://ciey.github.io/ 你的博客了。
使用Hugo搭建GitHub个人博客的更多相关文章
- 使用Hexo搭建Github静态博客
1. 环境环境 1.1 安装Git 默认配置就好 1.2 安装node.js 下载:http://nodejs.org/download/ 安装时直接保持默认配置即可. 2. 配置Github 1.1 ...
- 一站式搭建 GitHub Pages 博客 (一)
本文将详细讲解如何快速搭建 GitHub Pages 博客页面 关于博客主题,博客信息更改,上传文章等将会在 一站式搭建 GitHub Pages 博客 (二) 中进行详细讲解 准备阶段 注册 Git ...
- 使用hexo搭建github.io博客(一)
使用github.io可以搭建一个自己的博客,把静态文件项目托管到github上,可以写博客,可以使用markdown语法,也可以展示作品.灵活性高.但是有较大的难度. node,git版本变化日新月 ...
- Hexo搭建Github静态博客
1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/download/ 可以下载 node-v0.10.33-x64.msi 安装时 ...
- 如何搭建github+hexo博客-转
1.前言 其实早在这之前我就一直想过写博客,但由于种种原因一直没有去学习这方面的知识,最近半个月(从开始动手到搭建好)一直陆陆续续的在着手这方面的工作.从开始到搭建完成的过程中遇到了很多困难,因为在这 ...
- Jekyll搭建github个人博客
一.安装ruby环境 Windows下载地址: http://rubyinstaller.org/ Ruby官网: http://www.ruby-lang.org/zh_cn/ 下载安装即可 环境配 ...
- 搭建 github.io 博客站点
前言 很多人都有搭建博客或知识库站点的想法,可自己买云服务器太不划算,部署管理也是个问题:基于免费又热门的 GitHub Pages 来搭建博客站点倒是省钱省力省事的好办法,于是上网一搜,满屏都是关于 ...
- 从零开始搭建GitHub个人博客--第一步
最近一段时间工作不是很忙,便开始着手整理博客并梳理自己的简历 可是,打开cnblog后第一眼我便开始了纠结~ 原起: 一直在cnblog写博客,看博客,突然发现这种在线纯文档记录的方式俨然跟不上时代的 ...
- 使用hexo搭建github个人博客网站
搭建步骤: 1>Mac或win电脑一台,本文以mac为例. 2>下载安装Git和Node 3>安装hexo 4>注册登录GitHub,创建一个仓库,库名格式为:GitHub用户 ...
随机推荐
- PageRank在Hadoop和spark下的实现以及对比
关于PageRank的地位,不必多说. 主要思想:对于每个网页,用户都有可能点击网页上的某个链接,例如 A:B,C,D B:A,D C:AD:B,C 由这个我们可以得到网页的转移矩阵 A ...
- jqgrid的外观重绘
1.如果你想随时更改jqGrid的外观和列,可以先将jqGrid卸载掉再重新加载:$(grid).GridUnload(); $("#list_server_table").tr ...
- 《算法导论》2.3-7 检查集合中是否存在两数字和为指定的X--算法和证明
习题2.3-7:设计一个算法,对于一个给定的包含n个整数的集合S和另一个给定的整数X,该算法可以在时间内确定S中是否存在两个元素,使得它们的和恰为X. 解题思路:首先应该想到的是先用一个的排序算法对S ...
- Android之layout_weight属性详解
博文:http://www.cnblogs.com/net168/p/4227144.html讲分非常好,推荐下
- js 设置导航固定
<div id="nav"> .... </div> function Add_Data() { var top = $("#header-nav ...
- BZOJ2064: 分裂
2064: 分裂 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 360 Solved: 220[Submit][Status][Discuss] De ...
- C# Expression表达式笔记
整理了一下表达式树的一些东西,入门足够了 先从ConstantExpression 开始一步一步的来吧 它表示具有常量值的表达式 我们选建一个控制台应用程序 ConstantExpression _ ...
- 分布式事务 & 两阶段提交 & 三阶段提交
可以参考这篇文章: http://blog.csdn.net/whycold/article/details/47702133 两阶段提交保证了分布式事务的原子性,这些子事务要么都做,要么都不做. 而 ...
- R语言实战(五)方差分析与功效分析
本文对应<R语言实战>第9章:方差分析:第10章:功效分析 ================================================================ ...
- Mongodb 导出json 和csv 格式数据
导出到json: $ mongoexport.exe -d TestDB -c TestCollection -o ./test.json 导出到csv: If you want to outpu ...