Hugo是个什么东东这里直接忽略,想了解的请查阅其他资料,我们直接上手操作。

安装Hugo

Hugo Releases 下载对应的操作系统版本的Hugo二进制文件

解压后得到 hugo_0.17_windows_amd64.exe 可以将其改名为 hugo.exe

按理双击exe即可安装,不知为何在我这里不行

于是改为其他方法:

C盘新建文件夹 hugo\bin ,将hugo.exe放在bin目录下

在path中设置环境变量 C:\hugo\bin;

生成站点

使用Hugo快速生成站点,进入到 C:\hugo

$ hugo new site mysite

这样就在hugo目录里生成了初始站点,进去目录

$ cd mysite

站点目录结构为:

简要介绍一下,config.toml是网站的总配置文件,content目录里放的是markdown文章,

layouts目录里放的是网站的模板文件,static目录里放的是一些图片、css、js等资源。

创建一篇日志文件

$ hugo new post/first.md

执行完后,会在content/post目录自动生成一个markdown格式的first.md文件:

可以简单修改一下里面的内容,比如:

+++
draft = true
date = "2016-10-18T13:36:45+08:00"
title = "第一篇Hugo文章"

+++

### 你好!Hugo!

安装皮肤

皮肤列表 挑选一个喜欢的皮肤,找到相应的Github地址,

https://github.com/allnightgrocery/hugo-theme-blueberry-detox.git 为例,将主题clone到themes目录下

$ cd themes
$ git clone https://github.com/allnightgrocery/hugo-theme-blueberry-detox.git detox

本地预览

在 \mysite 目录下启动 hugo server

$ hugo server --theme=detox --buildDrafts --watch

浏览器访问:http://localhost:1313/ 即可预览

部署Github

首先在GitHub上创建一个Repository,命名为:itbirds1900.github.io (itbirds1900替换为你的github用户名)。

在站点根目录执行 Hugo 命令生成最终页面:

$ hugo --theme=detox --baseUrl="https://itbirds1900.github.io/"

(注意,以上命令并不会生成草稿页面,如果未生成任何文章,请去掉文章头部的 draft=true 再重新生成。)

如果一切顺利,所有静态页面都会生成到 public 目录,将pubilc目录里所有文件 push 到刚创建的Repository的 master 分支。

$ cd public
$ git init
$ git remote add origin https://github.com/itbirds1900/itbirds1900.github.io.git
$ git add .
$ git commit -m "first commit"
$ git push -u origin master

浏览器里访问:Hello Hugo

使用Hugo搭建个人博客站点的更多相关文章

  1. 如何用hugo搭建个人博客

    如何用hugo搭建个人博客 1. 安装 Hugo 点击跳转 Hugo Releases win10 步骤: 下载解压 , 然后添加环境变量 测试: #命令行测试 hugo version 2. 创建站 ...

  2. 用hugo搭建个人博客

    这几天研究了用hugo搭建个人博客. 简单的整理了一下. 1.安装hugo(windows 请查看官网介绍 https://gohugo.io/getting-started/installing/) ...

  3. 利用 Hexo 或者 hugo 搭建个人博客

    我们无法选择生活的样子,但我们可以记下来. 博客的开始 其实,一切都是为了更好的装逼.好吧,我着相了. 最开始想做一个自己博客,主要是因为看到了很多人都有,觉得自己没有太 Low 了.于是申请了 CS ...

  4. hugo搭建个人博客

    本地先安装git 1. 下载hugo,并配置好环境变量 我这里win7 64位,选择该版本下载 将解压后的hugo.exe,配置到环境变量中,如下图所示表明配置成功 hugo version 2. 生 ...

  5. Hexo搭建静态博客站点

    什么是Hexo? Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 本文将介绍如何在没有域名和云主机的 ...

  6. Hugo + Github Pages 搭建个人博客

    尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...

  7. Linux下使用 github+hexo 搭建个人博客07-next主题接入搜索和站点管理

    这是搭建个人博客系统系列文章的最后一篇,如果你是从第一篇一路跟下来的,那么恭喜你,即将完成整个博客网站的搭建.OK,话不多说,开始我们的收官之战. 不知你想过没有,如果我们的文章少,一眼看完整个目录, ...

  8. Hugo+Github 搭建个人博客(Windows环境下)

    目录 Hugo+Github 搭建个人博客(Windows环境下) 1.前言 2.Differences 2.1 https vs SSH 2.2 新建的github的仓库名必须为 用户名+githu ...

  9. 十分钟教会你如何使用VitePress搭建及部署个人博客站点

    使用VitePress可以让我们快速搭建一个静态博客网站,这篇文章将带领大家搭建一个基于VitePress的静态博客网站并且部署到GitHub Pages(github提供的静态网页服务) 快速上手 ...

随机推荐

  1. python学习,day4:装饰器的使用示例

    ---恢复内容开始--- 装饰器:本质是函数,(装饰其他函数)就是为其他函数添加附加功能 装饰器有其独特的原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 例子 import ...

  2. 进阶篇:4.3)DFA设计指南:宽松公差及人性装配及其他

    本章目的:设计需要为装配考虑,给他们提供各种优待,装配才能做出好产品. 1.前言 机械贴合现实而软件远离现实. 越是学习机械设计的原则,越是感觉他们和一些做人做事的道理相同的. 如,机械设计原则都是有 ...

  3. BZOJ3168. [HEOI2013]钙铁锌硒维生素(线性代数+二分图匹配)

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3168 题解 首先,我们需要求出对于任意的 \(i, j(1 \leq i, j \leq ...

  4. OPENERP 拓展 res.partner 对象,添加QQ号

    公司最近在导入开业物品资料,根据同事的需求,需要在供应商资料中添加QQ号一项,根据前段时间自己摸索的经验,准备自己尝试通过继承完成这一需求. 模块名定义为rainsoft_partner 创建__in ...

  5. Java LinkedHashMap 逆序遍历

    利用 ListIterator<pre name="code" class="java">previous import java.util.Arr ...

  6. linux通过源码安装nodejs

    1.下载nodejs源码,下载地址:https://nodejs.org/en/download/ 2.下载回来后,解压缩,ubuntu系统ctrl + alt +T 打开终端 假如tar.gz压缩包 ...

  7. python2和python3中列表推导式的变量泄露问题

    Python 2.x 中,在列表推导中 for 关键词之后的赋值操作可能会影响列表推导上下文中的同名变量.像下面这个 Python 2.7 控制台对话: Python 2.7.15 (default, ...

  8. java多线程--------深入分析 ThreadLocal 内存泄漏问题

    前言 ThreadLocal 的作用是提供线程内的局部变量,这种变量在线程的生命周期内起作用,减少同一个线程内多个函数或者组件之间一些公共变量的传递的复杂度.但是如果滥用ThreadLocal,就可能 ...

  9. Linux原始套接字实现分析---转

    http://blog.chinaunix.net/uid-27074062-id-3388166.html 本文从IPV4协议栈原始套接字的分类入手,详细介绍了链路层和网络层原始套接字的特点及其内核 ...

  10. 关于css浮动框是否脱离文档流的分析

    在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...