乐趣区

关于hugo:用-Hugo-和-Github-Pages-构建个人博客

jiezi

集体博客是展现本人经验或成就的现实场合。把个人简历、一些十分酷的小我的项目或生存体验写到博客里是一种十分棒的感觉。

一些喜爱写博客的小伙伴必定想过，要是有一个属于本人的博客网站就好了。

所以，本篇文章的目标就是和大家分享一种本人入手搭建博客的计划：Hugo + Github pages

介绍

在入手搭建之前，有必要给小伙伴们介绍 Hugo 和 Github pages 别离是什么。

Github 想必大家不生疏了，它是寰球最大的同性网站。托管集体、团队或组织的我的项目。

Hugo 是一个用 Golang 写的动态网站生成器，非常简单、高效，而且易于扩大。你能够用它更换不同的主题，生成动态博客网站，配合 Github pages，寰球各地的网友都能够拜访到你的网站。

以下的站点用 Hugo 和 Github pages 搭建，上面介绍部署过程。

step1. 申请一个 Github 仓库

1. 注册 Github

如果已有账号，间接登录

2. 理解 Github page 创立过程

进入 Github Pages 官网，理解创立过程。

3. 创立仓库
  1. 点击 Github 右上角头像旁边的 “+”，
  2. 点击 New repository 进入创立仓库页面

  3. 输出仓库名称，如下图:

    留神：仓库名的格局为 <username>.github.io，username 是你 Github 的账号名。

  4. 点击页面最下方的 Create reporitory 即创立胜利
  5. 拜访 https://<username>.github.io 看看是否可能拜访胜利

step2. 装置 Hugo

Hugo 有多种装置形式，具体怎么装置要看你的电脑系统。

Hugo 官网装置指南

我的电脑是 win10 零碎，能够下载 exe 文件间接装置即可，也能够下载源码编译装置。

这里 win10 源码编译过程：

  1. 克隆文件到本地 

    $ git clone https://github.com/gohugoio/hugo.git

  2. 装置 

    $ cd hugo
$ go install

  3. 编译成 exe 文件 

    $ go build -o hugo.exe main.go
  4. 将 hugo.exe 增加到环境变量中
    将 hugo.exe 挪动到你想放入的文件中，例如我将该文件放到 D:\software\Hugo\bin 文件中，在零碎变量 path 中增加该目录即可

  5. 测试 Hugo

    $ hugo version
hugo v0.94.0 windows/amd64 BuildDate=unknown

step3. 构建本地站点

1. 新建 Hugo 站点

进入你想寄存 Hugo 的目录，执行以下命令：

# blog 是站点名称
$ hugo new site blog

新建胜利后，进入 blog 目录，能够看到目录构造：

目录解析：

  • config.toml: 咱们须要更改的配置文件
  • content: 寄存所有的博客文章
  • static: 存储动态文件，例如背景图片，徽标，CSS，JS 等。此目录中的文件将间接复制到 /public 中。该文件夹的优先级高于主题下的 /static。
  • themes: 寄存下载的主题
  • archetypes: 存储的 .md 模板文件，其优先级高于 theme 文件下的 /archetypes 文件。
  • layouts: 寄存 .html 模板，优先级高于 theme 文件夹下的 /layouts 文件夹
  • public: 在执行 hugo 命令后，生成的动态文件寄存的目录

step4. 抉择 Hugo 主题

进入 Hugo 主题官网，抉择一个你喜爱的主题。

以 KeepIt 主题为例。

执行以下命令：

$ cd blog
$ cd themes
$ git clone https://github.com/Fastbyte01/KeepIt.git

下载实现后，批改 config.toml 文件，批改之前的内容如下 

# blog/config.toml
baseURL = "http://example.org/"
languageCOde = "en"
title = "Hugo Site"

咱们进入刚刚下载的主题 Github 仓库，进入 exampleSite 文件中，能够看到开发者曾经给咱们提供里示例，能够间接复制过去。

复制过去的局部内容如下：

baseURL = "https://[your github username].github.io/"
languageCode = "en"
defaultContentLanguage = "zh-cn"
title = "StrideDot"
theme = "KeepIt"

留神：将 [your github username] 改成你的 Github 用户名。

step5. 创立第一个博客

装置过程实现了，当初终于能够创立咱们的第一个博客了。

$ cd blog
$ hugo new about.md

留神：须要去掉 about.md 文件中的 draft=true，否则站点有效。

测试站点：

$ hugo server

在浏览器中输出 http://localhost:1313，回车，页面将咱们刚刚下载的主题显示进去了。

step6. 部署到 Github

后面的装置和测试都是筹备工作，咱们的目标是将 markdown 语法生成动态文件，并公布到咱们刚刚申请的仓库中。

执行如下命令：

$ cd blog
$ hugo

进入 public 目录，咱们看到 Hugo 帮咱们生成了一大堆动态文件。

当初咱们把这些动态文件推送到在 step1 申请的 stridedot.github.io 仓库中 

$ cd public
$ git init
$ git add .
$ git remote add origin https://github.com/username/username.github.io.git
$ git commit -m 'first commit'
$ git push -u origin main

刷新 Github 仓库，能够看到文件曾经推上去了。
到当初，咱们的站点曾经胜利公布。
在浏览器中输出 https://stridedot.github.io，看到的页面跟咱们在本地的一摸一样。

以上即是创立集体博客的整个过程，感兴趣的小伙伴们连忙试试吧！！！

退出移动版