老陳网志

老陳网志

手帳 &ノート
github

快速搭建Hugo博客

hugo-blog.png

前言#

一直以来用了这么多年的Wordpress,最近心血来潮,想要重新折腾一番自己的博客。于是想用 Hugo 搭建。

Hugo 是目前比较流行的 Go 编写的静态网站生成器,速度快,易用,可配置,相比 Hexo 来说操作更为简单。

Hugo 有一个内容和模板目录,把他们渲染到完全的 HTML 网站。可以参照Hugo 官网 搭建自己个人博客。

下载、安装 Hugo#

这里 MAC 用户和 Windows 用户的操作是不同的。

  • MAC 用户

在控制台依次输入$ brew install hugo、$ hugo version 就可以下载下来了。

  • Windows 用户
  1. 下载地址:https://github.com/spf13/hugo/releases

根据自己的操作系统,下载对应的安装包。我的操作系统是 Win10 64bit, 选择了hugo_0.69.2_Windows-64bit.zip

  1. 解压后只需要把文件夹中 hugo.exe 文件单独拿出来,放到你预先建立的文件夹里,如你在 D 盘的 software 文件夹中建了一个名为 hugo 的文件夹,则你最后得到的地址为 D:\Software\hugo\hugo.exe

  2. 把 D:\Software\hugo\ 加到环境变量的 PATH 中,这一步很关键

  3. 重启终端,运行hugo version查看版本.

完成以上步骤后,打开命令行输入 hugo help

如果得到如下信息,说明安装成功。

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

创建一个 Hugo 站点#

新建自己博客站点,这里的 Blog 可以改为你自己设的名称

hugo new site Blog

得到如下提示创建成功的信息

Congratulations! Your new Hugo site is created in E:\blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/, or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

进入该目录,可以看到自动生成了 5 个目录和一个配置文件 config.toml

|-- archetypes
|-- content   #存放内容的目录
|-- data      
|-- layouts   
|-- static    #存放静态资源(图片,css,js)
|-- themes    #存放主题
|-- config.toml  #配置文件

添加主题#

添加主题,可以是默认的,也可以是别的主题,这里演示默认的主题,输入下面两行代码

git init

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

然后从站点的根目录更新 git 存储库:

git submodule update --remote --merge

然后把默认主题名称添加到配置中,打开 config.toml 文件进行修改.

新建文章内容#

新建一个 markdown 文件,完成博客内容

切换到该目录下,然后输入如下命令,会在 content 的目录下创建 post 目录,在 post 目录下创建名为 test.md 的文件。

cd blog

hugo new post/test.md

这个时候默认在 posts 文件夹下生成了你的第一个博客,现在修改标题,draft 改为 true,内容可以随意编辑,比如

---
  title: "Hello world!"
  date: 2020-03-16T11:47:15+08:00
  draft: true
 ---
 ## 大家好
 
  这是我的博客,希望能写一些好的文章分享给大家~~~

接着输入如下代码,可以预览你的博客

hugo server -D

建立静态页面,这里会生成一个 public 目录,这个目录实际上就是一个网站,我们只需输入如下代码

hugo -D

把最新的 public 目录上传到仓库(GitHub,Coding,码云)

好了这样就大功告成 🎉🎉🎉

这是我自己搭建好的博客网站:chenyyds.com

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。