Hugo + Github Pages 搭建个人博客
尝试过 Hexo 、GatsbyJs、 Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度。
后来看到 Hugo ,号称最快的静态站点生成器后。
尝试搭建博客,发现不管是运行速度,还是打包速度超级快,果断将个人博客迁移到 Hugo。 Hugo 官方的定义是:
Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.(Hugo 是使用 Go 编写的快速而现代的静态站点生成器,旨在使网站创建变得有趣。)
安装 Hugo
Hugo 搭建个人博客前,需要先安装 Git 和 Go 语言开发环境。
分别在 golang.org/dl/ 、git-scm.com/ 下载二进制安装包,点击默认设置安装即可。
Mac 安装 Hugo
既可以使用 HomeBrew 安装,也可以在 github.com/gohugoio/hu… 下载二进制包安装
brew install hugo
复制代码
Windows 安装 Hugo
在 github.com/gohugoio/hu… 下载二进制包安装
安装完成后,在命令行输入以下命令验证安装:
hugo version
复制代码
输出版本信息表示安装成功,更多安装方式查看 gohugo.io/getting-sta…
建立 Hugo 项目
一个 Hugo 项目就是一个站点,创建命令如下:
hugo new site [project-name]
复制代码
例如我的站点名称是 blog,创建命令如下:
hugo new site blog
复制代码
创建完成后,在 blog 文件夹下会生成以下文件结构:
.
├── archetypes # 存放生成博客的模版
├── assets # 存放被 Hugo Pipes 处理的文件
├── config # 存放 hugo 配置文件 支持 JSON YAML TOML 三种格式配置文件
├── content # 存放 markdown 文件
├── data # 存放 Hugo 处理的数据
├── layouts # 存放布局文件
├── static # 存放静态文件 图片 CSS JS文件
└── themes # 存放主题
复制代码
添加主题
为了快速搭建博客,可以使用主题。使用主题后,只需要向 content 文件夹添加 Markdown 文件即可。
Hugo 有主题市场 themes.gohugo.io/ ,挑选了半天,选出了两个自认为好看的主题:
- github.com/olOwOlo/hug…
- github.com/yoshiharuya…
第一个更好看、功能更加强大,选择了第一个。进入根目录,克隆主题文件就是安装主题。
cd blog
git clone https://github.com/olOwOlo/hugo-theme-even themes/even
复制代码
启动 Hugo
进入 blog/themes/even/exampleSite 文件夹,将 config.tom 文件拷贝到项目根目录下,同时将 blog/themes/even/exampleSite/content 文件夹覆盖掉根目录下的 content 。
命令行输入以下命令,启动 Hugo :
hugo server
复制代码
在浏览器打开 http://localhost:1313/
即可查看效果。
配置主题
为了个人使用,需要修改 config.tom 文件,根据说明修改配置即可。
我的主题配置文件
进入 blog/themes/even 文件夹,会发现文件结构与新建的 Hugo 项目的文件结构几乎是一样的。这样设置是为了用户的配置可以覆盖掉主题的配置。
比如我要自定义底部的显示,hugo-theme-even 底部配置由 blog/themes/even/layouts/partials/footer.html 控制。
为了覆盖掉主题的配置,在项目根目录下新建 blog/layouts/partials/footer.html 文件,填入自定义内容即可覆盖掉主题配置。其他文件的覆盖是一样的。
hugo-theme-even 使用了 Webpack 打包 js,css,并且文件名加入 hash 值,这种 css,js 是无法覆盖的,不过 hugo-theme-even 配置中有覆盖这种 css,js 的参数,详情参考我的文件配置。
添加新博客
添加新博客命令比较简单,命令如下:
hugo new post/my-first-blog.md
复制代码
这个命令会使用模板创建文件,首先查找用户的模板文件,没有就会查找主题的模板文件。
hugo-theme-even 的模版文件 blog/themes/even/archetypes/default.md 比较复杂,新建 blog/archetypes/default.md 文件覆盖掉即可。
我的模板配置如下:
---
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
description: ""
draft: true
tags: []
categories: []
---<!--more-->复制代码
draft 参数控制网站上该页面是否显示。设置为 false 或者去掉该参数才显示。<!--more-->
之前的内容会自动作为页面摘要。
打包
为了部署到线上,需要将 Markdown 文件打包成 HTML 文件。打包命令如下,even 是主题名:
hugo -t even
复制代码
部署到 Github Pages
打包之后就是纯 HTML 文件,理论上所有支持部署静态页面的网站都是支持的。
我的部署命令如下,更多部署方式查看 gohugo.io/hosting-and…
#!/bin/bash
# 部署到 github pages 脚本
# 错误时终止脚本
set -e# 删除打包文件夹
rm -rf public# 打包。even 是主题
hugo -t even # if using a theme, replace with `hugo -t <YOURTHEME>`# 进入打包文件夹
cd public# Add changes to git.git init
git add -A# Commit changes.
msg="building site `date`"
if [ $# -eq 1 ]then msg="$1"
fi
git commit -m "$msg"# 推送到githu
# nusr.github.io 只能使用 master分支
git push -f git@github.com:nusr/nusr.github.io.git master# 回到原文件夹
cd ..复制代码
代码
博客文件存放地址 github.com/nusr/blog
文章首发 nusr.github.io/
转载于:https://juejin.im/post/5cc41bfef265da036505031c
Hugo + Github Pages 搭建个人博客相关推荐
- Github Pages搭建个人博客(2018年10月版)
Github Pages搭建个人博客(2018年10月版) 前言 几年前看到网上大神自己搭建的个人博客网站,就想过搭建一个属于自己的个人博客网站,为此还专门去研究了建站所需技能,但是购买了域名和云虚拟 ...
- 使用Pelican和Github Pages搭建个人博客详细教程
操作系统:Mac OS / Linux 工具集: 1.Pelican--基于Python的静态网页生成器 2.马克飞象--Evernote出的Markdown文本编辑器 3.GoDaddy--域名供应 ...
- 最全面的github pages搭建个人博客教程
作为一个程序员怎么能没有自己的个人博客呢,这里详细记录和分享我的博客搭建经验,让你轻轻松松拥有自己的博客网站.傻瓜式一站式教你用 github pages 来搭建博客,详细记录全过程,保证你能学会. ...
- Hexo+GitHub Pages搭建个人博客( 0 基础、小白值得一看--实力软文!)- 初行ᵀᵀᴴ
文章目录 **写在之前** 一.搭建前的准备工作 - 安装工具 1.1 附上工具链接 1.2 Git 1.3 Node.js 1.4 GitHub Desktop 1.5 Notepad++ 1.6 ...
- Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置
根据下面的教程搭建的博客见这里 前言 马上要进入研究生了,不能再过浑浑噩噩的日子了,搭建一个小网站,用于记录自己所学的东西.其实,之前在腾讯云1元乞丐版上也搭建过博客,但是呢,只用来扯淡了.这次使用 ...
- 如何使用Jekyll+GitHub Pages搭建个人博客站点
2019独角兽企业重金招聘Python工程师标准>>> 作为一名有情怀的工程师,一般都会通过博客来记录自己的生活,成长,工作心得或者经验,大部分人使用博客都会经历如下几个阶段: (1 ...
- 踩坑记录丨记Jekyll + Github Pages搭建个人博客时遇到的各种问题
Author:AXYZdong 自动化专业 工科男 有一点思考,有一点想法,有一点理性! 定个小小目标,努力成为习惯!在最美的年华遇见更好的自己! CSDN@AXYZdong,CSDN首发,AXYZd ...
- Github Pages + Jekyll 独立博客一小时快速搭建上线指南
只要一小时?! 人生道路上布满了坑,于是有了人生导师. 美丽的地球上布满了坑,于是有了Google Earth. 使用Github Pages搭建独立博客的过程中布满了坑,所以有了这篇指南. 我在 ...
- Gridea 让你更方便地用 Github Pages 和 Coding Pages 搭建静态博客
当下大多数人可能已经对 Github Pages 不再陌生,它是很多喜欢写文章的人第一次接触的用于免费搭建博客建一个简洁却又不失优雅的个人博客 ,直到现在互联网上还有大量的基于它的个人博客,也有大量的 ...
最新文章
- HDU_Virtual Friends (并查集)
- css input光标粗细,如何用CSS原生属性caret-color改变input输入框光标颜色
- 计算机四级软件工程知识点,计算机四级考点
- Vue.js入门教程-组件注册
- 异常检测算法之HBOS
- mysql数据库初识实训总结_MySQL(数据库)的初识
- 【原创】基于FPGA的SDRAM控制器设计—自动刷新设计
- sipp basic call 脚本
- 想拿腾讯、阿里、字节跳动offer,除了技术还需要哪些成长?
- macOS Sierra,Xcode 8配置openCV3
- App项目实战之路(三):原型篇
- 三维坐标要建一个4*4的矩阵?平移 旋转 缩放
- 三维坐标数学计算公式
- 关于人工神经网络的论文,人工神经网络参考文献
- Wrong committed revision number: -1
- 阿里旗下多个App已接入微信支付
- LU分解法 | matlab
- FFmpeg Visual Studio开发(四):音频解码
- 三菱plc与计算机无协议通讯,三菱FX系列PLC与计算机无协议通讯
- 国内安卓环境有多差:200元做空壳app有36人中招
热门文章
- python pillow库_python pillow模块用法
- netty做一个posp的网络_皑云网络——接手一个新的SEM竞价账户怎么做?
- 拆分工作簿为多个文件_刻意地练习Excel快速拆分工作簿「例07-4」
- python3.8自带matlop和numpy吗_Python enlop包_程序模块 - PyPI - Python中文网
- 关卡设计快速入门_3. 创建一个新关卡
- 杰森·保罗:使VR与人眼相匹配还需20年!
- 删库跑路大神的一生:曾在家造炸弹被捕,现卖房押宝NFT,原是开源创业之星...
- 美国火星车失联的7分钟,高清视频传回来了
- DCASE 2020权威声学比赛:腾讯多媒体实验室斩获双项指标国内第一
- 直播回顾 | 最强中文NLP预训练模型艾尼ERNIE官方揭秘